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

Requirements

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

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.

Overview

Section 1: Introduction

Lecture 1 Project Demo

Section 2: Creating a Next JS Project

Lecture 2 Creating a Next JS Project Part-1

Section 3: Files and Folders of Next JS

Lecture 3 Files and Folders of Next JS Part-2

Section 4: Starting With Top Header

Lecture 4 Starting With Top Header Part-3

Section 5: Adding Contents to Top Header

Lecture 5 Adding Contents to Top Header Part-4

Section 6: Styling the Top Header

Lecture 6 Styling the Top Header Part-5

Section 7: Styling the Remaining Top Header

Lecture 7 Styling the Remaining Top Header Part-6

Section 8: Creating the Main Header

Lecture 8 Creating the Main Header Part-7

Section 9: Styling the Main Header

Lecture 9 Styling the Main Header Part-8

Section 10: Creating and Styling the Navbar

Lecture 10 Creating and Styling the Navbar Part-9

Section 11: Creating and Styling Mobile Navbar

Lecture 11 Creating and Styling Mobile Navbar Part-10

Section 12: Creating the Data for Banners Carousel

Lecture 12 Creating the Data for Banners Carousel Part-11

Section 13: Creating the Banner Slide Component

Lecture 13 Creating the Banner Slide Component Part-12

Section 14: Styling the Banner Slider

Lecture 14 Styling the Banner Slider Part-13

Section 15: Creating the Products Section

Lecture 15 Creating the Products Section Part-14

Section 16: Creating the Product Card

Lecture 16 Creating the Product Card Part-15

Section 17: Styling the Product Cards

Lecture 17 Styling the Product Cards Part-16

Section 18: Creating the Testimonials Section

Lecture 18 Creating the Testimonials Section Part-17

Section 19: Styling the Testimonials Section

Lecture 19 Styling the Testimonials Section Part-18

Section 20: Creating the Footer Section

Lecture 20 Creating the Footer Section Part-19

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