Stats Preview

Community feedback

• 

  Yefree Valdez•840

  @yefreescodingPosted over 1 year ago

  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!!

  Marked as helpful

  2

  ---

  

  Anosha Sohail•200

  @AnoshaSohailPosted over 1 year ago

  @yefreescoding hey thanks for your remarks plus very useful tip I'll defiantly try it .

  0
• Account deleted

  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! 💻

  Marked as helpful

  1