Blog Card Using Html and Css

Solution retrospective
I now feel confident in my ability to manipulate various types of images and text using HTML and CSS. Additionally, I believe it's important for me to optimize my CSS code for efficiency.
What challenges did you encounter, and how did you overcome them?In this challenge, SVG is utilized, and initially, I wasn't sure how to round it. After some research, I decided to use an image tag and rounded it using a CSS property."
What specific areas of your project would you like help with?This challenge will be beneficial for me in the future, especially when I encounter situations where I need to style cards, text, or images.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Islandstone89
HTML:
-
The main image is mostly illustrative, so give it an empty alt text so screen readers will ignore it:
alt=""
. -
"Learning" is not a
<button>
, but a<p>
. Buttons are used to trigger an action. -
Use the
<time>
element for the date, like this:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. Read more about the<time>
tag here. -
As this is a blog card, the heading should have a link inside.
-
The alt text should be written naturally, without using
-
between the words. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image avatar" would be read like this: "image, image avatar". I would write something like "Headshot of Gary Hooper". -
.attribution
should be a<footer>
, and you should use<p>
for the text inside.
CSS:
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
Add
display: inline-block
on.blog-bedge
, so it doesn't stretch the full width. -
Remove the width and height on the top image.
-
Remove
max-width
on.blog-desc
. -
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.
Marked as helpful -
- @MarijaPaunovic
Great job!
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