Project for Product Landing Page - I'm open to criticism

This isn’t really a product landing page… I was just trying to be adventurous. It does meet the requirements. Any feedback, please? Thanks.
https://codepen.io/goingfar/full/XWjBymX

Hi @inthedistance!

Welcome to the forum!

I think your page looks good.

A few things.

I would keep working on responsiveness especially for smaller screens.

There are a couple of small errors in your html and css. Run your code through the codepen analyzers to find and fix those errors.

For the main title, it is a little hard to read on the background picture.

You might want to use another image or a dark linear-gradient over the current image

You might consider adding a smooth scroll

html {
  scroll-behavior: smooth;
} 

For the submit button you might consider adding the cursor pointer

{cursor: pointer;}

Hope that helps!

Keep up the good work!

Welcome to the forums @inthedistance. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
    • The test script is JS, it will not work if placed in the head element. Codepen is forgiving which is why it works here.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Fourteen in a row to create spacing is never a good idea.
    • In the Rwanda section is you want three paragraphs then use three paragraph elements. <br> is not the correct way to create paragraphs.
  • Navlinks are wrapped on a larger screen and disappear on smaller
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens. Elements fall out of the container.
  • Don’t be afraid to be descriptive with class and id names. It’ll be more semantic for yourself, and others who read your code. For example, if you have several two letter id's that make sense to you now, they may not a year later and probably will never mean anything to other people.

Thanks for the advice!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.