Responsive Blog review card with html and css

Community feedback

• 

  Natali 👻 Grimm•1,190

  @Grimm-N

  Posted 7 months ago

  Awesome work! 👏 I really love how clean and well-structured your design is – great job so far! Here are a few suggestions to make it even better:

  1. Consider small screen sizes – Remember that some users may still have devices with a width of 320px. It’s a good idea to plan your design for these smaller screens as well. For example, you can set the width of your card to 90% or 90vw to prevent it from sticking to the edges of the viewport. This ensures a better user experience on all devices. 📱

  2. Download and use custom fonts – It’s better to download fonts and add them using @font-face in your CSS. This gives you control over font loading speed, avoids third-party service dependencies, and ensures your design stays consistent even if the external service has issues. 💡

  3. Add classes to all elements – Giving each element a class improves code readability and makes your styles reusable and scalable. It also keeps your HTML organized and avoids conflicts when styling multiple elements. Using a methodology like BEM (Block-Element-Modifier) can help create a clear and maintainable structure for your CSS. For example:

     <div class="card">
         <h2 class="card__title">Title</h2>
         <p class="card__text">Some text here</p>
     </div>
     

  4. Use relative units instead of pixels – Try using rem or em instead of px. These units scale better for responsiveness and accessibility, especially when users zoom or have different base font sizes set in their browsers. This makes your design more user-friendly and adaptive! 🌟

  Keep up the amazing work! You’re doing great! 🎉

  10

  Marked as helpful