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

Result Summary Component Solution (Not responsive; Only for desktop)

h415232 110

@h415232

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a hard time creating the summary cards (the one with colors). Can you suggest a way to make the alignment of the SVG image and the text better? I am admittedly using hard-coded pixel values, but I think using CSS Flex box, but I am new to CSS Flex box so I was not able to make it as dynamic as possible.

Any feedback will be helpful, thanks! :)

Community feedback

@0xabdul

Posted

Hey there Congratulations on finishing the Result summary card component 🤩

  • In Html : 🏷️
  • the html Document should be contained only one main landmarks ✅
  • The main landmarks..?
  • A main landmarkidentifies the primary content of the page
  • If a page includes more than one main landmark, each should have a unique label.
  • for easy way to using the non- semantic elements clear the all Accessibility reports👍
  • EX :
<body>
<div class="main" role="main">
//Whole html code here 🏷️
</div>
</body>
  • in fact using the header tag by ordering or sequence Ex : <h1> , <h2> , <h3> , <h4><h5> , <h6>
  • please Avoid ☝️
<h3>great  </h3>
<h1>summary  </h1>
<h4> </h4>
<h2>great  </h2>
  • please do👍
<h1>your results </h1>
<h2>great </h2>
<h3>summary </h3>
<h4> 100</h4>
  • the Accessibility reports clear..
  • In Css 🎨
  • in this result summary card is not center align so fix the problem
  • EX :
body {
display : flex;
align-items : center;
justify-content : center;
height : 100vh;
overflow-x : hidden;
}
  • Happy Code ✨

Marked as helpful

1

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