Design comparison
Solution retrospective
None
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?Just need Your Suggestions and advice to become a better Programmer
Community feedback
- @Islandstone89Posted 7 months ago
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. Change the<section>
to a<main>
. -
Consider using the
<time>
element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
As this is a blog card, the heading needs a link inside.
-
The profile image needs alt text, something like "Headshot of Gary Hooper" works fine.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
It's not common to place
list-style
andtext-decoration
on the universal selector (*
), as these properties only apply to certain elements. -
Remember to specify a fallback font, in case the user can't access the declared font:
font-family: 'Figtree', sans-serif;
. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
Except for the profile image, remove all widths.
-
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. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
Images need
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. -
Media queries should be in rem. Remember, you only have to declare properties that you want to override. Hence, you don't need to write
display: flex
andflex-direction: column
in the media queries for.container
andblackContainer
.
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