Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours
HTML-код
- Опубликовано: 6 июл 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
This Tailwind CSS Full Course for Beginners provides a complete all-in-one tutorial with 3 hours of code and instruction to level up your web development skills. Think of this Tailwind CSS Course as a textbook with 5 clearly defined chapters.
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- The Complete Web Designer: bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this Tailwind CSS Course: github.com/gitdagray/tailwind...
🔗 Playlist for this Tailwind CSS Course: bit.ly/3BKYrzg
Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial
(00:00:00) Intro
(00:00:25) Welcome
(00:00:51) Chapter 1: Introduction & Tailwind CSS Setup
(00:22:25) Chapter 2: Project Header, Hero & Cards
(01:08:48) Chapter 3: Project Pseudo-Classes, Forms & Footer
(01:45:52) Chapter 4: Animated Mobile Menu & Hamburger Icon
(02:33:28) Chapter 5: Theme Config & Deploy to the Web
📚 Suggested Pre-requisites for this Tailwind CSS course:
🔗HTML for Beginners full course: • HTML Full Course for B...
🔗CSS for Beginners full course: • CSS Full Course for Be...
📚 Tutorial References:
🔗 Tailwind CSS: tailwindcss.com/
🔗 Prettier: www.npmjs.com/package/prettier
🔗 Automatic Class Sorting with Prettier: tailwindcss.com/blog/automati...
🔗 git: git-scm.com/
🔗 Github: github.com/
🔗 Render: render.com/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Node.js: nodejs.org/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 Tailwind CSS Intellisense VS Code Extension: marketplace.visualstudio.com/...
🔗 Inline Fold VS Code Extension: marketplace.visualstudio.com/...
Was this Tailwind CSS Full Course for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#tailwind #css #course
A 45 second intro followed by 3 hours of code and instruction for Tailwind CSS. I bookmarked all 5 chapters in the description. If you complete one lesson per day, you'll complete the full course in just 1 week. Join my Discord server for discussion and to ask questions: discord.gg/neKghyefqh
Thanks Dave
@@bitsolve3229 Join my Discord linked in the description. I check there often.
Thanks!!
This tutorial is the ultimate is re-learning a skillset I had a hard time rekindling for years.
I have been watching already for 20 minutes and definitely I am in love with your video. Your videos about HTML, CSS and other videos are the best I have ever seen. You deserve to have a lot of subs and I think everyone who wants to start programming should learn from you. I will recommend everyone about your awesome tutorials. I have no words to describe more here. It's just awesome, amazing, and dope.
Thank you so much. Greeting from Poland. I am on my way to becoming a frontend. :)
Thank you for the kind words and hello 👋 to Poland!
Thank you so much Dave. Such a great tutorial! Basics to customizing themes. I was looking for it. Thanks, Dave. Your tutorial helps a lot.
You're the man, Dave!
I'm already using Tailwind, but I'm gonna let this play in the background to help your metrics and see if you have any little tips for me.
I'm at the point where I'm chanting along with you "much like the chapters of a book".
Ha! Glad I may still provide a few tips and thank you for the support!
The amount of DETAIL that you put into your explanations is what is missing from any other video I have ever watched. Every curiosity that I had whilst looking at what you did has been answered. Thank you so much.
Glad I could help!
Swears ❤
Your tutorials are coming out just in time when I need them :)
Whats great is how I can listen at 1.5x speed and your speech is crystal clear. In fact, its got a nice rhythm, I could keep on going. 🚀🚀
Great to hear! My previous classroom experience (and way back in the day I worked in radio, too) must be helping with my clarity. Thank you for the feedback!
Great series. Helped me ramp up on Tailwind fast. Thank you for creating this.
Really great video tutorial. Thank you Dave. After two days working through your tutorial I now have a great base to build upon and familiarity with using Tailwind. I had no previous experience with Tailwindcss, just vanilla CSS without frameworks.
This is by far the best framework to write CSS, omg it is so simple and easy and makes your websites look unique however you want to style it, and the mobile responsiveness is effortless!
Glad you like it! 💯
Yes, 100% 😉
Such a great tutorial! Basics to customizing themes. I was looking for it. Thanks, Dave. Your tutorial helps a lot.
Glad it was helpful!
Good day, Dave! I appreciate the way you teach us various aspects of web dev and all of your tutorials seem pretty much straight forward and concise. Getting to the point, I've seen a lot of projects made by using three.js and they seem breathtaking; so are there any chances we gonna have some three.js tutorials here? Thanks a lot for your videos Dave! Have a nice day!
Thank you so much Dave. You are a great instructor who adds a real value with every video. I like how verbose you are sometimes so you present the materials crystal clear for users specially beginners like me. Keep up the good work and best of luck
You're very welcome!
The one of the best person ever in the whole world to teach Web development for free. Appreciate your efforts. Really you are helping thousands of people.
I love your tutorial, this is amazing. You not only explain very clearly about what you are doing also you show how a real life developer would set up the project. Thanks for your amazing work.
Glad it was helpful!
i admit that i like your teaching style dave you made my life easier in learning this kind of thing i share my experience about watching your closure tutorial in javascript, we all know that closure is somthing that its hard to learn but because of dave i finally understand how it works thank you dave!!!
Glad to hear that!
thanks you dave for this tutorial,I love it so much
Thank you so much Dave, you’ve really been helpful in my journey.
Thank you Dave for the great work. This is the best tutorial I found in learning Tailwindcss.
Glad to hear that! You're welcome!
Was already giving up on my web development journey and I stumbled upon your tutorials thanks man really helped alot
Glad I could help!
I’m still in this boat, looking for the light at the end of the tunnel
You are a wonderful teacher teaching us a great Taindwicss tutorial!!
Sir, your videos are awesome! Thank you for sharing all this high quality knowledge with us!
Absolutely Fantastic!
Great! I had been hesitant to use Tailwind for some time, but your video has sparked my enthusiasm for it.
Glad to hear that!
Excellent! TY!!!
thanks for having me on your amazing content
great tutorial thank you!
This tutorials is wonderful Thank you so much
When you see its Dave.. You gonna know the best of tailwindcss video is coming to you. Thank you again Dave 👌👌
Can we request a typescript video next.
You doing great job helping self-taught programming learners. All Blessings to you and family 🙏
Thank you! You can request TS and I can suggest the TS series I recently started: ruclips.net/video/MOO5vrtTUTE/видео.html I hope it helps! 💯🚀
@@DaveGrayTeachesCode That's great Dave! I'll still wait for the full course in 1 video, like you always do. I get better grasp that way! Thanks for the effort you put in though 🙏
Hey Dave, in chapter 2 when you put z-10 in the header, It doesn't really do anything. When in full screen, I would like the header to be flush up against the top left corner of the window, so I assumed removing z-10 from the header would do that, but it jus stayed the same.
Thanks a lot! Great and handy job!
You're welcome!
Thank you, Dave, your tutorials are excellent!
Glad you like them!
This is so lovely and explanatory. ❤❤
You make the world a better place. Thanks again!
Thank you for the kind words!
Hello Mr. Gray,
I'm confused at this point 40:36
Isn't the icon supposed to be hidden when it reaches the sm breakpoint and be visible again in md, lg, and other containers?
What I want to say is that isn't the behavior supposed to be the opposite of what is happening?
This is a great tutorial, thanks a lot Dave
Glad you liked it!
The king just dropped this🤌🏿🔥
You are too kind - thank you!
great tutorial, thanks dave !
Thank you!
Thank you very much for the tutorial. Very useful and the perfect intro to Tailwindcss. I like very much the way you teach.
You're very welcome!
Finally got it! Thank you ❤❤
You're welcome!
I can't thank you enough. Thanks for this great course.
You're very welcome!
Thank you Dave. You are awesomeness.
You are very welcome!
Always teaches us best practices ..Thanks a lot sir! 🥰
This video is a life saver. Thank you so much
Glad it helped!
You are very helpful,,, Thank you very much
Thank you this was great!
You're so welcome!
a really great tutorial, 1 question though, why you use emmet to write the full class? why don't you use class auto complete from the tailwind intellicense?
Thank you for your video, by the way, I really like the colors you chose.
Wow, cool! How does this work without npm i tailwindcss?
Dave I got stuck at the 11th minute when styles were applied to the body element. It did not reflect when I launched live server. Watched the video over and over again, deleted the files, started all over but no luck. I set background-color and some other properties and they reflected but the ones involving dimensions failed. I started trying different values but was getting some successes and failures. I went to documentation eventually - and found out beyond 12, increments are in multiples of 4. I was initially using h-54, w-54 just like css that I knew - It was a lot of stress. Now I can go back and continue. Thanks!
very good tutorial, i had clealy know how to use tailwind thanks for great tutorial, hopefully you can have another more deep tutorial for us,
Hi, thanks for this tutorial. The favicon from lesson 2 is not showing up on github.
Thank you for this great course!
You're welcome!
Thank you very much
Thank you soo much Dave I have completed this in one day!🤗
Great job!
Thank you very much man!
You're very welcome! 💯
Great job 🎉 👏
Thanks (Great as a quick refresher course!)
You're welcome and thanks for the support!
This is so great but my question is can put my website of 4 pages in a single html file and it will navigate to all pages
Great tutorial, I strongly recommend it !
Thanks for this great course.
You're welcome!
really nice course man🔥🔥
Thank you so much for this awesome tutorial.
You're welcome!
Oo you have a tailwind! Amazing
Your tutorials are simply the best...
Glad you like them!
i must say that this course is very helpful and should be promoted by RUclips algorithms since it it well informative and beginner friendly. Good deed worth reward
Thank you for the kind words!
Hello Dave,
I've ran into a problem where my double quotation marks aren't showing up on 1:21:50. I copied the exact HTML from the resource file and pasted it into my own HTML file to see if i missed anything. Even after pasting the exact code they don't seem to be appearing. Any idea on this issue?
If come across a course,that comes from Dave Gray i know that course is perfect 🎉🎉🎉🎉 ❤❤❤
I had to come here to rewatch this video. Am getting to see its immense usefulness
Right on! 🚀
Thank you so much for giving me the opportunity to deploy my first website. I really love your video
Glad it was helpful!
Dave Gray - My best teacher for web development
Thank you!
My CSS is not cooperating with me, it seems. I'm at 40:28. My text is not near as bolded or big, and the hamburger thingy is on the left side under my text. I have all the same code you do. Also, my rocket icon is above the text. I guess what I'm saying is everything is just going into the left side of the header and stacked on top of each other, rather than in a line or on the other side like you have it. My headers are not bolding either. The span around "Where No Rocket" also did absolutely nothing to the text. I seem to be getting further and further from what you have as I go. Do you know what I'm doing wrong?
EDIT: Turns out I had "-- watch" in my package.json, rather than "--watch" so it wasn't recompiling the CSS.
Hi Dave, my trigram for Heaven button is attached to my website logo, any help on how to go about that
dave sorry my code does not implement past where i used npx on the terminal to watch my code....any code i write after wont show on my browser... for instance the properties initially gave a div (color) was emerald when i decide to change to red it wont show on my browser
I love 😍 your tutorials .
I am with you in Somalia 🇸🇴
Thank you and hello to Somalia! 👋
there few persons I admire them for one their abilities and you are one of them, for vibe and anything
Thank you for the kind words!
thank u ever so much bro I've done it and I try to complete ur typescript video as well so thank u and hope u have a great life
Thanks, you too!
@@DaveGrayTeachesCode u welcome bro
My vs code not making another file in build folder by giving npx command
Hey Dave, have you tried Styled components? For me, Styled components change web development completely but not all developers seem to have noticed that. See, we will not just have the power of Javascript to style (using JS syntax), but we can map every UI element to a component (just like what happens with Flutter)... so, if everything is a component, then it is easy to find, update, reuse, pack as a library and..... if everything is a component, then everything can be tested. While taking this 'component-first' approach, it feels to me that we are no longer creating 'documents' with web technology, but actual system UI modules, e.g: a button with an 'isTextBold' property can hide/abstract all CSS into the component itself, we don't have to worry about style while reusing that same component. Another thing is: With a set of battle-tested UI components, we will be 'assembling' screens in a LEGO-like approach, which can be incredibly productive. Please, let me know what you think, I'm intending to use Styled components for everything
Yes, nice approach!
Great teacher
A😊 treasure tutorial thanks ❤
Hello Dave, I always love your teaching, you made me understand javascript, css, html, hoping one day I hope to buy you coffee, but when I get to react I tried to style my component but not applying to it, I left react yesterday, to start with tailwind css I have almost installed everything I should add css to the build file I have been running into error, and I followed every steps
I can only suggest to review again. When there is an error, something must be incorrect. I can only guess from here, but I know you will find it.
Greetings from Egypt
I understood every word, it's like you was speaking in Arabic 😅
I just meant that you really good to clearify everything
Thank you Mr.Dave
Glad to hear that and hello 👋 to Egypt!
This is a great video on Tailwindcss. I would love to see a video on Sass or any css pre-processor done by you because your explanation is just too simple that a five year old can understand
Thank you for the kind words and request! 💯
You are the first Dave it's now that I find there I can learn tailwind cs 🎉
Glad to hear that!
thanks you very much DAVE
You're welcome!
2:27:46 I did everything like in the tutorial, but the X is not appearing what might be the reason?
As a beginner, I would like to see the class being applied to a element one-by-one to see its effect instead of typing 10+ styles as once then the job is done and continue to the next element. Yes, I can always test the style myself or check them in website... but what is the point of it? Typing all as once isn't much faster. Tailwind intelliSense can't help and cause a lot of typing mistakes.
I understand the request. It would have made this tutorial series much slower if I had done so. The series is not about learning CSS - which is a prerequisite for the course - but rather just learning Tailwind CSS and how to apply it. But again, I do understand the reason for your request.
I love you man. Thanks so much
You're welcome!
Thank you!
You're welcome!
Dave is just built different actually has infinite knowledge on everything
Ha! Thank you! There are many things I do not know - but I try to learn a little more every day. 💯🚀
Hey Dave,love your content. would love to know why you chose the unordered list in the Our Rockets section. is it a choice or there is special reason for doing so? Great Respect for your content.Easy to understand and follow. On of the true benefits of youtube ☺
Being months ago, I would need to review. I think mobile-first so I likely thought of a list of items even if they become cards.
The Unicode-table website is gone or different than the one you show? What's the exact url for the Hamburger (trigram for Heaven) icon?
☰
i am a begginer never thought coding will drain you this much i have learnt only css html and tailwind so far
Don't give up! Especially the beginning is always hard... You've got this 😉💪
I post very beginner friendly video about these topics on my channel - maybe they can help you as well ...
Do a little a day, compound effort my friend......when its all said and done you will be amazed at how far uve come. I used to feel just like you.
Waaaooo Amazing video on youtube Great Bro
Hey Dave! Thank you! Given the new changes to NextJS version 13 that render almost all tutorials useless. Would you consider as future series the NextJS 13+ framework?
Absolutely! And I'm glad I waited until now, too! 😆
@@DaveGrayTeachesCode Thank you!! You are my to go Teacher for everything web dev. Thank you so much for all the tutorials you've already uploaded!
非常棒的课程，谢谢。
The best tutorial on the internet
Thank you for the kind words!
Another note. If you're on mac and press control + command + space then you can get emojis that way as well.
Hey Dave, thanks for the tutorial, just wanted to know if it would be necessary to learn tailwind css before going into your Next.js full course?
It could help but it's not a deal breaker.
@@DaveGrayTeachesCode Okay Thanks so much man for giving me such a quick reply😊
please when you coding adjust your screen is middle