Sass and BEM for beginners

Подписаться 494 тыс.

Просмотров 237 тыс.

50% 1

🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, and JS: coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this video I'll walk you through the basics of Sass, BEM (block-element-modifier), and the principles of responsive design. This is a standalone course in Sass that's taken from my full course, Responsive Design for Beginners.
0:00 - Intro
0:22 - What is Sass?
1:17 - Compiling Sass with VS Code extensions
12:49 - Sass partials
26:17 - Sass variables and CSS custom properties
43:45 - Building the demo responsive website
50:00 - Sass and BEM
57:08 - Building the responsive mobile layout
1:04:30 - Building the desktop layout
1:18:10 - Setting widths
1:36:08 - Sass mixins
2:06:35 - Responsive typography
2:33:24 - Sass functions
3:03:39 - Why I use em units in media queries
3:10:49 - Nesting and BEM
3:35:23 - Helper/Utility classes
Source files: github.com/thecodercoder/sass...
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard, Vissles V84 -- vissles.com/?ref=mu96kxst5w -- 🔥 get 10% off with code THECODERCODER --
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука

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

1 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 403

@jeremypruitt237 Год назад

Thanks!

@TheCoderCoder Год назад

Thank you so much!

@haroon7311 Год назад

@@TheCoderCoder Hi, when will you launch your responsive design course?

@ruficarllagaras0217 Год назад

There is a VSCode extension where you can easily convert px to rem and vice versa. It also supports vw. It's called 'px to rem & rpx & vw'. That way it can eliminate all those unnecessary conversions and setting functions. I hope it helps.

@aravindms5180 9 месяцев назад

Thank you! ❤...

@heirofsam 2 года назад

I recommended my college mates ( literally 12 people) and bro they loved it😭. Everyone respect me now lmaoo Much love to you haha❤

@quincylarsonmusic 2 года назад

Awesome. This is really well-taught. And I love the subtle animations and transitions. It is clear you put a lot of thought and love into this course.

@KennyFully Год назад

@@fazebook7897 did you just disrespect the creator of free code camp? That’s all sorts of wrong!

@the_god_killah Год назад

"the thirst is real "🤓

@TheCoderCoder 2 года назад

🚨 Hey folks, if you're having trouble with @forward not working, make sure you're using Glenn Marks' Live Sass extension, *not* the original one by Ritwick Dey. The original one won't work with the new Sass syntax!

@prateekkumar6426 2 года назад

You are to good in teaching thanku mam

@stranger9951 2 года назад

Is this the content of your complete web development course for the SASS/SCSS part?

@TheCoderCoder 2 года назад

@@stranger9951 This is the entire Sass/SCSS section except for the Gulp setup. The full course will then go on to build the actual website for the course

@martinemanuel8239 Год назад

Hey i wanna say thank you very much ! your recomendations along with the kevin's powell were the best, I use all of this tutorials... recently I jumped to the next step wich is use the console with the sass comands lines like --watch and use sass on some few webpack project !

@codernerd7076 2 года назад

The quality of this video makes me want the full course even more! Thanks for all your hard work making this!

@VinceM1000 2 года назад

Great job! Booking a night off to go through this a few times. The quality is top notch and the teaching is down to earth and easy to follow. Love all of your videos! Can't wait for the full course!

@ordaniel7699 Год назад

Wow, I watched many tutorials in the past, this is by far the most descriptive one I've watched. You pause on things that maybe not everyone is familiar with, and in 60% of the cases I know them all so I skip, but when I don't know something, I thank god that you pause and elaborate on those. Thank you so much for this video!

@roysandoval252 Год назад

I really enjoyed how you organized the content and went over the fundamentals, it made learning Sass super easy and enjoyable. I was also able to brush up on a few CSS techniques. Thank you for sharing this amazing tutorial!🙌🏼

@AlanLastufka 2 года назад

I followed along every step of the way and learned a ton. I've used CSS for years, but this was my first SASS/SCSS exposure and wow is it going to be helpful moving forward.

@esraamohamed5601 Год назад

My gratitude to you for all you have done, which I will never forget. I truly appreciate you and the time you spent helping me on many occasions. Thank you very much for the course. I enjoyed every minute of your lecture as well as your marvelous sense of humor.

@vijitaa3124 10 месяцев назад

