Stats Preview

Great work!! Really impressive. After checking your code, I've got nothing to say but props to you. You wrote a well structure, semantic HTML code. And the styles are spot on. This solution for the image 🤌, let me really impressive:

<picture>
  <source srcset="./images/image-header-desktop.jpg" media="(min-width: 1000px)">
  <img src="./images/image-header-mobile.jpg" alt="">
</picture>

I can give you a great tip when you're using grid, to make your design responsive without the need of media queries.

• Use this line of code in your main container:

.main_container {
    /* This line of code is like magic 🪄 */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr));
    text-align: left;
}

• You can adjust the size of each column changing the 20em value.

I have to say that your solution is one of the best solutions I've seen so far, keep it up!!

Hey there! 👋

Congratulations on completing the challenge! 🎉

Here are some tips to help improve your code:

• To improve code maintainability, readability, and to prevent potential issues, it is best to keep CSS selectors as simple and non-nested as possible. For these purposes you can use different methodologies for example BEM. Your code would look something like this HTML, SCSS:

.card {
  &__image {}
  &__content {}
  &__title {}
  &__desc {}

  @media (min-width: 768px) {
    &__image {}
    &__content {}
    &__title {}
    &__desc {}
  }
}

• It is advisable not to use "!important" in your CSS code

If you have any questions or need further clarification, please don't hesitate to reach out to me.

Happy coding! 💻