Design comparison
Community feedback
- @Islandstone89Posted 3 months ago
HTML:
-
The
<main>
element holds all of the content on a page, except for the header and the footer. The card would likely not be the only component on a page, hence I would wrap it in a<div class="card">
. -
Replace the IDs with classes. This article explains the use cases for the
id
attribute. -
"Improve your" is a heading, not a paragraph. Headings must always be in order, so you would never start with a
<h3>
. A<h1>
is reserved for the main heading on a page, and should not be repeated. Given this is a card heading, it would likely not be the main heading of a page. Hence, I would make it a<h2>
.
CSS:
-
I would have all of the CSS in one file, usually called
style.css
. -
Remember to specify a fallback font:
font-family: 'Outfit',sans-serif;
-
I like to add
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
Remove all widths and heights in
px
. We rarely want to set fixed sizes, as we want our elements to grow and shrink according to the viewport. -
We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.
-
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
display: block
andmax-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