stats-preview-card-component-main

Community feedback

• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Abdelrahman Khaled,

  Congratulations on completing 🎉 your second challenge. It was a great attempt but there are some problems I did not notice within your code and design.

  1. It is ideal to take the mobile-first approach which essentially means to begin using the mobile design and recreating that design. This starts at 375px. This approach is very ideal and beneficial as it would be easier to change the elements as the screen size increases. Within your design and code, you only recreated the desktop version therefore it would be best to focus on the mobile version and then work with the desktop version through @media queries. If you are unsure of this concept, then you should research more about this through YouTube videos, articles and technical documentation.
  2. It is best practice to wrap your code within the main tag as this is semantically correct e.g. <main class="container"></main>.

  Overall, it was a great attempt and wish you success with your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Abdelrahman Khaled•280

  @Abdelrahman0KhaledPosted over 2 years ago

  @romila2003 thank you very much .. i learned media queries and will update code to <main> to the best practice ..thank you very much

  1
• 

  Trae Zeeofor•490

  @traezPosted over 2 years ago

  Well done Abdel, considering you're new. Please consider reading this article for a better understanding of media queries, It demystified the topic for me:

  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries#how_to_choose_breakpoints

  Try border radius on both item and it's container. Play around, one would work. That was my experience too.

  Marked as helpful

  0