FCC project - Product Landing Page

Hi all,

I have find all the feedback here very helpful as I progress through my FCC projects. Thank you all! I am on my product landing page now and has gained more experience in making my webpage responsive and making the margins better compared to my first two projects.
Here is the link for any who are interested or kind to provide some feedback. Thanks y’all!

https://codepen.io/ashley-khor/full/OJbwbXd

1 Like

Hi there,

It looks very nice. My suggestions:

Make it more responsive on smaller screens. The video and the large image at the top don’t resize.

Run your html and CSS through a validator.

Overall, great job.

Your page looks good @ashketchum. Some things to revisit;

  • 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (Be aware of those duplicates and understand what the C in CSS stands for.)
    • (The one for HTML misses things which is why I recommend W3C)
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • There are elements that fall out of the container on smaller screens. To help you see how you have your elements set up, temporarily add the following global reset at the top of the CSS editor;
      * {
        border: solid 1px lightgreen;
      }

(You can make it any color you want)