Skip to content
Submitted 6 days ago

QR Code Component using CSS Flexbox

Josh Kahlbaugh•50
@Joshk7
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

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

Styling the main component containing the QR code was the best part of this project. Once applying flex to the body, everything else fell into place.

body {
display: flex;
justify-content: center;
align-items: center;
}
What challenges did you encounter, and how did you overcome them?

The main challenge was trying to get the right measurements for padding so that the container held the QR code correctly. Once I downloaded the Figma file to look at the design in more detail it was easier to work out the details.

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

I'm specifically looking for help with accessibility if there's any other components I could add to help with that.

Community feedback

  • KapteynUniverse•2,560
    @KapteynUniversePosted 5 days ago

    Hey Josh, nice job. You used article tag, wrote a nice alt text for the image.

    You can wrap the article with main landmark, or this page. Every page needs a main.

    Maybe you can change text-container div with a hgroup. Frontendmentor gives me an error whenever i use hgroup with a heading and p tag tho but it should be correct to use it like this.

    width: 100%; on the body is not necessary, it is a block element by default. You can also change height: 100vh; to min-height.

    max-width: 320px; on the container is nice, but max-width: 20rem; would be better.

    You can also remove height and width from the image and use max-width: 100%;

    Never use fixed values for the font sizes. So people with visual impairment can adjust the font sizes on their browser. font-size: 22px; on the h1 can be font-size: 1.375rem, and font-size: 0.9375rem for the p.

    Also i recommend you to use a modern css reset for every project. You can check Andy Bell's reset too.

    Marked as helpful
    0
    Josh Kahlbaugh•50
    @Joshk7Posted 5 days ago

    @KapteynUniverse That was really helpful! I didn't even know what a css reset is before this comment.

    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