Design comparison
Solution retrospective
Hello there,
worked first time with grid as I was a little scared to start with something new. I like the workflow and the usage of two axis. I can improve more by using repeat()
for my templates but I am free for suggestions for my current project.
I worked with ACCESSIBILITY & BEM
Community feedback
- @Mohammad-MoneerPosted 15 days ago
Hello there,
Great work on your solution! I particularly appreciated your use of the
<hgroup>
element to group the subheading and heading (<h1>
). This is a thoughtful choice that enhances the structure and semantics of the HTML in this context.Here are a few suggestions to further improve your code:
-
Accessibility Enhancements:
I noticed that thealt
attributes for the icon images are currently left empty. Providing a brief description for each icon would improve accessibility, allowing screen readers to convey meaningful information to visually impaired users. For example, you could use descriptions like "Supervisor Icon," "Team Builder Icon," etc. -
Refactoring Repeated Styles:
There are some repeated CSS styles for card headings and paragraphs, such as color and font size. To simplify your code and make it more maintainable, consider consolidating these styles into shared classes. For instance, instead of defining individual classes like.firstcard__h--color
,.secondcard__h--color
, etc., you could use a single class,.card__h--color
, and apply it to all cards. This would look something like:.card__h--color { color: var(--very-dark-blue); } .card__h--size { font-size: 1.1rem; } .card__p--color { color: var(--grayish-blue); } .card__p--size { font-size: 0.8rem; }
This approach keeps your code cleaner and easier to modify in the future.
Overall, your solution demonstrates clear attention to detail and effective use of semantic HTML elements. Well done! I hope you find these suggestions helpful.
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