almost pixel perfect Four card feature section with clean HTML and CSS
Design comparison
Community feedback
- @grace-snowPosted about 3 years ago
Hello
I recommend refactoring this to use css grid. That’s what the challenge is designed to practice and you’re missing out by not leveraging that , having to bloat your markup in the process.
Overall it looks great. You’re not far off. But there are still html issues that you need to be nailing every time before moving on
- how and in this case when to write alt descriptions on images
- heading semantics on this. What you have as
title-one
should be part of the h1 tag on this. Both lines are part of the Same meaningful element - they get read together.
I hope that helps. Refactor these then keep going, you’re doing well
Marked as helpful1@mohsin316Posted about 3 years ago@grace-snow hey grace! ive refactored the code and it is now using CSS grid. Do check it out and let me know if this is sufficient. ive also taken a note on why we use alt text on images and ive learnt how important they are. Ive updated the alt images to be a little more descriptive. Ive also changed the markup for the header content and made it more understandable and make sense. Do check it out and let me know! thanks for the feedback.
0 - @grace-snowPosted almost 3 years ago
Well done this looks good.
In my opinion the icons on this are decorative though and do not need alt descriptions. I would have left the alt blank on these. But it’s really a personal choice, I don’t think it matters either way in this case.
Good job 👏
0
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