Tailwind CSS and Nextjs | Learn by building project

Name: Tailwind CSS and Nextjs | Learn by building project
Rating: 4.2 (25 reviews)

Build candy store using Tailwind CSS and NEXTJS fun project-based course.

Created byKei Blokhin

Last updated 2/2023

English

What you'll 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

Course content

2 sections • 48 lectures • 5h 30m total length

Introduction2:35
Build a real world ecommerce candy store using Tailwind CSS, Next.js, and Figma to speed up development, optimize loading times, and improve user experience.
What is Tailwind CSS?3:02
Explore how Tailwind CSS uses utility-based classes and ready-to-use blocks to style any element. Experience smaller CSS, reusable utilities, class names, safer code changes, and faster creation of responsive layouts.
Working with color4:21
Discover how to apply colors in Tailwind CSS using text, background, and decoration color classes from the palette; configure your Tailwind config.js; and experiment with arbitrary hex or rgb colors.
Container and Spacing4:27
Typography5:08
Width & Height4:17
Master Tailwind width and height utilities, from fixed w- and h- sizes to fractional and full screen classes, and apply parent-based percentages for responsive element sizing.
Background & Shadow5:43
Border & Border Radius5:44
Flexbox18:21
Buttons5:59
Learn to build Tailwind CSS buttons with color, padding, rounded corners, and size variations. Explore outline and icon buttons, hover and active states, and disabled behavior using Hero Icons.
Grid and Responsiveness4:09
Explore grid and responsiveness in Tailwind CSS by building a six-item grid, adjusting columns, gaps, and col-span and row-span, with md:grid-cols-3 and md:col-span-2 for responsiveness.

Candystore project overview2:05
Project setup next.js +tailwind css2:44
Add fonts, set up global styles, add images2:50
Working with Figma template1:08
Use a Figma template for the candy store project to preview desktop, tablet, and mobile pages. Download the template to access colors and sizes before building in the next lesson.
Build Navbar4:35
Build Burger Menu3:20
Build a mobile burger menu component that toggles a left sliding drawer using props, active state, data drawer attributes, aria controls, and an image icon.
Build Drawer12:49
Build Hero Section6:37
Building Main Header16:38
Build a header main component with a burger menu, navbar, and hero using Next.js, useState, and images. Style with background image, responsive layout, and links to login, rewards, and cart.
Build Secondary Header4:09
Create a secondary header with Next.js routing to show an uppercase page title, adjust height, and use a distinct secondary image, replacing the hero on non-home pages.
Building Footer17:07
Build Layout3:29
Build a reusable layout component that switches between main and secondary headers based on a criteria prop, renders children, wraps index.js, and includes a footer.
Build Best Sellers Section13:19
Build a best sellers section that displays products using imported data, with each card showing an image, title, and price, plus a watch more button.
Build Get Them Now Section9:20
Build Rating Component1:35
Build Product Component4:07
Build Shop Products12:11
Create the shop products section by building a functional component, importing product data, and mapping dummy data to display name, price, and image in a responsive Tailwind grid.
Build Discover More Section10:28
Build Recommended Section7:15
Learn to build a reusable recommended products component for the cart page using a data-driven grid, mapping a recommended products array to product components with name, price, and image.
Build Promocode component5:35
Build Subtotal component5:14
Build Cart Item component part 19:56
Build Cart Item component part 211:30
Build Cart Page6:44
Build Category Component4:32
Build Pagination Component6:27
Build Candy Color Component3:28
Build a candy color component with Tailwind CSS and Next.js, creating a functional component that maps a candy color array to render color swatches and labels.
Build Price Component6:11
Build Collection page part 111:39
Build Collection page part 29:32
Advance a collection page using Tailwind CSS with Next.js by constructing a responsive layout, category filters, product mapping, and pagination, and preview in dev server.
Build Short Description component10:04
Build Product Gallery component4:50
Build a product gallery component in a Next.js and Tailwind CSS project by creating a functional component, importing images (candy.png and thumbnails), and styling with grid and flex layouts.
Build AddToCart component part 111:19
Build AddToCart component part 27:41
Continue building the add to cart component by adding a quantity control with minus and plus buttons, updating stock to in stock, and styling the cart button with Tailwind CSS.
Build Item page4:38
Finish the item page in a Tailwind CSS and Next.js project by wiring layout, short description, product gallery, and add to cart within a responsive grid and styled description.
Refactor Item page4:02
Final refactoring7:16

Requirements

You should know the basics of CSS
You should know JS fundamentals and the basics of React

Description

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.

Who this course is for:

Anyone that wants to get better at creating website and UI layouts
People looking for the practical Next JS Tailwind css development guide

Tailwind CSS and Nextjs | Learn by building project

What you'll learn

Explore related topics

Course content

Into & TailwindCSS Basics11 lectures • 1hr 4min

[Hands-on] - Build Candy E-commerce Store37 lectures • 4hr 26min

Requirements

Description

Who this course is for: