Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

Bazel 40

@8BitSoda

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Dreamleaf 230

@Dreamleaf

Posted

A couple of points about the text elements in the card.

  1. You have both the title and text within p tags, ideally there should be a heading within the element. So you could have made the "improve your...." text a h1 element. In a real world situation, there would likely be other things on the page and the title may be better suited as a h2.

  2. You have both text sections set with a single font size, the design has them differently - and while there is a bit of trial and error needed, you could have styled them accordingly.

  3. When you declare the font - always include a fall back font if the main choice is being pulled in from an external source. This way if there is an issue with the fonts loading, you still control how it looks. For this you just need to write: font-family: outfit, sans-serif;

  4. Look at using REMs for the font sizing instead of PX values, definitely have a read up on the difference and why it is better.

Keep going though, every time you write code it will improve.

1
Dipesh 130

@ddkogit

Posted

you got it right but look at the padding and margin. Try using flexbox, it will be so much easier.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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