I was trying to build my first ever portfolio website & I realized that my css approach was too shabby and so I thought about looking at sass and reached here. What a knowledge-dense and amazing video this was. It filled a lot of gaps in my knowledge & also helped me find a new approach on building a website. Cannot thank you enough! ❤

@TheNinjatsu 2 года назад

When you think of a topic and one of your favorite youtubers upload a 4 hours course about it. Bless you.

@josesirias 2 года назад

Out freaking standing! I've been looking all over youtube for a tutorial on Sass. Most of them are outdated and still use @import instead of @use and @forward I'm more of a visual learner, even though I read the documentation on the Sass website I still couldn't figure it out but your video is quite clear. Thank you so much for taking the time to create this awesome video!!! Keep up the great job you do.🔥🔥

@TheCoderCoder 2 года назад

Glad this could help you with Sass!

@benjaminbilgehan Год назад

totally agree with you. It is an amazing course and learnt a lot from her.

@martapfahl940 Год назад

Love how you giving such a lot of best practice tips on the fly in this course, such valuable content! Thank you so much

@stanleychukwu7424 2 года назад

One of the best lectures on sass and css combined, i learnt not just sass but some very high level use of some css functions. thank you!!!! And also, thanks for the rem to pixels converter function!

@LeNerdJames 2 года назад

Thank you so much for this, this is awesome! Thank you for all your hard work and all the videos you put out for beginners. Your channel has helped me personally more than you know!!

@eliasestebanalonzo8344 Год назад

I'm in love with your content in general, extremely significant. This is high quality for people like us who enjoy learning more every day about web development. Greets from Paraguay

@MatiasBaldanza Год назад

Your video production and editing is always top-notch, the content is really well-structured and paced, and you have a voice made for narration. Love it.

@xenialxerous2441 Год назад

Hi! I'm so grateful to you for sharing this, even though I've been using most of the concepts in my work already, however I got an in depth perspectives working alongside and served as a brief brush up. I tuned in through out the course and was able to learn the things I didn't knew, for instance, the @extend rule, sass placeholder, and the last one utility classes. Thanks again as I'm so happy to get to know them ;)

@stucowley3021 Год назад

👏 Amazing! This course is so in-depth, well thought through and current. It has provided me with updated knowledge that I really couldn't be bothered re-learning again, into an easy to follow and understand way. I have been using Sass for 10 years without really updating my knowledge, but within 2 hours I was ready to get started with modern Sass techniques. Thank you so much!!!

@TheCoderCoder Год назад

Awesome! So glad that this video helped you! Sass is great 🔥

@geraldtivatyi2116 Год назад

Dude this video just changed my life. Learnt so many things that I have been using and wondering about for quite a while. When I make the $$ I will certainly be buying the whole course 🙌

@Oli4win Год назад

I'm documenting everything i learn as a 'vlog'/'series' type thing and this video helped me out a lot in the last episode! Thanks a lot

@rajeevkalangi2472 2 года назад

Wonderful. You are just awesome teacher and I never felt bored or dull even after straight up 2hr class. Keep doing the good work.

@CarlosNoriega1 Год назад

Awesome video. Your style of explaining things is super thorough yet relaxed. Really enjoyed it. Thanks!

@And1997Ruz 6 месяцев назад

Pure gold😇 I came here to just refresh my knowledge of sass, but I even learned a few other things along the way

@mbm6048 2 года назад

Wow this video is packed with cool stuff. It's not just sass but there's Bem ,responsive design and more cool 😎

@pedroafonso2114 Год назад

Best video I watched about RWD, very well explained and easy to understand. A thumbs up it's not enough for your work, congrats for the awesome job!

@TheErickHans 2 года назад

You are amazing. I have been lurking the webs because I have been having trouble understanding SASS and this is the first video I found to be completely useful from start to the end. This is amazing. Thank you so much!

@TheCoderCoder 2 года назад

Glad this could help!

@rishii777 Год назад

superb. You explained everything about what I am struggling to know. I love the way you organising the things and the making the responsive . Thank you.

@daviddwq4513 7 месяцев назад

Extremely high quality content! I love it from beginning to the end! Fresh material and the well explained on every detail of this little course are way more superior than any Udemy course! Thank you so much! I'm already your follower.

@IronEducation 7 месяцев назад

I watched the whole thing through. Tons of value, thank you!

@mirpeter Год назад

