Design comparison
Solution retrospective
please provide any feedback. Thanks!
Community feedback
- @Islandstone89Posted 11 months ago
Hi, I have some feedback which I hope will help.
HTML:
-
You need to alter your structure a little. Every page needs a
<main>
that wraps everything except for the<header>
and the<footer>
. This can be the container that holds all 3 cards, or you could make a<div>
. But you need a<main>
, and a container that wraps the whole component. -
The icons are decorative, so the alt text should be empty:
alt=""
. -
"Learn More" would navigate to another page, hence it is not a button but a link.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
The
body
should have amin-height
instead ofheight
. Themin-height
allows the content to grow taller than the viewport if needed. -
Whenever you declare
display: flex
, the default value isflex-direction: row
, so you don't need to write that explicitly. However, when using Flexbox on thebody
, you normally wantflex-direction: column
, as we want its children to stack vertically. Since thebody
currently only has one direct child, it makes no difference, but I would still change it toflex-direction: column
, just to get into that mental habit. -
Remove the fixed width and height. You rarely want to set fixed dimensions (especially heights), as this easily creates issues with responsiveness.
-
To prevent the component from stretching too wide on larger screens, add a
max-width
in rem. -
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. -
Media queries also need to be in rem instead of px. Ideally, you want to do mobile styles first, and use media queries for larger screens.
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