Submitted over 2 years ago

3 Column Preview Card Component with Tailwind and NextJs

next, tailwind-css

Lit2l•290

@Lit2lLarry

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

Hey Mentors,

I built this wind nextjs and tailwind. It was much hard than I thought it would be. I'm still learning how to work with responsive designs so I'm sure there is much to improve on.

Any help with responsive layouts would be very helpful. Any other critiques are also more than welcome.

Thanks guys!

Code

Please log in to post a comment

Community feedback

Andreas Remdt•950
@andreasremdt
Posted over 2 years ago
Hey @SpiderBear714,

Congrats on solving the challenge! I love Next.js and Tailwind, both are great tools and make an awesome tech stack together.

However, especially in the beginning, I would focus on the basics. While Next.js is a great skill to have, I'd stick to HTML and CSS while solving these simple challenges. Next.js is a fullstack framework that offers so many features, but none of them can be used in this challenge (there's no routing, no client-side logic, no images, no data fetching, etc). All you need is an HTML page and some CSS styles. Adding Next.js, React, JavaScript, Tailwind, and so on just adds a ton of mental and technological overhead you need to get straight in order to get good results, and that's hard for beginners (as well as professionals, I have been writing code for 7+ years and still I am occasionally overwhelmed ;))

So, my tip for you is to focus on HTML and CSS first - get good at it, and then introduce yourself to more of these advanced tools and libraries.

I collected a couple of suggestions to make your code better and cleaner:
- Don't forget title elements, your solution doesn't have one. A good title describes your website or page in very few words, but is incredibly important to your users and search engines. With Next.js, you can add a title like so:
```
<Head>
  <title>My page</title>
</Head>
```
- You could use article elements for each of your cards. This would make it slightly more semantic and describe the content better.
- Your headings are written in uppercase, and while this works fine, you could utilize the CSS property text-transform: uppercase instead. HTML content rarely needs to be written in uppercase, it's mostly about appearance. The disadvantage of having uppercase words or sentences in your HTML is that search engines index and display it accordingly, which might look unexpected. In Google, you might want your page to read "Sedans", not "SEDANS".
- Your layout jumps slightly when hovering over a button. The reason for this is that you apply a border on hover, but without hover there's no border. Borders add to an elements content box, meaning that it grows by however big the border itself is (in your example 2px on each side). That's a common problem, and the simplest solution is to always have a border, but style it properly:
```
<button class="bg-white border-2 border-white hover:bg-transparent></button>
```
In this example, the border is always there, but it's not really visible due to the background and border having the same color. Only on hover can you see the border, because the background color changes.
- Don't forget about keyboard users - while you have hover styles, which is good and important, keyboard users don't get any visual indications that they focused an element. In Tailwind, you can use focus: to target focus styles, similar to hover:.
- A simple fix to make all three cards the same height is to not used items-center on the surrounding wrapper. Remove this class and it should look much better. By default, all children inside a flex container stretch to take up the available height, so they should look the same. Setting items-center makes them only take up the space they need and aligns them horizontally.
- Try adding Google Fonts to your app, it makes a huge difference when the correct typography is used in an app. If you want to stick with Next.js, then here's a good guide on how to use Google Fonts.
Your responsive styles look good, not much to say about from my side. It's easy with Tailwind to apply responsive styles, though your HTML code tends to suffer in terms of readability from all those classes.

Keep the good work up, things will become easier if you keep writing code :-)
Marked as helpful

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