Tailwind CSS Mega Course: Basic to Advanced-Build 3 Projects

Name: Tailwind CSS Mega Course: Basic to Advanced-Build 3 Projects
Rating: 3.9 (91 reviews)

Master Tailwind CSS: Beginner to Advanced Concepts in Project-Based Course, Design Responsive Website Using Tailwind CSS

Created byVapa Academy

Last updated 9/2024

English

What you'll learn

Tailwind CSS From Basics to Advanced
Build an E-Commerce Website Using Tailwind CSS
Explore Various Approaches to Using Tailwind CSS
Applying Tailwind CSS in Real-World Projects
Exploring Advanced Features of Tailwind CSS
How to Organize Tailwind CSS Code

Course content

7 sections • 95 lectures • 11h 38m total length

Movie Web App Project Course Intro0:45
Launch into Tailwind CSS with a movie web app project, learn to build a modern UI that shows ratings, language, and release dates, boosting your skills and portfolio.

Introduction To Tailwind CSS Part-110:34
Tailwind CSS Installation and Setup Part-29:04
Tailwind CSS Configuration Part-37:52
Tailwind CSS Configuration and Font Size Part-46:30
Explore Tailwind CSS configuration with the base, component, and utilities layers, and how PostCSS generates only the used content, plus the role of IntelliSense and font sizing.
Font Size Part-57:27
Custom Font Size Part-66:59
Font Style and Custom Fonts Part-77:46
Text Decoration and Styling Part-87:26
Margins Part-97:36
Padding and Border Part-109:34
Space Between Class Part-115:47
Learn how the Tailwind CSS space between utility creates gaps between flex items, using horizontal (space-x-8) and vertical (space-y-8) spacing in a navigation bar, with workarounds for the first element.
Hoover Effect Part-125:20
Applying hover and focus effects to buttons using Tailwind CSS, turning the background transparent on hover and adding a blue border, creating an interactive login button.
Focus and Active Effect Part-136:07
Active and Layer Part-145:37

Navigation Bar Structure Part-19:49
Navigation Bar Components Part-28:34
Navigation Bar Icon and Styling Part-38:37
Learn to add a navigation bar icon with Font Awesome, include the CDN link in the head, and style the header using Tailwind CSS for color, background, and logo emphasis.
Navigation Bar Placement and Styling Part-49:42
Navigation Bar Styling Part-57:54
Navigation Bar Buttons and Styling Part-67:53
Navigation Bar Styling Part-76:31

Movie Web App Project - Source Code0:04
Movie Web App Project - Live Overview Demo1:36
Setting Up The Project Environment Part - 14:21
Navigation Bar - I Part - 212:08
Navigation Bar-II Part - 31:12
Master flexbox centering by applying justify-content: center and align-items: center to navigation bar items, ensuring inputs also align in the middle.
Banner Slider-I Part - 43:07
Design a banner slider with a new tag, max-w-screen, and mx-auto; apply white text and build a three-column grid where the first section spans two columns.
Banner Slider-II Part - 54:48
Banner Slider-III Part - 68:29
Banner Slider Gradient Overlay Part - 77:30
Banner Aside Bar Part - 85:58
Movie Card Part - 911:18
Generating Multiple Movie Cards Part - 107:54
Flowbite Footer Part - 113:52
Mobile Responsive Property Free Hosting Part - 124:16
Responsive Techniques Part - 133:27

Homepage E-Commerce Part-18:22
Homepage E-commerce Part-26:36
Homepage-Icons-E-commerce Part-36:11
Homepage-Body-E-Commerce Part-47:31
Homepage-Body-E-Commerce Part-59:04
Homepage-Buttons-E-Commerce Part-69:12
Homepage-Image-E-Commerce Part-77:33
About Us Page-E-Commerce Part-88:31
About US Page-E-Commerce Part-99:06
Create an about us section with a centered image, a mission heading and paragraph, and a values list, using max width adjustments to balance the layout.
About Us Page Mission Value E-Commerce Part-106:01
About Us Page Styling E-Commerce Part-116:53
About Us Page Styling E-Commerce Part-124:56
Product Page E-Commerce Part-139:58
Product Page E-Commerce Part-147:44
Product Page Animation E-Commerce Part-155:44
Learn to create infinite up-and-down animations for product categories by extending Tailwind CSS config with custom keyframes and animation utilities, then apply them to product images.
Fruit Page E-Commerce Part-169:51
Fruit Page E-Commerce Part-178:17
Fruit Page E-Commerce Part-185:07
Build a responsive fruit e-commerce page with reusable product cards in Tailwind, including image sizing, centered text, and add-to-cart linked pages, making the site scrollable.

