Qr code component solution

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  In order to fix the accessibility issues:

  • You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element.

  After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  Priscilla Ilha Carbonell•20

  @PricbnllPosted over 1 year ago

  @ecemgo tks!!! you are veery helpful. Remind me some details, important details

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Pricbnll anytime! :)

  0
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, in relation to your question I don't think so.

  But if you allow me, I'll leave this here (on this and other topics), in case you want to take a look at it:

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹Semantic elements: The main content of every document (the whole card in this case) should be wrapped with the <main> tag.

  Also, no need for a div that wraps the image.

  🔹This is a meaningful image and therefore the alt text should give a good description in case the user cannot see it for some reason.

  CSS 🎨:

  🔹It is better to use min-height for the body, as using the height might cause the page to be cut off in viewports with small height (such as mobile landscape orientation).

  🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

  🔹You don't need to use font-weight as 400 and 700 are the default values for normal and bold font respectively.

  Please let me know if you disagree with something or if you would like more information on any of these topics.🙂

  Regards

  Marked as helpful

  0

  ---

  

  Priscilla Ilha Carbonell•20

  @PricbnllPosted over 1 year ago

  @fernandolapaz tks... love it!!!

  0