Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website

[@javascriptmastery]

📚Tailwind CSS Starter Kit: resource.jsmastery.pro/tailwind-starter-kit

[@abhinasregmi9742]

link not working

[@ethan.creates]

tried it out with two emails but couldn't receive anything, checked spam as well.

[@javascriptmastery]

Try again, it works for me

[@badis6717]

it worked for me too, thanks jsm

[@shayantriedcoding]

Hi, sir which theme are you using in vs code?

[@thierrymemel]

Dear Adrian, As I was watching your course, there was a moment at 2:26:08 where you questioned if your teaching style and content delivery were resonating. Let me assure you today: your course has been immensely valuable to me. Personally, I appreciate the effectiveness of your teaching methods, allowing me to grasp concepts more efficiently. Your approach to teaching Tailwind CSS is exceptional, and I want to highlight a few key points. First and foremost, your clear and concise explanations have made complex concepts more accessible, enhancing my understanding of Tailwind CSS significantly. Your pacing and organization of the course are commendable. The way you structure lessons and provide a step-by-step guide has made the learning process smooth and enjoyable. In addition, the Nike website project is a brilliant choice, as it allows us to see the application of Tailwind CSS in a context that mirrors real-world scenarios. The attention to detail and the effort you put into preparing the course materials, including assets, has undoubtedly accelerated my learning curve. What sets your course apart is your meticulous preparation of assets, ready for us to use. This has significantly increased my learning speed, enabling me to concentrate more on the core content without being distracted by the search for additional resources. Your thoughtful approach to providing practical tools has streamlined the learning experience for me. Thank you so much for your dedication to teaching. Your efforts have not gone unnoticed, and I genuinely feel more equipped and confident in my JavaScript skills because of your course. Blessings to you, and may you continue to inspire and educate many others. I love you brother ❤ Best regards, Thierry MEMEL from 🇨🇮

[@christianndeh6292]

Dude, So glad to find a comment from Ivory Coast. I'm from the same country and I thought I was the only African to follow this channel. What a nice surprise!

[@dreamsachiever212]

@@christianndeh6292 a guy from Burkina here

[@austinmonde3164]

​@@christianndeh6292 speaking of being African, You are not the only one. Zambia here

[@user-yh6kr2tf5y]

@@christianndeh6292 no u are not the only one from Africa , here from Ethiopia (land of the origin of man kind )

[@pidtkrathepnom9347]

TBH, It's awesome. In less than 3 months, I had a better foundation and was able to expand on my own projects until I finally got a job. This channel is Gold.

[@javascriptmastery]

Thanks for sharing!

[@6.squash.936]

When the world needed him the most, He returned 🙏❤️

[@javascriptmastery]

Always🥳

[@avinashvagh6796]

Adrian: The Last TailwindMaster 🔥😌

[@lastspoil5547]

Is this easy to learn? I still have to learn React 😂

[@6.squash.936]

@@lastspoil5547 first learn React

[@eliastefera8574]

Your way of teaching is unmatched! It's apparent you carefully prepare your videos in the best way possible for people to easily learn the materials. You are amazing!

[@javascriptmastery]

Wow, thank you!

[@tishukr930]

I Just clicked on this video by curiosity but couldn't stop watching.This is one of the best tutorials on the tailwind with lot of things that people usually miss out on. I can't believe how good this is for a sub 3 hr tutorial

[@javascriptmastery]

Wow, thanks! That means a lot!

[@earnstein7607]

This is a masterpiece, I did not only learn tailwind. I know have the best way to always structure my code and components. Thank you so much

[@MazharulIslam-wj3zw]

Hey Adrian, Do not need to change your teaching style. It is a best video I watched about TailwindCSS. I have learned how quickly create a landing page using TailwindCSS. It was an amazing experience after watching you. Thank you

[@soumadip_skyy_banerjee]

Need a beginner friendly NODE/EXPRESS/MONGO_DB in-depth course from u Adrian! Loved this one by the way ❤️👌🏻

[@javascriptmastery]

Great idea!

[@dywa_varaprasad]

