Product Landing Page - Duff Beer

Code Feedback
1

I just finished up my Product Landing page project. Looking for some feedback. How is the structure of my code, use of id/classes, color scheme(I tried to match it from The Simpsons), etc. Any feedback is appreciated!

The link is here:

Thanks,

Charles

1 Like
2

Hi @cdurflinger,

HTML

Line 22:

The frameborder attribute on the iframe element is obsolete. Use CSS instead.

<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/fSfOEBriE3I?rel=0&amp;controls=0&amp;showinfo=0&amp;start=16" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

MDN documentation:

<iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN

Deprecated attributes:

frameborder: Obsolete since HTML5

The value 1 (the default) tells the browser to draw a border between this frame and every other frame.
The value 0 tells the browser not to draw a border between this frame and other frames.
You should instead use the CSS property border and its longhand properties to create borders around <iframe>s.

Design:

  • Red background make black letters hard to read (see screenshots):

Screenshots

  • 360x640

chromium_fullPage_360_640.png360×1617 168 KB

  • 800x600

chromium_fullPage_800_600.png800×1197 192 KB

  • 1204x768

chromium_fullPage_1024_768.png1024×1159 239 KB

Cheers and happy coding :slight_smile:

Note:
Tools used:
validation:
The W3C Markup Validation Service
screenshots and testing:
GitHub - puppeteer/puppeteer: Node.js API for Chrome