Submitted 2 months ago

QR Code component

#accessibility

Hassan Aziz•60

@bauerceptor

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am happy on completing it without referencing any solution or AI tool. I would like to improve on the overall responsiveness and accessibility of the site.

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

Centering content. I learned about flexbox and a friend helped me out realize that I could center the text through text-content: center, rule.

Community feedback

Alaa Mekibes•1,540

@alaa-mekibesPosted 2 months ago

You did a great job! You've used semantic elements in your HTML, and your CSS code is clear and well-structured.

To center your design, you can use Flexbox or Grid on the body like this:

body {
    font-family: var(--font-family);
    background-color: var(--color-primary);
    display: grid;
    place-items: center;
    min-height: 100vh
}

Marked as helpful

Please log in to post a comment

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