Skip to content
Submitted 4 months ago

QR Code

P
Karolina Pietraś•40
@ilierette
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm really proud of that I remember a lot after that long break I had, and I have something to return. I general it looks really close to design.

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

I need to learn how to use Figma, but I googled everything that I couldn't find in UI (like drop-shadow).

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

I struggle to understand where use px, em and rem and about accessibility.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Johnny Gérard•880
    @johnnygerard

    Hello,

    I see that your images are not loading. It is probably because they are in the wrong folder. I think Netlify uses /public.

    So you can move images/favicon-32x32.png to public/images/favicon-32x32.png.

  • Marcos Travaglini•6,210
    @Blackpachamame

    Greetings! you have done a great job 😎

    📌 Some suggestions

    • To improve the semantics of your HTML, you can change your <div class="attribution"> to a <footer class="attribution">
    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • P
    Jonatan Samuelsson•540
    @jonatan-samuelsson

    Nice work. I see your image doesn´t have rounded corners. This is because you´ve nested it´s selector inside the .card class selector. To solve it, either move the img class selector outside, or use an & .[YOURCLASSNAME] to properly nest it. Also, your HTML semantics could improve. Main with a class of card seems a bit off. Better to have a clean main and then a .card div. You´v also placed the attribution inside the card itself. It belongs outside, perhaps even in a footer element?

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