Skip to content
Submitted about 1 month ago

QR Code frontendmentor

Keyzcharly•100
@Keyzcharly
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?

I like the way it turned out, lovely font

What challenges did you encounter, and how did you overcome them?

every piece of css coded was a challenge worth taking

What specific areas of your project would you like help with?

Please can I have a project review?

Code

Please log in to post a comment

Log in

Community feedback

  • Alaa Mekibes•2,090
    @alaa-mekibes

    Good work

    • Center your design using Flexbox or Grid:
    body {
display: grid;
place-items: center;
min-height: 100vh;
}

    body {
display: flex; 
justify-content : center; 
align-items : center; 
min-height: 100vh;
}
    • Avoid Using px Unless Necessary

    Use relative units like rem or em for sizing instead of px. This ensures better scalability and responsiveness.

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • Use css variables to improved maintainability like this:
    :root {
    --bg-color: hsl(100, 46%, 95%);
}

body {
    background-color: var(--bg-color);
}

    Your work is outstanding, stay consistent and keep shining!

    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