All solutions

What are you most proud of, and what would you do differently next time?

Upon taking this challenge, what comes to my mind is to try and build it with what Next14 has to offer. I was able to try the latest app router contrary to the pages router. There are a lot of major changes in Next14, especially the project structure.

There are a few different approaches how to build this website but I chose a simple static page with a little bit of JavaScript (tabs, sliders, mobile menu).

The Figma design is quite interesting and covers desktop, tablet, and mobile. I'm having so much fun trying it with a CSS grid for the overall layout and I think it turns out quite well but not perfect.

What challenges did you encounter, and how did you overcome them?

Probably, the overall layout is just by using a CSS grid. Every page and breakpoint has a different grid layout and item placement. You have to be very keen and have an eye for detail.

I usually put smart lines to plan my grid layout on the Figma design then use this very useful tool to visualize my CSS grid and generate the code for you.

What specific areas of your project would you like help with?

I wanted to apply some animations or transitions so it doesn't look very static and boring. I'm kinda very poor in this department. Please feel free to give me your favorite library for animations or transitions. I would like to check them out.

What are you most proud of, and what would you do differently next time?

This exercise is similar to the blog preview card component which I almost reused the code layout for centering the QR code card component.

What challenges did you encounter, and how did you overcome them?

The Figma design was a bit different from the previous exercise. Wherein, I cannot determine some spacings so I have to do it by eye.

What specific areas of your project would you like help with?

Please feel free to ask me some questions or give me some feedback. Cheers! 🍻

What are you most proud of, and what would you do differently next time?

I know I can simply just use plain HTML, CSS, and JavaScript but I couldn't help myself using Vite as my main development build tool for simple projects.

I also use React because I've been using it for several years on different projects and I love writing code in JSX.

Of course, Tailwind CSS is the highlight of this project. I'm so happy that Tailwind CSS has improved a lot over the years by adding support to the CSS grid and more.

I commend the Figma design. It's a well-thought design which makes it easier for me to work with spacings, sizes, etc.

Overall, the total DX is great and I'm proud of it. Cheers! 🎉

What challenges did you encounter, and how did you overcome them?

I'm trying to make a general rule of thumb for myself to deal with CSS layouts.

• Grid = Layout
• Flexbox = Component

So trying to be a hotshot, it was a challenge for me to recall how to use a CSS grid just to center a component (blog preview card). After a little research, I managed to resolve my problem. I highly recommend to use this tool to visualize your CSS grid here

Then for the card component, I use Flexbox which I overly use for everything.

Support for CSS grid in Tailwind CSS is fairly limited but it has the common usage for the grid. One thing I like about Tailwind CSS is that you can write custom CSS that is not supported with Tailwind CSS utilities.

You can read more information on the docs here

What specific areas of your project would you like help with?

Please feel free to ask me some questions or give me some feedback. Cheers! 🍻