thanks mate

[@BenOdari]

​@@javascriptmasterybest teacher

[@thiranaembuldeniya3848]

That whould be great!

[@sanketkere7722]

@@javascriptmasteryplease

[@olayinkataiwohassan5877]

This is my probably my first time ever commenting on a yt channel! Bro you’re LITERALLY fire itself! From your composure, your use of words, sounds so basic and soothing to the ear! I’m still 25mins in but damn well done!

[@laxmiprasanna4092]

Excellent work. Please do 3 to 5 hour courses of all technologies used inside your project videos. So that we can follow along. I was not watching most of your prisma nextjs videos because I dont understand them yet.

[@javascriptmastery]

Great suggestion!

[@bhaskargowda-3955]

​@@javascriptmasteryyes please ❤

[@christcombiccombichrist2651]

​@@javascriptmasterywhen will the full next.js ebook be coming out?. I already stated that read alot and video demo don,t really work for me.

[@javascriptmastery]

@@christcombiccombichrist2651 it'll come alongside the full nextjs 13 course

[@serpico8832]

I find this course and all of your other courses to be perfect for actually learning the proper way to develop and use tools like Tailwind. You do a great job of explaining why things are done, and the process is repeated enough times to really get the points. I am very grateful for your content!

[@JoshuaMega-f6l]

I’m so happy being part of this project

[@karansawant5121]

I watched the video completely. I've build it completely with you side by side . And now for sure i will try to give it a go by my own and then i will deploy the version i am going to build. Though I am little confuse about how can i toggle the navbar by clicking on hamburger icon. As like your other videos i learned alot from this video also. I have a huge respect towards you for the content you provide. Thank you so much for doing this❤

[@javascriptmastery]

Amazing, good luck!

[@ofjdaz]

hey could you complete it without buying the hostinger plan?

[@a-factoracademy]

The only online teacher reading my mind... I'm grateful 🙏🏾

[@javascriptmastery]

Thanks! 🙏🏾

[@prashlovessamosa]

Thank you Adrian for knowledge very grateful to you.

[@jotasenator]

I think the same

[@chad8519]

Always good stuff. These tutorial projects give plenty to learn from but leave enough to do some experimenting yourself.

[@mattoattacko]

I doubt anyone from JSM will see this, but your videos are excellent. The only thing I change when watching the videos is increase the playback speed to 1.25, though I think the regular speed is perfectly fine.

[@kamsiyonnaobi2242]

2:26:38 Your teaching style provides a glimpse into the industry standard of building and structuring applications. This has always been the standout feature of JSM. Here's my recommendation. You could deliberately leave out certain features of the application to challenge us to build them on our own. Additionally, you can continue to provide ideas on how we can improve the application that you have built. Alternatively, you can avoid building complete applications so that students are forced to finish them before adding them to their portfolio. 😅

[@akingbayiojo4609]

The way your taking this course is fine and honestly the best I've come across. I'm not usually a fan of long tutorials or videos but watching you doesn't feel like that for me. I hope you continue to do more videos as you go on in life. Thank you for what you do. I can't appreciate you more.

[@thecomicpunch2888]

Just finished the course. This is more than a course of Tailwind, this teaches how to build a "landing" with React which is so great. I did everything, I've learned a lot. THANK YOU!

[@bruvhellnah]

Does this require knowledge of react in anyway?

[@thecomicpunch2888]

@@bruvhellnah I had some knowledge in react. You can follow the course and achieve the goal. But maybe I recommend to take a tiny course of react before to go with this one.

[@bruvhellnah]

@@thecomicpunch2888 Appreciate the reply.. would you also recommend having some knowledge of plain css before this course? also does this cover tailwind in depth - i come from a backend background, css seems tough thats all lol

[@thecomicpunch2888]

@@bruvhellnah I guess the basics of Tailwind, this is a very extense tool to cover all the topics. Yes, you should have CSS knowledge before talking the course.

[@saloni6242]

I followed your instructions and felt like only this way i could complete my project. I never thought i would feel so helpless at any work, the way setting up different tools, frameworks in my laptop. I hate it. Because of you i am somewhat relieved😄😄

