Submitted about 2 years ago

Result Summary Component using Tailwind CSS

tailwind-css

Ricky Reza•40

@rickyreza12

A solution to the Results summary component challenge

Preview Code

Solution retrospective

Thank you for taking the time to check out my frontend design using Tailwind CSS.

I would love to hear your thoughts on the design, and any feedback or alternative solutions you might have for the result summary. Your input will help me improve my skills as a developer and create even better designs in the future. So please feel free to leave a comment or suggestion, and I'll be sure to take them into consideration.

Thank you again for your time and feedback!

Code

Please log in to post a comment

Community feedback

Piyush Paliwal•40
@piyushpaliwal
Posted about 2 years ago
Great work there! I was just going through your code and here are a few observations I have.
- Used color hex codes directly inline (ex - Line 47).
  
  This will make your code less maintenable, instead you can define a tailwind.config object on your script tag and add all colors there so that you can reference them back in your code. See here for details
- While utilizing Tailwind, it is one of the best practices to have classes sorted out as recommended by the devs, see here. As of now it is difficult to find a class in your project because of the order.
Marked as helpful
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- You don't have to use srcset in the img tag while already using src property.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
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