Skip to content
Submitted over 1 year ago

Blog Preview card

accessibility
parkerrn9•210
@parkerrn9
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • jgambard•340
    @Tripouille

    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

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