Responsive QR Code Component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 20 days ago

  Hi, well done!

  Here are some tips:

  HTML:

  • It's perfectly OK to use a <div> as the card. A <section> is not semantic unless you add a aria-labelledby where the value is the id of the section heading.

  • 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."

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  CSS:

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

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • It's not common to set anything on html. Move font-family to the body, and remove font-size: 10px; - even though changing it makes it easier to convert from px to rem, it's not recommended.

  • .container doesn't need any styles either, so move the properties to body. Remove width: 100% - block elements like body, div, main etc take up the full width of their parent by default. Change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

  • To center the card horizontally and vertically, you can also use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Now that you've removed font-size: 10px on the html, you must adjust the max-width on the card to 20rem, which equals 320px.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • On the image, add height: auto and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card:padding: 16px;.

  Marked as helpful

  1

  ---

  

  Anthony Dorian•10

  @Codeur-OmniscientPosted 17 days ago

  @Islandstone89 Thank you for the feed-back i learn a lot I’ll make a modification soon. I don’t know too much about semantic html if you have some resources shared me that it would be helpful 😉

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 17 days ago

  @Codeur-Omniscient Here's an article about semantic HTML from the Google Chrome team.

  Marked as helpful

  1
• 

  Violeta•50

  @v-t-9Posted 20 days ago

  Hello!

  Congrats on completing the challenge! I noticed something you might find interesting. Consider using semantic HTML tags like <section></section> instead of <div> to wrap the QR card. Some of the benefits of this are: improved search engine rankings and better maintainability.

  Hope you find this helpful!

  1
• 

  TheSecondChance•10

  @TheSecondChancePosted 20 days ago

  HTML elements effectively, which enhances both accessibility and SEO. Elements like <header>, <main>, <section> Responsive Layout: The layout looks great across various screen sizes, adapting seamlessly from mobile to desktop.

  1