Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Finally can use BEM approach but i think it's not perfect enough, and i will improve for the next challenge.
What challenges did you encounter, and how did you overcome them?About layouting, it's difficult for the first time. But i search on internet how to use selector in CSS and many more.
What specific areas of your project would you like help with?- HTML semantic code.
- Naming convention for class in CSS.
Community feedback
- @MikDra1Posted 3 months ago
If you want to learn about naming conventions in CSS I encourage you to learn BEM. If you don't know about it here is a VIDEO that might help.
And as for semantic HTML code here are some tips:
- Use HTML5 Elements: Replace generic <div> tags with <section>, <article>, or <footer> where appropriate.
- Use <figure> and <figcaption>: Wrap images in <figure> and add <figcaption> for captions.
- ARIA Roles: Add ARIA roles like role="main" for better accessibility.
- Semantic Table Structure: Use <thead> and <tbody> in tables for better structure.
- Reduce Redundant Classes: Minimize unnecessary classes to simplify CSS.
- Consistent Heading Levels: Ensure heading levels (<h1>, <h2>, etc.) are sequential and logical.
- Accessibility: Add alt text for images and ensure color contrast meets accessibility standards.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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