Sass and BEM for beginners

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

КОМЕНТАРІ •

  • @jeremypruitt237
    @jeremypruitt237 2 роки тому +79

    Thanks!

    • @TheCoderCoder
      @TheCoderCoder  2 роки тому +10

      Thank you so much!

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

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

  • @TheCoderCoder
    @TheCoderCoder  2 роки тому +50

    🚨 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
      @prateekkumar6426 2 роки тому +2

      You are to good in teaching thanku mam

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

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

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

      @@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
      @martinemanuel8239 2 роки тому

      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 !

    • @iamtharunraj
      @iamtharunraj 2 місяці тому

      You can also use Parcel to bundle your SCSS if you don't wanna use an extension!

  • @quincylarsonmusic
    @quincylarsonmusic 2 роки тому +123

    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
      @KennyFully 2 роки тому +1

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

    • @会供価
      @会供価 2 роки тому +1

      "the thirst is real "🤓

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

    👏 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
      @TheCoderCoder  2 роки тому +3

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

  • @roysandoval252
    @roysandoval252 2 роки тому +32

    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!🙌🏼

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

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

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

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

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

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

  • @josesirias
    @josesirias 2 роки тому +31

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

      Glad this could help you with Sass!

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

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

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

    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!

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

    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

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

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

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

    5:45 before deleting, ctrl + space also show options.

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

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

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

    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!

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

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

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

    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

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

    Hello, what's happening at 3:09:57 ? What is the "normal zoom" you speak about ? We are still in width min() with max 1000px in rem so max 62.5rem no ?
    This course is so well structured & perfectly timed (naration / transition / action), it's a crystal jewelry.

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

    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!

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

    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)

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

    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.

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

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

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

    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!

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

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

  • @Sbz-i2c
    @Sbz-i2c 10 місяців тому

    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

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

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

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

    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 🙌

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

    Finnaly a video after a loooong time😁😁

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

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

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

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

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

    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.

  • @rajeevkalangi2472
    @rajeevkalangi2472 2 роки тому +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.

  • @TheErickHans
    @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!

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

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

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

    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! 🙏🏼😊

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

    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 ;)

  • @Arjun-yj1es
    @Arjun-yj1es 2 роки тому +1

    Wow !!! much awaited course from you Jess

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

    You have become my favorite coding UA-camr!

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

    788 views but 199 likes, cmon guys she deserves more than that
    Thank you Coder Coder for this beautiful content

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

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

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

    Great job, Coder Coder
    I've missed you!

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

    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.

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

    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 UA-cam 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
      @TheCoderCoder  2 роки тому +1

      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.

    • @parrapaTh3Rappa
      @parrapaTh3Rappa 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 UA-cam "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!

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

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

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

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

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

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

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

    👋🏼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! 🧡

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

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

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

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

  • @stanleychukwu7424
    @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!

  • @Pavel-wj7gy
    @Pavel-wj7gy 2 роки тому +1

    I'm struggling to understand why, but the media-query example at 3:00:00 onwards doesn't seem to work when I try to reproduce your code, even though I double checked the functions and everything has been working so far. The devtools reads "@media (min-width: 56.25em)" but the layout does not change as it does in your video. Am I the only one encountering problems at 3:00:00 example? Upd.: Funny how in Google Chrome it seems to work, but not in Mozilla. Go figure.

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

    2:43:32 To add a unit to a number, I think it's better to multiply this number by 1 unit, e.g :
    $value: 42;
    $length: $value * 1px;

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

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

  • @Anish-nr2em
    @Anish-nr2em 2 роки тому +2

    Needed this so bad! Thankyou Jessica 😭😭

  • @kamal-hassan
    @kamal-hassan 2 роки тому +1

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

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

    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.

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

    Would you recommend trying this tutorial even if I'm still on the basics of learning HTML and CSS? I've been struggling to pick the right way to start my first project. Thanks again!

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

    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.

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

    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.

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

    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✌️✌️👍👍📸

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

    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 !

  • @m.smanoj4688
    @m.smanoj4688 3 місяці тому

    Fantabulous , awesome and only video to watch if u want to learn saas. At the beginning it looks like what the fcuk is SAAS once u get use to syntax and learn the advantages of using saas over css u will be thrilled and u will never regret about SAAS

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

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

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

    Jessica we waıt your course! spring is over, but your course is not over...

  • @reactsimplified.5839
    @reactsimplified.5839 2 роки тому

    One of the best and most useful course that i watched

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

    Right tutorial at the right time !

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

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

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

    Very nice tutorial makes us like SASS even more!! One thing strange that happened when tried the media query with the mixin (around 2:00:00). I had to nest my 2 media queries for &__main with background-color (medium and large) because your way didn't work for me.

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

    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.

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

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

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

    it's really great and learned a lot.
    How to handle responsiveness if the user sets the display resolution to 150% or below 100%

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

    Waiting for the Beginners portion to start, gesh, FML!

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

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

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

    1:33:37 I was having trouble using width with -40px the sass compiler was giving error so I did some digging and found that we can add #{40px} before - symbol, it did actually compile successfully but the chrome and fire-fox was not showing the space of 20px on each side in the mobile view and eventually found the solution to it in the Sass documentation.
    So, in the end instead of this width: min(100% - 40px, 1000px);
    we can add calc -> width: min(calc(100% - 40px), 1000px); Remember to add space before the "-" symbol and after it

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

      oh no, I'm sorry you encountered that error. Are you using the Live Sass Compiler extension? Also, when you were getting the error, did you have a space between the "-" symbol and the 40px, like "min(100% - 40px, 1200px)" ?

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

      @@TheCoderCoder No, it's working if I give space! Thanks.

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

    The "Preference: Open Settings (JSON)" is not showing in the command pallete. 3:04 mark. Can someone help me:((

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

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

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

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

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

    GREAT COURSE 😍😍
    Just a question,
    Do we have the code somewhere online? maybe a Github repo?

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

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

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

    For exact typography sizes between devices you can use the library poly-fluid-sizing I have used it in a few websites without problems.

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

    Thanks alot for putting this tutorial out. Please i have been trying to get the "Watch Sass" to work but it is not working please any advise would really help and i was thinking we can download the startup file for this course. Please anyone can help me out cause i really want to learn.

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

    This is my first time finishing this kind of a long class. It took me about 3 days to finish it and I am open to suggestions on how should a person study with these kind of classes. I am waiting for your answers :)). Thank youu!!

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

    hmm, strangely.. when I do the shft+alt+p I do not get that option of " open settings json " ; I do however get the other JSON settings. I have to actually go into preferences to access it via the menu.. file > preferences etc..

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

    Nice one! Sass is great, especially with you

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

      Wait that came out wrong

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

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

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

    can you tell me what software do you use for video editing and for thumbnails also

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

    Thanks!

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

    Ive been working as a full stack dev for a while now. For first time in my career, I was specifically hired to be a front end developer, working mainly with Vue. I will never say front end is easier ever again holy shit

  • @Pavel-wj7gy
    @Pavel-wj7gy 2 роки тому

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

  • @nicx.nvrlnd
    @nicx.nvrlnd 2 роки тому

    you're such a great coder/UA-camr, thank you so much 😇

  • @maaafiaantwiwaa6344
    @maaafiaantwiwaa6344 8 місяців тому +1

    this is an amazing way to code!!

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

    Always love Ur videos for so long your not making any please keep us updated everyday even though in stories love from Bangladesh 🇧🇩

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

    You have an amazing comprehensive tutorial! I have a question about the "em". I remember I learned before 'em' is relative the parent font size. It doesn't have to be 16px. What you used sounds more like 'rem' to me. Is it possible to explain this a little bit? Thanks a lot!

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

      Yes, em's are relative to their parent's font-size, rem's are relative to the "root" or browser's base font-size which is usually 16px but you can change it in the browser settings. I have a video on my channel that explains this more, "px vs rem" and I talk about em vs rem too!

  • @shim-kun2538
    @shim-kun2538 2 роки тому

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

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

    I've been waiting for this :)

  • @JayJay-ow9gi
    @JayJay-ow9gi Рік тому

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

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

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

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

    Really waiting for your course

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

    What about the property clamp() to create a dynamic sizes with min-max values?

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

    Just to be clear: the notion that font-size should be set in rem is debatable, and the vast majority of companies, including the major news sites, use pixels.
    It's not because they hate people with disabilities. It's because the Ctrl + function works just fine when the font-size is in pixels. The browser saves that preference when you zoom into a site, so you don't have to zoom in every time you come back.