Skip to content
Submitted 9 days ago

QR Code Component Using HTML/CSS

Ahmed Dosunmu•30
@Ay-Dee
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?

Seeing this through

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

I didn't know how to import the font file I downloaded from Google Fonts but found the solution after a little Google searching. I imported it using this:

@font-face {
    font-family: 'Outfit';
    src: url(font/Outfit/Outfit-VariableFont_wght.ttf) format('truetype-variations');
    font-weight: 100 900;
}

And also the good old div centering problem but I worked through it fine

Community feedback

  • Gabriel Marques•90
    @GMarqzPosted 9 days ago

    Hello there! 👋 Nice job on completing the challenge!

    There are multiple ways to import fonts into your project. One effective method is to visit Google Fonts and search for your desired font (in this case, Outfit). Once you select it, you’ll be redirected to the font's page. Click on the "Get font" button, then select the "< > Get embed code" option. Make sure to mark the "@import" radio button and copy the code inside the style tag.

    You can then import it in your style.css like this:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');

    This way, you don’t have to download the font, making it a convenient option.

    This is one way to import fonts into your project; feel free to choose the method that suits you best.

    Additionally, I believe the attribution should be placed outside the component. Consider moving the attribution div outside the content div while keeping it inside the main div.

    Lastly, please add an alt text to your QR image. Including alt text is essential for accessibility as it allows screen readers to convey the content and purpose of images to visually impaired users, ensuring everyone can understand the information being presented. It also enhances SEO by providing context to search engines.

    You could use something like this for the alt text:

    alt="QR code linking to the Frontend Mentor website"

    I hope this was helpful. 😊

    Marked as helpful
    1
    Ahmed Dosunmu•30
    @Ay-DeePosted 9 days ago

    @GMarqz Love the feedback🫡. Would implement suggestions

    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