QR-code-component

Community feedback

• 

  Stanley Nadar•370

  @istealersn-devPosted over 1 year ago

  Great efforts! Congratulations on completion of the challenge

  When you build HTML, its important that you get the semantics right as that boost accessibility and SEO aspect. In your HTML structure you are missing some important aspects like making sure to include <main> tag inside body specifying that its the main content of the body and including at least one <h1> is mandate as per web standards.

  On the CSS end, I see you've used a mix of px and rem, as a best practise I will recommend to stick to rem instead of pixels as that will enable good support for user specific browser preferences and accessibility. It uses a base size: 16 (default font size) however you can override that by specifying the root font size within html tag in CSS, something like this: html { font-size: 15px; } - this will automatically calculate your pixels based on you the rem values you set.

  For reference read this!

  Hope this is helpful!

  Marked as helpful

  0
• 

  Liam Tanfield•260

  @TanDevvPosted over 1 year ago

  Good job on this, alexanderokeagu. I have a few suggestions for ya :)

  • Try placing your container in a main tag after body for more semantic HTML.

  • You skipped h1 entirely and went straight to h2, unfortunately it is not good practice to skip levels of heading, especially the h1 as this tells visual-impaired users what the whole page even is. You can always put a h1 in a landmark like main and set it to be visually hidden so it does not show up in the page but it is still read out by screen-readers.

  • Your alt text "Your image here" does not make much sense in this context, consider changing it to "QR code to Frontendmentor.io" so someone with a screen-reader can better understand what the image is doing to the website.

  • Try to avoid using px units for pretty much anything, unless you are using decorative properties like borders, box shadow etc.. and want something to look more precise, px units do not scale well when it comes to accessibility features in browsers like zooming in and out. I suggest looking into the rem and em units.

  Here are some references if you feel inclined to read them!

  Semantic HTML via MDN

  Heading Elements via MDN

  Visually Hidden elements via Webaim

  Alt Text via MDN

  "Are you using the right CSS units?" via Kevin Powell on Youtube

  Marked as helpful

  0