Design comparison
Solution retrospective
Use flex sooner than later.
What challenges did you encounter, and how did you overcome them?Specifying dimensions is bad if you want responsive site. so use as little height + width properties as you can get away with.
Community feedback
- @Islandstone89Posted 8 days ago
Hello, good job!
A few suggestions I hope you find helpful :)
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 a page's "main" content. Wrap the card in a<main>
. -
The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
CSS:
-
Including a CSS Reset at the top is good practice.
-
Move
font-family
from*
to thebody
. -
I recommend adding a bit of
padding
, for example16px
, on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove the
width
inpx
on the card. We rarely want to give a component a fixed size, as we want it to grow and shrink according to the screen size. -
We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a
max-width
of around20rem
. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
On the image, add
height: auto
,display: block
and changewidth
tomax-width: 100%
- the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container.max-width: 100%
makes the image shrink to fit inside its container. -
Using descendant selectors like
.text-content h2
increase specificity, which makes it harder to override. Instead, it's recommended to give elements a class, and use that as the selector.
Marked as helpful0 -
- @cookie-monster01Posted 8 days ago
I have recently started learning html and css. Hence, I do not feel comfortable writing any feedback, but I would say that for padding and margins its better to use em and for font-size its better to use rem as these are responsive units and px is hard-coded and not responsive.
1
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