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

P

@delroscol98

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Michael 40

@michael-schlueter

Posted

Hey there, good job on the challenge! I really like how you used CSS variables for the different colors and gradients. It's also very impressive that you got this layout working using positioned layout.

I have a couple of suggestions about your project that may interest you:

The desktop and mobile versions of your site look great. However while transitioning between the desktop and mobile view the content of the site begins to look a little squished and things start to break. It's rather tricky to make a site fully responsive for all screen sizes using fixed widths and heights in combination with Positioned layout. You may want to check out CSS Grid which can help in terms of responsiveness of the layout and it seems to be a good approach for this particular project.

You may also want to highlight the button once it's hovered of focused by the user. Especially keyboard users would benefit from an indicator once the button is in focus.

I hope you find those suggestions helpful. All in all terrific job!

Happy coding!

0
Quang 350

@progressive-newbie263

Posted

Great job chief!

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