[@CosmicAmusement]

I was looking for tailwind CSS yesterday night, and today you made a video on it. Perfect Timing 👍

[@abdelrahmanzaitoun4402]

yeah, same😂

[@javascriptmastery]

Perfect!

[@nehagad1923]

Man ! This is an EXTREMELY USEFUL video. Perfect for beginners too. Thanks much !👏👏👏

[@abdelrahmanzaitoun4402]

I was procrastinating about starting my tailwind journey, now it is perfect time

[@javascriptmastery]

Enjoy!

[@hydro6527]

My favourite teacher learned lot from this channel still learning something new. Indebt to this channel and so thankful.

[@javascriptmastery]

Thanks!

[@MichaelToce]

I watched a few of your other videos and realized after deployment that we never changed the tab title and icon. So on this video I paused before we went into the nav bar and changed it myself... low and behold I unpause the video and we actually changed it this time! HAHA

[@cape_YT_]

It's like you can read minds , was about to start Tailwind and this dropped , thanks Adrian.

[@javascriptmastery]

Enjoy!

[@user-vn6lj5qq6c]

it's more than a tailwindcss masterclass, it's an entire application development methodology. thank you sir

[@DevBoy-hd4kr]

You are one of the best youtubers who teaches consepts throughout real projects, I'm impressed by the quality of your videos, just the complexity of the introductions you make is a masterpeice, and throughout the course, your voice and the way you teach was exceptional. thank you!

[@samwilson4597]

this hands down the best channel for developers to improve their skills

[@javascriptmastery]

Thank you!

[@PegahAboltakhti]

не стоило сомневаться даже, это топпп

[@user-zb9ub5nd1z]

You asked if your teaching is fine; i'd say its perfect to me. The voice, exciting level, volume, speed..etc etc. I have gone through some of your other videos and this particular one is my best so far because here you explain some stuff like flex does this, flex-1 does that. Please always explain some of them because css is not so easy for many beginners and we need to see and know what a certain line of code does--- and what the opposite do. Thank you again.

[@user-zb9ub5nd1z]

For example; what you did at 2:27:08 , that's just perfect. And u dont have to do it in the entire video but bits of that explanation here and there is perfect. You deserve more success my brother. And I look forward to enrolling in your courses.

[@SoverignBeing2023]

Wow this breakdown of Tailwind has been incredibly helpful. Thank you for putting out such helpful content and breaking it down easily!

[@no-distrx]

Your sense of design and style is outstanding! Your way of teaching is exceptional! I'm watching you from another country where English is not the main language, but I understand your every single word! Thank you very much!

[@AmitSaha_15]

Completed! Added some hover and scroll animations from my side. A huge thanks and gratitude to you...

[@cwhite7002]

This course is probably the most informative that I've done versus all the courses JM have created by going over the tailwind configs and touching on tailwind base/components/utilities. Always had problems wrapping my head on how the CSS fits together with your created layers and how it works perfectly with Desktop and mobile. Can you please do a video on how you created all the layers and the thought processes?

[@hugosandoval9013]

I completed this project today and there is just one thing i have to say. You did an excellent job, i learned a lot. 🎉🎉🎉

[@markjaysonalabazo1569]

I've seen so many courses here in KZbin, but this is the only video taht actually helped me understand Tailwind XD

[@temesgentikabo3151]

You're just mind reader❤...tons of love From Ethiopia 🥰🥰

[@javascriptmastery]

Greetings to Ethiopia!

[@MarouaneChf]

Thank you so much JSM for this amazing and helpful course, I've enjoyed watching and following you through this course, So after I've finished and built my copy of this landing page using Vuejs and Tailwindcss I can say that I'm now able to start building my projects using Tailwindcss, and I don't forget to share that I got an idea about how React works, it looks like it's similar to Vuejs so I decided to learn React and add it to my skills.

[@gonereng]

Just finished the course and I want to thank you a lot for this amazing course. I really liked the approach you teached us tailwind, for me the typing speed was sometimes too fast, but then again I can simply pause the video or slow down the playback speed. Looking forward to take your nextjs courses next.

