Design comparison
Solution retrospective
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
- @MikDra1Posted 3 months ago
- 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
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