Tailwind CSS and Nextjs - Learn by building project

Tailwind CSS and Nextjs | Learn by building project, available at $44.99, has an average rating of 4, with 48 lectures, based on 12 reviews, and has 164 subscribers.

You will learn about Gain confidence using Tailwind Css Learn how to customize? theme and make you website design consistent Reduce the hours of complicated coding Learn how to use Figma to speed up development Learn how to make any project responsive with breakpoints This course is ideal for individuals who are Anyone that wants to get better at creating website and UI layouts or People looking for the practical Next JS Tailwind css development guide It is particularly useful for Anyone that wants to get better at creating website and UI layouts or People looking for the practical Next JS Tailwind css development guide.

Enroll now: Tailwind CSS and Nextjs | Learn by building project

Summary

Title: Tailwind CSS and Nextjs | Learn by building project

Price: $44.99

Average Rating: 4

Number of Lectures: 48

Number of Published Lectures: 48

Number of Curriculum Items: 48

Number of Published Curriculum Objects: 48

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Gain confidence using Tailwind Css

Learn how to customize? theme and make you website design consistent

Reduce the hours of complicated coding

Learn how to use Figma to speed up development

Learn how to make any project responsive with breakpoints

Who Should Attend

Anyone that wants to get better at creating website and UI layouts

People looking for the practical Next JS Tailwind css development guide

Target Audiences

Anyone that wants to get better at creating website and UI layouts

People looking for the practical Next JS Tailwind css development guide

Build candy store using Tailwind CSS and NEXTJS  fun project-based course. We will start by learning  basics of Tailwind CSS.  Then we going to build a completely responsive candy store website using Tailwind CSS and NEXTJS. Let’s take a look at the outline for this course

FIRST PART OF THIS COURSE

We will learn all about a certain aspect of Tailwind like typography, margin and padding, box shadows,  containers, grid, flex e.t.c This allows us to  have basic understanding of Tailwind  and will help to us to start building our main project.

SECOND PART OF THIS COURSE

We going to build  completely responsive multi-page candy store website. Website have very modern and clean-looking design.   In this section we going to build many different components. Also will have a bit of javaScript for things like  drawer menu and showing current page name when navigating to different pages.     You will learn how to add different fonts to project, also how  to configure global variables to make you website design consistent. 

I provide Figma template to this project.  So you not only gonna learn how to effectively build modern websites, but also how to use Figma to speed up developing process.

This section will give you all the knowledge you need to create powerful projects without the long-winded and time-consuming explanations.

You’ll learn how to build a beautiful multi-page website with effective user interfaces. You’ll gain a better understanding of how to make websites that are mobile friendly through in-depth, step by step video instruction, so you’ll never feel overwhelmed.

By the end of the course, you will have developed a clearer understanding of how to use  Tailwind CSS and Nextjs as well as harnessing some powerful skills to enable you to create your own stunning websites in less time.

By the end of this course, you will

Gain confidence using Tailwind CSS

Learn how to make any project responsive with breakpoints

Learn how to customize  theme and make you website design consistent

Learn best practices for folder  and files structure

Reduce the hours of complicated coding

Build on pre-existing designs

Learn how to use Figma to speed up development

Improve user experiences

Understand how and where to implement UI components

With clear tutorials and one-to-one support available for any questions you might have, this course is ideal for those who are ready to take the next step towards building their career as a frontend developer.

Course Curriculum

Chapter 1: Into & TailwindCSS Basics

Lecture 1: Introduction

Lecture 2: What is Tailwind CSS?

Lecture 3: Working with color

Lecture 4: Container and Spacing

Lecture 5: Typography

Lecture 6: Width & Height

Lecture 7: Background & Shadow

Lecture 8: Border & Border Radius

Lecture 9: Flexbox

Lecture 10: Buttons

Lecture 11: Grid and Responsiveness

Chapter 2: [Hands-on] – Build Candy E-commerce Store

Lecture 1: Candystore project overview

Lecture 2: Project setup next.js +tailwind css

Lecture 3: Add fonts, set up global styles, add images

Lecture 4: Working with Figma template

Lecture 5: Build Navbar

Lecture 6: Build Burger Menu

Lecture 7: Build Drawer

Lecture 8: Build Hero Section

Lecture 9: Building Main Header

Lecture 10: Build Secondary Header

Lecture 11: Building Footer

Lecture 12: Build Layout

Lecture 13: Build Best Sellers Section

Lecture 14: Build Get Them Now Section

Lecture 15: Build Rating Component

Lecture 16: Build Product Component

Lecture 17: Build Shop Products

Lecture 18: Build Discover More Section

Lecture 19: Build Recommended Section

Lecture 20: Build Promocode component

Lecture 21: Build Subtotal component

Lecture 22: Build Cart Item component part 1

Lecture 23: Build Cart Item component part 2

Lecture 24: Build Cart Page

Lecture 25: Build Category Component

Lecture 26: Build Pagination Component

Lecture 27: Build Candy Color Component

Lecture 28: Build Price Component

Lecture 29: Build Collection page part 1

Lecture 30: Build Collection page part 2

Lecture 31: Build Short Description component

Lecture 32: Build Product Gallery component

Lecture 33: Build AddToCart component part 1

Lecture 34: Build AddToCart component part 2

Lecture 35: Build Item page

Lecture 36: Refactor Item page

Lecture 37: Final refactoring

Instructors

Kei Blokhin
Instructor & Full Stack Web Developer at #rakuRaku

Rating Distribution

1 stars: 0 votes

2 stars: 2 votes

3 stars: 1 votes

4 stars: 5 votes

5 stars: 5 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!