Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive results summary component with tailwind css

@JerryJeager

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@0xabdul

Posted

Hello there well congrats on completing the Results summary component🤩

  • A Little bit suggestions for improve your code
  • In Html 🏷️ :
  • Heading ⚙️ :
  • in fact using the header tag line by line or sequence way
  • Ex :
<h1> Your results </h1>
<h2> Great </h2>
<p> 
You scored higher than 65% 
of the people who have
 taken these tests.
</p>
  • The Main landmark♦️
  • th html page should be contained one main landmark so fix them
  • to clear the Accessibility reports using semantic elements or non semantic elements
  • for easy way to clear the all Accessibility reports using non - semantic elements Ex : <div> , <span>
  • let's try
  • Ex :
<body>
<div class="container" role="main">
//Html code here 🏷️
</div>
</body>
  • OR
  • using semantic elements Ex : <aside> <section> <main> <nav> <header> < footer>
  • Ex :
<body>
        <header>company logo header name...</header>
        <main> the main content here</main>
        <footer>@Copy right Here</footer>
    </body>
</html>
  • In Css 🎨 :
  • your results summary card component is not center aligning so fix them
body {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
max-width:100%;
}
  • I Hope you find the solution and it's useful for you 😀
  • Happy CodingAmadi Jerry

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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