Skip to content
Submitted over 2 years ago

Card component with HTML and CSS.

Bea•40
@Bbeai
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

Design using HTML & CSS.

Please give me feedback.

Community feedback

  • Tesla_Ambassador•3,000
    @tesla-ambassadorPosted over 2 years ago

    Hey Bea! Congratulations on completing this wonderful challenge! It's a pretty solid solution and it's also pretty responsive. Here's a few tips:

    • To improve your layout you might want to center your div. I tried modifying your css with the browser's dev tools buy it seems that I needed to also modify your HTML. For starters, in your body, you should contain your divs within the <main> landmark and then you can remove some divs like the div with the main class because it hinders the styling from being effective. When you do that, you can apply the following properties to your <body>
    body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
   align-items: center;
}

    That will help make the layout look closer to the design.

    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    • Your heading tags should only increase by one ie when you have just used a <h1> tag, your next heading tag should be <h2> and after that <h3> and it continues like that all the way to <h6>. So they have to be in a sequential order.

    The last two points will help resolve your accessibility issues. Happy coding and keep on coding👍

    Marked as helpful
    1

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