Learn Sass in this Free Crash Course - Give your CSS Superpowers!
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- Today's Question: What other learning resources outside of this channel do you learn from?
skl.sh/designc... - 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/des...
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
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!
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 TH-cam video, or I may end up at a Udemy course. For full comprehensive topics, I'll check out Pluralsight, Skillshare, Lynda, etc..
Mostly Udemy and some times on TH-cam.
Treehouse , Udemy & TH-cam
PluralSight, Official Docs, TH-cam, Stack Overflow & Books...
Udemy, freeCodeCamp, DevDocs(MDN), TH-cam, random articles
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!
This is the first I've watched with this TH-camr, 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!!
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.
Best SASS tutorial ever. Super straight-forward, easy to follow.
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!
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
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
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!
"Sass is CSS on steroids" this is the best and most accurate description of Sass I've heard xD
Arjun MC - No wonder it makes me rage.
"Typescript is javascript on steroids", actually thats the origininal
Great SASS tutorial. I had no idea how SASS worked and now I do. Bravo.
Traversy Media, Angular Firebase,, Firebase, Kevin Powell, Academind, Layout Land sort of in that order.
Man, thankyou for the Layout Land tip. The beauty of TH-cam - I came looking for Sass and found Jen Simmons 😂
@@seandoherty5340 layout land is awesome.
Colt Steele?
Netninja
@@seandoherty5340 Jen Simmons, she is a superhero
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!!!
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.
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.
This is easily the best Sass crash course i've seen. Subscribed!
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
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 👍
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.
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.
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!
The only video that got it right for me. Wow. really, it was tough for hours trying other videos. Thank you. Peace : )
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! :)
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!
Thanks a lot!! I learn a lot from you, your channel is a source of happiness!
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"
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
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 ?
You're honestly great! Fun, creative and clear. Thank you for this crash course!
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
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.
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
Make a video about how to become senior web-developer in 48 hours please ;).
TUSHAR just say you don’t “code” anymore lmaoo
Damn! It takes relatively years to go form junior to senior, but 48 hours....Good luck with that my man!
TUSHAR
Senior Web developer with in 48 hours??
If you are coming mars it's possible.
Seniority comes with work, effort, experience etc
He was making a joke based on another joke I made on a Traversy video.
Move to a black hole.
Excellent coverage within limited time! Thank you for sharing. 👍😃
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.
Sass is really, awesome, just like this crash course 👌Thank you very much!
Thank you very much for the video. I recently started coding and you are helping me out a lot!
I enjoyed this tutorial alot, and it was very clear and helpful for learning Sass quickly. Thanks for being to the point!
Great tutorial! It answered my questions about sass, using VS, live sass compiler, importing google fonts... Super!
Awesome!
Great Tutorial!
Your hands-on experience in teaching is just amazing!
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!
Your channel is a gold mine.
You're a genius, Bro! I have learned a lot from this video about Sass. Thank you so much! May God Bless You Always!
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 !
Self-learning through TH-cam and Udemy. And lots and lots of Google.
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 :/
@@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
@@bayusetyawan3086 good advice
This was totally helpful and easy to follow👍🏻! Thanks a ton!
If you learnt SASS, wanna know how to implement it in your project. Learn the build process: th-cam.com/video/OsV7ktUIQQA/w-d-xo.html
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 TH-cam 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.
This is the first tutorial I am watching about SASS, I have learned a lot very thank you...
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.
Fantastic crash course, Gary! This is exactly what I was looking for, thank you.
was not expecting the breakdown at the end of the video, good stuff.
FANTASTIC COURSE!!! Thank You!!
I've learnt a lot. Thanks for this crash course.
Thank you for this video! I learned a lot from it. Especially about how to use SCSS and how to build a responsive website.
Great teacher, cool studies ! Thanks a lot !
Good refresher for me. Looking forward to more videos.
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.
exact same combo. :) I guess I'm a year behind you though.
This course helped me a lot, thanks!
Gary thanks for this video. My answer for today's questions: 1) Traversy Media TH-cam 2) Pluralsight for .NET learning 3) Academind TH-cam (Frontend) 4) Kevin Powell TH-cam 5) The Net Ninja TH-cam
Best Front End Developer Content !
This is such a good introduction to SASS. I was dreading trying to figure it out, but I love it already!
Thanks! Learned about mixins! Another reason to use sass! Thanks! Learning resources I use are your videos and consulting the docs over at w3schools.
watching your video was my first exposure to Sass - awesomely helpful . thanks
what software do you use for edit yours videos? =) sorry for my noob question !
Excellent course with simple and basic understanding!
Traversy media mostly x)
And nice video Gary, as always
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.
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.
you are really an amazing instructor
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.
Great sir you are the real skilled tutors
I really learned amazing stuff in this lesson. Great content
Gary, I know I'm late to the game here, but what is the main advantage to using the map-get vs just a straight variable? Seems like there's more typing to use the map-get and no real benefit. Or did I miss something? Thx . great video!
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.
That was a great tutorial. Thanks my dude!
Thank you for this tutorial. A little bit confusion:
// why do we need #{$desktop} below?
@mixin desktop {
@media (min-width: #{$desktop}) {
@content;
}
}
// as I understand, #{$name} is for combining strings. but here i don't see any point of using it
// I tested below code and it works fine.
@mixin desktop {
@media (min-width: $desktop) {
@content;
}
}
please help.
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?
Thank you! Just spent my Sunday learning Sass :)
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
Ah! Seen it!
Awesome video, I'm now confident enough to go ahead and become an advanced Sass coder.
Thank you so much, Best Sass crash course. Lovely video!!!
You are awesome! Thank you for what you are doing ✌️❤️
Really well-explained video. Thanks.
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.
Good quick, but detailed overview. Added value with some of the VS code tools / tricks.
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.
You are like GOD to web-developer students!!
Thanks @DesignCourse, This crash course really helped me a lot to get basic understanding of Saas.
Thanks Gary. SkillShare seems like a pretty great resource!
Loved the tutorial, would definitely check out your courses:)
Great synopsis, I learned a lot
A very well presented tutorial. I learned a lot and like the ability to use variables, functions, nesting, etc. Other than TH-cam videos, I use stack-overflow, MDN and W3Schools. Thanks
Spot on as always, with another HIGH QUALITY crash course.
Hey Garry , this is what i was waiting for a crash course or any development video so here it is great work dude !.
and once again sorry for every think .......
i prefer youtube but now im also learning from udemy
40:44 Him landing exactly at 840px made my OCD very happy
Love what you're discussing. I want to see a course about where should people start design, on a paper or xd
Great video thanks!
Quick question though - at the beginning in the terminal you wrote the command "code ." to then open up the sassy folder in Visual Studio - is this a Windows thing? Sorry if it sounds silly, I just tried it on my macOS and it didn't work (I use Sublime Text 3 though so thats maybe why)
It's a VSCode thing. Since you use sublime, the command would be 'subl .' (without the quotes of course). If it doesn't work Google it. You might have an older version of sublime or it might not be in your $PATH.
Thanks so much bro for your tutorial, it's very helpful. I hope you can create more great contents like this.
Amazing video, this was so educational and fun to watch.
It was AWESOOOOME!! I Loved it.
Very clear and affordable - fantastic!
Awesome content! Very helpful and informative, love this channel!
From TH-cam I usually watch Traversy Media, Kevin Powell, Design Course, Chris Hawkes, Academind. Outside TH-cam I mainly use Udemy, DesignShack for inspiration and StackOverflow for code snippets.