Design a shop using Next.js and Tailwind CSS
- Length: 1 hour
- Difficulty: Beginner
Auto-generated captions, so expect a few mistakes.
Welcome and What We're Building
Setting up Next.js and Tailwind CSS
Next.js Files and Tailwind Basics
Building the Header and Navbar
Layout Components and Google Fonts
Category Pills and Product Data
Fetching and Displaying Products
Links and Category Pages
Product Page and Image Carousel
Product Info Grid and Wrap-up
About this camp
In this camp, we will be designing a shop using Next.js and Tailwind CSS.
We'll jump straight into it, setting up our Next.js project with Tailwind CSS. Learn the basics of HTML and how to write with Tailwind CSS, creating components and pages for our store. We'll use dummy data for our shop, creating dynamic routes and pages for our products and categories.
What you'll learn
- Learn basic HTML and CSS
- Design webpages using Tailwind CSS
- Build pages and components using React and Next.js
- Use Heroicons with Tailwind CSS