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 component

Zuja93 10

@Zuja93

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'm proud of making it look pretty much as required.

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

One of the challenges I struggled the most with was creating the right sizes and spacing for all of the components. I overcame that by measuring everything in Figma.

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

I really need help with adjusting the code to be responsive with all devices. So far it just looks as it should on screens wider than width of the component.

Community feedback

P

@Islandstone89

Posted

HTML:

  • Nothing to be said here - well done!

CSS:

  • Including a CSS Reset at the top is good practice.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Instead of 0px, just write 0.

  • You don't need to write .container before every selector.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove all widths and heights. In general, you should (almost) never set fixed sizes.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

Marked as helpful

1

Zuja93 10

@Zuja93

Posted

@Islandstone89 Thank You for the helpful comment and all these advices. I'll try to implement it in future.

1

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