Design comparison
Community feedback
- @Islandstone89Posted 6 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. Wrap the card in a<main>
. -
I would use the
<time>
element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
The heading would have a link inside, as this is a blog card.
-
Screen readers automatically announce
<img>
as an image, so you shouldn't have words like "image" or "photo" in the alt text. A suitable alt text for the profile image would be "Headshot of Gary Hooper". -
.attribution
should be a<footer>
, and you should use<p>
for the text inside.
CSS:
-
Including a CSS Reset at the top is good practice.
-
font-size
andfont-weight
should be placed on thebody
, not the*
. You do not need to declarefont-size: 1rem
, as that is the default value. -
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
Remove the media query, it is not needed. Replace
width
on the card withmax-width: 20rem
. -
I would remove the positioning and transform properties on
.attribution
.
0@Benjihunt97Posted 6 months ago@Islandstone89 thanks for your comment. I didn't use a main tag as this is a small 1 component challenge. Also I did reset styling below the root. I prefer to add my custom styles at the start then have my prefix styling.
Also I add the font-size in the * to target everything including the h1-h6 tags so I can full control over the sizes, same for the font-weight. I got the idea as I use tailwind css.
Also which browser did you view it in mobile for as it's been working fine for me. On chrome and Firefox.
0@Islandstone89Posted 6 months ago@Benjihunt97 Always use a
<main>
element when you have anything besides<header>
or<footer>
:)Remember to add
max-width: 100%
on images as part of your CSS Reset - the max-width prevents it from overflowing its container.I don't use Tailwind, so I can't comment on that.
I usually like to add some padding on the body for components like these. I haven't checked your page in mobile.
All the best :)
0@Benjihunt97Posted 2 months ago@Islandstone89 its good practice to have main yes, but for smaller container components not so much, also the .hero-img has the width 100% which is perfectly fine and works.
Everybody has there own way of managing there css files, that's why we have comments on them :)
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