Sleek Next.JS Applications with shadcn/ui
5h 10m 20s
English
Paid
Course description
Dive into the development of modern web interfaces by learning the fundamentals of shadcn/ui, TailwindCSS, and Radix UI. Learn to create flexible and modular user interfaces and integrate these skills into Next.js projects. This course will help you become a leader in cutting-edge frontend technologies.
During the training, you will master:
- A deep understanding of shadcn/ui and the theory behind it,
- The creation of two fully functional applications ready for production use,
- Skills for working with the library and contributing to its development.
Upon completion of the course, you will confidently master the tools for building modern and high-quality web applications.
Watch Online
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 01:32 |
| 2 | About the Course | 03:40 |
| 3 | The shadcn-ui way | 01:30 |
| 4 | How to create a new shadcn-ui project | 02:17 |
| 5 | Exploring the shadcn-ui next-template Project Structure | 06:16 |
| 6 | shadcn-ui Command Line (CLI) Tool | 05:11 |
| 7 | Typography in shadcn-ui | 04:02 |
| 8 | Building a News Site - Layout | 05:30 |
| 9 | Building a News Site - Navigation | 11:55 |
| 10 | Building a News Site - Fetching Articles | 05:57 |
| 11 | 1Building a News Site - Home Page | 22:20 |
| 12 | Building a News Site - Category Page | 11:21 |
| 13 | Building a News Site - Article Preview | 05:57 |
| 14 | shadcn-ui Dark Mode | 04:34 |
| 15 | Theming in shadcn-ui | 08:14 |
| 16 | Shadcn-ui Styles | 03:12 |
| 17 | Animations in shadcn-ui | 05:03 |
| 18 | Layout And Header | 10:52 |
| 19 | Event Page | 21:23 |
| 20 | The Event Sheet | 14:09 |
| 21 | Create a Card Variant in shadcn-ui | 04:43 |
| 22 | Building The User Context | 11:16 |
| 23 | Building the Login Button | 04:45 |
| 24 | Building the Authentication Form | 14:35 |
| 25 | Finish the Authentication Flow | 06:11 |
| 26 | RSVP Functionality | 11:06 |
| 27 | Setting Up and Configuring Tables in shadcn-ui | 10:06 |
| 28 | Custom Cells and Interactive Rows | 06:39 |
| 29 | New Events Form | 22:54 |
| 30 | Pagination and Sorting | 07:46 |
| 31 | Mobile View | 04:08 |
| 32 | What is component composition | 04:21 |
| 33 | Building a Filter Component with shadcn-ui | 18:53 |
| 34 | shadcn-ui source code architecture | 08:01 |
| 35 | Setup shadcn-ui Development Environment | 03:25 |
| 36 | Contributing to Shadcn UI | 16:36 |
Similar courses
Build a Microservices app with .Net and NextJS from scratch
Sources: udemy
Microservices is the latest 'buzzword' and hot topic in the web development industry at the moment and nowadays having microservices as part of your skillset is becoming more an...
31 hours 42 minutes 57 seconds
Build a Youtube Clone
Sources: Code With Antonio
In this 24-hour course, you will learn how to create your own YouTube clone using modern technologies. We will go into detail on advanced topics, including...
23 hours 42 minutes 10 seconds
React Simplified - Next.js
Sources: webdevsimplified.com
Welcome to my Next.js course. This course is a little bit interesting in how it's structured because it's actually broken into two main sections. That's because
9 hours 33 minutes 4 seconds
Full-Stack Fundamentals 1 - Frontend
Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Sources: Web Dev Cody
Are you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with
5 hours 53 minutes 23 seconds