Skip to content
Submitted about 1 year ago

QR Code Component using CSS Grid

GABI•30
@gabsvitorio
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

1 What did you find difficult while building the project?

R: I had difficulty to fix the qr code image inside card, but in the end it was a simple solution.

2 Which areas of your code are you unsure of?

R: Hmm... maybe text spacing.

3 Do you have any questions about best practices?

R: Any observation and suggestion of best practices are welcome!

Community feedback

  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, GABI👋. Congratulations on successfully completing the challenge! 🎉

    Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better that might interest you:

    HTML:

    • The <main> element should wrap around the entire component. Using the <header>, <main>, <footer> elements provide structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages.
    • Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source
    <body>
    <main class="container">
        <div class="card">
            <img class="card-image" src="images/image-qr-code.png" alt="QR Code for frontendmentor.io">
            <h1 class="card-heading">Improve your front-end skills by building projects</h1>
            <p class="card-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the
                next level</p>
        </div>
    </main>
    <footer><div class="attribution">...</div></footer>
</body>

    CSS:

    • If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link
    • You can use the max-width, margin and padding to control the width and position of your elements.
    • Percentages are often used to define widths, heights, and margins. They are relative to the parent element's size. For example, width: 50% would make an element half the width of its parent. For example:
    .container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.card {
    max-width: 20rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 0.938rem;
    text-align: center;
}

.card-image {    
    width: 90%;
    border-radius: 0.625rem;
    margin: 5%;
}

.card-heading {
    margin: 2% 5%;
    padding: 0 5%;
}

.card-description {
    margin: 5% 5% 12%;
    padding: 0 5%;
}

    I hope you find this helpful! 😄 Keep up the great work! 👍

    🖥️Happy coding!

    Marked as helpful
    0
    GABI•30
    @gabsvitorioPosted about 1 year ago

    @kanishkasubash It was helpful! Thank you very much! 😊👍🏼

    0
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    @gabsvitorio

    Estou muito feliz em saber que meus esforços foram impactantes. São pessoas como você que me inspiram a continuar dando o meu melhor. Obrigado😊

    Continue com o ótimo trabalho! 👍

    🖥️Boa codificação!

    1

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