Blog preview

This a great solution to the challenge.

It is clean, responsive to different screen sizes and does not differ to the design.

The hardest part for me too is planning analysing and visualising your solution especially with grid and flex.

As you said, good structure makes it easier to understand, and that is evident in your code using main, article and section rather than all div to section your code along with clear class names.

Look forward to seeing your other solutions.

Great job! You're project is nicely organized, and your code is easy to read.

For this project, I designed for desktop first and then wrote a media query to adjust the card width and font sizes for mobile. When I examined the Figma files, these were the only values that I saw were different on desktop and mobile. I chose the screenwidth of 576 based on the breakpoints used in Bootstrap.

Here is my code.

@media (width < 576px) {
  body {
    font-size: 14px;
  }
  .card {
    width: 327px;
  }
  .card-category,
  .card-publishdate,
  .card-author {
    font-size: 12px;
  }

  .card-title {
    font-size: 20px;
  }
}

Here is the link to my repository: https://github.com/Sherrisa/blog-preview-card

Thank you Sherrisa (what a beautiful name), very interesting to see how you can approach the same challenge from very different angles!