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

Responsive Result Summary

@JS-Law

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 one took a lot out of me. There were many things I would do differently going forward. First being that I will not mix responsive sizing measurements with absolute measurements. That alone made this a nightmare to finish but regardless, I'm proud of what I brought to the table and I'm even prouder of what I'll take away from it.

The next project will be approached differently from the ground up.

Community feedback

P

@ryanbradley-webdev

Posted

You should definitely be proud of this, it looks great! Only a couple things I noticed, first is the use of semantic HTML. The use of "main" and "footer" elements will make your application more accessible and therefore better performing for search engines. That's obviously not a concern for this project, but it'll help in the future, plus you can cut back on applying classes to containers and make the code a bit more readable, although your use of comments helps a lot!

Second, I ran through your code and noticed a lot of commented-out CSS. I'd recommend removing that, especially if you're planning on using this as a portfolio project. As a side note, I also saw a lot of padding-top and padding-bottom that were the same value. If you want to help consolidate those, you can use the padding-block property to combine them (padding-inline does the same for left and right, and the same rules apply to margins)!

All in all, great job!

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