@Islandstone89
Posted
Well done, Victor.
A few suggestions:
HTML:
-
Don't use "image" in the alt text, as screen readers announce that by default.
-
Use the
<time>element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>. -
The link should be inside the heading, not the other way around.
CSS:
-
Move
font-familytobody. -
Add around
1remofpaddingon thebody, so the card doesn't touch the edges on small screens. -
On the
body, changeheighttomin-height- this way, the content will not get cut off if it grows beneath the viewport. -
max-widthon card should be in rem. -
Remove
max-heighton the top image.
Marked as helpful
@VFGarciaDev
Posted
@Islandstone89, Thank you for all your suggestions. I found everything very interesting and helpful, including the article about font-size. I'll try to implement more of your suggestions. I just have two questions about the CSS suggestions.
- Instead of rem, could I use '%' when assigning the 'max-width' on the card?
- What should I do to prevent the image of remaining on its original size if not using max-height/width?
@Islandstone89
Posted
@VFGarciaDev Glad to help :)
-
No, use
remformax-width. -
To prevent images from spilling out of their container, it is common to include the following in a CSS Reset, which should be added at the beginning of every stylesheet:
img {
display: block;
max-width: 100%;
}
Marked as helpful
