3 Way Column Preview Card with React and Tailwind
Design comparison
Solution retrospective
First Project using Tailwind CSS. Could not use a color variable with tailwind, so had to fall back on the style attribute.
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there π. Good job on completing the challenge !
I have some feedback for you if you want to improve your code.
-
For the colors, in your tailwind.config.js file you can define your own colors using the Tailwind CSS syntax:
module.exports = { theme: { extend: { // Add the colors key colors: { // Configure your color theme here primary: '#1fb6ff', } } } }
And style your components using Tailwind classes:
<div className="bg-primary">Hello World!</div>
HTML π:
- You should use only one
<h1>
tag per page. The<h1>
tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires thatSedans
,SUVs
andLuxury
are headings, but you can use the<h2>
tag instead of the<h1>
tag. You can read more about this here π.
- You should use the
<a>
tag instead of the<button>
tag because theLearn More
button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here π.
- Not all images should have alt text. 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:
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0@MarkusB2611Posted almost 2 years ago@MelvinAguilar thank you very much. I changed everything you mentioned in the HTML part.
I know you can define colors in the tailwind config. But since the color for the respective column is coming out of a dataset in my case, I don't feel I want to do that here.
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