Тёмный

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

DesignCourse
Подписаться 1,1 млн
Просмотров 450 тыс.
50% 1

Today's Question: What other learning resources outside of this channel do you learn from?
skl.sh/designcourse - First 200 get their first 2 months free @ Skillshare!
-- While Sass has been out for quite some time, I wanted to create my own resource for my viewers to learn. Sass enables you to write CSS with features that don't yet exist within CSS itself. In this free crash course, I'm going to show you how to get up and running with Sass while creating a simple responsive landing page from scratch.
We're going to cover:
1. Integrating Sass within Visual Studio Code
2. Sass Variables
3. Sass Maps
4. Nesting
5. Mixins
6. Functions
7. Sass & Media Queries
Github repo for this course:
github.com/designcourse/sass-...
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

 

31 июл 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 576   
@DesignCourse
@DesignCourse 5 лет назад
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 RU-vid video, or I may end up at a Udemy course. For full comprehensive topics, I'll check out Pluralsight, Skillshare, Lynda, etc..
@michereff16
@michereff16 5 лет назад
Mostly Udemy and some times on RU-vid.
@minusgod
@minusgod 5 лет назад
Treehouse , Udemy & RU-vid
@81NARY
@81NARY 5 лет назад
PluralSight, Official Docs, RU-vid, Stack Overflow & Books...
@matexxo4004
@matexxo4004 5 лет назад
Udemy, freeCodeCamp, DevDocs(MDN), RU-vid, random articles
@rosaclovis
@rosaclovis 5 лет назад
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 5 лет назад
This is the first I've watched with this RU-vidr, 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 5 лет назад
"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 3 года назад
"Typescript is javascript on steroids", actually thats the origininal
@christofffrazier4225
@christofffrazier4225 5 лет назад
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!
@lansingcai9155
@lansingcai9155 5 лет назад
Best SASS tutorial ever. Super straight-forward, easy to follow.
@mandalorian99
@mandalorian99 2 года назад
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!
@mphokhotleng6280
@mphokhotleng6280 3 года назад
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
@LukeMcCormick-cellear
@LukeMcCormick-cellear 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!
@sveinsoermo9883
@sveinsoermo9883 5 лет назад
Traversy Media, Angular Firebase,, Firebase, Kevin Powell, Academind, Layout Land sort of in that order.
@seandoherty5340
@seandoherty5340 5 лет назад
Man, thankyou for the Layout Land tip. The beauty of RU-vid - I came looking for Sass and found Jen Simmons 😂
@kandysman86
@kandysman86 5 лет назад
@@seandoherty5340 layout land is awesome.
@balz.k3483
@balz.k3483 5 лет назад
Colt Steele?
@keyos27
@keyos27 5 лет назад
Netninja
@digigoliath
@digigoliath 4 года назад
@@seandoherty5340 Jen Simmons, she is a superhero
@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.
@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!
@gcooper642
@gcooper642 4 года назад
This is such a good introduction to SASS. I was dreading trying to figure it out, but I love it already!
@ateyaofficial
@ateyaofficial 2 года назад
You're honestly great! Fun, creative and clear. Thank you for this crash course!
@rebelmachine88
@rebelmachine88 5 лет назад
Fantastic crash course, Gary! This is exactly what I was looking for, thank you.
@hardikmodi8234
@hardikmodi8234 5 лет назад
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.
@miichii1911
@miichii1911 3 года назад
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! :)
@milanzinzuvadiya6447
@milanzinzuvadiya6447 3 года назад
Awesome! Great Tutorial! Your hands-on experience in teaching is just amazing!
@KablooieXL
@KablooieXL 5 лет назад
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!
@jani14jani
@jani14jani 5 лет назад
This is easily the best Sass crash course i've seen. Subscribed!
@ajdrag
@ajdrag 3 года назад
Great SASS tutorial. I had no idea how SASS worked and now I do. Bravo.
@abdull264
@abdull264 4 года назад
You're a genius, Bro! I have learned a lot from this video about Sass. Thank you so much! May God Bless You Always!
@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 !
@ChrisPollard
@ChrisPollard 4 года назад
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.
@omarshishani5899
@omarshishani5899 3 года назад
I enjoyed this tutorial alot, and it was very clear and helpful for learning Sass quickly. Thanks for being to the point!
@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.
@udhayakumarmani3283
@udhayakumarmani3283 5 лет назад
This is the first tutorial I am watching about SASS, I have learned a lot very thank you...
@peterrichard2284
@peterrichard2284 5 лет назад
watching your video was my first exposure to Sass - awesomely helpful . thanks
@StefanMaring
@StefanMaring 4 года назад
Thank you for this video! I learned a lot from it. Especially about how to use SCSS and how to build a responsive website.
@aminhbr
@aminhbr 3 года назад
Thanks a lot!! I learn a lot from you, your channel is a source of happiness!
@sodkolandiawita4417
@sodkolandiawita4417 5 лет назад
Very clear and affordable - fantastic!
@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
@anthonypenna476
@anthonypenna476 5 лет назад
Traversy media mostly x) And nice video Gary, as always
@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.
@MillennialGI
@MillennialGI 2 года назад
Thank you very much for the video. I recently started coding and you are helping me out a lot!
@carolhatcher4015
@carolhatcher4015 3 года назад
Great tutorial! It answered my questions about sass, using VS, live sass compiler, importing google fonts... Super!
@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!!!
@musiccrapguy4930
@musiccrapguy4930 5 лет назад
was not expecting the breakdown at the end of the video, good stuff.
@PrasadPatilmufc
@PrasadPatilmufc 4 года назад
Thanks @DesignCourse, This crash course really helped me a lot to get basic understanding of Saas.
@AmodeusR
@AmodeusR 2 года назад
Sass is really, awesome, just like this crash course 👌Thank you very much!
@golamrabbiazad
@golamrabbiazad 5 лет назад
Thank you so much, Best Sass crash course. Lovely video!!!
@nizamuddinshaikh3185
@nizamuddinshaikh3185 3 года назад
Excellent coverage within limited time! Thank you for sharing. 👍😃
@lukor-tech
@lukor-tech 5 лет назад
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.
@dfjama
@dfjama 5 лет назад
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 5 лет назад
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
@miketimmons98
@miketimmons98 5 лет назад
Thank you! Just spent my Sunday learning Sass :)
@hihi9674
@hihi9674 4 года назад
FANTASTIC COURSE!!! Thank You!!
@notgad3130
@notgad3130 5 лет назад
Thank You, was just looking for this!
@Tadae323
@Tadae323 3 года назад
This course helped me a lot, thanks!
@powlsn
@powlsn 5 лет назад
Great video, thanks for the crash course! I smashed the subscription button! That's the way I want to learn. Short and sweet in less than a hour I get the skills I need to pimp my css. Usually I use google, udemy, stackskills, v2b and Traversy Media to learn.
@stephenjames2951
@stephenjames2951 5 лет назад
Good quick, but detailed overview. Added value with some of the VS code tools / tricks.
@retiar2111
@retiar2111 5 лет назад
Awesome content! Very helpful and informative, love this channel!
@lucemansster
@lucemansster 5 лет назад
Thanks! Learned about mixins! Another reason to use sass! Thanks! Learning resources I use are your videos and consulting the docs over at w3schools.
@balajikc
@balajikc 5 лет назад
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.
@asandax6
@asandax6 3 года назад
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.
@sveinsoermo9883
@sveinsoermo9883 5 лет назад
Spot on as always, with another HIGH QUALITY crash course.
@albertoazinar1209
@albertoazinar1209 3 года назад
I really learned amazing stuff in this lesson. Great content
@danielq888
@danielq888 3 года назад
I've learnt a lot. Thanks for this crash course.
@meghakulkarni7688
@meghakulkarni7688 5 лет назад
Thank you for this crash course, it is very useful. Explaination is very clear and understanding.
@Maertaugh
@Maertaugh 4 года назад
Great teacher, cool studies ! Thanks a lot !
@amirulidzham3686
@amirulidzham3686 4 года назад
Love what you're discussing. I want to see a course about where should people start design, on a paper or xd
@iancarr3923
@iancarr3923 5 лет назад
A very well presented tutorial. I learned a lot and like the ability to use variables, functions, nesting, etc. Other than RU-vid videos, I use stack-overflow, MDN and W3Schools. Thanks
@jcdosmann
@jcdosmann 5 лет назад
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.
@exoticpash8823
@exoticpash8823 3 года назад
This was totally helpful and easy to follow👍🏻! Thanks a ton!
@salomohutapea
@salomohutapea 4 года назад
Thanks so much bro for your tutorial, it's very helpful. I hope you can create more great contents like this.
@tafseerkhan142
@tafseerkhan142 5 лет назад
Excellent course with simple and basic understanding!
@marib8177
@marib8177 5 лет назад
Thank you, Gary. You are the best teacher!!!
@emmanuel4699
@emmanuel4699 5 лет назад
Your channel is a gold mine.
@darshandev1754
@darshandev1754 3 года назад
Loved the tutorial, would definitely check out your courses:)
@love4photos
@love4photos 5 лет назад
Awesome efficient, well explained video! Thank yoooooou!
@Pew_Pew_Pizza
@Pew_Pew_Pizza 4 года назад
Good refresher for me. Looking forward to more videos.
@charbelabouyounes6683
@charbelabouyounes6683 3 года назад
You are awesome! Thank you for what you are doing ✌️❤️
@dontcomply3976
@dontcomply3976 5 лет назад
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.
@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 ?
@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 RU-vid 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.
@mechagurd
@mechagurd 3 года назад
That was a great tutorial. Thanks my dude!
@talyahaviran7572
@talyahaviran7572 5 лет назад
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.
@ssygon2
@ssygon2 5 лет назад
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_ 3 года назад
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.
@ahmedelgaidi
@ahmedelgaidi 4 года назад
you are really an amazing instructor
@hamidrezaashkiyan
@hamidrezaashkiyan 4 года назад
It was AWESOOOOME!! I Loved it.
@fernandogomez83
@fernandogomez83 4 года назад
Really well-explained video. Thanks.
@enmimaquinaandaba
@enmimaquinaandaba 4 года назад
Awesome video, I'm now confident enough to go ahead and become an advanced Sass coder.
@ChrisAthanas
@ChrisAthanas 2 года назад
Great synopsis, I learned a lot
@dying3353
@dying3353 5 лет назад
Amazing video, this was so educational and fun to watch.
@mudyeet_
@mudyeet_ 3 года назад
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
@nonpropaganda7092
@nonpropaganda7092 5 лет назад
Great Intro to SASS Gary.. 😀 😁 thnx.. oh yeah, todays question hmmm - YOU 😎
@jiwonkim5315
@jiwonkim5315 5 лет назад
Your videos are a delight. I want to design like you 💕
@iamarya2k21
@iamarya2k21 5 лет назад
Thank you! What a great crash course!
@bechararizk7245
@bechararizk7245 3 года назад
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"
@ajmaljoiya6006
@ajmaljoiya6006 3 года назад
Great sir you are the real skilled tutors
@rockmonty
@rockmonty 5 лет назад
A very well explained tutorial. Thanks
@rubhan94
@rubhan94 5 лет назад
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.
@kylehovance
@kylehovance 5 лет назад
Thanks Gary. SkillShare seems like a pretty great resource!
@memonustad
@memonustad 5 лет назад
Awesome awesome tutorial. Thanks, man!
@mikaela__
@mikaela__ 4 года назад
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 4 года назад
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
@ers-br
@ers-br 5 лет назад
Excellent content! Congrats!
@bluegx09
@bluegx09 4 года назад
it's helped me very much, thank you!
@psyberpirate
@psyberpirate 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.
@SolomonKahsai
@SolomonKahsai 5 лет назад
Much love man, thank you so much!!!!!!!!!
@jessicaerasmus7428
@jessicaerasmus7428 5 лет назад
Self-learning through RU-vid and Udemy. And lots and lots of Google.
@riteshmaharjan9535
@riteshmaharjan9535 5 лет назад
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 лет назад
@@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
@TheMoralescl
@TheMoralescl 3 года назад
This video is awesome. Thanks a lot.
@priyankamistry539
@priyankamistry539 5 лет назад
hey gary.. awesome video as always. will you please make a video for how do you structure your all sass files for a project?
Далее
You Probably Need BEM CSS in Your Life (Tutorial)
18:47
Learn Sass In 20 Minutes | Sass Crash Course
19:42
Просмотров 923 тыс.
Разница подходов
00:59
Просмотров 83 тыс.
Sass Tutorial for Beginners - CSS With Superpowers
2:02:59
Learn HTML & CSS in 2022 | Crash Course
1:58:41
Просмотров 486 тыс.
7 ways to deal with CSS
6:23
Просмотров 1 млн
HTML and CSS Tutorial for 2021 - COMPLETE Crash Course!
2:17:48
Stop using an extension to compile Sass
21:39
Просмотров 126 тыс.
Awesome UI Interactions with the CSS Clip Path Property
16:15
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 891 тыс.
Какое блюдо выбрать?
0:41
Просмотров 2,1 млн
Best for beginner artists ✍️
0:20
Просмотров 69 млн
Beberia???
0:14
Просмотров 19 млн