Flexbox CSS, Javascript and HTML 5

Community feedback

• 

  Vickie•10

  @VerwegVerwegPosted 3 months ago

  Good job on completing the challenge.

  1
• 

  Kaloyan Kostov•60

  @Kaloyan-KostovPosted 3 months ago

  Good job, I really like your solution, so keep on with the good stuff!

  1
• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 3 months ago

  Hey, well done :)

  Here are some suggestions to improve your solution even further:

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

  • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • "Improve your" is not a paragraph, but a heading. Headings should always be in order, so you would usually start with a <h1>. The <h1> represents the main heading on a page, and should not be repeated. As this is a card heading, it would likely not be the main heading on a page. Hence, making it a <h2> makes the most sense to me.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove the width and height in px on the card. We rarely want to constrain the dimensions of a component, as we want it to grow and shrink according to the screen size.

  • We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.

  • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

  • Instead of setting font-family on both the heading and paragraph individually, you can put it on the body, and remove it elsewhere. font-family, like most typographic properties, inherits, meaning their value gets passed down to the descendants of the element it is declared on.

  0