Stats Preview with BEM

Community feedback

• 

  Shahin Aliyarli•680

  @sliyarliPosted about 1 year ago

  Sure, let's provide feedback on @ClaudioAmareno's code:

  1 - HTML Structure: The HTML structure is well-organized and semantic, using appropriate tags for the content.

  2 - CSS Styling: Your CSS is well-structured and commented, making it easy to understand. Good job on using CSS variables for colors and font families; this enhances maintainability.

  3 - Responsiveness: You have implemented responsive design using media queries, which is great. It ensures your site adapts well to different screen sizes. However, I noticed a minor issue in your CSS: in the .card__img class, you have a background color set. While this doesn't affect the layout, it might be unintentional.

  4 - Centering: You mentioned concerns about centering elements. Overall, your elements are well-centered, especially the text within the card. However, when the screen width increases beyond 992px (desktop view), the text alignment shifts to the left. This might be intentional, but if you want to center-align it in this view as well, you can add text-align: center; to the .card__text class within the appropriate media query.

  5 - Images: You're using two images for different screen sizes, which is a good practice for performance. Just make sure you optimize the images for the web to reduce load times.

  6 - Accessibility: Consider adding alternative text (alt tags) to your images for better accessibility. This helps screen readers and users with disabilities understand the content.

  7 - Spacing: The spacing and padding within your card are consistent and visually appealing. Good use of white space.

  8 - Font Size: Font sizes are well-adjusted for different screen sizes through media queries, ensuring readability.

  9 - Typography: Your choice of fonts (Inter and Lexend Deca) complements the design and is legible.

  10 - Colors: The color scheme is aesthetically pleasing and maintains good contrast for readability. The use of HSL values is a good approach for maintaining consistent colors while adjusting shades.

  Overall, you've done an excellent job in creating a responsive and visually appealing card component. Keep up the good work! If you have any further questions or need additional assistance, feel free to ask.

  0