Design comparison
Solution retrospective
Difficult Issues
Finding out how much padding I needed for the card, h6 tag, and p tag so that the font fit just like the screenshot. Could someone give me an idea of what to look for if I want to get close to the amount used?
Unsure Areas
Using semantic HTML for this, how could someone achieve this?
Best Practices
Any suggestions on best practices I should use would be greatly appreciated!
Community feedback
- @Islandstone89Posted 11 months ago
Hey there, I'll gladly give you some advice. You have done many things correctly, it just needs a few tweaks :)
Regarding the padding, unless you get the Pro version with the Figma file, you won't know for sure. However, this is not the most important point of the challenges - "pixel-perfect" designs are a myth anyway, as there are myriad factors that influence the layout of a component. The padding you have applied on the card looks good to me, so thumbs up :)
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. It's also an appropriate use of semantic HTML. So, change.card
into a<main>
. -
The alt text should be written naturally, so instead of
front-end-qr-code
you would writefront-end QR code
. However, it also needs to say where it leads (frontendmentor.io). -
Headings should always be in order, so you never start with a
<h6>
. Change it into a<h1>
.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML than using@import
. -
It's good practice to include a CSS Reset at the top.
-
Well done for using Flexbox on the
body
to center the card! Remember,height
must bemin-height
- this way, the content will not get cut off if it grows beneath the viewport. And I would addflex-direction: column
- if you wanted to include a<footer>
, that would be the second child of thebody
, and hence the second Flex item. When you declaredisplay: flex
, the default value isflex-direction: row
, meaning direct child elements will appear side by side, instead of stacked on top of each other, as we want. -
font-size
must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
max-width
on the card needs to be in rem - around20rem
works fine. -
On the image, add
display: block
and replacewidth
withmax-width: 100%
- the max-width prevents it from overflowing its container.
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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