Tailwind Crash Course | Project From Scratch

Ғылым және технология

In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git.
⭐ Sponsor: InMotion Hosting!
bit.ly/3uVNhD6
💻 Code:
github.com/bradtraversy/tailw...
Frontend Mentor Challenge:
www.frontendmentor.io/challen...
Csaba Kissi Twitter (Tailwind Course Helper):
/ csaba_kissi
👇 Website & Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
2:45 - Getting Started
4:58 - Install & Setup Tailwind CLI
7:39 - NPM Scripts & Output
11:00 - Customizing & Config
13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc
24:06 - Hero Section
30:43 - Class Name Order Convention
33:44 - Features Section
44:58 - Testimonial Section
54:15 - CTA Section
59:34 - Footer
1:10:59 - Hamburger Menu HTML
1:15:38 - Custom CSS (Background SVGs)
1:19:45 - Custom CSS (Hamburger Menu)
1:25:08 - Menu JavaScript
1:28:27 - Deploy To InMotion Hosting

Пікірлер: 449

  • @davebudah
    @davebudah2 жыл бұрын

    Because of Brad Im now a Fullstack Web Dev at one of the Tech companies in my country. Thank you so much Brad.

  • @vishalmane3139

    @vishalmane3139

    Жыл бұрын

    proof?

  • @okonkwo.ify18

    @okonkwo.ify18

    Жыл бұрын

    @@vishalmane3139 😂😂😂😂😂😂

  • @chainmaven6026

    @chainmaven6026

    Жыл бұрын

    @@vishalmane3139 proof of work or proof of stake ?

  • @marciojeovety

    @marciojeovety

    Жыл бұрын

    @@chainmaven6026 proof of snake hahaha

  • @HrissW

    @HrissW

    Жыл бұрын

    @davebudah how many months it took u to become Full stack Developer?

  • @machoman2378
    @machoman23782 жыл бұрын

    Thank you for the continuous content Brad! I wouldn’t be the developer I am today without your videos

  • @alifhasanshahOfficial

    @alifhasanshahOfficial

    2 жыл бұрын

    Yeah I am also like you. Brad is awesome and his teaching skill also .

  • @tether23

    @tether23

    2 жыл бұрын

    This channel so underrated imo

  • @ministryofanti-feminism1493

    @ministryofanti-feminism1493

    2 жыл бұрын

    We were great as the Ultimate Maniacs, brotha!

  • @talkohavy

    @talkohavy

    Жыл бұрын

    I think I first saw one of Brad's videos like 6 years ago, and ever since then I saw dozens of them! And it's not like i'm LOOKING for Brad's videos specifically, but like, every topic on which I need help with, it seems that Brad has a video prepared up his sleeve. It's like no matter what I do in life, no matter how much I progress and be a super senior developer, Brad will always have 10 years of knowledge over me!

  • @nudecode
    @nudecode2 жыл бұрын

    I love the longer videos actually completing something, really feels like you have something to work of. As always great video thanks Brad

  • @CharlesDeBarros
    @CharlesDeBarros Жыл бұрын

    As always, outstanding content! We are very lucky in the development community to have people like you, generous, and willing to share content so as everyone can learn. Thank you.

  • @anonymouseverx
    @anonymouseverx2 жыл бұрын

    Special thanks to you, Brad for this extremely valuable and rare content.

  • @rodrigolima7360
    @rodrigolima73602 жыл бұрын

    The best tutorial about Tailwind ever! Thank you for providing us with this amazing content!!!

  • @lunarcode
    @lunarcode2 жыл бұрын

    This channel has helped me ALOT in learning how to code, literally cannot believe that these videos are free. Keep up the good vids brotha

  • @tomiwaajayi8288
    @tomiwaajayi82882 жыл бұрын

    Thanks a lot for this Brad. An amazing summary and description of how to use tailwind. To easily know what each number represents in 'px', just multiply by 4. '4 = 16px', '6 = 24px'

  • @DenzelBraithwaite
    @DenzelBraithwaite Жыл бұрын

    I've been studying / coding for a little over a year now and I'm starting to just look for your videos when I learn a new topic. If you didn't cover it, I look elsewhere but you're my go-to now. I appreciate all the help.

  • @bosinious

    @bosinious

    3 ай бұрын

    I can relate. Even as a developer Brad's content is a great reference resource. It has sped how I learn new front end technology

  • @barraganroberto
    @barraganroberto2 жыл бұрын

    I woke up this morning thinking of learning Tailwind, and found this amazing and fresh content! Thanks you very much, Brad!

  • @aguynamedandre350

    @aguynamedandre350

    2 жыл бұрын

    Don't you just love it when that happens!

  • @nicholasrobbins921
    @nicholasrobbins9212 жыл бұрын

    I usually don't comment on videos but really want to say thank you Brad for the tremendous amount of work you're doing in the software community. Following along step-by-step with these projects really helps show what these frameworks can do. It's a big ask, but it would be amazing if we did a project like this in the future but completed additional pages so we had a legit 4-5 page website that would truly be a "Job Ready" project in the sense, like maybe show how we build this one page and then copy certain elements to create a Product page, or a About Us page that was fleshed out even more. Regardless, you're changing people's lives and I thank you immensely for the work you're doing dude!

  • @bluesyace9564

    @bluesyace9564

    Жыл бұрын

    you will never be job ready by following along someone else's project

  • @DanieleManca1983

    @DanieleManca1983

    Жыл бұрын

    This project is a coding challenge from Front End Mentor, the design provided on Front End Mentor is only one landing page and Brad is showing the community how to recreate it using Tailwind, so to be honest if anybody wanted to extend the project and create more pages, they're free to, including yourself. We can follow along and copy what Brad is doing on this video, ultimately we learn by doing things completely on our own to consolidate what we follow in lectures.

  • @khaisarmuksid5713
    @khaisarmuksid5713 Жыл бұрын

    "I don't want this be something where I just type and you copy and that's it.", I love this part so much. Thanks a lot sir!

  • @bn_ln
    @bn_ln Жыл бұрын

    What a find this course has been - it's a goldmine of information. Thanks so much for sharing this content!

  • @Fridayy.Blessed
    @Fridayy.Blessed2 жыл бұрын

    Traversy media Thanks for providing these free contents I can't thank you enough My elder brother got a job as a senior software engineer in ALASCO company in Germany All thanks to your free contents. He couldn't have done it without your help and ofcourse....for doing the hard work Sure the journey was not an easy one But he did the hard work especially when he didn't feel like doing it... Thank you Brad Traversy ♥️♥️♥️♥️

  • @sussannwokorie8654

    @sussannwokorie8654

    Жыл бұрын

    Hallo, interesting story, I also live in Germany looking for a position for almost 4mons as a junior Software Engineer, can you please help me to speak to your brother to help me to get a job in his company I saw an opening position

  • @robertfine5464
    @robertfine54642 жыл бұрын

    Let the Boston accent flow! Your content is legit, don't worry about whether people thing the Boston accent is professional or not.

  • @canaygun5234
    @canaygun52342 жыл бұрын

    It's been a while since I last watched one of Brad's videos, and I realized how much I missed it. Thanks for great content!

  • @vtreanor
    @vtreanor Жыл бұрын

    Loved it, watched every minute. How to get up to speed on Tailwind and static site development in just over an hour, well done.

  • @fabianstarke3160
    @fabianstarke31602 жыл бұрын

    Every time I am thinking about trying a new tech, a new lib or whatever, generally within the same week I got a notification from Brad's channel !Brad, you are amazing and by far my preferred instructor out there and you made my dream of becoming a dev more accessible already more than 2 years ago. Thank you

  • @GaBoyInKy
    @GaBoyInKy3 ай бұрын

    I learn more from your project based videos than anyone else's subject based tutorials. Thank you.

  • @ChadCaldwell
    @ChadCaldwell2 жыл бұрын

    This was fantastic. Learning rather than copying. Very well done. Hope you do more.

  • @LazerMarsupial
    @LazerMarsupial Жыл бұрын

    Everytime I run into a dev tool I want to learn, or a client asks me something about web development, it is Traversy Media to the rescue!! Thanks man for all the good content!

  • @manofsteppe179
    @manofsteppe1792 жыл бұрын

    AMAZING, was just looking for tailwind courses on youtube, found old brad courses but this made me smile!

  • @robertsp2351
    @robertsp23512 жыл бұрын

    Awesome, cant wait to watch this after work. I've been waiting for something like this. Thanks, Brad!

  • @samuelsantos8901
    @samuelsantos890110 ай бұрын

    Thank you from Brazil, this is a amazing job, I started yesterday with tailwind I really felt lost before start watching this video, thank you man!

  • @Nautyy9
    @Nautyy92 жыл бұрын

    i've been really looking for tailwind project , you're best Brad

  • @TheHumanistX
    @TheHumanistX Жыл бұрын

    Dude. You keep essentially apologizing for this 'taking a long time' because you are explaining things... you cranked this out as fast or faster than so many other channels on youtube that don't explain a damn thing. This was one of the most helpful frontend coding videos I've ever watched. You are fantastic at this and I cannot wait to dive into your channel! Thank you SO MUCH for the explanations! What is the point in just coding along with someone with no understanding of WHY??? You know? Also, I'm glad you finally said that the color was 'kinda like orange' even though we called it red. I was worried my eyes were bad lol

  • @tech_tips0117
    @tech_tips01172 жыл бұрын

    Really, I just decided to start using tailwind, and you immediately made a video, you basically teached me all about web development in less than 2 years thank you very much

  • @code.badger
    @code.badger2 жыл бұрын

    Are you reading my mind Brad, every time? THANK YOU!

  • @sunraiii
    @sunraiii Жыл бұрын

    Dude you got me onto emmet through this video, and it's absolutely insane. Thank you so much! Currently learning from the video you made about it.

  • @Saradomin65
    @Saradomin652 жыл бұрын

    Just when I wanted to learn Tailwind, Brad drops a new video about it. Definitely will watch this!

  • @eew_david
    @eew_david2 жыл бұрын

    The way Brad is serving is Insaaane! Thank You 🌼✨🙏

  • @michaelsolomon6033
    @michaelsolomon60336 ай бұрын

    Thank you Brad for everything. This is the best tailwind video I have come across.

  • @ahsanzubair6772
    @ahsanzubair67722 жыл бұрын

    I love to watch your fruitful videos. Thank you for providing quality content to your viewers.

  • @chelseabing
    @chelseabing2 жыл бұрын

    Very thoroughly explained and easy to understand. I wanted to learn tailwind and do not regret coming here to learn it.

  • @thenightguy6816
    @thenightguy68162 жыл бұрын

    Thanks for making this video. A tailwind recap was clearly needed for me 😅

  • @danbuild977
    @danbuild977 Жыл бұрын

    Travery Media never disappoint. Thank you!

  • @RedempleMarcelo
    @RedempleMarcelo2 жыл бұрын

    This is my favourite channel. I especially like it when you explain everything so nicely. I wish you a lot of success with the channel and happy life. ❤️

  • @dragosgheceanu9847
    @dragosgheceanu98472 жыл бұрын

    We're all much better developers thanks you your help! Thank you so much, Brad

  • @miguelbezerra5848
    @miguelbezerra5848 Жыл бұрын

    I came here to learn Tailwind, but leave with way more than that! Thank you

  • @bethcarretta5715
    @bethcarretta57152 жыл бұрын

    OMG this is awesome-thank you for doing this, Brad. I just finished a Tailwind course on Udemy and I can't wait to practice what I learned with this tutorial. I love Tailwind!

  • @AnsgarSteinkamp

    @AnsgarSteinkamp

    2 жыл бұрын

    Which Tailwind-Course on Udemy did you take?

  • @rene78

    @rene78

    2 жыл бұрын

    Why doing a course after a course? Build something on your own. Best way to practice.

  • @goaheadwithzerospeed4096
    @goaheadwithzerospeed40962 жыл бұрын

    A wonderful tutorial, I have nothing but respect and admiration. thank you brad

  • @sedrickkouam6874
    @sedrickkouam6874 Жыл бұрын

    i like the way you explain the content of all you crash course. your video help a lot thank you for all the energy and the times you take to explain the content

  • @phraseframe
    @phraseframe Жыл бұрын

    Brother, your video is REALLY helping me out, I'm a wannabe frontend developer, and I had just found out about you, certainly going to use your courses to get better at this new (to me) thing. The thing is, I already learned a lot of HTML and CSS, but this helps save on time a bunch. What a time to be alive. Thank you.

  • @lukas.webdev

    @lukas.webdev

    Жыл бұрын

    If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉 All the best for your journey!

  • @prapathsuayroop2341
    @prapathsuayroop2341 Жыл бұрын

    Thank you Brad, this video helps me a lot to start digging into the TailwindCSS.

  • @fregina3813
    @fregina38132 жыл бұрын

    Thank you! After your class I’ve finally understood how this works.

  • @ElegantCoder
    @ElegantCoder Жыл бұрын

    Finished this course it was amazing Brad is a great teacher

  • @hebanano
    @hebanano2 жыл бұрын

    Thank you so much. I wanted to learn Tailwind for awhile, keep up the good work

  • @tech_gigs5384
    @tech_gigs5384 Жыл бұрын

    Brad has always been there for these tuts man big thanks and great advise for learning

  • @kademmohammed6836
    @kademmohammed6836 Жыл бұрын

    Best coach ever ! nothing else to say, thank you for everything

  • @nathanashe3770
    @nathanashe37702 жыл бұрын

    Every single video helps me out in so many different ways...

  • @realrami
    @realrami2 жыл бұрын

    Thank you for the continuous content Brad!

  • @alext3437
    @alext3437 Жыл бұрын

    Excellent explanation. Thank you for taking out the time to do this.

  • @hehoist7183
    @hehoist7183 Жыл бұрын

    Thank you very much for such a detailed tutorial, which helped me quickly understand TailwindCSS

  • @ajsmallwood
    @ajsmallwood Жыл бұрын

    Awesome walkthrough, I learned so much from this about Tailwind and even Github set up too!

  • @lukas.webdev

    @lukas.webdev

    11 ай бұрын

    I just posted a video about Tailwind CSS in 2023 - maybe this is also interesting for you.😉

  • @digigoliath
    @digigoliath2 жыл бұрын

    Awesome. I need a refresher & a project to work on is always fun. TQVM!!

  • @nilskoch990
    @nilskoch9902 жыл бұрын

    Great content! Your videos are making my life so much better and easier, thank you!

  • @woleojosolomon3060
    @woleojosolomon3060 Жыл бұрын

    Finished the video. Very instructive! Thank you very much, Brad!

  • @lukas.webdev

    @lukas.webdev

    11 ай бұрын

    I just posted a video about creating responsive design with Tailwind CSS in 2023 - maybe this is helpful as well!😉

  • @outis99
    @outis992 жыл бұрын

    Not sure if you mentioned it since I didn't go through the entire thing but a really cool feature is you can add custom values to pretty much every class, particulary the one I use since tailwind doesn't have classes for vh and vw you can do: class="h-[50vh]" another example would be something like class="bg-[#c301f2]"

  • @ChristopherSmikle
    @ChristopherSmikle Жыл бұрын

    Thanks for the intro! A great ice breaker, really appreciate it 🇯🇲

  • @anasalhariri5474
    @anasalhariri54742 жыл бұрын

    Hi, Thank you so much for your great efforts. I really appreciate your tutorials. All the love and respect.

  • @anjorinibukunoluwatomidequ6508
    @anjorinibukunoluwatomidequ65082 жыл бұрын

    This is an amazing course to learn Tailwindcss. Traversy is a great tutor

  • @adebayoolushola7052
    @adebayoolushola70527 ай бұрын

    Thank you so much Brad for being such a blessing

  • @jasonbrooks737
    @jasonbrooks7372 жыл бұрын

    brad, you're just too good for these web development skills won't believe about your past if you didn't tell us your talent is so precious, dont waste it, keep going strong buddy

  • @QueeeeenZ
    @QueeeeenZ2 жыл бұрын

    I absolutely love tailwind! thank you!

  • @themadladgaming
    @themadladgaming Жыл бұрын

    Brad i thank you for all of your videos, it teach me a lot. Thank you!

  • @DavidNYIRINGABO
    @DavidNYIRINGABO Жыл бұрын

    You're unbelievable Brother. this is fantastic. Thanks for all this aid

  • @berad6034
    @berad60342 жыл бұрын

    you the man. use whichever accent you're comfortable with, dude. we're not some stuffy corporate stiffs

  • @husseinkizz
    @husseinkizz2 жыл бұрын

    Hello Brad thanks for this, I wanted some fresher on tailwind since I last used it in a while, I hope this is it!

  • @VkG64
    @VkG642 жыл бұрын

    That was extremely helpful Brad, thanks a lot !

  • @AlbertoKempis
    @AlbertoKempis2 жыл бұрын

    Thanks Brad. Awesome tutorial!

  • @alain_laroche
    @alain_laroche2 жыл бұрын

    Great Crash course! Will definitely help my frontend. Love your accent BTW 😎 Don't fight it!

  • @nurdanarakhymova3232
    @nurdanarakhymova32322 жыл бұрын

    Literally the best explanation ever TY !!!

  • @ctaylr13
    @ctaylr13 Жыл бұрын

    brad you are the best. i am very appreciative of your videos; they have helped me become a better developer. thank you!!

  • @UIXConnect
    @UIXConnect2 жыл бұрын

    my gosh!! This s##@ finally makes sense. Thanks Brad. Always you are a legend.

  • @honiel59
    @honiel59 Жыл бұрын

    one of my fav youtubers here

  • @Ohotnikova_
    @Ohotnikova_2 жыл бұрын

    Now this is the video I’ve been waiting for 😄

  • @nanayaw7159
    @nanayaw71592 жыл бұрын

    Brad, you are doing an awesome job... 👍👍👍

  • @ryzlesalt
    @ryzlesalt Жыл бұрын

    This was an awesome tutorial, loved it!

  • @cuentamovil456
    @cuentamovil456 Жыл бұрын

    "Sorry my accent is coming out"....loooool. First video I watch about Tailwind and already understand it. Thank you Brad!!

  • @juwonousk
    @juwonousk2 жыл бұрын

    Thank you for the amazing tutorial. This is the great explanation and easy for understanding video about tailwind css that I've seen. 🤩👍👍

  • @abdulrazaqharoon2733
    @abdulrazaqharoon2733 Жыл бұрын

    @43:00, I made it work without creating a new . It would be difficult to maintain if we create the same content with different styling for different screens size. I made it work with this line Track Company-wide progress

  • @CsabaKissi
    @CsabaKissi2 жыл бұрын

    Thanks for the opportunity buddy!

  • @julianm080808
    @julianm08080822 күн бұрын

    Traversy Media I really appreciate for making this badass video, you are amazing God bless you.

  • @piyushaggarwal5207
    @piyushaggarwal52072 жыл бұрын

    thanks for the course Brad

  • @sakhawathussain9696
    @sakhawathussain9696 Жыл бұрын

    Thanks for your receiving inforrmations and conversation. So much thanks

  • @jitulborah_10
    @jitulborah_102 жыл бұрын

    Thank you , thank you , thank you . Always be grateful to your efforts 💓💓😇

  • @misheruzinho
    @misheruzinho Жыл бұрын

    Thank you for this project, i was able to learn a lot from it !

  • @snailprogrammer7483
    @snailprogrammer7483 Жыл бұрын

    Thank you very much for the video! Can you make a dashboard with tailwind showing your subscribers how to make a sidebar?

  • @alifhasanshahOfficial
    @alifhasanshahOfficial2 жыл бұрын

    Thank you so much for your effort . I love your teaching skill ..

  • @pranavyeole102
    @pranavyeole1022 жыл бұрын

    Thanks for the video man, great content

  • @modinateniola772
    @modinateniola7722 жыл бұрын

    Brad is always on point

  • @6.squash.936
    @6.squash.936 Жыл бұрын

    This is my go to channel bro

  • @user-zg5jq8ro4w
    @user-zg5jq8ro4w8 ай бұрын

    Helped me a lot, thanks for the effort.

  • @muhammadattiqueurrehman7733
    @muhammadattiqueurrehman77332 жыл бұрын

    Right on time, much needed.

  • @devwithbrian1534
    @devwithbrian1534 Жыл бұрын

    Thanks Brad. Great stuff

  • @lukas.webdev

    @lukas.webdev

    11 ай бұрын

    I just posted a video about creating responsive design with Tailwind CSS in 2023 - maybe this is helpful as well!😉

  • @themarksmith
    @themarksmith2 жыл бұрын

    You're a superstar, Brad!!!

  • @PR174M
    @PR174M3 ай бұрын

    Don't think about your accent! Your content is always relevant for a developer. Thanks Brad!!

  • @enochnewton4657
    @enochnewton4657 Жыл бұрын

    Very nice video good explanations and straight to the point

  • @bosinious
    @bosinious3 ай бұрын

    Always on point!

  • @codingguild
    @codingguild2 жыл бұрын

    You are a blessing to society