Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component with Tailwind CSS

Talisson 190

@talissoncosta

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Tailwind's media query syntax still doesn't satisfy me. In my opinion, it's a bit confusing, but it could be that I'm not using it correctly or I'm not used to it yet.

Any tip is really welcome.

Next project I am thinking about taking accessibility into consideration, so if you have any tip related is really welcome.

Community feedback

Hikmah 1,070

@Hikmahx

Posted

Hi Talisson 👋, Nice work there! Tailwind can be a bit overwhelming at first, especially as a newbie. I remember not wanting to use it but because I kept seeing it everywhere, I decided to give it a try. And I don't regret it. Almost all my projects use Tailwind and I'll continue to use it in the future. That being said, I have some tips for you:

  • I think it'll be better to add some space at the top and bottom of the card in smaller devices, perhaps of the tailwind class py-4 in the div immediately after the main.
  • The title should be smaller on mobile devices, like text-3xl, and prefix the class text-5xl with md: (tablet) or lg: (desktop).
  • For checking accessibility, you can install the Chrome extension Wave. I recently discovered this and it's very useful. Just right-click on the page after installing Wave and you can wave the page.

Hope this helps you

Marked as helpful

1

Talisson 190

@talissoncosta

Posted

Thanks for the helpful tips @Hikmahx Yep, I was feeling the same. It seemed too verbose to me.. but as long as you are getting used to it.. classes just comes in your mind...

I'll have a look on that.. Thanks so much!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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