Skip to content
Submitted about 1 year ago

Stats preview card component using HTML and CSS

Roraima Lugo González•510
@roraima1986
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This challenge was not that difficult, but as the screen shrinks, the aesthetics are lost. I established the mobile design starting at 768px to adapt it to the image requested in the challenge, which was 375px. In short, I feel that it is not my best work.

Community feedback

  • Petrit Nuredini•2,860
    @petritnurediniPosted 10 months ago

    Congratulations on completing your Stats Preview Card project! Here are some recommendations to enhance your code:

    1. Semantic HTML: Use semantic elements like <header>, <main>, <footer>, and <section> for better accessibility and structure.
    2. CSS Variables: Utilize CSS variables for colors, fonts, and other repetitive values to make your code more maintainable and easier to update.
    3. Responsive Design: Continue to refine your design for smaller screen sizes by testing and optimizing the layout and typography.
    4. Accessibility: Ensure your website is accessible to all users by adding appropriate ARIA attributes and testing with screen readers.

    Keep up the great work! Consistent practice and learning will help you grow as a developer.

    For further learning, check out these resources:

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord