Tailwind CSS and Nextjs | Learn by building project

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

3.80 (5 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Tailwind CSS and Nextjs  | Learn by building project
134
students
5.5 hours
content
Feb 2023
last update
$44.99
regular price

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

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.

Content

Introduction

Introduction
What is Tailwind CSS?
Working with color
Container and Spacing
Typography
Width & Height
Background & Shadow
Border & Border Radius
Flexbox
Buttons
Grid and Responsiveness

Section 2

Candystore project overview
Project setup next.js +tailwind css
Add fonts, set up global styles, add images
Working with Figma template
Build Navbar
Build Burger Menu
Build Drawer
Build Hero Section
Building Main Header
Build Secondary Header
Building Footer
Build Layout
Build Best Sellers Section
Build Get Them Now Section
Build Rating Component
Build Product Component
Build Shop Products
Build Discover More Section
Build Recommended Section
Build Promocode component
Build Subtotal component
Build Cart Item component part 1
Build Cart Item component part 2
Build Cart Page
Build Category Component
Build Pagination Component
Build Candy Color Component
Build Price Component
Build Collection page part 1
Build Collection page part 2
Build Short Description component
Build Product Gallery component
Build AddToCart component part 1
Build AddToCart component part 2
Build Item page
Refactor Item page
Final refactoring

Screenshots

Tailwind CSS and Nextjs  | Learn by building project - Screenshot_01Tailwind CSS and Nextjs  | Learn by building project - Screenshot_02Tailwind CSS and Nextjs  | Learn by building project - Screenshot_03Tailwind CSS and Nextjs  | Learn by building project - Screenshot_04

Reviews

Tara
February 26, 2023
Overall, I finished with a pretty good feel for Tailwind. This course does really help with understanding how to create pathing between next.js and tailwind. There are a lot of places where mistakes are made and the code just magically changes without it being pointed out or explained. There could be a lot more explanation as to which divs are affecting what. I was hoping to understand the nesting better but I'm still just as confused as going in. The project itself was fun to build.
Alla
December 14, 2022
Tutor was knowledgeable and as clear as could be expected with the explanation. Good course that would recommend to others. Thank you, I learnt an enormous amount this day.

Coupons

DateDiscountStatus
1/19/2023100% OFF
expired

Charts

Price

Tailwind CSS and Nextjs  | Learn by building project - Price chart

Rating

Tailwind CSS and Nextjs  | Learn by building project - Ratings chart

Enrollment distribution

Tailwind CSS and Nextjs  | Learn by building project - Distribution chart
ComiDoc
ComiDoc

Realtime Udemy coupons in our Telegram channel

topics
FREE
Refurb
Refurb

Notre nouveau site qui scanne en temps reel les prix sur Amazon Warehouse (FR)

> 40% reduction sur le prix initial
5009992
udemy ID
12/5/2022
course created date
12/13/2022
course indexed date
ANUBHAVJAIN
course submited by