Tailwind CSS 3 for Beginners to Advanced | Full Course with Project in Tamil
HTML-код
- Опубликовано: 1 июл 2024
- Welcome to our comprehensive Tailwind CSS course! This video is your ultimate guide to mastering Tailwind CSS, whether you're a beginner or looking to enhance your web development skills. We'll cover everything from the basics to advanced techniques, ensuring you can build responsive, modern websites with ease.
In this course, you'll learn how to set up Tailwind CSS using different methods, including CDN, CLI, and integrating with tools like PostCSS and Vite. We’ll explore the core concepts of Tailwind, such as typography, colors, spacing, borders, and hover effects, to give you a strong foundation in styling your projects.
Dive deeper into layout techniques with detailed sections on Flexbox and Grid, enabling you to create complex, flexible designs. You'll also learn about responsive design, dark mode implementation, and how to extend and override Tailwind's default configurations to suit your specific needs.
As a practical application of what you've learned, we'll guide you through building a complete landing page. This includes setting up the project, creating a responsive navbar, designing a compelling hero section, and developing main content areas like pricing, stories, and footer sections. We’ll ensure the entire site is responsive, providing a seamless experience across devices.
By the end of this course, you'll have the skills and confidence to create stunning, responsive websites using Tailwind CSS. Don't forget to like, subscribe, and hit the bell icon to stay updated with more web development tutorials!
#tailwindcss #webdevelopment #responsivedesign #cssframework #frontenddevelopment #webdevelopmenttutorial #design #tailwind
Timestamp:
00:00 Intro
03:09 What we learn in this course?
04:25 Using Tailwind with CDN
07:50 Using Tailwind CLI
16:52 Using PostCSS with Vite
24:55 What is PostCSS and Autoprefixer ?
Learning Basics
29:07 Tailwind Setup / Typography
33:49 Font Family
38:45 Text Size
43:22 Different Font Sizes
47:22 Other Font Classes
53:12 Colors
59:48 Padding Margin
01:09:32 Border and Hover
01:15:51 Layout
01:25:06 Responsive Classes
01:28:57 FlexBox Layout
01:32:02 Justify Content
01:34:41 Align Items
01:36:48 Flex Grow
01:38:41 Grid Layout
01:40:34 Dark Mode
01:45:42 Extend Options in Configuration
01:48:38 Override Options in Configuration
01:52:56 Extract Styles as Components
Making Landing Page Website
01:56:08 Landing Page Project Setup
01:59:45 Navbar
02:08:23 Hero Section
02:13:17 Main Section
02:21:16 Pricing Section
02:36:37 Stories Section
02:46:59 Footer Section
02:56:14 Making Website Responsive
03:08:15 conclusion
Download: github.com/jvlcode/tailwindcs...
🤝 *Donate & Help this Channel:*
UPI: 9444914384@okbizaxis
PayPal: paypal.me/jvlogesh
Buy me Kofi : ko-fi.com/jvlcode
🌐 *Join Udemy Courses*
React Developer Course: www.udemy.com/course/angular-...
Angular Course: www.udemy.com/course/angular-...
📧 *Contact Information:*
📬 Email: updatelogesh@gmail.com
🔗 LinkedIn: / jvl-code
📷 Instagram: / jvlcode
📱 Whatsapp: whatsapp.com/channel/0029VaCu...
📘 Facebook: / jvlcode
🌐 Website: www.jvlcode.com
🔔 For business inquiries or collaborations, please use the provided contact information. Thank you for your support! Don't forget to like, share, and subscribe for more content! 🔔
#bootstrap5 #webdesign #responsivedesign #webdevelopment #bootstraptutorial #frontenddevelopment #codingtutorial #css #flexboxlayout #gridsystem #typography #colordesign #developerguide #html5 #responsivelayout #formdesign #techtutorial #stickyheader #codingtips #webdevjourney #learncoding #programming #cssgrid #weblayouts #techeducation #codingcommunity #codewithme #bootstraptips #uxdesign #uidevelopment
bro oru chinna suggestion lorem ipsum text nama vscode code le generate panalam eg: lorem20 (prints 20 words) like that nama req.. ketha mari generate panikalam 😊
Thanks for your time & efforts Anna. Its a big help!
Thank you bro.. Waiting... for more advance tailwind
Ithukku thaa bro wait pannune.... Thanks of lot anna❤❤❤
Thank you for uploading this video
Thank you for your information ❤
Vera maari❤
Very very. Thanks anna......
thank you so so much brother
Tq for that information ❤
Neenga soldra steps tha follow panna bro laptop off pannitu on panna aprom work aagala thirumba same steps follow panna cli vachi install panna work aagala
Thank u so much I have been waiting for this video, also if possible pls make many project in react native
Super bro🎉
Super ❤
Super bro
Bro,
I may think that bootstrap is better than Tailwind.
What is your opinion....
Do I need to install Node.js ?
Thanks bro
Awesome
super bro
Bro for all new project we need to do this proceture??
Anna Project le values(colors, butten colors) change pana work agalee ....?
thank youu broo
" The best "
Kindly help I practice ur mini economce react project. I have error this 1.46 time error ...
npm run dev work akala
'vite' is not recognized as an internal or external command,
npm install command use pannen appaiyum work agala...any help anna @JVL code
Node js authentication tutorial podunga pls
Spring boot full tutorial bro
Thala drf tutorial podunga
Hello bro na unga videos ah thodarnthu pakuren react native with expo use panni complete ah oru ecommerce app epdi ready panrathu for android and ios ku...oru video podunga bro...and i want to contact you bro. Epdi contact panrathunu solunga
Scss/sass potuga
super bro but ennaku naa enamo css padicha madiri iruku
Bro layer apply in tailwind enna bro
Check this video. Extract components section
Ungala epti contact pannurathu ?