HTML5 - CSS - Flexbox

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 12 months ago

  Hi there, here are a few tips:

  HTML:

  • You need a <main> - change the .container from a div to a main.

  • The alt text should also say where the QR code leads to, which in this instance is "frontendmentor.io".

  CSS:

  • It's better for performance to link the fonts in the head of the HTML, not in the CSS.

  • Font-size should be in rem instead of px.

  • Max-width on the container should also be in rem, not px.

  • The container is centered vertically by using Flexbox and align-items: center on the body, and centered horizontally by using margin: 0 auto on the container itself. I would suggest letting Flexbox do both; remove the margin: 0 auto, and add justify-content: center on the body :)

  • You can also put text-align: center on the body since all text should be center-aligned.

  • You shouldn't have a separate stylesheet for the CSS Reset, or for the media queries. For a good CSS Reset, check out this one by Andy Bell

  Hope this helps!

  1

  ---

  

  JJunior-Dev•60

  @JJunior-DevPosted 12 months ago

  @Islandstone89 thank you very much!!

  1

  

  JJunior-Dev•60

  @JJunior-DevPosted 12 months ago

  @Islandstone89 I was without time to make the changes, but now it is done. Thank you again.

  1
• 

  P

  Paul•470

  @mayor-creatorPosted 12 months ago

  @JJunior-Dev congrats on completing this challenge. Here's a great article on flex property https://webdesign.tutsplus.com/a-comprehensive-guide-to-flexbox-alignment--cms-30183t. it takes time to get comfortable with flex properties and keep practicing.

  1