Skip to content
Submitted about 1 year ago

Qrcode card

Ibukun450•390
@Ibukun450
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

  • Rebecca Padgett•1,860
    @bccpadgePosted about 1 year ago

    Hello @Ibukun450. Congratulations on completing this challenge!!!🎉

    I have few tips you might be interested in to improve your solution.

    When people view your website they want to know what the purposes of it and title is very important.

    <title>Frontend Mentor | QR code component</title>

    • Be sure to add favicon.io which is located in the images folder of starter files you download to start this challenge.
    • The reason why the image is not showing is due image src path.

    Updated the image src path is below and be sure to have alt for accessibility. In future projects, decorative images need aria-hidden:true and the images will be ignored by screen readers.

    • <img src="image-qr-code.png" alt="qr code to FrontendMentor.io">

    HTML 📃:

    • HTML structure needs to be updated
    <body>
  <main>
     /*All content goes here*/
  </main>
</body>
    • Every website should have a h1
    • You can change the h3 to h1

    More info📚:

    Don't wrap every element in a div> because it doesn't have any semantic meaning at all.

    More info📚:

    CSS 🎨:

    The media query is unnecessary for this project and max-width: 25rem; makes it responsive. I recommend you use rem or em units because they scale better. Pixels are absolute unit and especially for font-size not a good practice.

    More info📚:

    You set the wrong color on the paragraph and can change it to this color: hsl(220, 15%, 55%);

    • Be sure to add a fallback of sans-serif if the font-family:Outfit doesn't load.

    Hope you find this useful and don't hesitate to reach out to me if you have any questions

    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