Great video, i was only looking to learn SASS but learning BEM and Responsive Design at the same time , and a ton of other cool tips throughout , was very helpful.

@TheOshinoMeme Год назад

I didn't find a better course than yours, really, it fit me perfectly ! Thanks you !!!

@conmdemanolo 10 месяцев назад

👋🏼Thanks a lot for the tutorial ! You have a wonderful way to explain everything. What I most liked was how you explained every step of the thought process for every decision, that's really important when you are a beginner like me. You didn't jump to the "right" explanation right away, and even you acted as you didn't know the answer also, and that make easier to follow your explanations. I'm going to take that into account when I need to explain something similar to some else. I'm eager to see the full course, and I hope to see you in the other side. Have a nice day! 🧡

@sigfredoolmedo1063 2 года назад

Thank you so much for this course, this is the only course I've seen that uses the new @use and @forward at rules for the structure of the project. Also, thank you for the explanation on the BEM metholodogy. Great course!

@TheCoderCoder 2 года назад

So glad this could help!!

@filipwloch8718 2 года назад

I was looking for any sass tutorial. When I found yours, wow... I love it :D

@aaaliii4u Год назад

last time I tried tutorial on sass made me fall asleep in very first few minutes. skipped it. Today I have come across this one. it is relatively new and instructor is awesome!

@alkhemist6631 2 года назад

I like your stuff, style, and the way you say "Let's get into it!"

@rokon365 9 месяцев назад

Clear, consise, and easy to understand explanation. Thanks a lot.

@mohamedghazali4914 2 года назад

Excellent, ❤😍 i was really waiting. Now it's time to watch. Thank you very much

@ogunkayodeoluwaseun9348 2 года назад

Thank you so much for this heavenly walkthrough still on the first half of the tutorial I wanted to bring to your attention that the sass compiler said this using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 Recommendation: math.div($pixels, $context) or calc($pixels / $context)

@creativoma 2 года назад

Excellent course! You just gained a new subscriber! Thanks for this content!

@Arjun-yj1es 2 года назад

Wow !!! much awaited course from you Jess

@jakeparrotta1464 Год назад

Even when she goes on small tangents they are so relevant and useful. High value video and worth watching beginning to end 👍🏼👍🏼 Thanks

@nonso01 2 года назад

Best RU-vidr ever! inspired me to learn sass! which makes it fun to write css 😁✌️

@mbm6048 2 года назад

Finally a video on Sass !!! I didn't even watch yet but I now its gonna be 🔥

@kanjurer 2 года назад

I WAS LITERALLY GONNA IMPLEMENT SASS ON MY NEW BLOG thank you so much

@parrySc 10 месяцев назад

Your way to explain things it's to intuitive, thank u so much and keep going with your great tutorials

@EduardoBarros13 2 года назад

Damn! I FINALLY started studying Sass yesterday. This video came just in time! 😎

@angell2341 Год назад

Hi, Thank you for sharing this knowledge, I liked the video but the thing that I liked most is, it shows the way of doing things that are not shown in other videos.

@universecode1101 2 года назад

Nice 👏🏻 I love css and so for that sass, tailwind and pure css 🧑🏻‍💻

@archiem6323 2 года назад

Great introduction. 🙋🏻‍♀️😃 Always a fan!

@JvMapote 2 года назад

Thanks!

@jubrilosunkoya6661 2 года назад

Great job, Coder Coder I've missed you!

@ciprian2957 9 месяцев назад

Today I got big time confused bcuz of the use and forward methods of Sass, came here and now my problem is solved. Thanks a lot! 🙏🏼😊

@xl8134 Год назад

You explained everything so well! Thank you.

@primy3576 2 года назад

Right when I needed it the most...Thanks Jessica🤗

@aSTr0NeRF0999 Год назад

After using ChakraUi and other UI frameworks for years now, its was time to get back to custom-css good practices ^^ Your tutorial was like fresh air for my memory. Thanks !

@nics.nvrlnd 2 года назад

you're such a great coder/RU-vidr, thank you so much 😇

@shim-kun2538 Год назад

Very well explained. Learnt lots of new features and ways to style websites. Thank you :3

@Anish-nr2em 2 года назад

Needed this so bad! Thankyou Jessica 😭😭

@user-he5uv6ij7e 3 месяца назад

Thank you so much ! Would love to see more from you ! just 1 thing though, at 03:25 the bg green is applied to the 1st widget, not because of cascade, but because of a greater specificity : .grid-widget 0,1,0 and .grid-widget .grid-widget--green 0,2,0

