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
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code created with HTML and CSS

P

@FrankGrillo1991

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

T
Grace 29,890

@grace-snow

Posted

Hi, I hope this feedback is helpful. I'll write as a list and hopefully you can work through each item as I'm off the rest of this week. Others are available for more help on Discord if you need it - just start a new post in the #Help channel :)

  1. footer is a distinct landmark from main. It should sit after it
  2. The body will need to be made into a flex column if this is the approach you're using to center the component on the screen
  3. Give main some padding so the component can't touch screen edges (Alternatively, you could give the card some margin on all sides, or give the body a little padding)
  4. The card must have a max-width in rem
  5. The alt text on the image needs to be a proper description. Remember, alt is not code, it is important content! For example "QR code to FrontendMentor.io" would be a good description for this image
  6. You are loading either the incorrect fonts or the incorrect widths. Check these in the styleguide and amend what you are downloading and applying
  7. Try to get the font sizes and appearance much closer to the design. That includes family, weight, size, line height and vertical margins
  8. ALWAYS include a modern CSS reset at the very start of the styles. That will do lots of important things, but one of them is set images to display block max-width 100%

p.s. Don't forget to update the attribution link so it goes somewhere meaningful! The link for your name could go to your frontend mentor profile page, for example

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