My Product Page would appreciate some good old feedbak

Hi guys, I’ve just finished my first landing page and I would love to get some feedback on how I could improve it. Let’s smash it! I’m enjoying CSS so much. Thanks a lot!

https://codepen.io/eldave/pen/xxExRPL

1 Like

Hey @eldave!

I think your page looks good.

A few things.

  • In codepen, you do not need to include the doctype, head and html tags. That stuff is all taken care of for you. If you need to include stuff for the head you can place it inside the head section in the html settings.

  • You have a few errors in your html and css that need your attention. Run your code through the html validator https://validator.w3.org/ and css codepen analyzer.

  • On mobile, there is a lot of space before the video.

  • Optional: You might considered add the css cursor property on the submit button.

{cursor: pointer;}
  • Optional: You might consider adding a smooth scroll to your page
html {
  scroll-behavior: smooth;
}

Hope that helps!

Happy coding!

1 Like

Thanks so much for the tips ! So helpful. I didn’t find out about scroll-behavior until you mentioned, it does look amazing now when the nav-links take you through the page. Thanks for showing me how to add the head stuff into codepen, really helpful, and also for the validator.w3.org, I’ll make sure to sort all the errors.
Just came to me one quick questions, am I using ok the section tags? Do they also need to come with their inner header tag? I’m still getting used to write proper html syntax.
Thank you!

Yeah your section tags are fine. Some people choose to place the hero image and text inside the header but you could leave it.

1 Like