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

Results Summary Component

Nicole 20

@niko-niko-nom

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 some trouble figuring out how to space the contents of the colored divs on the right side (in desktop view, bottom in mobile view) evenly, so it looks a little messy. If anyone sees this and knows how you're supposed to do that I'm all ears!

Community feedback

Bryan Li 3,550

@Zy8712

Posted

Your site looks pretty good. I think a better way you could've organized the scores on the right side of the page is using flexbox (instead of the right and left properties you used). Other things I think I should mention is:

  • you should included a <main> tag to wrap around your page contents for accessbility purposes
  • the <h1> tag should be used for mainly the most important text on the page (e.g. the title of the page, which in this case is "Your result"). The headers have default font sizes which can be changed in css using the font-size property
  • you should also use flex box to center your card (instead of the top: 150px you have right now), it could look something like this:
body{
 width: 100vw;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

Besides that I'd say it looks pretty good for your first challenge. Nice work 👍

Marked as helpful

1

Nicole 20

@niko-niko-nom

Posted

@Zy8712

Thank you for the feedback, I genuinely learned a lot from it! :)

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