Submitted 7 months ago

Blog Preview card

parkerrn9•210

@parkerrn9

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Exploring Figma for the first time has been a delight. It's been an enjoyable journey navigating its features and discovering its potential for collaborative design. Despite being my first experience with the platform, I found its intuitive interface and seamless functionality incredibly empowering.

What specific areas of your project would you like help with?

I'm eager to hear feedback on my designs and welcome any suggestions for improvement. Your insights and constructive criticism would be invaluable in refining my work further. Thank you in advance for your time and input!

Community feedback

jgambard•340

@TripouillePosted 7 months ago

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

Please log in to post a comment

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