QR card component with HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Rochak Pandey, Congratulations on completing this challenge!

  I’ve few suggestions for you that you can consider adding to your code:

  1.Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  2.The main heading has the tag <h2>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.

  3.Since your html structure is already minimal, to reduce the CSS you can use the direct selector for each element instead of using class this way you have a code even cleaner, for example, you can select everything using the direct selector for (img, h1, and p, main).

  4.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Rochak Pandey•80

  @pandeyrochakPosted about 2 years ago

  @correlucas Thank you so much for your valuable suggestions. 👐 I'll update the changes. Really liked the dark mode toggle you've added to your component.

  0