Skip to content
Submitted 3 months ago

QR code using html and CSS

Sandrine Cazenave-Peyrasson•40
@Sandrine-CP
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 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

  • ephraimdjeket•130
    @ephraimdjeketPosted 3 months ago

    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 Cazenave-Peyrasson•40
    @Sandrine-CPPosted 3 months ago

    @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

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