Product Landing - Brew Beer

Hey everyone, I just finished the product landing project, and I want to share this here. It would be a pleasure for me to get some feedback

Product Landing Page Here

1 Like

One thing you need to keep in mind is that not everyone views your page at the font size you design for. Using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size on the page. It won’t take long until you see all the problems.

Responsiveness includes both responding to changes in the width of the view port and to changes in the text size. Your job as a developer is to make sure that your page handles both gracefully. I highly recommend that you always manually increase the text size to at least 300% to make sure it still look good.

Another hint: Use em units for your CSS break points. This will help immensely in making your page more responsive to text size changes. An easy way to ballpark your em values is to divide the px value by 16.

1 Like

Your page looks good @diegues13. 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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of. For instance, the frameborder attribute is obsolete in HTML5. You should use CSS instead.
1 Like

Thanks for the feedback, I corrected the things you mentioned!

Thanks, I took your advice! It looks better now