Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code using HTML and CSS

P

@Erika-codes

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@mkboris

Posted

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
Discord logo

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