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

Responsive blog preview card uesing grid and flexbox

@MelAnnaCode

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • 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'm glad the blog cart came out very similar to the design and doesn't jitter when changing the window size.

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

The most difficult part was catching the right proportions, such as the size of the images, the width of the spacing between each element.

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

Any suggestions on how I can improve are welcome!

Community feedback

@ljjackson

Posted

Nice work on this, on the desktop side of it you've definitely got a really good understanding of the implementation, it looks and interacts with how the design was intended. (I'm primarily a backend developer, so there may be other developers on this platform who could give you better feedback.)

The only negative I have is the responsive design,


@media only screen and (max-width: 375px) {
  html {
    font-size: 45%;
  }
}

When using devices such as the Samsung S8+ or the iPhone SE, the font-size: 45%; makes the content really hard to read, I think you could get away with removing this completely.

Marked as helpful

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