@florenciobritez5521 2 года назад

Awesome course! It was really helpful for me, thanks si much Jessica!

@partimecat 2 года назад

You’re awesome 🤩 I can’t believe this is being offered to us for free !

@leoortiz7 2 года назад

I have been waiting since last year 😭. Tell us when the full course will be ready. You rock 🤗

@Miles09 Год назад

Awesome video as always. Keep up the good work.

@khalidjamal9008 Год назад

i like how clean you present the course , this was super helpful thank u

@Pavel-wj7gy Год назад

All in all, this is a really cool course, I have learnt a lot from it. Thank you.

@NainaP 2 года назад

You don't how much you're helping me out 💖😭

@TanisiBhardwaj 2 года назад

Thanks for all your hard work, the video is awesome.

@JayJay-ow9gi Год назад

Very neat and mind-opening concentrate of knowledge! ❣You're the woman! THNX

@gimenafernandez8149 Год назад

I learned a lot of things, to apply in a new project in which I am working. Thank you very much

@reactsimplified.5839 Год назад

One of the best and most useful course that i watched

@kamal-hassan 2 года назад

Yay I can't believe! This video came at the right time for me!

@maaafiaantwiwaa6344 Месяц назад

this is an amazing way to code!!

@okamimoushiyou 2 года назад

This is so good...I'm sort of at a loss for words, haha. You can tell there is a lot of effort put into this. It's so great how you've done all of your research and have thorough explanations for everything you do based on both research and working experience. Stuff like the rem and em usage can be annoying concepts to get a good grip on; but your explanations, alongside the live demoing, made everything crystal clear. Thank you sososo much for this. This has saved me countless hours of research and stressing. If there's any way I can support you, please let me know. The work you do is so necessary and incredibly lacking in the coding community (not to disparage anyone else, there's other great content out there, you're just on a whole nother level). Edit: Found the RU-vid support option..will be using that unless there's a different way I can support you more directly. I don't entirely care for the perks (although they're a cool bonus), I just wanna make sure as much money is getting to you as possible!

@TheCoderCoder 2 года назад

thanks so much for your kinds words and the support! I'm very glad that this tutorial has been helpful you. A lot of research definitely went into this video.

@okamimoushiyou 2 года назад

@@TheCoderCoder of course, you deserve em :) I'm rewatching as we speak to run through some of the file structure and such, as I'm going to use it for a project I'm working on. Thanks again!! I'm going to support you via RU-vid "join" by end of day today, but let me know if there's a way to support you more directly. I look forward to checking out more of your stuff!

@pankajthapaliya2336 2 года назад

Thanks a ton jessica. That was more than a tutorial video.

@br1580 11 месяцев назад

Incredibly informative video, I learnt so much from this. Thanks very much :)

@bhashkarf369 2 года назад

Thanks 🙏🙏🙏 for this.. and You uploaded the video after a long time .

@christobongende893 11 месяцев назад

Really good course, It's really well-taugh! thank you

@MrBrancomusic 2 года назад

Incredibly useful,thank you!

@hindihits9260 2 года назад

Right tutorial at the right time !

@anarosol6133 3 месяца назад

Thank you so much for this! Very helpful

@user-sc6xg6ou1w Год назад

Thank you so much for such a great course for beginners))

@jenoyestewart1516 Год назад

You have become my favorite coding RU-vidr!

@hattanderham1970 2 года назад

Really waiting for your course

@anuragsingh-gj4vn Год назад

Belated Happy Teacher's day ma'am!! And thnx for the course...

@tasminaakter6682 2 года назад

Finnaly a video after a loooong time😁😁

@aliubenedict9380 2 года назад

Great content!! Love this.

@JennyPicture 4 месяца назад

Thank you Jessica) Good work

@estherjonathan_ 2 года назад

This is no mouth wash or something to sweeten the whole stuff here. You are the best I honestly saying it, your explanation is so calm and I followed every process step by step... And now you just inspired me to learn SCSS.. I came across your channel and you just won my heart n I just subscribed and sending my friends n students to your channel to get more contents just like I did to Kevin Powell channel too💖💖 Thank you for these piece... Please keep the good work✌️✌️👍👍📸

@TheCoderCoder 2 года назад

Thanks for your very kind words!