Design comparison
Solution retrospective
Would like to get feedback especially on:
- Usage of semantic elements
- Responsiveness
- Any CSS tricks I could've used for the overlays on hover
Community feedback
- Account deleted
answer to your question Usage of semantic elements
the challenge you completed is an a component so basically when it comes to the component avoid using <h1></h1> why? because h1 heading are only for Hero section where the introduction of a website is started and if ever you used the h1 heading in the components the SEO also known as (Popularity of your website which is based on your semantics elements of your HTML5) it will be affected so the heading you used in the .heading-primary change that into h2 because when it comes to components title h2 are the most suitable element.
0 - @igafshellPosted almost 2 years ago
Hey Adithya!👋
Congrats on your solution! 🎉🎉
It's very impressive how you made it look exactly like the design! However, try to customize your next projects with elements of your own, like animations, glow effects, etc.
- Avoid using
width
, and instead opt formin-width
ormax-width
to ensure responsiveness ( change thewidth: 100%
to `min-width: 100vh' in the body selector ) - Try reducing the number of containers - you don't need the
article
element - Semantics: everything is perfect; instead of the
main
you could've used a div, because it's just a component, not a whole page
That's about all, have a great day!
Happy coding!
0 - Avoid using
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