Skip to content
Submitted 3 months ago

Qr-code challenge solution

Jacqueline Bento•20
@jacquebento
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?

This was my first project, I felt excited but a little rushed, I'm not sure if I did everything right so next time I want to be more detailed.

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

Trying to discover the values ​​of margins and paddings was difficult, there was a lot of trial and error

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

Please tell me if I did something wrong or if I didn't use the tagging conventions correctly. Is it ok to use rem in padding?

Community feedback

  • P
    Theo Harris•360
    @Theosaurus-RexPosted 3 months ago

    Hey @jacquebento, nice work!

    Yep, using rem for padding and margin is a pretty common thing in production code, so you're all good there!

    Just caught a small issue in your markup - you have the first line of text wrapped between two non-matching tags (I'm assuming they're both meant to be h1 tags):

    <p>Improve your front-end skills by building projects</h1>

    One other note is that when providing an alt attribute for QR codes in particular, we should describe where the QR code links to for users who may be using screen readers due to vision impairments, e.g. alt="A link to the Frontend Mentor website". Great work remembering to include the alt tag though, as a lot of people don't even though it's a required attribute on img elements!

    Overall, fantastic job on this project :)

    0
  • Gary Alvarado•40
    @Denilson15Posted 3 months ago

    I was on the same boat with margin and padding, it definitely takes some trial and error to figure out how much to use, as well as which one should take priority. Overall your QR code looks really good!

    I'm still really new at working with CSS too, the only suggestion I have is to try to extend the white background a bit more vertically. You don't have to adjust the height but you can add some padding to the bottom so that the text isn't on the edge.

    0

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