Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution Article preview component using CSS Grid and Flexbox

@emanuelcba94

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions on how I can improve are welcome! Thank you!

Community feedback

@asbhogal

Posted

Hi Emanuel,

Great work! The design matches the mockups well, your logic is clean and it's great to see grid used for this. Just a few pointers I wanted to mention:

  • Always have your font-size in rem for accessibility purposes. This article by freeCodeCamp explains it in detail Link
  • Locally host your Google Fonts for privacy and performance reasons. Here's a good practical video showing how to do this Link
  • At viewport widths <= 330px, the parent container is touching the browser boundary. You could add some padding or margin just to give it some white/breathing space

Hope this helps!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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