Stats preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Consider adopting a Mobile First approach in your next project. This means designing for the smallest screens first and then scaling up as needed. This helps to create a more user-friendly and accessible experience for all users.

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

    Example:

    <picture>
        <source media="(max-width: 950px)" srcset="images/image-header-mobile.jpg">
        <img src="images/image-header-desktop.jpg" alt="{your alt text goes here}">
    </picture>
    

  • Responsive design involves using media queries, which allow you to apply different styles based on the device's characteristics. In your solution, within the media query, you should consider adjusting the direction and width of your component. Additionally, adding a small padding to the body can prevent your component from touching the edges.

    body {
      padding: 40px;
    }
    
     @media only screen and (max-width: 950px) {
       main {
         flex-direction: column-reverse;
       }
       
       .left {
         width: auto;
         margin: 40px;
       }
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1