Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website
HTML-код
- Опубликовано: 7 июн 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?
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 🇨🇮
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!
@@christianndeh6292 a guy from Burkina here
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 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!
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!
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
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
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!
You made me feel that I can do a lot with tailwind.
There are no suggestions to point, you are awesome 🙌
Completed! Added some hover and scroll animations from my side.
A huge thanks and gratitude to you...
They way you talk is ideal for me, very chill and explaining. It's fun to learn and make sites with these vids.
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!
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?
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!
Man ! This is an EXTREMELY USEFUL video. Perfect for beginners too.
Thanks much !👏👏👏
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.
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!
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.
Just amazing. I can't thank Adrian enough for such incredible content! Have truly learned a lot!
hey Adrian, i get used to with your speed, it's perfect, clear easy to understand.
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 👏👏❤❤
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.
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! 💗
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!
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
Great tutorial on TailwindCss. With you, web development looks much easier👏🙌
I've seen so many courses here in RUclips, but this is the only video taht actually helped me understand Tailwind XD
You are great brother, all thanks to you i could finally take a step towards completing my web dev journey. You are awesome
I completed this project today and there is just one thing i have to say. You did an excellent job, i learned a lot. 🎉🎉🎉
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
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!
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!
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!
This is the best course ever. Easy, simple and you learn a lot of things. Please keep going we love u ❤
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.
it is smooth My project was done in 4 days
thank you
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
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.
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 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.
Man I loved it!! Thanks a lot for such a great course ❤
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.
It's like you can read minds , was about to start Tailwind and this dropped , thanks Adrian.
Enjoy!
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 ':)
Always good stuff. These tutorial projects give plenty to learn from but leave enough to do some experimenting yourself.
Best of the Best tutorials I've ever walked through, thank you so much man 🙏
Your the best i swear !!!! Thank you so much for the video , the kit and the news letter
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
It has been a phenomenal build , thank you Adrian.
Thanks!
It's exciting free course on RUclips. 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. 😍
Wow, thank you!
it's more than a tailwindcss masterclass, it's an entire application development methodology. thank you sir
Amazing tutorial, great explanation. Thank you!
I was procrastinating about starting my tailwind journey, now it is perfect time
Enjoy!
My favourite teacher learned lot from this channel still learning something new. Indebt to this channel and so thankful.
Thanks!
truly loved it ...... we nee more on tailwind like this at least 2 more please 🙏
I have been looking for Tailwind tutorials.
Ready to dive in.
Thank you.
Hope you enjoy!
I was looking for a tailwind tutorial yesterday and found your video today ❤ Thanks
You’re welcome 😊
Thanks for the free starter kit. Successfully downloaded.
thank you so much buddy, you are a the best tutor anyone can have for web dev using js
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
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 a wonderful video! Thanks a lot, Adrian. I would really enjoy a crash course on Prisma/Next Auth in the future.
Thanks!
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.
this video is simply TOP TIER!! :)
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!
I was looking for tailwind CSS yesterday night, and today you made a video on it. Perfect Timing 👍
yeah, same😂
Perfect!
Of course dive into this wonderful tutorial now !!
Amazing!
One of the best programming chanels, thank you for share.
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.
I learn so much by just watching your videos. Thank you for the content Adrian 🙏🏽
You got it!
Just finished Threads and moving to next Project!!!Great job!!
Awesome! Thank you!
I love your content... Just Subscribed !!!... Excited to get such great content and resources from your side❤
Really good tutorial, it makes me motivated to start learning Tailwind, it seems to be a gamechanger in coding!!
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.
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
You are incredible! Thanks you so much.
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.
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 .
Very well explained!
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
The Best Tailwind Course ❤ ❤ ❤
Excellent i've just started learning Tailwind and find a perfect tutorial ❤
Glad it was helpful!
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!
Is like if Adrian is reading my mind all the time...amazing!!!
Haha, maybe! :D
Thank you so much this was much needed for me.... and also I requested for this one... Thank you Adrian 🙏
You got it!
Great course. Also I love the way you teach and explain things.
I appreciate that!
Thanks brother !! Exactly what i needed 👍🏾
You got it!
Thank you for the lesson. Your lesson are amazing
Thank you for the amazing quality of content Thanks.
your video editing, presentation and content is top-notch ❤
Thankyou so much. You are here🎉🎉
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❤
Amazing, good luck!
hey could you complete it without buying the hostinger plan?
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.
Thank you so much for your effort Adrian❤
My pleasure!
Wow.. Another master piece. I'd want more web3 tutorials if possible Adrian
Thanks!
Video is perfect, good teaching skills my brother 😀
this hands down the best channel for developers to improve their skills
Thank you!
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.
Great idea!
"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."