@andreasremdt
Posted
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
titleelements, 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
articleelements 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: uppercaseinstead. 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
borderon 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 tohover:. - A simple fix to make all three cards the same height is to not used
items-centeron 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. Settingitems-centermakes 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
@Larbearto
Posted
@andreasremdt
My goodness! thanks for all that advice! I'm really going to take some time to digest it all but I also agree with your main point to focus on the basics like css etc. Tailwind helped me "get on with it" because although I love the design aspect of developing, my javascript skills need much more work.
I'll post an update soon. Thanks mate
