My Product Landing Page-Please offer feedback

Code Feedback
1

Please let me know how I can improve this.
I am about to work on my portfolio and I am not sure if I should add this project.
It feels not quite right.
https://codepen.io/jocelyn-mitchell/pen/GRKbbzL

2

For starters, I would work on the navigation menu - making it both sticky and transparent is not such a good idea because it overlaps with the other elements on the page when you scroll. Also, make your pictures and video responsive (use percentages for video size, and consider using flexbox or grid for the images. And finally, you’ve got a couple of HTML and CSS errors (you can see them if you click on the menu in the top right corner of HTML/CSS panel and then choose ‘Analyze HTML/CSS’), so try to fix those as well.

This should be enough for the first step, but don’t forget to take a step back after you do this, try to look at the page as a user would and figure out what you would like to change. I hope this helps and good luck! :smiley:

3

Thank you. This helps a lot.

4

Thanks again for your help.
I decided to take a totally different approach and create another landing page that looked more fun to me.
Here’s what I came up with on my second attempt:
https://codepen.io/jocelyn-mitchell/pen/NWWPjJj
I took your advice and used more percentages. I also made myself more familiar with grids.
When I ran the analyzer on my HTML, I got a warning but I am not sure what I should be correcting.

5

I think this one looks better, nice improvement :smiley: And I don’t see any errors :sweat_smile:

6

Hi @JocelynMitchell, welcome to the forums. You made some good improvements with your second attempt. My feedback;

  • the error you see when clicking ‘Analyze’ is because you have some stray elements. You can change the editor settings in codepen to a theme and it will highlight when you have an error. Another option is to cut&paste your code into another validator such as https://validator.w3.org
  • maybe add some top padding to your sections. When clicking on the links the top part gets covered by your navbar.
7

Thanks for the tip. Adding padding to the top has made it a lot more easy to navigate.

I pasted my code in the validator and was to clean it up a little bit. Thanks again for the feedback.

1 Like
8