Skip to content
Submitted about 2 years ago

QR code component

Mahii•90
@mahendrameghwal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • No i don't think in this project some difficulty level in this project
  1. in this project i use for center div and QR card component *display:grid *
  2. and in this project i use bootstrapas well

-i dont have any questions in this about in this project... #QRcardcomponent

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi Mahii, congrats for your new solution!

    Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

    1.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

    2.Don't forget to use the alt text to allow screen readers to recognize that img. Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.

    3.The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    ✌️ I hope this helps you and happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord