Blog preview card using flexbox

Solution retrospective
I got it fairly easily
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Islandstone89
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" section. Make.container
a<main>
. -
Use
class
instead ofid
. -
Headings should always be in order, so you never start with a
<h3>
. The main heading for a page should be an<h1>
. However, this card would likely be one of several components on a page - hence it should be a<h2>
, as there can be only one<h1>
. -
Change the alt text on the profile image to "Headshot of Gary Hooper".
-
"Greg Hooper" is a
<p>
.
CSS:
-
Including a CSS Reset at the top is good practice.
-
I like to add
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove
padding-top
on.container
. -
Add
min-height: 100svh
onbody
, so the card gets centered vertically. -
Except for the profile image, remove all widths and heights.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
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. -
Add
display: inline-block
on "Learning", so it doesn't take up the full width. Addpadding
to create space around between the text and the border. -
Remove the margin-left and margin-right - instead, add
padding
on all sides of the card:padding: 1rem
. -
On the top image, remove the margin. Add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container.
-
- @atshakib
j
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