Skip to content
Submitted 3 months ago

QR Code Component | Flexbox | HTML | CSS

aniketinTech•30
@aniketinTech
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?

What am I proud of and what I would do differently next time:

  1. The code is easy to understand and follows a logical structure.
  2. Closely matching the design specifications.
  3. Ensuring the component looks good on different screen sizes.
What challenges did you encounter, and how did you overcome them?

Challenges encountered:

  1. Matching Design Precisely: Challenge: Ensuring the component matched the provided design down to the smallest detail. Solution: Used design tool Figma(since this is Free+) and browser inspection to measure elements and fine-tune CSS properties.
What specific areas of your project would you like help with?
  1. Ensuring the component looks good on different screen sizes.
  2. How to use media query?

Community feedback

  • Liyyy9•80
    @Liyyy9Posted 3 months ago

    Great job completing this challenge! I have a few suggestions for improvement based on feedback I received for the same project. I think they could be useful for you as well.

    HTML:

    1. Add a <main> element to wrap all of your content except the <header> and <footer>. This improves accessibility and acts as a landmark for your webpage. Make sure to include your card within the <main> element.

    2. Consider changing your <p class="para1"> tag to an <h2> tag. Typically, a page should only have one <h1> tag for the main heading. Since this challenge doesn’t include a main heading, it would be appropriate to use an <h2> tag instead.

    CSS:

    1. Don’t forget to include a fallback font in your font-family property. It should be specified like this: font-family: 'Outfit', sans-serif;.

    2. Avoid using px for font-size. Instead, use rem units to ensure the font size scales with the user’s default browser settings, which enhances accessibility.

    3. Since you want all text to be centered, you only need to apply text-align: center to the <body> element. The child elements will inherit this property, so you can remove any redundant text-align: center declarations from elsewhere.

    Hope this helps!

    Marked as helpful
    0
    aniketinTech•30
    @aniketinTechPosted 3 months ago

    @Liyyy9 Thank you so much for your feedback. I'll consider your suggestions and that's helpful. Thank you so much for your time.

    1
  • Patolin3084•20
    @Patolin3084Posted 3 months ago

    It has turned out almost perfect, it is a little too wide and that is why the distribution of the words in the text is not correct. It is likely that correcting the width and text justification value can be resolved.

    0
    aniketinTech•30
    @aniketinTechPosted 3 months ago

    @Patolin3084 Thank you for your suggestion. I guess I messed up while taking the screenshot because when you open the website it looks perfect. Still, I'll look into it. Thanks!

    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