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

Community feedback

• 

  maia•300

  @maiaflowPosted over 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

  1

  ---

  

  Eric Salvi•1,350

  @ericsalviPosted over 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.

  0
• 

  Elaine•11,400

  @elaineleungPosted over 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

  1

  ---

  

  Eric Salvi•1,350

  @ericsalviPosted over 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.

  1

  

  Elaine•11,400

  @elaineleungPosted over 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

  0