Submitted about 2 years ago

result summary

@yungjosh234

A solution to the Results summary component challenge

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.

Code

Please log in to post a comment

Community feedback

hitmorecode•7,560
@hitmorecode
Posted about 2 years ago
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
nirglus•270
@nirglus
Posted about 2 years ago
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

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