[@ayeshask8564]

your apprach of teaching is reallly understandable and the resources are really valuable for me one thing i do while watching your videos is changing the playback speed to 0.75 as your speed is little fast for me. last but not leat i would like to thank you for creating such useful resources and making my learning journey easy and enjoyable, THANK YOU once again!!

[@saaanniiii]

Randomly finding you through the youtube algorithm has been one of the best things 😍😍 I have subscribed to your newsletter as well which keeps me updated always. Thank you Adrian ❤

[@javascriptmastery]

Welcome aboard!

[@frtrash766]

What a good video, now i feel a bit confortable with playing with tailwindcss and learning a bit of react. Feels good the way you explain everything and the pace you use to talk.

[@user-ot7ip1zt9c]

This course is amazing. Asides teaching you Tailwind which it does so well. it also shows you how to build a landing page with react as well as show you the proper way you should structure your code. Now my codes can be a lot cleaner. Thanks a bunch Adrian. Your videos are a lifesaver 👏👏❤❤

[@nikhil2735]

You made me feel that I can do a lot with tailwind. There are no suggestions to point, you are awesome 🙌

[@ArneNoedel]

They way you talk is ideal for me, very chill and explaining. It's fun to learn and make sites with these vids.

[@GreenPear-mz4dl]

hey Adrian, i get used to with your speed, it's perfect, clear easy to understand.

[@ankitdas2197]

it is smooth My project was done in 4 days thank you

[@hoanghai_0725]

It's exciting free course on KZbin. I searched so many resource, with purchase course and free course. But with your channel, I find my passion in Web Development. I watched 4 video tutorial in this week, and now I have more knowledge in TailwindCSS. Thank you for your channel. 😍

[@javascriptmastery]

Wow, thank you!

[@Nulimitz]

I have not liked Tailwind. I always go to Bootstrap for everything. This makes me want to learn Tailwind more. So many options. Thank you Adrian!

[@michaelriccelli8483]

I think the tone and speed of these tutorials/course - being free on youtube - are great. Maybe take a bit of an extra second at times to explain a bit more about anything that is new. The architecture itself taught me a lot about react. I will be using this structure to build websites moving forward.

[@3illanon145]

Another one dropped, right after threads 🔥🔥🔥🔥🔥

[@javascriptmastery]

Yess! 🔥

[@michellehuerta9576]

Hello, I just discovered your channel and I have subscribed without hesitation. Thanks for the video, it has helped me a lot to understand how tailwind works and now I can apply it to my work.

[@javascriptmastery]

Great to hear!

[@sketchmaniac1941]

Man I loved it!! Thanks a lot for such a great course ❤

[@user-gx1jv1sd9e]

Here's some feedback as a beginner developer: Strengths: I really appreciate the vast amount of knowledge you shared. You have a lot of expertise in the subject. | Area for Improvement: For beginners like me, it can be helpful to slow down sometimes and delve deeper into specific concepts before moving on. In a beginner class, assuming no prior knowledge can be beneficial.

[@arthur333able]

Just amazing. I can't thank Adrian enough for such incredible content! Have truly learned a lot!

[@mohammadhani110]

I was looking for a tailwind tutorial yesterday and found your video today ❤ Thanks

[@javascriptmastery]

You’re welcome 😊

[@parthadhikari00]

I felt your approach more like I'm mugging up a pre-written code, like rather than building the shoecard first you should make the state and tell us what will be stored in that state

[@Code-Patis]

Thank you so much! I was getting a bit terrified about CSS, but with Tailwind, CSS does not look that scary.

[@AsmaKhan-qf6gd]

sir I don't Know How Can I thank you? YOU did a great job we learned alot from this. Your way of teaching is just as easy as ABC from now on I will just follow you.

[@torrid4560]

Of course dive into this wonderful tutorial now !!

[@javascriptmastery]

Amazing!

[@bigjoe100]

