Next.js With Tailwind CSS-Build a Frontend Ecommerce Project

Focused View

Vapa Academy

2:26:17

426 View

01. Introduction

1. Project Demo.mp4

04:06

02. Creating a Next JS Project

1. Creating a Next JS Project Part-1.mp4

06:35

03. Files and Folders of Next JS

1. Files and Folders of Next JS Part-2.mp4

07:00

04. Starting With Top Header

1. Starting With Top Header Part-3.mp4

08:54

05. Adding Contents to Top Header

1. Adding Contents to Top Header Part-4.mp4

08:00

06. Styling the Top Header

1. Styling the Top Header Part-5.mp4

08:53

07. Styling the Remaining Top Header

1. Styling the Remaining Top Header Part-6.mp4

02:42

08. Creating the Main Header

1. Creating the Main Header Part-7.mp4

05:49

09. Styling the Main Header

1. Styling the Main Header Part-8.mp4

08:50

10. Creating and Styling the Navbar

1. Creating and Styling the Navbar Part-9.mp4

09:49

11. Creating and Styling Mobile Navbar

1. Creating and Styling Mobile Navbar Part-10.mp4

08:15

12. Creating the Data for Banners Carousel

1. Creating the Data for Banners Carousel Part-11.mp4

08:26

13. Creating the Banner Slide Component

1. Creating the Banner Slide Component Part-12.mp4

09:08

14. Styling the Banner Slider

1. Styling the Banner Slider Part-13.mp4

08:07

15. Creating the Products Section

1. Creating the Products Section Part-14.mp4

08:17

16. Creating the Product Card

1. Creating the Product Card Part-15.mp4

07:35

17. Styling the Product Cards

1. Styling the Product Cards Part-16.mp4

09:07

18. Creating the Testimonials Section

1. Creating the Testimonials Section Part-17.mp4

05:24

19. Styling the Testimonials Section

1. Styling the Testimonials Section Part-18.mp4

08:40

20. Creating the Footer Section

1. Creating the Footer Section Part-19.mp4

02:40

Description

Learn to Design Next.js Apps With Tailwind CSS. Build a Complete Responsive Frontend E-commerce Project.

What You'll Learn?

Next JS to Build a Complete Frontend Project
Next JS With Tailwind CSS
How to Design a Frontend App Using Tailwind CSS
A Complete Fronted E-commerce Project
How to Build a Responsive Frontend E-commerce Project with Tailwind CSS

Who is this for?

If you're a fronted developer

If you want to build a complete project with Next JS and Tailwind CSS

If you are interested in learning Tailwind CSS

What You Need to Know?

No previous experience is required to learn Next Js and Tailwind CSS

A laptop or computer is required for writing code

Basic HTML and CSS knowledge

More details

Description
In this course, you are going to learn Next.js and Tailwind CSS. You will build a complete frontend ecommerce project.
The key features that you will learn in this course are:

How to work with Next.js and organize the Next.js project.
How to use Tailwind CSS and integrate it with a Next.js project.
How to create a complete responsive e-commerce app using Tailwind CSS.
You will gain a complete understanding of how to create a Next.js frontend project from start to finish. While developing it, you will learn how to organize the project effectively.
You will explore real-world applications of Tailwind CSS as you design the entire app using this framework.
How to work with Next.js and its various features, such as passing data using props and sharing data between components.
You will learn how to utilize different external npm packages with Next.js.
In the complete fronted app that you will build in this course, you will learn how to add a carousel slider and make it responsive for all devices using Tailwind CSS.
You will encounter various sections in the project where you will tackle different design challenges using Tailwind CSS and learn how to resolve them.
Who this course is for:
If you're a fronted developer
If you want to build a complete project with Next JS and Tailwind CSS
If you are interested in learning Tailwind CSS

User Reviews

Rating

average 0

Total votes0

Focused display

We have several years of experience in online teaching. We love to share our skills with our students, and providing the best online courses is our main goal. We are a team that strives to explain every difficult concept in the easiest way possible so that students can learn it easily. In our courses, we emphasize practical learning because we believe in learning by doing.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.