Skip to content
Submitted 2 months ago

QR Code using HTML and CSS

Erika Peterson•80
@erika-codes
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?

I am most proud of being able to complete most of the project by memory. I have not coded for several months, but it came right back to me. I wouldn't do anything differently next time, except for write code faster.

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

The challenges I encountered were mostly due to memory. I forgot how to center a div element, so I did a Google search for the answer and found it.

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

The specific areas of my project that I would like help with are writing semantic and efficient code.

Community feedback

  • Boris•2,870
    @mkborisPosted 2 months ago

    Great work @Erika-codes, here are a few things to review

    • It's not good practice wrapping every element in div because divs aren't semantic. Use more meaningful semantic elements like main, section, and footer. Wrap a main tag around the .card and a footer for the attribution.
    • Use heading tags h1, h2 for the title instead of wrapping it in a p tag. This makes the structure more accessible.
    • Your image needs a more descriptive alt attribute like so alt="Qr Code to Frontendmentor.io"
    • To properly center the card, add this on your body and remove the all the margin properties from the .card
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .card to max-width and it should be defined in rem.
    • The link to the github repo seems to have an issue, you might want to check that

    Hope this helps, Good luck!

    Marked as helpful
    0

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