Submitted about 2 years ago
3 Column Preview Card Component Solution
@marcelkuczynski
Design comparison
SolutionDesign
Solution retrospective
This is my Solution for the 3 column preview card component using Vanilla CSS and Flexbox.
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @marcelkuczynski ๐, good job completing this challenge, and welcome to the Frontend Mentor Community! ๐
I have some suggestions you might consider to improve your code:
- Use the
<main>
tag to wrap all the main content in your solution instead of using<div class="container">
.
- Figure elements (
<figure>
) should only be used when captions are required with<figcaption>
, you can directly use the image tag in this solution.
- The
<h1>
element is the main heading on a web page. There should only be one<h1>
tag per page. The HTML Section Heading elements (Reference). This case requires thatSUVS
,SEDANS
, andLUXURY
be<h2>
elements.
- Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding
aria-hidden="true"
and leaving its alt attribute empty:
<img src="./images/icon-sedans.svg" alt aria-hidden="true"> <img src="./images/icon-suvs.svg" alt aria-hidden="true" > <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
Above all, the project is done well๐. I hope those tips will help you! ๐
Good job, and happy coding! ๐
Marked as helpful1 - Use the
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