Skip to content
Submitted over 2 years ago

QR Code Component

Max•260
@maxkdavis
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

What I would improve for next attempt:

  1. Using CSS variables

  2. Better understanding of Flexbox

  3. Add Responsivness

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Abraham•270
    @Abeeujah

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    HTML 📄:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

    Alt text 📷:

    Images Should Contain Alt Texts as it Helps Assistive Technologies tell the Value of the Image.

    The alt attribute should explain the purpose of the image. Upon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io If you want to learn more about the alt attribute, you can read this Article

    Marked as helpful

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