Design comparison
Solution retrospective
hello everyone! In my solution, I used flexbox to center the block with the cards. The cards themselves are made using grid.
Community feedback
- @nelsonleonePosted almost 2 years ago
HELLO......congrats on completing this challenge .....well done π π
i just have one thing to say , It's based on the little car images. Visually , they don't send much message(for design purposes).
It would be nice to set
aria-hidden="true"
on them so screen-readers(AT) won't stress on what they are. Thereby increasing your solution accessibility rate.Hope this comment was helpful, have fun coding
Marked as helpful1@VCaramesPosted almost 2 years ago@nelsonleone
Thank you for contributing to the FEM community.
As a friendly reminder, please avoid repeating what already has been mentioned. To better improve the effectiveness of the feedbacks.
Happy Coding! πππͺ
0 - @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code:
- The βcar iconsβ in this component are purely decorative. β οΈ Their
alt tag
should be left blank and have anaria-hidden=βtrueβ
to hide them from assistive technology.
More Info:π
- The headings in your component are being used incorrectlyβ . Since the
h1
heading can only be used once β οΈ, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use anh2
heading β since it is reusable and it will give each heading the same level of importance.
- Your "buttons" were created with the incorrect element β. When the user clicks on the button they should be directed to a different part of you site. The
anchor tag
}will achieve this.
More Info:π
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! πππͺ
Marked as helpful1@VCaramesPosted almost 2 years ago- The web development process can be made easier and expedite the process π by implementing a
CSS Reset
.
Here are some examples that you can freely use:
- For improved accessibility π for your content, it is best practice to use
em
formedia-queries
. Using this unit gives users the ability to scale elements up and down, relative to a set value.
- Implement a "Mobile First" approach π± > π₯
Mobile devices are now the dominant π way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.
More Info: π
Marked as helpful1@VCaramesPosted almost 2 years ago@nelsonleone
Please read the comment that I left. It provides the answer to your question.
0@nelsonleonePosted almost 2 years ago@vcarames i meant personally , did i offend you ?
0@VCaramesPosted almost 2 years ago@nelsonleone
How did you interpret what I said?
0 - The βcar iconsβ in this component are purely decorative. β οΈ Their
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