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 page

Alex 3,130

@Alex-Archer-I

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


What are you most proud of, and what would you do differently next time?

I decided to practice the tailwind for this project. I'm proud that I practiced and learned something new. But I have a mixed feelings about tailwinds. But that's another story.

What challenges did you encounter, and how did you overcome them?

Tailwind documentation is quite easy, so it was more a hitch than challenge, but nothing more fit in this category.

What specific areas of your project would you like help with?

Open for any comments, as always.

Community feedback

@turtlethom

Posted

Hey Alex!

Very impressed with your design! I haven't utilized Tailwind yet, but it's amazing how concise you've made your code base.

  • Your code is very readable (DRY).

Personally haven't used Tailwind because I like defining my own classes, but it seems very efficient for applying quick, reusable styles. Definitely looking into utilizing it in the future, especially for more urgent projects.

Two questions I have are:

  1. For the preset style values provided for this project (colors, font-sizes, etc..), did you use any CSS variables to store these values or did Tailwind provide everything you needed to complete the project?
  2. I saw you have mixed feelings about Tailwind. What are some personal pros and cons you have about it?

Overall, you did awesome :)

Marked as helpful

1

Alex 3,130

@Alex-Archer-I

Posted

@turtlethom

Hey there =)

Thanks a lot for your words =) Yeah, it was my first (and last, at least for while=)) using of Tailwind. Don't really like it.

Tailwind provides most basic values for sizes (like 0.5rem, 0.75rem, 1rem etc.) and colors and have a corresponding classes for it. But if you need something outside the basics (which happens quite often) you have to add it into the tailwind configuration file.

Well, it seemed to me as I'm doing the double work - I determine which styles to apply and than I search for their classes in the Tailwind docs. Guess it's a matter of practice, and those who masters Tailwind do it quite fast, but still. Than I have a feeling that such longs classes would be very inconvenient in big projects.

So I think that Tailwind could be good for the small components or maybe as an addition to big project. But maybe that just a lack of experience =)

1

@turtlethom

Posted

@Alex-Archer-I

Definitely agree with all your points. I love the freedom that comes with creating your own CSS classes and just overall having more control over the design process. Tailwind seems a bit restrictive for my taste haha.

  • Memorizing a bunch of Tailwind classes seems quite daunting to me, as I'm still trying to improve on the basics of CSS.
  • I heard Tailwind configurations were a PAIN.

Although, I feel like it can definitely be useful for fast development in large projects or just to have as another tool in your developer arsenal for niche projects. The more you know!

Interesting input, thanks for the insightful response! Great job nonetheless :)

1
Alex 3,130

@Alex-Archer-I

Posted

@turtlethom

It's a good idea in general - to get solid basis first and than move to the libraries, frameworks and stuff. It could be said about CSS, JS, HTML and much more =)

And yep, hate Tailwind configurations =)

P.S. it' s a weird feeling to keep a conversation in two comments branches at the same time. Multiverse vibes =)

1

@turtlethom

Posted

@Alex-Archer-I Hahaha I feel you my head is spinning from going back and forth.

It's great to meet you friend. Let's continue to learn more together :)

0
Uche Ofatu 260

@Macnelson9

Posted

This is really cool man. I don't have much idea on tailwind CSS and all that but this looks really cool.

1

Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

Thanks! Since it's a quite simple project, I decided that it's a good chance to get in touch with tailwind. But I missed the design a bit =)

1
Nitish 130

@Niti60

Posted

@Alex-Archer-I Nice i have also done this project but yours look great!

1
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Proud of you man. Keep going. You're encouraging me!

1
Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

Thanks again!

That's another reason to move forward =)

1
Alex 3,130

@Alex-Archer-I

Posted

@Niti60 Thank you =)

0
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I You're welcome

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