Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website
Вставка
- Опубліковано 30 кві 2024
- Dive into the world of #tailwindcss, build a Nike #website, and join top-tier organizations like OpenAI, Shopify, and NASA in building stunning apps effortlessly.
📚 Tailwind CSS Starter Kit: resource.jsmastery.pro/tailwi...
⭐Hostinger - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/nike_...
GitHub Gist Code Snippets & Dark Mode Script: gist.github.com/adrianhajdin/...
Assets: drive.google.com/file/d/1ccqj...
Tailwind Play - play.tailwindcss.com/
Tailwind CSS - tailwindcss.com/
In this crash course, you'll:
- Learn how to make the most out of Tailwind CSS
- Fully understand how Tailwind works behind-the-scenes
- Follow all of Tailwind's best practices
- Put all of your newly gained Tailwind skills to the test by building a beautiful Nike landing page
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:02:35 - Introduction to Tailwind CSS
00:04:44 - How Tailwind Works
00:06:31 - Domain Name
00:10:16 - Crash Course
00:49:11 - Project Setup
00:52:47 - Building the app
01:01:10 - Creating Components
01:06:34 - NavBar
01:17:22 - Hero Section
01:37:20 - Shoe Card
01:46:39 - Popular Products Section
01:58:26 - Super Quality Section
02:05:33 - Services Section
02:11:29 - Special Offer Section
02:19:53 - Customer Reviews Section
02:30:26 - Subslll Section
02:35:23 - Footer Section
02:46:47 - Deployment
📚Tailwind CSS Starter Kit: resource.jsmastery.pro/tailwind-starter-kit
link not working
tried it out with two emails but couldn't receive anything, checked spam as well.
Try again, it works for me
it worked for me too, thanks jsm
Hi, sir which theme are you using in vs code?
When the world needed him the most, He returned 🙏❤️
Always🥳
Adrian: The Last TailwindMaster 🔥😌
Is this easy to learn? I still have to learn React 😂
@@lastspoil5547 first learn React
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 🇨🇮
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!
Wow, thank you!
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!
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!
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!
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?
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
Wow, thanks! That means a lot!
They way you talk is ideal for me, very chill and explaining. It's fun to learn and make sites with these vids.
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
You made me feel that I can do a lot with tailwind.
There are no suggestions to point, you are awesome 🙌
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.
Thanks for sharing!
Need a beginner friendly NODE/EXPRESS/MONGO_DB in-depth course from u Adrian! Loved this one by the way ❤️👌🏻
Great idea!
thanks mate
@@javascriptmasterybest teacher
That whould be great!
@@javascriptmasteryplease
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!
Just amazing. I can't thank Adrian enough for such incredible content! Have truly learned a lot!
Man ! This is an EXTREMELY USEFUL video. Perfect for beginners too.
Thanks much !👏👏👏
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!
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.
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!
Man I loved it!! Thanks a lot for such a great course ❤
hey Adrian, i get used to with your speed, it's perfect, clear easy to understand.
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!
Completed! Added some hover and scroll animations from my side.
A huge thanks and gratitude to you...
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.
Great suggestion!
@@javascriptmasteryyes please ❤
@@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.
@@christcombiccombichrist2651 it'll come alongside the full nextjs 13 course
You are great brother, all thanks to you i could finally take a step towards completing my web dev journey. You are awesome
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.
I've seen so many courses here in UA-cam, but this is the only video taht actually helped me understand Tailwind XD
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 ❤
Great suggestion!
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.
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.
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 👏👏❤❤
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.
Always good stuff. These tutorial projects give plenty to learn from but leave enough to do some experimenting yourself.
hahahaha That is just sooooo much lovely and sweet of you Adrian!! at 2:22:26, your pace of teaching is phenomenal per see. There is not a single flaw I could find in your teaching things and clarifying as crystal clear considering your expounding of topics wherever necessary 😊💗. Your way of explanation is amazingly inspiring, which ignites us to learn it!
Keep it up brother or a great teacher!! Love you! 💗
I completed this project today and there is just one thing i have to say. You did an excellent job, i learned a lot. 🎉🎉🎉
truly loved it ...... we nee more on tailwind like this at least 2 more please 🙏
Thanks for the free starter kit. Successfully downloaded.
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!
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.
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 ❤
Welcome aboard!
this video is simply TOP TIER!! :)
Great tutorial on TailwindCss. With you, web development looks much easier👏🙌
Best of the Best tutorials I've ever walked through, thank you so much man 🙏
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
Excellent work. Although everything is foreign to me, because I'm new to web development, I have enjoyed learning. I just need to go through this lesson twice before I can grasp everything and build a new website using tailwindcss. Thanks
What a wonderful video! Thanks a lot, Adrian. I would really enjoy a crash course on Prisma/Next Auth in the future.
Thanks!
I learn so much by just watching your videos. Thank you for the content Adrian 🙏🏽
You got it!
This is the best course ever. Easy, simple and you learn a lot of things. Please keep going we love u ❤
It's like you can read minds , was about to start Tailwind and this dropped , thanks Adrian.
Enjoy!
It has been a phenomenal build , thank you Adrian.
Thanks!
it's more than a tailwindcss masterclass, it's an entire application development methodology. thank you sir
Really good tutorial, it makes me motivated to start learning Tailwind, it seems to be a gamechanger in coding!!
Your the best i swear !!!! Thank you so much for the video , the kit and the news letter
Thank you for the lesson. Your lesson are amazing
Thank You !
I have been looking for Tailwind tutorials.
Ready to dive in.
Thank you.
Hope you enjoy!
I was procrastinating about starting my tailwind journey, now it is perfect time
Enjoy!
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.
The only online teacher reading my mind... I'm grateful 🙏🏾
Thanks! 🙏🏾
Thank you Adrian for knowledge very grateful to you.
I think the same
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 ❤
Thank you so much!
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.
Amazing tutorial, great explanation. Thank you!
Very well explained!
Thank you for teaching and giving some tips to a newbie like me. I really enjoy your style of teaching. if it possible, can you also make the backend part of it please. hope it possible :D but I will try for it first
Thank you Adrian, I have been learning to code on my own for the last 8 months and my major problem has been coming up with original project ideas to use as I lack design skills, If you have any tips please make a video on that, the struggle is real.
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
Thanks for this great video!
One of the best programming chanels, thank you for share.
The Best Tailwind Course ❤ ❤ ❤
Of course dive into this wonderful tutorial now !!
Amazing!
Thanks brother !! Exactly what i needed 👍🏾
You got it!
it is smooth My project was done in 4 days
thank you
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.
I was looking for a tailwind tutorial yesterday and found your video today ❤ Thanks
You’re welcome 😊
Thanks!
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. 😅
Thank you !
I love your content... Just Subscribed !!!... Excited to get such great content and resources from your side❤
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.
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.
I was looking for tailwind CSS yesterday night, and today you made a video on it. Perfect Timing 👍
yeah, same😂
Perfect!
keep going... great tutorials...
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 .
You are incredible! Thanks you so much.
i really needed this
Awesome content as always! Thank you for such an amazing work! Please make a tutorial for Zustand :D
Sure thing!
Very well explained, ty very much.
Thanks you !!!
Awesome ! as always . Thank you
Thanks!
Thank you for this tutorial!
14-01-2024 this is the best way to learn i apreciate your work tn y so much
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.
Great to hear!
You are a legend !!!!
Consistently creates happy experiences ! Thank you so much Adrian ❤
PS : Hoping for a course covering ReactJS, ExpressJS and MySQL
Great idea!
@@javascriptmastery please make a react course with tailwind 🙏
You are a game changer 📈
Thank you so much!
My favourite teacher learned lot from this channel still learning something new. Indebt to this channel and so thankful.
Thanks!
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 ':)
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!
Amazing content I loved it!!
Just one suggestion I would like to give.
That is, Please write the html skeleton first and then write the classnames with tailwind.
So, that everyone could visualize why we are writing that css classes.