Skip to content
Submitted 3 months ago

BeardedBe4n First Code using HTML and CSS while linking a google font

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

this was the first time i coded anything that wasn't spoon fed. there was a lot of instruction but the basic things I had to google, it is so different in practice.

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

my main challenge was linking the google font, as well as (and I cant figure it out) the top border radius of the qr code

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

the top borders of the qr code image as well as best practices for formatting

Community feedback

  • ortiz-antonio•180
    @ortiz-antonioPosted 3 months ago

    Keep coding, you're doing great! To fix the image cropping issue, try replacing padding-top: 10px with margin-top: 10px; in the .imgCode class. Understanding the CSS box model will help you make more informed styling decisions.

    Marked as helpful
    1
  • oduwa-A•160
    @oduwa-APosted 3 months ago

    Yeah the top left and right of the image are not as even as the bottom corners. The problem is padding squishing the image at the top, and altering it far more than intended. By removing padding-top in .imgCode, the radius will do it's thing.

    Additionally, the card is a tad bit too small. Although that is not egregious in itself. Also watch out for the font-weight since the contrast between the paragraphs isn't strong enough. And make sure to include a default/backup typeface in the font-family in the top and bottom classes, should the main font fail.

    Finally, make sure the to include padding in the first class, .box, so the box can "compress" on itself and grant space.

    Otherwise, great attempt for your first time without help! I'm going through the same thing, so seeing your work was enlightening, since it offered an alternate path to how I approached it. And of course, seeing everything, all you did right and the flaws, increased my own understanding alot. Keep it up!

    Marked as helpful
    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