Skip to content
Submitted about 2 years ago

QR code component using HTML and CSS

Richmond•10
@Richie-Alpha
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

Community feedback

  • Husam Asaad•420
    @husamasaadPosted about 2 years ago

    Well done.. congrats on completing your first challenge, I love that you use rem in most of your code and that is great.

    just a little tip : try making the h1 font size a little smaller (maybe 1.4 rem would be great) and increase the top margin a little bit more in the paragraph.

    then work a little bit more on making it more responsive

    good luck on your journey

    Marked as helpful
    1
    Richmond•10
    @Richie-AlphaPosted about 2 years ago

    @husamasaad Thanks for the tip. I will improve the next time

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @Richie-Alpha 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions to improve your code:

    • The color of the paragraph element is unreadable because it is too light compared to its background, change the color to hsl(220deg, 15%, 55%) for example.

    • Try to use semantic tags in your code. More information here:

    With semantic tags:

    <body>
   <main class="component">
      . . .
   </main>
<body>

    The container is not center. You can use flexbox to center things

    body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    And remove margin: 6rem auto; from the .component selector

    More information: A Complete Guide to Flexbox (CSS-Tricks) | How TO - Center Elements Vertically (W3Schools) |

    • Add descriptive text in the alt attribute of the images, the text should describe the image, The alt attribute enable screen readers to read the information about on-page images and will be displayed instead if an image file cannot load

    I hope those tips will help you.

    Good Job and happy coding !

    Marked as helpful
    0
    Richmond•10
    @Richie-AlphaPosted about 2 years ago

    @MelvinAguilar Thanks for the tips. I will be sure to improve the next time and i hope you will continue to correct me if get anything goes wrong

    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