Learn Sass in this Free Crash Course - Give your CSS Superpowers!

Поделиться
HTML-код
  • Опубликовано: 2 дек 2024

Комментарии • 576

  • @DesignCourse
    @DesignCourse  6 лет назад +142

    Smash that Subscribe Button! - My answer for today's question: I learn the same way most people learn: Google. Based on the results, I may end up on a RUclips video, or I may end up at a Udemy course. For full comprehensive topics, I'll check out Pluralsight, Skillshare, Lynda, etc..

    • @michereff16
      @michereff16 6 лет назад +2

      Mostly Udemy and some times on RUclips.

    • @minusgod
      @minusgod 6 лет назад

      Treehouse , Udemy & RUclips

    • @81NARY
      @81NARY 6 лет назад

      PluralSight, Official Docs, RUclips, Stack Overflow & Books...

    • @matexxo4004
      @matexxo4004 6 лет назад

      Udemy, freeCodeCamp, DevDocs(MDN), RUclips, random articles

    • @rosaclovis
      @rosaclovis 6 лет назад

      Udemy and courses like this one here as exercise. Hope you make another one like part 2, part 3 of it. All the best bro!

  • @TheEphemeris
    @TheEphemeris 6 лет назад +12

    This is the first I've watched with this RUclipsr, and also the first real step I've taken to learn CSS, SASS and HTML and this video is the absolute best at learning! It's simple enough that someone like me with almost zero coding experience can follow along. It's engaging, I never feel bored and feel like skipping ahead. From beginning to end this is EXACTLY what I've been looking for in a tutorial for beginners like me. I'm so excited that I made it to the end, and have a "webpage" to brag about! Can't wait to see what possibilities I can come up with tinkering around with this information... Thank you!!

  • @arjunchokkamaman1945
    @arjunchokkamaman1945 6 лет назад +27

    "Sass is CSS on steroids" this is the best and most accurate description of Sass I've heard xD

    • @elissitdesign
      @elissitdesign 4 года назад

      Arjun MC - No wonder it makes me rage.

    • @marcoscarlomagno3065
      @marcoscarlomagno3065 4 года назад

      "Typescript is javascript on steroids", actually thats the origininal

  • @lansingcai9155
    @lansingcai9155 5 лет назад +5

    Best SASS tutorial ever. Super straight-forward, easy to follow.

  • @tomasinafreeman6722
    @tomasinafreeman6722 2 года назад

    Working on becoming a Front End Developer. This video is AMAZING!!! I am new to SASS, and following along, not using the Git, made this project come to life for me. I had watched another developers course on SASS, but I just couldn't grasp the concept. I am now a loyal follower of this channel, and I will be looking out for everything you have for us growing developers.

  • @christofffrazier4225
    @christofffrazier4225 5 лет назад +6

    I already use SCSS on a daily basis but I gained insight to things that I apparently was ignorant about in it full ability. Thanks for the great presentation!

  • @sveinsoermo9883
    @sveinsoermo9883 6 лет назад +217

    Traversy Media, Angular Firebase,, Firebase, Kevin Powell, Academind, Layout Land sort of in that order.

    • @seandoherty5340
      @seandoherty5340 6 лет назад +6

      Man, thankyou for the Layout Land tip. The beauty of RUclips - I came looking for Sass and found Jen Simmons 😂

    • @kandysman86
      @kandysman86 5 лет назад +8

      @@seandoherty5340 layout land is awesome.

    • @balz.k3483
      @balz.k3483 5 лет назад +5

      Colt Steele?

    • @keyos27
      @keyos27 5 лет назад +18

      Netninja

    • @digigoliath
      @digigoliath 4 года назад

      @@seandoherty5340 Jen Simmons, she is a superhero

  • @asandax6
    @asandax6 4 года назад

    A little tip about fonts when watchitng tuturials and for production use Google fonts so the need for the user to have the font installed will be eliminated. You just select the font familes you want and once your done copy paste the in your html and the font will be immediately available.

  • @LukeMcCormick-cellear
    @LukeMcCormick-cellear 4 года назад +3

    That was amazing. I've watched huge numbers (hundreds?) of online tutorials, but that was probably the best I've ever seen. I went from 0 to feeling like a master in just over an hour! (I had to pause the video a few times to catch up :)
    Thank you!

  • @ssygon2
    @ssygon2 5 лет назад +11

    26:03 I thought you should remove "text-decoration: none" , since you already have "text-decoration: uppercase". But I think it should be "text-transform: uppercase" and then leave "text-decoration: none". Which you went back to change in 34:13 😊 Cool tutorial 👍

    • @mudyeet_
      @mudyeet_ 4 года назад

      Lol I actually only saw him write "uppercase" in the value, and wrote "text-transform: uppercase" in my follow-through code lol, didn't realise he actually made a mistake there.

  • @ajdrag
    @ajdrag 3 года назад

    Great SASS tutorial. I had no idea how SASS worked and now I do. Bravo.

  • @leonardomayairegui2848
    @leonardomayairegui2848 4 года назад

    Hello Gary, Im a frontEnd dev. also. Let me tell you that is great the way that you teach, Starting from XD to a responsive website is great in just 50minutos. Great job, Great teach!!!

  • @ChrisPollard
    @ChrisPollard 5 лет назад

    My brain feels all splodey with noooooooooooledge!! Love your crash courses. I played with SASS a couple of years ago, but gave up because it was a pain in the butt to run external compilers all the time. But now, using node-sass and sass-autocompile in Atom ... it's graaaaaaaaaaaaaavy!! Makes CSS way nicer to work with, for sure.

  • @jessicaerasmus7428
    @jessicaerasmus7428 6 лет назад +66

    Self-learning through RUclips and Udemy. And lots and lots of Google.

    • @riteshmaharjan9535
      @riteshmaharjan9535 5 лет назад +1

      Can you teach me how you do the self learning, I have been trying myself watching tutorial and when i try to do something on my own i fail miserably :/

    • @bayusetyawan3086
      @bayusetyawan3086 5 лет назад +4

      @@riteshmaharjan9535 for my own self-learner. Just ignore the theory in the first time and following what the videos do. Then if you did it, try to make by your own, if you still missing the step open the video. If you already achieved tutorial that you have been watched, then make your own theory which your own comprehension for me it took 1- 2 months to master HMTL and Css (Because I got a bit basic of Design Graphic). If that take too long for you, Just forget it. Every great web developer always had hard time when they want to make what they want.
      for the simple one I always ask my brain to say "How" and "Why". Then I keep looking the source of my problem.
      if you like theory so much, I recommended w3schools.com will help for you.
      Actually I don't like theory btw. But I really want to master it so bad I decide make my own comprehension after looking and practice it video on youtube.
      Do it now, theory later

    • @fredsmith9962
      @fredsmith9962 4 года назад

      @@bayusetyawan3086 good advice

  • @jani14jani
    @jani14jani 5 лет назад +1

    This is easily the best Sass crash course i've seen. Subscribed!

  • @hardikmodi8234
    @hardikmodi8234 6 лет назад +3

    No words to say about your content. Amazing material is the very very small word to describe your content and your efforts. Thanks for putting so much efforts to help us out.

  • @mphokhotleng6280
    @mphokhotleng6280 4 года назад

    I'm learning how to code during quarantine and i'm so glad to have found your channel! you're such a great instructor I can't get enough of your videos. such great quality! thank you so much for all the time you've devoted to teaching us

  • @mandalorian99
    @mandalorian99 3 года назад

    Love your tutorials! I'm now enrolled on a software engineering bootcamp and your courses just add so much knowledge to it, filling up my gaps. Great to see that you explain line by line why you apply certain properties and the specific value and how it will apply to the element. Awesome!

  • @elissitdesign
    @elissitdesign 4 года назад

    Nice sASS! Great content and easy to understand. I haven’t done CSS in 8 years and I knew nearly everything except a few parts with SCSS variables. Fantastic refresh. Thanks you!

  • @mikaela__
    @mikaela__ 5 лет назад +5

    not gonna lie, i’m in awe at how well and how much you can explain in under an hour, i’m a complete beginner (as in, literally doing a front end bootcamp as we speak) and even i could perfectly follow this tutorial

    • @sougataghar1179
      @sougataghar1179 5 лет назад

      Soon you will get an internship too .I mean I got an internship just within 2 months of html css js ... I think internship will teach you even more

  • @bechararizk7245
    @bechararizk7245 4 года назад

    just a small change (idk if it wasn't present at the time of the video): for the css grid in the desktop layout it was easier to just use display: flex on the "main" element and the add order: 0 to "section#primary" and order: 1 to "section:card"

  • @miroslavpetrovic3713
    @miroslavpetrovic3713 6 лет назад

    Gary thanks for this video. My answer for today's questions: 1) Traversy Media RUclips 2) Pluralsight for .NET learning 3) Academind RUclips (Frontend) 4) Kevin Powell RUclips 5) The Net Ninja RUclips

  • @abdull264
    @abdull264 4 года назад +2

    You're a genius, Bro! I have learned a lot from this video about Sass. Thank you so much! May God Bless You Always!

  • @KablooieXL
    @KablooieXL 5 лет назад +1

    Thanks for the video! I've been wanting to get into SASS, but time and routine got in the way. I've been using my own custom compiler/code I wrote which outputs CSS from a simple PHP file and though it gets the job done perfectly, this just seems a lot cleaner - especially the nesting which looks like a great feature. It seems extremely useful and I will give it a deeper look in the near future. Thanks again!

  • @miichii1911
    @miichii1911 4 года назад

    I started watching your videos and following along with the projects a few days ago. You are doing so well! Learned a lot already, Thank you!
    Bonus point for you: awesome taste in music, had seen your music video and I LOVE IT! :)

  • @rubhan94
    @rubhan94 6 лет назад

    I'm currently taking a 2 year web course on front end development by Noroff.no. I also use Lynda.com and Udemy quite frequently. And I google my problems a lot! I started out with 2D and 3D art, jumped over to games design and found programming. But making big games take effort and the community for game dev is quite scars here I live in Norway. Therefore I chose to learn web development and I really must say it's fantastic! I love learning, being on the computer, working with graphics. This suits me perfectly.

  • @marcindomanski5654
    @marcindomanski5654 6 лет назад +2

    I prefer to use variables $color-primary, $color-secondary etc, because in goog editor (webstorm, phpstorm etc) when you start typing $col... editor is show list of all variables beginning with $col. This is not working with map and mixin.
    Ah. Your style will work only for very small project. In medium-large project you can't style by tag name (for example main - 41:53). You must add a class.
    Otherwise good stuff. As usual.

  • @maverick_entertainment21
    @maverick_entertainment21 5 лет назад

    Just watched the entire video in one sitting at 1.25 speed. Awesome content and an very engaging style of presentation. You kept talking about what you were doing and the purpose of each of the design decisions. Way to go. Thanks bro !

  • @Keenbeaver
    @Keenbeaver 5 лет назад

    man, you are a good teacher. the course I am doing is making this more complicated than it needs to be. and I like that you say your keyboard shortcuts also. thank you

  • @emmanuel4699
    @emmanuel4699 5 лет назад

    Your channel is a gold mine.

  • @dfjama
    @dfjama 6 лет назад

    Amazing and one of two best SASS tutorials I come across. Very easy and to the point in regards to SASS. I really appreciate your efforts for sharing.

    • @dfjama
      @dfjama 6 лет назад

      Brad Schiff @ LearnWebCode, Traversy Media and Bob Tabor at Chanel 9 are my best three. There are other great sources I follow in my web development journey

  • @francislambert5189
    @francislambert5189 2 года назад

    The only video that got it right for me. Wow. really, it was tough for hours trying other videos. Thank you. Peace : )

  • @jamisonr
    @jamisonr 5 лет назад

    Great explanation and example. As for how I learn, well I wrote my first web page in 1996, so suffice to say how I learn now is not how I learned then! Basically I use RUclips to get up-to-date with web technologies after spending the last 19 years doing line-of-business back-end applications for a big finance company. I remember when CSS(1) first came out and the light bulb moment I had when I realized what the actual difference was between semantic markup versus how you see it.

  • @ateyaofficial
    @ateyaofficial 2 года назад

    You're honestly great! Fun, creative and clear. Thank you for this crash course!

  • @carolhatcher4015
    @carolhatcher4015 3 года назад

    Great tutorial! It answered my questions about sass, using VS, live sass compiler, importing google fonts... Super!

  • @ifunanyaokolie
    @ifunanyaokolie 5 лет назад

    Thank you for this. You made learning SASS easy for me. And while we're still in the middle of the tutorial and about to move away from the `a element`, I want to point out that it's text-transform: uppercase and not 'text-decoration: uppercase in 26:05

  • @mudyeet_
    @mudyeet_ 4 года назад

    Coursera University of Michigan(A certificate course but I mostly go for the ones I'll be mentioning forth), Web Dev Simplified, Kevin Powell(Pardon me If I spelled his last name wrong), FireShip, Dev Ed(His videos normally are overview, the primary reason why I decided to watch your SASS tutorial over his).
    It's my first time watching your video, maybe second. But I really loved the hands-on follow-through approach, and I realised how much I underestimated SASS. Thank You! You earned a sub :D

  • @PsyberSenpai
    @PsyberSenpai 5 лет назад +5

    I love this channel, besides this source, I also learn from Udemy, Andrei's Zero To Mastery Web Dev course. Amazing content from both of you! Keep it up. Thank you.

    • @AppleHeinz
      @AppleHeinz 4 года назад

      exact same combo. :) I guess I'm a year behind you though.

  • @udhayakumarmani3283
    @udhayakumarmani3283 6 лет назад

    This is the first tutorial I am watching about SASS, I have learned a lot very thank you...

  • @christianmarucco5296
    @christianmarucco5296 5 лет назад

    Gary this video is awesome, proper pace for learnes and even though I've some experience, it taught me a lot. this approach of developing and desing from the mobile to desktop is quite interesting and I may say that I´ve learnt a lot with this. THANK U VERY MUCH , U R AN AWESOME TEACHER.

  • @anthonypenna476
    @anthonypenna476 6 лет назад +11

    Traversy media mostly x)
    And nice video Gary, as always

  • @milanzinzuvadiya6447
    @milanzinzuvadiya6447 4 года назад

    Awesome!
    Great Tutorial!
    Your hands-on experience in teaching is just amazing!

  • @muldurksk
    @muldurksk 5 лет назад

    Best Front End Developer Content !

  • @aminhbr
    @aminhbr 3 года назад

    Thanks a lot!! I learn a lot from you, your channel is a source of happiness!

  • @rebelmachine88
    @rebelmachine88 5 лет назад +1

    Fantastic crash course, Gary! This is exactly what I was looking for, thank you.

  • @StefanMaring
    @StefanMaring 4 года назад +1

    Thank you for this video! I learned a lot from it. Especially about how to use SCSS and how to build a responsive website.

  • @AmodeusR
    @AmodeusR 3 года назад

    Sass is really, awesome, just like this crash course 👌Thank you very much!

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 3 года назад

    Excellent coverage within limited time! Thank you for sharing. 👍😃

  • @musiccrapguy4930
    @musiccrapguy4930 5 лет назад

    was not expecting the breakdown at the end of the video, good stuff.

  • @josuegarduno7154
    @josuegarduno7154 6 лет назад

    From RUclips I usually watch Traversy Media, Kevin Powell, Design Course, Chris Hawkes, Academind. Outside RUclips I mainly use Udemy, DesignShack for inspiration and StackOverflow for code snippets.

  • @dontcomply3976
    @dontcomply3976 6 лет назад

    Great video - courses I have used in the past are Kudvenkat, Codevolution, BitFumes, Academind and Programming with Mosh. My 13 year old son likes to use Brackeys and The New Boston.

  • @lukor-tech
    @lukor-tech 6 лет назад

    My god, that was a lot of information but given in the best way to the person watching.
    Even if I didn't knew CSS or html at all I'd find it intresting.

  • @gcooper642
    @gcooper642 5 лет назад

    This is such a good introduction to SASS. I was dreading trying to figure it out, but I love it already!

  • @omarshishani5899
    @omarshishani5899 4 года назад

    I enjoyed this tutorial alot, and it was very clear and helpful for learning Sass quickly. Thanks for being to the point!

  • @peterrichard2284
    @peterrichard2284 6 лет назад

    watching your video was my first exposure to Sass - awesomely helpful . thanks

  • @musaddiqali1
    @musaddiqali1 4 года назад +1

    I have a confusion on what's done at 29:07, the span element has position: absolute, but I read in w3schools that:
    *An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).*
    *However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.*
    As we can see that the nearest parent of span element i.e., list-item(li) isn't a positioned element itself. Then why does it still works fine? I thought that the list-item has to be positioned, doesn't it?

  • @tkdevlop
    @tkdevlop 6 лет назад +190

    Make a video about how to become senior web-developer in 48 hours please ;).

    • @alial-jabur6453
      @alial-jabur6453 6 лет назад +34

      TUSHAR just say you don’t “code” anymore lmaoo

    • @qwss23
      @qwss23 6 лет назад +12

      Damn! It takes relatively years to go form junior to senior, but 48 hours....Good luck with that my man!

    • @maheshdev5877
      @maheshdev5877 6 лет назад +7

      TUSHAR
      Senior Web developer with in 48 hours??
      If you are coming mars it's possible.
      Seniority comes with work, effort, experience etc

    • @DesignCourse
      @DesignCourse  6 лет назад +77

      He was making a joke based on another joke I made on a Traversy video.

    • @dontcomply3976
      @dontcomply3976 6 лет назад +3

      Move to a black hole.

  • @miketimmons98
    @miketimmons98 5 лет назад +1

    Thank you! Just spent my Sunday learning Sass :)

  • @soniablanche5672
    @soniablanche5672 4 года назад

    Would it be a good idea to use the list-style-image property instead of a span for the image that appears on the left of an ?

  • @hihi9674
    @hihi9674 4 года назад

    FANTASTIC COURSE!!! Thank You!!

  • @MillennialGI
    @MillennialGI 3 года назад

    Thank you very much for the video. I recently started coding and you are helping me out a lot!

  • @lucemansster
    @lucemansster 6 лет назад

    Thanks! Learned about mixins! Another reason to use sass! Thanks! Learning resources I use are your videos and consulting the docs over at w3schools.

  • @danielq888
    @danielq888 4 года назад

    I've learnt a lot. Thanks for this crash course.

  • @sodkolandiawita4417
    @sodkolandiawita4417 6 лет назад +6

    Very clear and affordable - fantastic!

  • @kevinzhang8974
    @kevinzhang8974 6 лет назад

    I am heavily using udemy.com for learning ... so far it has all the stuff I need .... even drawing lession class for my 6yr daughter ...

  • @sveinsoermo9883
    @sveinsoermo9883 6 лет назад

    Spot on as always, with another HIGH QUALITY crash course.

  • @golamrabbiazad
    @golamrabbiazad 5 лет назад +1

    Thank you so much, Best Sass crash course. Lovely video!!!

  • @shasminecianne7108
    @shasminecianne7108 5 лет назад

    You are like GOD to web-developer students!!

  • @talyahaviran7572
    @talyahaviran7572 6 лет назад

    Thank you for the crash course. It really helped my understand what SCSS are. I am not a developer but an A11Y specialist. It would have been nice to include the use of standard components with built-in semantics in your code. For example, the radio button control in your course could have been implemented by input type radio with aria role="radiogroup" using the SCSS to style it to your desire. Thanks.

  • @femloh
    @femloh 5 лет назад

    Excellent, excellent tutorial man. Thanks a lot for taking the time to do this. I design web pages a lot and always wanted to build my UI Library. This is perfect.

  • @tafseerkhan142
    @tafseerkhan142 5 лет назад

    Excellent course with simple and basic understanding!

  • @albertoazinar1209
    @albertoazinar1209 4 года назад +1

    I really learned amazing stuff in this lesson. Great content

  • @Maertaugh
    @Maertaugh 4 года назад

    Great teacher, cool studies ! Thanks a lot !

  • @exoticpash8823
    @exoticpash8823 4 года назад

    This was totally helpful and easy to follow👍🏻! Thanks a ton!

  • @iancarr3923
    @iancarr3923 6 лет назад

    A very well presented tutorial. I learned a lot and like the ability to use variables, functions, nesting, etc. Other than RUclips videos, I use stack-overflow, MDN and W3Schools. Thanks

  • @Pew_Pew_Pizza
    @Pew_Pew_Pizza 4 года назад

    Good refresher for me. Looking forward to more videos.

  • @jcdosmann
    @jcdosmann 6 лет назад

    Gary, another great video! One thing that I would love to see is links in the description to your other videos. You say in this video to check out your video on display: grid. I'd love to be able to scroll down and open a link to that video and save it for later. Thanks! Keep up the good work.

  • @PrasadPatilmufc
    @PrasadPatilmufc 5 лет назад

    Thanks @DesignCourse, This crash course really helped me a lot to get basic understanding of Saas.

  • @Tadae323
    @Tadae323 4 года назад

    This course helped me a lot, thanks!

  • @ahmedelgaidi
    @ahmedelgaidi 5 лет назад

    you are really an amazing instructor

  • @charbelmedia3014
    @charbelmedia3014 4 года назад +1

    40:44 Him landing exactly at 840px made my OCD very happy

  • @ajmaljoiya6006
    @ajmaljoiya6006 3 года назад

    Great sir you are the real skilled tutors

  • @enmimaquinaandaba
    @enmimaquinaandaba 5 лет назад

    Awesome video, I'm now confident enough to go ahead and become an advanced Sass coder.

  • @stephenjames2951
    @stephenjames2951 5 лет назад

    Good quick, but detailed overview. Added value with some of the VS code tools / tricks.

  • @balajikc
    @balajikc 6 лет назад

    Thanks Gary! You rocked it as always. It is really a crash course. it crisp and sharp points make us look for the next tutorial :). By the way, I have used your reference skillshare invite.

  • @amirulidzham3686
    @amirulidzham3686 5 лет назад

    Love what you're discussing. I want to see a course about where should people start design, on a paper or xd

  • @hamidrezaashkiyan
    @hamidrezaashkiyan 5 лет назад

    It was AWESOOOOME!! I Loved it.

  • @kylehovance
    @kylehovance 6 лет назад

    Thanks Gary. SkillShare seems like a pretty great resource!

  • @fernandogomez83
    @fernandogomez83 4 года назад

    Really well-explained video. Thanks.

  • @mechagurd
    @mechagurd 4 года назад

    That was a great tutorial. Thanks my dude!

  • @elhadjbabacarcisse2868
    @elhadjbabacarcisse2868 6 лет назад

    Another RUclips channel that i really love is Traversy Media

  • @charbelabouyounes6683
    @charbelabouyounes6683 4 года назад

    You are awesome! Thank you for what you are doing ✌️❤️

  • @SebastianBernhardtz
    @SebastianBernhardtz 6 лет назад

    Besides my ongoing university studies I’m currently taking a javascript course on Udemy. Good shit!

  • @dreamgoodmusic
    @dreamgoodmusic 4 года назад

    Yeah, I got lost in the course around 11:42 Guess I'll come back once I put together some more understanding around this.

  • @salomohutapea
    @salomohutapea 5 лет назад

    Thanks so much bro for your tutorial, it's very helpful. I hope you can create more great contents like this.

  • @marib8177
    @marib8177 5 лет назад

    Thank you, Gary. You are the best teacher!!!

  • @lukefox836
    @lukefox836 5 лет назад +1

    video starts at 2:00

  • @retiar2111
    @retiar2111 6 лет назад

    Awesome content! Very helpful and informative, love this channel!

  • @karldtrumpeter
    @karldtrumpeter 3 года назад

    I learn from Traversy Media, Kevin Powell, You, Mosh, Netninja, Edureka, FreeCodeCamp, Udemy, Coursera, among others.

  • @Skaxarrat
    @Skaxarrat 6 лет назад

    Traversy Media, Net Ninja and Academin for FrontEnd stuff
    The DumbFounds, Just Django, Telusko, Tech With Tim, Justin Michael for BackEnd (Mainly Django/Python)
    Plus Udemy courses and ebooks.