Restaurant Web App Project - Source Code0:04
Restaurant Web App Project - Live Overview Demo6:00
Installations and Configurations-I Part-18:02
Installations and Configurations-II Part-24:37
Home Page Background-I Part-311:05
Home Page Navigation Bar(1)-II Part-49:06
Run the local host site with npm run start, view the home page, and build a flex-based navigation bar with internal links and a planned reservations page.
Home Page Navigation Bar(2)-III Part-510:33
Home Page Icons Styling and Buttons-IV Part-69:30
Home Page Text-V Part-713:31
Home Page Labels-VI Part-88:59
Menu Page Background-I Part-98:38
Menu Page Menu Bar(1)-II Part-1010:13
create a menu page with a navigation bar listing food categories, adjust alignment and spacing, and apply an orange active box and borders for visual clarity.
Menu Page Menu Bar(2)-III Part-116:51
Menu Page Food Card(1)-IV Part-1210:08
Menu Page Food Card(2)-V Part-138:24
Menu Page Styling-VI Part-147:52
Review Page Background and Headings-I Part-159:10
Review Page Review Card(1)-II Part-1610:31
Review Page Review Card(2)-III Part-177:20
Review Page Styling-IV Part-186:12
Reservations DineIn Page Reservation Box(1)-I Part-1910:13
Reservations DineIn Page Reservation Box(2)-II Part-206:33
Reservations DineIn Page Text Box and Icons(1)-III Part-216:33
Reservations DineIn Page Text Box and Icons(2)-IV Part-224:45
Reservations DineIn Page Reservation Box and Button-V Part-235:18
Develop the dine-in reservations interface by adding an orange, white-text button inside the main container and a left-side image panel with a rounded large waiter image and opening hours heading.
Reservations DineIn Page Image and Information-VI Part-249:44
Continue building the dine-in reservations page by applying meaningful styling, margins, fonts, and colors, and add Font Awesome icons for location and clock to display the address clearly.
Reservations Table Page Backend-I Part-259:34
Reservations Table Page Transformations-II Part-266:34
Reservations Table Page Text Boxes-III Part-2710:03
Arrange two small text boxes under the name box with orange borders, and use a flex container to center content and display a carrot-down dropdown icon.
Reservations Table Page Styling and Image-IV Part-287:10
Chefs Page Background Text and Styling-I Part-299:10
Chefs Page Images-II Part-308:44
Continue building the chefs page by implementing a responsive grid for images with accompanying text and refining placements, removing extra divisions for a clean, complete layout.
Landing Page Homepage-I Part-315:54
Landing Page Reservations-II Part-326:52
Landing Page Menu and Review-III Part-336:18
Landing Page Chefs-IV Part-347:58
Landing Page Footer(1)-V Part-358:17
Landing Page Footer(2)-VI Part-365:35

Requirements

Students don't need to have any prior experience to take this course. They will learn everything they need from this course.

Description

Thank you for visiting the Tailwind CSS Mega Course! This in-depth course covers all you need to know whether you're a novice trying to learn the fundamentals or an experienced developer hoping to learn advanced approaches. The process of creating visually beautiful and responsive websites is made easier using Tailwind CSS, a utility-first CSS framework.

Throughout this course, you will construct two fascinating projects as you progress from the basics of Tailwind CSS to more complex ideas. First, you'll master the fundamentals of Tailwind CSS and how to design your HTML elements by using utility classes efficiently.

You'll develop two real-world projects from start with practical examples and hands-on supervision, putting your newly acquired knowledge to use in a real-world scenario. You will have the knowledge and self-assurance necessary to create responsive websites using Tailwind CSS like a pro by the conclusion of the course.

Key Features:

Full explanation of all topics related to Tailwind CSS, from fundamentals to advanced ideas.
Two full project builds using a hands-on approach.
Build an E-Commerce Website.
Learn how to design a navigation bar.
Real-world applications and applicable examples.
Learn optimization strategies and best practices.

Come along on this trip to become an expert in Tailwind CSS and improve your web development abilities!

Who this course is for:

If you are learning Tailwind CSS
If you want to use Tailwind CSS in a real-world project
If you want to learn the best practices of Tailwind CSS
If you want to design a complete project using Tailwind CSS

Tailwind CSS Mega Course: Basic to Advanced-Build 3 Projects

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Basic of Tailwind CSS14 lectures • 1hr 44min

Utility First Approach2 lectures • 17min

Navigation Bar7 lectures • 59min

Movie Web App: Project - 115 lectures • 1hr 20min

E-Commerce Web App : Project - 218 lectures • 2hr 17min

Restaurant Web App : Project - 338 lectures • 5hr 2min

Requirements

Description

Who this course is for: