Skip to content
Submitted 8 months ago

Basic Solution to QR code component

Ciftelia•10
@Ciftelia
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?

I'm really proud that I got the font working (but only on chrome).

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

I use Firefox as a default browser, and it took me ... a while to realize that the font only works on Chrome. Made me realize how much stepping back from your code for a bit helps.

What specific areas of your project would you like help with?

I'd like help with getting the font to work on Firefox, and with getting the QR component to center itself with different page sizes.

Also any general coding style tips are appreciated.

Community feedback

  • adaviladev•50
    @adaviladevPosted 8 months ago

    Your solution is quite impressive! I particularly appreciate the subtle shadow effect you've implemented, adding a layer of depth to the design. To enhance its visual appeal further, I would suggest incorporating a slight top margin. This adjustment will help to center the element more effectively on the screen, providing a more balanced and polished appearance overall. Keep up the great work!

    Marked as helpful
    2
    Ciftelia•10
    @CifteliaPosted 8 months ago

    @adaviladev Thank you for your feedback! Will try adding the top margin!

    0
  • Davisnz•150
    @DavisnzPosted 8 months ago

    Hello, there!

    Good job finishing your first challenge, I just did a quick review on your code and I think I found the reason why the font only works on Chrome.

    For simplicity purposes, next time you identify a Google Font it's always easier to go into Google Fonts and look for it, in this case: https://fonts.google.com/specimen/Outfit

    Once you find it, click "Get Font" and then you can get the code to embed it into your HTML or CSS, and then you can make a call to it in your stylesheet.

    For centering your document, use the Flexbox, if you want to learn how to use it I would highly recommend you to play this game: https://flexboxzombies.com/p/flexbox-zombies

    Marked as helpful
    1
    Ciftelia•10
    @CifteliaPosted 8 months ago

    @Davisnz Thank you for your advice, I managed to get the font working!

    Will check out Flexbox Zombies!

    1
    Davisnz•150
    @DavisnzPosted 8 months ago

    No problem! Glad to help :) @Ciftelia

    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