Adrian, you are the best I have seen so far when it comes to responsive web design just completed the project and looking to publish it on my LinkedIn also I will be adding the cart page to make it an e-commerce website for shoes. Thanks, Adrian for all you do.

[@bhanuprakasht9405]

Thank you for providing the latest technologies for free.I'm glad that I came across this channel for web development on internet.Thank you once again

[@javascriptmastery]

Thanks!

[@hossam_cj]

As you asked us about how you were speaking, you are fantastic, I'm from Egypt, and English it's not my first language, but الحمد لله I understand every single word coming out from your mouth, you have اللهم بارك clear explanation, very organized, and working from 0 to intermediate as they sayin, I hope you organize the other Front-End stuff, backend stuff, like really working environment, real work tasks, explain to us how you receive it from your manager, how you start working on it, How you search and testing it, I know it's kinda like how you are actually working on your videos, but I'm talking about your own big tasks, and thank you for this beautiful content, Thank your god a lot about giving you the ability to work hard and clean like this .

[@handleneeds3charactersormore]

Amazing as always, I really appreciate your style and pacing, I think it would be a great addition to have a Sveltekit video from you Adrian ❤

[@javascriptmastery]

Great suggestion!

[@xpo11ox]

One advice, before starting building the next section, challenge us to build it first. To do that, we will need at least a demo o static image based on. Thank you so much for your educational content. I have learnt a lot!

[@davidt510]

Really enjoyed following along with this tutorial. One bit of feedback I had though...in the customer review section, unless the blurb of feedback is roughly the same size, the separate reviews don't sit flush beside each other. It stands out a little if one has a lot of text in the feedback are and another doesn't.

[@youcefmantas4944]

Your the best i swear !!!! Thank you so much for the video , the kit and the news letter

[@Kokouvi_el_mejor]

Don't tell me that i'm Dreaming. Thanks ADRIAN

[@javascriptmastery]

You're not! :D

[@DuyentheNomad]

The best teacher I have ever learned in this platform

[@sougatadas_yt]

It has been a phenomenal build , thank you Adrian.

[@javascriptmastery]

Thanks!

[@ofjdaz]

02:25:22 you asked us how we are liking this course so far and how's your method for us. My answer is: It's so good that I've watched many tutorials but this is the first one in months I'm completing. I want to say I've been liking it a lot. Your pace is very very good. And I have nothing but good things to say. And only because you asked for suggestions, here are mine: 0) I have caught a couple of typos with tailwind classes (maybe 2 during the whole video which is very impressive, I have an eye for detail) here and there but there's the repo with the code so we can always check. 1) I was thinking maybe some things be explained further, for example in the special offer components you have three cards and on mobile screen sizes we can see how the last one stacks up to the full width, and the magic there is the flex-1 utility class from tailwind, maybe focusing on those small details that I think are not mentioned but you have them there. However I truly feel you're teaching tailwind and not the basics of css, so it's fine. 2) After finishing a component, I'd suggest a pause of maybe 1 second so we can see the code while it's there in the video. I'd rather be typing with you in the video than copy the code from the source code because I learn by doing. So if you pause for 1 second it might give us more time to stop the video at the right time :) This is an AMAZING course and I think your work is superb.

[@lorenacamara6249]

This tutorial is amazing! It was incredibly helpful and easy to follow. I really appreciate the time and effort you put into creating it. Thank you so much for sharing your knowledge!

[@aliphenomenal6935]

👍Best Tutorials In KZbin

[@zehranoor7799]

just finished this project and now feeling accomplished! :))) thanks a lot for making this easy to understand. I really like the way u talk and ur selection of words are really impressive (y) it also helps me to improve my English as well ':)

[@juxtapose2125]

woah, this is awesome. been finding a tailwind tut cuz ive been wanting to switch from css LOL, this was a nice find. thanks man!

[@ayushsharma4894]

You are great brother, all thanks to you i could finally take a step towards completing my web dev journey. You are awesome

[@dlouhavideacz]

Pro TIP: play it on 0.75 speed. For me it's definetly better 😁 and I have to say, that it would be better to first put content in divs and than style it so we can better imagine the work that CSS is doing. Thx for this video, I have learned a lot!

