Submitted 11 months ago
adaptive, SCSS, hover animation, BEM, semantics
#accessibility#animation#bem#sass/scss#semantic-ui
@ksWebFront
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I would try to build everything using grids
What challenges did you encounter, and how did you overcome them?there were no difficulties
What specific areas of your project would you like help with?I don't need help with this project
Community feedback
- P@dev-ethanjohnPosted 30 days ago
Hi, your css is pretty dope with SCSS preprocessor (I haven't tried that yet). I have some few suggestions that may help:
- Try to use more semantic elements like header, article, main, and many more, try to check any that will be appropriate for this project's use case.
- For responsiveness, currently the card's image height decreases as it moves to smaller screen width. For you may check out clamp() for adaptive font-sizing, width: 100% for your images as an add-on to your existing fixed max-width. Or try to use figure element to wrap your image instead of a div, if will help semantically.
- Leverage flexbox gap property to space children inside your content instead of relying on vertical margins or even paddings.
- Some small designs you forget like border radius, title hover to yellow color, and such.
I can't put all but these suggestions hope may help!
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