Frontend Mentor | Huddle LP using only TailwindCSS. It is a first use for these projects coding challenge solution

Solution retrospective

This is my 2nd submission for this component. For the first submission I used SCSS for the first time and for this 2nd submission, I used TailwindCSS for the first time.

Any feedback is great feedback. One thing I didn't like about using only Tailwind was that the HTML markup using many class names was a bit hectic. I do prefer a very clean HTML file so this was a bit painful but I do see the benefits of using Tailwind.

Community feedback

maia• 300

@maiaflow

Posted about 2 years ago

good idea to include a screenshot of mobile as well!

super interesting to read your index.html code with the tailwind css. i think you managed to keep it really organized looking despite the mess that tailwind makes.

you mentioned you did the social icons with aspect-ratio, tried to find it because those caused me lots of trouble, but i couldn't find it in the tailwind! need to get better at reading this code. looks really good though.

only issue i see is that it appears your Open Sans font isn't implementing? i think what is showing on my screen is my system sans-serif.

nice work!

Marked as helpful

Eric Salvi• 1,330

@ericsalvi

Posted about 2 years ago

@maiaflow Thank you for the feedback. Also, I had the correct open sans font in my code but for some odd reason tailwind didn't render out the needed CSS so when I uploaded it, the settings got replaced without them. Great eye!

The aspect ratio was being set through a custom grouping of tailwind utility class names so that I have them in one place rather than writing the same things for each individual icon. Helps save a bit more sanity when looking at the cluttered HTML.

Elaine• 11,400

@elaineleung

Posted about 2 years ago

Hi Eric, well done on your second challenge, I think everything's looking great here 😊

I know what you mean about Tailwind; I don't use it myself, but when I'm looking at someone's solution here and trying to fix something for them, the biggest challenge is troubleshooting as it's not as straightforward as just fixing properties.

About your solution, you did a great job getting it to look really close to the original design. I think the only suggestion I have here so far is to make the image more responsive because right now, no matter how I resize the browser, the image's size stays the same, even if you have a flex:1 there. What I might do here is to put an object-fit: contain to prevent it from losing it's aspect ratio firstly, and then add a width: 100% with a max-width: 40em so that it doesn't grow bigger past 40em, or any value up to you really. You may also have to change the breakpoint so that layout changes before the image shrinks down too much. I also would suggest using a container for the sections (e.g., header which you currently don't have in the HTML and the main) to control the overall width and max width of the contents as well as spacing.

Great work once again, and looking forward to more

Marked as helpful

Eric Salvi• 1,330

@ericsalvi

Posted about 2 years ago

@elaineleung Thank you for the feedback. I implemented your suggestions and even though my goals are usually to match the submission to the design as closely as possible, with your suggestions it doesn't follow exactly.... but I am ok with that.

Also, this was my 20th+ submission. This one specifically I decided to redo from a year ago to try my hand at tailwind.

Elaine• 11,400

@elaineleung

Posted about 2 years ago

@ericsalvi I did this challenge a while back, and I think the CSS I wrote got it looking pretty close to the design screenshot, so if you're interested in what I did or which values I used, you can have a look, even though there are a lot of things I do differently now: https://www.frontendmentor.io/solutions/landing-page-with-scss-bem-and-html-oFnvUpqYs8

I'd wouldn't call my solution a good example of good practices, but at least it's pretty close to the design, and I will definitely rewrite some of the CSS when I have the time.

Well done redoing the challenge using Tailwind!

Marked as helpful

Huddle LP using only TailwindCSS. It is a first use for these projects

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community