Tailwind Crash Course | Project From Scratch

Поділитися
Вставка
  • Опубліковано 3 жов 2024

КОМЕНТАРІ • 470

  • @davebudah
    @davebudah 2 роки тому +282

    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 Рік тому +2

      proof?

    • @okonkwo.ify18
      @okonkwo.ify18 Рік тому +10

      @@vishalmane3139 😂😂😂😂😂😂

    • @youssef_houmazen
      @youssef_houmazen Рік тому

      @@vishalmane3139 proof of work or proof of stake ?

    • @marciojeovety
      @marciojeovety Рік тому +1

      @@youssef_houmazen proof of snake hahaha

    • @HrissW
      @HrissW Рік тому +1

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

  • @machoman2378
    @machoman2378 2 роки тому +252

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

    • @alifhasanshahOfficial
      @alifhasanshahOfficial 2 роки тому +4

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

    • @tether23
      @tether23 2 роки тому +2

      This channel so underrated imo

    • @ministryofanti-feminism1493
      @ministryofanti-feminism1493 2 роки тому

      We were great as the Ultimate Maniacs, brotha!

    • @talkohavy
      @talkohavy 2 роки тому

      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!

  • @khaisarmuksid5713
    @khaisarmuksid5713 2 роки тому +5

    "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!

  • @DenzelBraithwaite
    @DenzelBraithwaite Рік тому +6

    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 7 місяців тому

      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

  • @OfficiallAiHistory
    @OfficiallAiHistory 2 роки тому +13

    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

  • @anabanana3453
    @anabanana3453 День тому

    Amazing, thank you! I am so glad I decided to search for a crash course before I bought any other course somewhere else and you helped me massively!

  • @tomiwaajayi8288
    @tomiwaajayi8288 2 роки тому +7

    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'

  • @nicholasrobbins921
    @nicholasrobbins921 2 роки тому +25

    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.

  • @LazerMarsupial
    @LazerMarsupial 2 роки тому +2

    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!

  • @barraganroberto
    @barraganroberto 2 роки тому +7

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

  • @TheHumanistX
    @TheHumanistX Рік тому +4

    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

  • @robertfine5464
    @robertfine5464 2 роки тому +3

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

  • @manofsteppe179
    @manofsteppe179 2 роки тому +4

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

  • @lunarcode
    @lunarcode 2 роки тому +3

    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

  • @abdulrazaqharoon2733
    @abdulrazaqharoon2733 2 роки тому +6

    @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

  • @GaBoyInKy
    @GaBoyInKy 6 місяців тому

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

  • @salmaalmehdar9500
    @salmaalmehdar9500 Місяць тому

    For me this is the first kick into Tailwind, THANK YOU 😊

  • @samuelsantos8901
    @samuelsantos8901 Рік тому

    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!

  • @miguelbezerra5848
    @miguelbezerra5848 Рік тому +2

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

  • @berad6034
    @berad6034 2 роки тому +1

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

  • @bethcarretta5715
    @bethcarretta5715 2 роки тому +8

    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 роки тому +4

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

  • @Sammygeeze
    @Sammygeeze Рік тому +1

    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 Рік тому +1

      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!

  • @vtreanor
    @vtreanor Рік тому +1

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

  • @anonymouseverx
    @anonymouseverx 2 роки тому +9

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

  • @bn_ln
    @bn_ln Рік тому +3

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

  • @CharlesDeBarros
    @CharlesDeBarros 2 роки тому +3

    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.

  • @rodrigolima7360
    @rodrigolima7360 2 роки тому +5

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

  • @tech_tips0117
    @tech_tips0117 2 роки тому

    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

  • @danbuild977
    @danbuild977 Рік тому +2

    Travery Media never disappoint. Thank you!

  • @canaygun5234
    @canaygun5234 2 роки тому +1

    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!

  • @DaminPOV
    @DaminPOV Місяць тому

    this is a damn good video for me since I wanted to learn flexbox in tailwindcss, can't wait to apply this to my own project.
    Thanks brad for making an amazing tutorial!

  • @Nautyy9
    @Nautyy9 2 роки тому +1

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

  • @woleojosolomon
    @woleojosolomon Рік тому +1

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

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @cuentamovil456
    @cuentamovil456 2 роки тому

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

  • @sunraiii
    @sunraiii 2 роки тому +1

    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.

  • @PR174M
    @PR174M 6 місяців тому

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

  • @willisianturi1499
    @willisianturi1499 Рік тому +1

    I created a portfolio web project using a CSS framework called Tailwind in 2022. Thanks for the tutorial.

    • @lukas.webdev
      @lukas.webdev Рік тому

      I just posted a video about creating responsive design with Tailwind CSS in 2023 - this should be interesting for you as well!😉

  • @dragosgheceanu9847
    @dragosgheceanu9847 2 роки тому +1

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

  • @thenightguy6816
    @thenightguy6816 2 роки тому +2

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

  • @92abhinavkashyap
    @92abhinavkashyap Рік тому +3

    Thanks for the video tutorial. I really appreciate the video. There are so many classes that I didn't know existed and this video teaches them in a proper manner. But, I would have liked a better explanation on how the design is getting translated to the code. For example, I would like to understand your process and thinking behind coding the specific divs and how you are thinking about the layout and so on. Also. Just writing the content first and then adding classes to it explains the process in a better manner. In most of these crash courses, I don't get to see this in action. It is just code from top to bottom without a clue on what is being laid out under what. Thanks for the effort once again. Yo have a great community of people here

    • @dharshan4560
      @dharshan4560 Рік тому

      Bro for me it shows an error on the terminal while installing tailwind. What do i do

    • @dharshan4560
      @dharshan4560 Рік тому

      Pls reply bro 😢

    • @92abhinavkashyap
      @92abhinavkashyap Рік тому

      @@dharshan4560 what error??

  • @outis99
    @outis99 2 роки тому +7

    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]"

  • @michaelsolomon6033
    @michaelsolomon6033 10 місяців тому

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

  • @UIXConnect
    @UIXConnect 2 роки тому +1

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

  • @sedrickkouam6874
    @sedrickkouam6874 Рік тому +1

    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

  • @jasonbrooks737
    @jasonbrooks737 2 роки тому

    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

  • @hehoist7183
    @hehoist7183 Рік тому +1

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

  • @nudecode
    @nudecode 2 роки тому +12

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

  • @robertsp2351
    @robertsp2351 2 роки тому +1

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

  • @Saradomin65
    @Saradomin65 2 роки тому

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

  • @fabianstarke3160
    @fabianstarke3160 2 роки тому

    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

  • @ElegantCoder
    @ElegantCoder 2 роки тому

    Finished this course it was amazing Brad is a great teacher

  • @eew_david
    @eew_david 2 роки тому

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

  • @chelseabing
    @chelseabing 2 роки тому

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

  • @PenguinTriedCoding
    @PenguinTriedCoding 2 роки тому

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

  • @ajsmallwood
    @ajsmallwood Рік тому +1

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

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @amirreza-dev
    @amirreza-dev 2 роки тому +13

    Brad, seriously, how you do that? How do you know what we want?
    I just start learning TailwindCSS yesterday and today you upload this course!! Coincidence? I think not 😄
    Thank you so much
    You're truly are the best

  • @nathanashe3770
    @nathanashe3770 2 роки тому

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

  • @kademmohammed6836
    @kademmohammed6836 Рік тому +1

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

  • @hardiklakhalani6268
    @hardiklakhalani6268 Рік тому +2

    Loved the recording & presentation. BUT, we'd understand it better if you save frequently instead of "ta da!" at the end. I mean if you skip the Emmet method and do save frequently as you add classes in the existing element, we would understand better what happens with what.

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @chrisl2773
    @chrisl2773 2 роки тому

    This couldn't have come at a better time, I was literally researching Tailwind courses on Udemy and other platforms but couldn't find anything that really stood out, thank you for the content!

  • @devine_noise
    @devine_noise 2 роки тому +1

    Keep the accent! Tailwind sped this up quite a bit. Kevin Powell is building this same site from FEM with utility classes and it's already a 5 hour video series.

  • @devwithbrian1534
    @devwithbrian1534 Рік тому +1

    Thanks Brad. Great stuff

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @ahsanzubair6772
    @ahsanzubair6772 2 роки тому

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

  • @ChadCaldwell
    @ChadCaldwell 2 роки тому

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

  • @universecode1101
    @universecode1101 2 роки тому +2

    I love projects with Tailwind CSS, it's a game changer ✌🏻

  • @alain_laroche
    @alain_laroche 2 роки тому +1

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

  • @honiel59
    @honiel59 Рік тому

    one of my fav youtubers here

  • @prapathsuayroop2341
    @prapathsuayroop2341 2 роки тому

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

  • @ChristopherSmikle
    @ChristopherSmikle 2 роки тому

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

  • @tech_gigs5384
    @tech_gigs5384 Рік тому

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

  • @UIXConnect
    @UIXConnect 2 роки тому

    thank you for doing this comprehensive overview. Most other coding tuts on this leave me confused when approaching a project using this framework. And I feel dread whenever I see this included because it is hardly ever well explained.

  • @Aminnak
    @Aminnak 22 дні тому

    ThanQ Man I do really appreciate your content, that helped me out so much as a result of learning something new.❤

  • @fregina3813
    @fregina3813 2 роки тому

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

  • @ToumaRenshi
    @ToumaRenshi Рік тому +1

    Interesting. Just finished doing this course and I really enjoyed. It was a little bit complicated and hard but I will try to read code again and try to make again every small section. :)

    • @lukas.webdev
      @lukas.webdev Рік тому

      I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... maybe this could help you... 😉

  • @stevehunt525
    @stevehunt525 2 роки тому +1

    It seems to me that Tailwind is one of them technologies that a lot developers jump on the band wagon with, because they feel they would be left behind if they didn't. It's like going back to the old days with inline styles. For example if you have a load of buttons on a page with drop shadows, hover effects and gradients, it's a lot of code to write and maintain for each button. If a client wants the button modified, you have trawl though all the html code and change every instance of that button. It's a lot easier to have a separate style sheet. It's not that long ago when everyone was raving on about CSS variables, where you could change one setting and it would update the whole site. Stick with CSS or SASS.

  • @CsabaKissi
    @CsabaKissi 2 роки тому

    Thanks for the opportunity buddy!

  • @adebayoolushola7052
    @adebayoolushola7052 11 місяців тому

    Thank you so much Brad for being such a blessing

  • @goaheadwithzerospeed4096
    @goaheadwithzerospeed4096 2 роки тому

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

  • @julianm080808
    @julianm080808 4 місяці тому

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

  • @richterlau
    @richterlau 2 роки тому

    Very nice content after 20 mins. I run it in 1.5x playback. Makes it even better

  • @RedempleMarcelo
    @RedempleMarcelo 2 роки тому

    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. ❤️

  • @piuspolocha
    @piuspolocha Рік тому

    I will be very glad of you create a website that have admin and user dashboard at the same time using JavaScript and nodejs which less routes on the website
    Thanks you the best so far

  • @realrami
    @realrami 2 роки тому

    Thank you for the continuous content Brad!

  • @ctaylr13
    @ctaylr13 2 роки тому

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

  • @digigoliath
    @digigoliath 2 роки тому

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

  • @hebanano
    @hebanano 2 роки тому

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

  • @anjorinibukunoluwatomidequ6508
    @anjorinibukunoluwatomidequ6508 2 роки тому

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

  • @capitandelespacio
    @capitandelespacio Рік тому +2

    You rock. Thank you so much.

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @husseinkizz
    @husseinkizz 2 роки тому

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

  • @mohammedsaad0761
    @mohammedsaad0761 2 роки тому +1

    best YT channel to learn web dev, very well explained ,
    By the way I took almost 2 days to complete this full website. how many days did you guys took to make this website ?
    Love from INDIA :)

  • @codingguild
    @codingguild 2 роки тому

    You are a blessing to society

  • @alext3437
    @alext3437 2 роки тому

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

  • @alibarznji2000
    @alibarznji2000 2 роки тому +1

    Your accent is fine bro, don't shy away from it.

  • @ianfrye8988
    @ianfrye8988 10 місяців тому

    That hamburger menu transition was 👌

  • @Pages_Perfected
    @Pages_Perfected 10 місяців тому

    Brad is the GOAT

  • @vinit095
    @vinit095 2 роки тому

    The css image url ../ explanation was right on. Other people just write it without explaining 👍

  • @themadladgaming
    @themadladgaming 2 роки тому

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

  • @6.squash.936
    @6.squash.936 Рік тому

    This is my go to channel bro

  • @andrewng9950
    @andrewng9950 2 роки тому +1

    Your accent is perfectly fine!

  • @josephemeraldmayangao8287
    @josephemeraldmayangao8287 2 роки тому +2

    To those who are missing some classes. You can type npm run watch to your terminal and it will work!

    • @67geetar
      @67geetar 2 роки тому +3

      You've no idea how much that just helped me, I'm new to tailwind, started working on this yesterday and came back to it today, just spent an hour trying to get a gap/margin to display between the testimonial section and the one above and obviously nothing happened, ran npm watch and voila margin appeared. Thanks ever so much - wishing you great luck in life!

    • @pallas6708
      @pallas6708 2 роки тому

      thank you. you saved me a ton of time