Frontend Mentor | QR code component

Community feedback

• 

  P

  Daniel 🛸•44,830

  @danielmrz-dev

  Posted over 1 year ago

  Hello Jake!

  Your solution looks great!

  I have a couple of suggestions for improvement:

  • For semantic reasons, and since that is the main title of the screen, you can replace the <p> with <h1>.

  The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

  • Also, you can replace your section.card with main.card.

  This tag change have no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  10
• 

  P

  Øystein Håberg•13,280

  @Islandstone89

  Posted over 1 year ago

  Hi, congratulations on finishing the challenge - well done!

  To add to the advice given above, here are a few tips.

  HTML:

  • The alt text also needs to say where it leads (frontendmentor.io).

  • .attribution should be a <footer>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Remove the "font-size hack" on html.

  • height should be min-height - this way, the content will not get cut off if it grows beneath the viewport.

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

  00