[@domoknows3275]

incredible tutorial. my first intro to tailwind as I start up a new web app and I'm going to use a lot of this to get started!

[@saraalmaqbali8479]

This is the best course ever. Easy, simple and you learn a lot of things. Please keep going we love u ❤

[@abdelrahmanmagdy3706]

Best of the Best tutorials I've ever walked through, thank you so much man 🙏

[@2ru2pacFan]

Honestly, a lot more success will come your way and I pray that it does my friend because if any teacher deserves it then it has to be you ♥

[@javascriptmastery]

Thank you!!

[@ogundipeorobola5304]

Great tutorial on TailwindCss. With you, web development looks much easier👏🙌

[@anujkashyap999]

I always waiting for your new videos adrian and i loved your ideas , project's, tutorials and the way u teach us it's amazing ❤

[@javascriptmastery]

Thank you so much!

[@Zara_Blink-l6q]

Excellent i've just started learning Tailwind and find a perfect tutorial ❤

[@javascriptmastery]

Glad it was helpful!

[@Prabhakaran-r]

You are always awesome and save our life, one kind request, if possible please provide a video how to deploy in cloud using Docker and Docker container, there are many videos out there but the way you teaching is wonderful!.

[@javascriptmastery]

Docker coming soon!

[@CodeWithBalaji]

Completed

[@onrightside]

Your videos are super cool. I think if you add tailwind classes to elements after adding content inside, that will show how each class is contributing to the style visually. That will be even cooler.

[@SAMEERSHAIKH-dw8rg]

Great content. Would love a full fledged Sveltekit tutorial 😀😀.

[@javascriptmastery]

Cool idea!

[@devwithzain]

First of all, thank you very much Adrian for doing so much for the community, can you make a modern UI/UX website with next js 13, tailwind css, typescript and framer motion.

[@javascriptmastery]

Great idea!

[@sulemanahmed2408]

This is really awesome. I have used some of your assets and setting and have created a decent hero section for my website. Tailwind is alot better and easier than bootstrap unless one wants the website to look like something created by a robot. THanks you

[@janetEtim-k3s]

Happy to be there with hamster Kombat team good job

[@hannankhan8166]

what an amazing course. thank u so much i learned so much and your teaching style is great especially how you talk. i regret wasting time on other tutorials. im a beginner i wish i had found this amazing channel sooner. The content of this channel is really at another level compared to others even better than paid courses. This channel deserves much more subscribers , likes , love and appreciations. cant thank you enough. May Allah (The God) bless you and guide you.

[@dencam]

I have been looking for Tailwind tutorials. Ready to dive in. Thank you.

[@javascriptmastery]

Hope you enjoy!

[@dellanmuchengapadare3792]

Great video, it would be even nicer if you share your thought process while building the page from top to bottom, and showing how you tweak the page for different screen sizes, as compared to just writing in magic classes. I know it would probably make the video longer.

[@javascriptmastery]

Great idea!

[@wei7360]

I agree too!

[@aditya2005_found]

Very well explained!

[@SculptingMode]

"First of all, thank you for the content you are providing. As feedback, as you requested, I find everything is superb with the voice, the speed - it's just great! But sometimes I feel like I'm not keeping up (of course, I'm a beginner, so...). I would appreciate it if, for example, when going through CSS (my weak point), there could be a visual effect like a pen pointing when adding Tailwind classes. This would give a pre-idea of how to style the specific section and what we're supposed to use. Sometimes, I just follow along and then see the results, which takes the fun out of it for me since I know it's going to work. What I'm trying to say is that if there was a way to draw on a section and explain, like 'I'm going to do this and that' without code first, it would give those who want to try a chance to experiment themselves. We need the guidance. Once we do the code part, it's easy. Nevertheless, thanks for the great content."

[@piyushpatil6874]

The Best Tailwind Course ❤ ❤ ❤

[@gamingwiths_k7742]

day 1 : complete 1.17 hours project day 2 : complete 2 hours project day 3 : finally complete the full project