Submitted 13 days ago

Used CSS Grid for layout, media queries for mobile layout styles

Srijan Manandhar• 150

@srijanss

Preview site View code

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I got to learn about

CSS grid layout
media queries
background-* properties
hover states on the element

What challenges did you encounter, and how did you overcome them?

It was challenge to match the blog image in the mobile layout. Mobile design was showing the scaled version of the image. Then we used background-image to fix that issue.

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

does my work statisfy the accessibility guideline
use of pseudo states - is this the correct way to use it

Community feedback

Viktoriia• 50

@VBasko

Posted 13 days ago

Since you have one-dimensional layout (vertical), it'll be better to use just flex instead of grid.

Also you can use semantic HTML tags like <article> for .blog-preview-card, <img> for .blog-image (with alt attribute for better accessibility), <time> (with datetime attribute) for .publish-date, <figure> + <figcaprion> for .author.

This solution could be done without pseudo-elements and media queries. To fit the image just set object-fit

Try to leave the next solution as simple as possible and I highly reccomend you to learn about mobile-first technique and to practice it 😊

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