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

Imran 150

@xdevimran

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


Feedback is always welcome. feel free to share your thoughts thanks.

Community feedback

@mikestopcontinues

Posted

Hey, this is very nice work.

I like that you're getting some experience with tailwind. It's very popular these days. That said—consider it a stepping stone to learning to write good pure CSS. CSS libraries only last a few years each, and your career will be much longer than that.

Also, designers can be very picky about their work. In the workplace, I would give this one more pass to make sure the width and the purple-blue gradient was the same as they asked for. (I'm sure you know this, but you can use a color picker to grab the top and the bottom gradient colors to create your linear-gradient() css style.)

Lastly, I would think about making your HTML more semantic:

  • This widget would likely be part of a larger page. That makes it a section.
  • Similarly, we generally only see one h1 per page, so it would be best if this widget started with an h2. You also want to make sure that all other headings are subservient to the main heading of your widget. So all of the others should be h3 or below.
  • Third, your results are really more of a list. Rather than use headings, consider using ul and li to indicate they are a group, and that the elements are "parallel" to one another.

You're destine for great things.

Marked as helpful

0

Imran 150

@xdevimran

Posted

@mikestopcontinues Thank you so much for your kind words. I'm also planning to learn more deep CSS and the next time, I'll focus on the semantic HTML. Thanks again, have a good day @Mike

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