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

Tailwind, React

@LonelyBuddy

Desktop design screenshot for the Suite landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


In this challenge:

  • I used the CSS clamp function for the first time and the effect is amazing.
  • I learned so much about tailwind, but I feel I like Sass more? Maybe I just need to get used to using tailwind.
  • I practiced making reusable components like the Button and Logo components.
  • I also split up the big components into many small components.

Community feedback

Wendy 1,970

@wendyhamel

Posted

@LonelyBuddy Cool effect with clamp! I think i would have solved that with an SVG.

I noticed you used a lot of 'custom' classes in your project. The power of Tailwind.css lies primarily in the utility classes. For example: you use text-[18px] a few times in your project. You could specify a text-.. class name in the tailwind config and use that in your project. That way, if you decide to make it 1rem instead of 18px, you can do this in one place and have it changed in your whole project without having to find and replace all instances.

I like tailwind a lot. I work a lot faster and I don't waste time thinking of names for my classes!

Have fun coding!

Marked as helpful

1

@LonelyBuddy

Posted

@wendyhamel Thanks, Wendy! WOW, I didn't know you could solve that with SVG! I'm going Learn how to make SVG myself.

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