Skip to content
Submitted almost 2 years ago

First Project - QR Code

Derek Lartey•110
@DerekLartey
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

  • I struggled with my CSS code not showing on the site, this was because I realized that I didn't add the CSS link to my HTML file. I figure this out about 10mins into working on it, besides that everything else went well.

  • I don't know what I don't know, I think that I have a solid understanding on what I have learned. But I also know there's a lot more that I don't know that I'm willing to learn more about.

  • I currently don't have any questions but just wanted to wish everyone all the best with coding.

Community feedback

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

    Hello there 👋. Good job on completing the challenge !

    I have some feedback for you if you want to improve your code.

    HTML:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.
    • You must use a level-one heading (h1) even though this is not a full-page challenge.

    • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

      If you want to learn more about the alt attribute, you can read this article. 📘.

    CSS:

    • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.
    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    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