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

JonDoesFrontEndβ€’ 30

@JonDoesFrontEnd

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


What are you most proud of, and what would you do differently next time?

Once again, I'm proud that I finished a solution - even if it's not the cleanest. Also, I've never used gradients before and that was a pretty cool new addition to the toolbox :)

What challenges did you encounter, and how did you overcome them?

I saw that even a simple project like this can quickly grow in complexity if you don't plan your solution properly. I've tried to refactor to clean it up a bit.

What specific areas of your project would you like help with?

HTML/CSS best practices! Right now I feel like my solution is cluttered with a million div/span tags. When I took a html-basics course the teacher stressed that we only should use div tags when we really needed them, since they are devoid of any semantic meaning. But I'm not sure there's a good way to do this otherwise?

Community feedback

MikDra1β€’ 6,030

@MikDra1

Posted

  • Use Semantic HTML: Prefer semantic elements like header, nav, article, section, and footer over generic div and span tags.
  • Minimize div Usage: Only use div tags when no suitable semantic element is available for grouping content.
  • Improve Accessibility and SEO: Semantic tags provide meaning, making your content more accessible and SEO-friendly.
  • Effective CSS Structure: Use CSS classes and IDs to reduce the need for unnecessary HTML wrappers.
  • Avoid Over-Nesting: Keep your HTML clean by targeting specific elements with CSS, preventing deep and complex nesting.
  • Maintainability: Clean, semantic code is easier to understand, maintain, and debug.

You can also use the BEM methodology for class names. Here is a VIDEO about it.

Hope you found this comment helpful πŸ’—

Good job and keep going πŸ˜πŸ˜ŠπŸ˜‰

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