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 results summary component with html , css, bootstrap and js

Aureline 150

@aureline12

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

lirone 320

@LironeFitoussi

Posted

Hello,

You've taken a promising step forward in implementing the Results Summary Components. I'm here to help you refine your code and build on your skills. Your dedication is evident, and with a few adjustments, your code will shine even brighter. Let's dive into some suggestions:

Structured Semantics: Your HTML structure is on the right track. Consider embracing semantic HTML elements like <header>, <section>, <article>, and <footer> for clearer organization and meaning.

CSS Harmony: You've established a foundation with CSS classes. To level up, group similar styles under comprehensive classes. For instance, condense repetitive classes for reaction, memory, verbal, and visual cards. This enhances efficiency while maintaining clarity.

Responsive Brilliance: Your media queries are commendable for responsiveness. Continue refining the layout for various screen sizes to ensure content remains legible and well-arranged.

Styling Confidence: Your button styling is well executed. As a suggestion, you could use a consistent naming pattern like .continue-btn for greater clarity.

Colors Made Easy: You've embraced color variables, a mark of thoughtful coding. Extending this practice throughout your CSS will contribute to easier maintenance down the road.

Comments for Communication: Introducing comments can provide context to both yourself and other developers. Adding comments to clarify specific sections or classes can make your code more approachable.

You're on a promising path, Lirone! Coding is an evolving journey, and your willingness to learn and adapt is truly inspiring. Embrace these suggestions as opportunities for growth, and remember that each step you take contributes to your development as a skilled developer. Keep coding, keep exploring, and keep soaring!

Warm regards, Lirone Fitoussi

Marked as helpful

0

Aureline 150

@aureline12

Posted

@LironeFitoussi thanks for the suggestions, I'll put them into practice.

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