My Product landing page.;

Hey guys, I’ve finally finished my project#3… can you please check my project and give me some feedback or suggestions… so that I can improve it…
https://codepen.io/heman1999/full/gOPpmLO

Also, can you share some tips on how to structure it properly in order to avoid redundancy in css. Thanks.

1 Like

Hi! I see you’re also a fellow caffeine addict :wink:
Your landing page is pretty cool. However there is still some room for improvement:

  • your nav bar is quite big for screens that are about 700 px or less
    I’d suggest you make the logo in your nav-bar smaller to make it your page look better.
    or perhaps just remove the lettering and leave the coffee image only for smaller screens
  • I’d also check your margin settings for smaller screens cuz there seems to be a horizontal scroll bar (screen below 1300px )

However as the saying goes : “Perfection is the enemy of progress” So I’d just move on.
Other than that big fan of your product and happy coding.

1 Like

@heman6760, good work, and in addition to @aarya 's suggestion I’d also recommend to fix the view on small screen - see below - still you can make it better:
image .

Actually if you follow aarya, it will be fixed automatically.

And for a coffee page, you may try a background-color for footer like your product color (just an idea only for this product).

1 Like

Good job, another thing though, don’t give the header a transparency, it makes your logo looks bad, and it can get annoying at times.


That’s all though, you did a really great job here.

1 Like

Thank you guys for the suggestions, I’ll probably try to give position:sticky to just the nav and have them arranged in a row for better view in small screens.

1 Like

Your page looks good @heman6760. Some thing to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.