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

Yung Josh 20

@yungjosh234

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


This project was my very first challenge as a beginner which took me about 4 hours but by God's grace I found it amusing and quite interesting and now i'm more curious to find out how the rest challenges will be like. Thank you.

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. Just a few tips

  • If you have an element with a class or id, when applying css you can target the class or id of that element directly. .section1 .result-title you can remove .section1 and just target .result-title directly. What you are doing is handy when you have elements without a class or id for example:
<section class="section1">
    <p>something</p>
</section>
<section class="section2">
    <p>something</p>
</section>

If you want to target only the <p> inside .section1 then you can do it like this .section1 p {}

  • If you add min-height: 100vh; on the body and apply flexbox, you can remove the margin on the container. Flexbox will place the card in the middle of the page. This is much better for responsiveness of the page.

  • When structuring your html, try to make a good habit of doing like this

<body>
  <main>
    /* everything goes in here */
  </main>
</body>

Marked as helpful

0
nirglus 270

@nirglus

Posted

Hey, congratulations on you first challenge! I have a few tips to achive closer results:

Firstly, I recommend you to read about linear-gradient property. With the linear gradiate you can achive the same backgrounds of the left side and the score circle. You also have the proper colors at the style-guide file.

Secondly, try to add transparency to the summary blocks by using rgba colors. For example: rgba(255, 87, 87, 0.06) the forth parameter sets the transparency. It goes from 0 to 1, try to play it to match the perfect color.

Keep up the work and good luck!

Marked as helpful

0

Yung Josh 20

@yungjosh234

Posted

thank you very much for this tip@nirglus

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