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

@Sandrine-CP

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 finished my first challenge but it took more time than I expected

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

I didn't changed the read me file when I did work on the project. As I am submitting the solution a long time after I finished I don't remember the steps I followed. Will do better for the next challenge.

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

I would like to know if the css structure is optimal, meaning are there some improvements to make it shorter ?

Community feedback

P

@ephraimdjeket

Posted

Hi Sandrine. I'd say you did a very good job here :). Design aspect, everything looks close to pixel perfect. The only thing I noticed is the fonts being a bit bigger and different.

Your CSS structure is great, but I noticed that you're not using a CSS reset. I'd say this is crucial because all elements will otherwise retain their default styling and not all browsers will display apply these default rules.

I found a modern CSS reset that you could use:

/*

  1. Use a more-intuitive box-sizing model. */ *, *::before, ::after { box-sizing: border-box; } /
  2. Remove default margin */
  • { margin: 0; } /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering / body { line-height: 1.5; -webkit-font-smoothing: antialiased; } / 5. Improve media defaults / img, picture, video, canvas, svg { display: block; max-width: 100%; } / 6. Remove built-in form typography styles / input, button, textarea, select { font: inherit; } / 7. Avoid text overflows / p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } / 8. Create a root stacking context */ #root, #__next { isolation: isolate; }

Keep coding!

Marked as helpful

0

@Sandrine-CP

Posted

@ephraimdjeket thank you so much for your feedback, so valuable and helpful, I did use the css reset for my second challenge ;-)

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