Skip to content
Submitted 4 months ago

Results Summary Component with Vanilla HTML & CSS

Kamal Redzwan•210
@kmlrdzwn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • Getting used to centering trick using 2 line of CSS display: grid; place-content: center;
  • Learned how grid structure works in more detail by applying to this challenge
  • Utility classes for changing the text color and background color of the result component
  • Add CSS var that are repeated more in the code for easy access and changing them in the future
What challenges did you encounter, and how did you overcome them?
  • Learned how grid structure with the default stretch content on small screen.
  • Learned how to make 2 columns using grid on bigger screens using grid-template-column
What specific areas of your project would you like help with?
  • Using data.json to dynamically populate the content. (Will work on this later)

Community feedback

Please log in to post a comment

Log in with GitHub

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