@Tripouille
Posted
Hi there,
Great job! I just wanted to offer a few friendly suggestions:
Adding width and height attributes to the img tag can really help prevent layout shifts, making for a smoother user experience. Also, since you've wrapped the img in a picture tag, adding width or pixel density descriptors to the sources tag would be beneficial.
<picture>
<source srcset="logo.png, logo-1.5x.png 1.5x" />
<img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>
Using the time tag for the published date adds a nice touch of semantic clarity.
<time datetime="2023-12-21">Published 21 Dec 2023</time>
Consider using the figcaption tag for the caption associated with the figure instead of p. It helps with proper structuring.
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure>
Additionally, it might be worth considering steering away from using pixels for font sizes. This small adjustment can greatly improve accessibility for all users.
Lastly, using CSS variables for colors can make your code more readable and maintainable.
I hope this will be helpful, keep up the good work!
Marked as helpful
