 I'm not sure based on what's happening in the chat, if I'm actually, yeah, I should be live. Please let me know in the chat. I am on slow mode. So that might not be helping things. One second. Is this going to be? Oh, I think there must be a really long delay because I think there we go. Okay. There's a really long delay. That's crazy. But, um, good. We're good. Okay. So there we have it. That's sort of what we're going to be. We'll sort of be exploring some of the stuff you can learn in the course. And I think it's me a lot of fun. And as I said, we'll take questions. I might ignore the chat from time to time as I'm working. But yeah, let's, let's, I think I'll leave that open, I guess, and we'll just go to my other tab. And I'm going to do one thing really fast. Or you know what, let's, let's pull this up and I'll show you what we're working on. And I know you can't see my screen. I'm in famous during my live streams to be showing my face like we're looking at now and talking about what's on the screen and forgetting that I need to switch over to a different scene. So this is the project that we're going to be sort of looking at. And I want to show how I would start a multi-page sort of bigger sized project like this. And this is actually one of the final lessons of one of the modules of the course is looking at this. But I'm going to do something a little bit different from the course. I'm going to sort of merge that module of the course into the last module of the course a little bit. We're going to be exploring sort of some scope styling and some other stuff as well. I've also seen some people asking ahead of the chat or ahead of time about sort of some more basic lessons and like introduction to SAS and other stuff. I'll probably have some content on that. And maybe I'll take some questions later on in the stream, but I won't be doing that right off the bat here. I just want to sort of explore how I work and how I would set a project up like this based on the system that I teach in the course. So yeah, that's what we're going to be taking a look at. I see somebody asking if I'm employed by Airbnb and I definitely am not. And people asking if the stream is available afterwards, it will be. Sometimes YouTube takes a little while to process a stream once it's done. So it ends up being down for like a couple of hours or something. But once I'm just going to publish it as is. So it will be available afterwards if you can't be here for the whole thing or if you have to duck out now or whatever it is, it's just going to be eventually up on YouTube. So people asking what the technology we're going to be using. So we're going to be using a combination of SAS and Astro and scope styling. Is the main parts we're going to be looking at as we do this. So and that's sort of the thing I changed because this final module doesn't involve Astro at all. Astro is sort of the beginning of the next module in the course. But I figured why not? We'll sort of dive into that because I want to explore this idea of using everything I've looked at in the course and built up that we're going to see in a minute because it's not just your regular SAS. It might be a bit different from what you're used to seeing in setting up a project. So yeah, we might as well get into it and explore how I do this. Now I have limited screen real estate when I'm working on a project. So we're going to see sort of how this works out. And let's just explore a little bit, actually, when I'm starting off with something sort of what my starting point is, because I don't start with a blank file every time. And that's part of what I want to teach in the courses. Like, let's start with something that's already in place. Right. And I try to take a an approach that is sort of this middle ground between going full on custom CSS and tailwind. I know a lot of people always ask me when, Kevin, when are you going to make a tailwind video? I don't really like tailwind a lot, but I do appreciate utility classes up to a certain point. So I'm going to talk about that and sort of show that as we go through here and you'll see that in action a little bit. But the very first thing I do is if I go and I look, I have a SAS folder right here. Yeah, you guys can see it. So I have a SAS folder that has a bunch of stuff and this is all like part of the starting template that I use. And I'll even I won't address it right now. Or, you know what? We might as well. I was going to save it for later, but some people. Let's go to the big face for now. Some people ask me if SAS is still worth learning. I just put out two videos on nesting coming to native CSS. And, you know, people are like, oh, I don't have to use SAS anymore because there's nesting that's now part of native CSS. So what do I need SAS for? I will argue that and we'll see here, hopefully, that SAS does a lot more than just nesting. If you're only using SAS for nesting, then you probably shouldn't be using it. I'd rather even now like browser support is not great yet for native nesting. So I just use post CSS. Post CSS has a really good nesting feature. It works really well. So I would just use that instead because that's all you're using it for. It's a little bit easier to set up. It's a bit more lightweight. You're just working in regular CSS files. You might as well. But if you're going to sort of go that next step and get into bigger projects and you want to work on things like the architecture of your projects and maintenance and all of that and working in sort of bigger things, we're going to explore that a little bit. And obviously a lot of people don't work just with regular HTML, which is also why here I want to look at how we can use Astro because that allows for some scope styling. So how that could work with a system like this as well. And I want to explore all of that. And if anybody here uses Svelte, it'll look very familiar to that, but you could even use this type of thing with CSS modules or whatever if you're using React. It's a very similar idea and process behind it all. So I already see somebody asking what the slot element is. We'll get to that in a minute. But first, what I want to look at here is sort of what I use to do most of my projects or what controls most of it. Or you know what, we'll come back to that in a second. I'm going to go first, like I have this utilities area. And if we look in this utilities area, you can see there's a whole bunch of stuff in here already. And this is sort of how I start projects off where like say a container, right? Or this one looks a bit more complex because we do have a bit more complexity going on than like a typical container. Maybe we'll look at flex group. Again, there's a few little things in here, but this idea that like I like having, that's another one, okay, round. That's a nice simple one, right? Where we get like these classes that just do one thing. They do it really well. Tech center, text-to-line center, that's all it's doing, nice and simple. These are sort of these tailwind things that you'd get, right? Upper case, text, and all of those types of things. Box shadows, just going to box shadows. And so like I really like having utilities that can do that type of thing. I think that's really fun. It's really nice to work. So my starting thing has this here. I'm also using purge CSS with post-CSS to get rid of, you know, I'm generating a bunch of utility classes that will all get purged out if I don't end up using them. So they don't reach the end code just like you would get with tailwind. I also have some layouts. So I have like an even column set up. I have a pile, which is when you wanna layer, you know, stuff on top of each other using grid, what I call a cluster, and a few different sort of layout-y things that are in layouts. I have a few pre-done, actually I have from here that I wanted to do later. So we'll delete that one. But we have some stuff in here that are like sort of those ones that you always end up using. So a navigation, a side foot or a side head or my buttons that are just pretty straightforward. But you'll notice that there's lots of variables that are in here. And if you're not used to SAS or you've never seen SAS, these are variables. It's a lot like a CSS variable but a little bit different because it gets compiled. And the reason that all of these are here is because in my tokens file, this controls most of my site. And most of the styling of everything that's in my site. And this is sort of like the main feature of what we're going to be. We're gonna be spending some time in here, hopefully just to show you the type of workflow that I like using. And hopefully you understand a little bit of how this works. And then we can jump on over into actually building out some more custom parts of it too and getting this balance and also seeing how Astro comes in and styling comes in and all of that. So the first thing I wanna do is if we jump over in my abstracts, I also have some colors set up here and I have some typography stuff that's set up here. These ones I did ahead of time just because watching me do this is really boring. So you can see I have all these colors set up like this. This is usually just generic colors when I started a new project but I didn't want to put you guys through me going inside of a Figma file where I actually have all these colors here. But basically I just took all the colors that are in my Figma file and I mapped them over to these custom or these SAS variables. The next step after setting them up as SAS variables is I actually put them into a map. You could skip that step, honestly. You could just have your map if you want to but I get this big map of colors here. And then I also have them set up as custom properties as well but through the variables. And sort of why we go through all the steps and how to set all of this up obviously is included in the course to talk a little bit about that. The reason that I bother doing all of this and setting it all up in the map is because then if I go back to my utilities and I go to my colors, you can see I have each loop. And this is some sort of advanced or intermediate SAS that loops through all of those colors and it generates utility classes. So just to give you an idea of I guess how that can work because we're sort of jumping into the deep end with everything I'm looking at here is here's my blank page. And let's just say I came in here and I'll talk a little bit about this slot in a second but let's just come in here and do an H1 and say hello world to start with. So you can see it's right there. And now I can just come here and let's do my color is going to be so we'll do a class is going to be equal to text brand primary, let's close this, brand primary 400. And that might not be one of my colors. Oh wait, I used to use text now I use color. No, good start to the live stream here on showing how this works. Oh, I know what I forgot to do. I forgot to bring in my SAS. We don't have my styles coming in. I wanted to include this because with Astro it is important. It's a little bit different how you set up your or bring in CSS compared to if you're writing regular HTML and CSS. I forgot that step. So here at the top, all I'm gonna do is say let's just come here. Actually I don't need this. We can just come here and say import, import. And it's going to be my SAS and then my main dot SAS. And that should forward check mark list. See it's working now at least. It's because as I said, I was playing with something ahead of time. Let's just find that's in my index, which one components index. Sorry about this guys. The joy of doing things live when you can't edit them index. We'll talk more about what that is in a second. Ha, there we go. So these things are actually working. My style sheets are actually coming through. So here let's say font size, or I'll just do heading one because that's an existing style that I always start with. So here let's just change this to accent so we can see that the color actually changes. I can bring this over to 400 so it's much brighter. So when I start a new project and actually just to show you that this is all being generated from those colors. So let's just jump over back to there. My brand primary is this one. Let's just change this to red for fun and hit save. Whoops, that wasn't, this is my, oh yeah, that's that one. I just wanna make sure, let's come here. That's looking at my, oh, that's my accent, accent 400. Let's change that one red and it changes over to red. So all of these are getting mapped over to utility classes and I can use those either for setting up my colors or it's also my background colors. So let's come in on this H or on the body, I guess, we could do a class is equal to, and I'm gonna say, what are we gonna say? BG brand accent 700 because I know that's one of my colors and that color comes in. So it's just all these preexisting utility classes that I have that are put in place. It definitely takes a little bit of time to go through and set all of those colors up in your color map. It'll take maybe five minutes at the most. And then you have all your colors. I do the same thing in my typography. I come, I set my fonts up. I set the font sizes up. I have a media query that automatically just applies these. So if I came, let's come back here and put a paragraph in. So then I can say class is equal to font size, not font weight, font size 700. And I guess we need some text in there. Lorem doesn't wanna work, there we go. And that's going to be font size, let's do 800. There we go. You can see that the nice big font size has come in there, even though it's a bit hard to read right now. So just a really quick overview that I have this starting file that's generating all of these different things for me based on basically one file that's sort of my controlling of everything type of file. The next step I do after setting up all of those abstracts, so I set up my colors and I set up my typography. Those are basically the only things I ever change from one project to a next. You might have a little bit more custom stuff, but like those are really the two big ones. I have a few break points set up as well. So the break points I use that you could modify if you need to. But it's really fast. I just run through, make those changes based on the Figma file or the design files I have, or if I don't have anything to start with, I just come up with whatever I need. And then basically I can start working where a lot of it then actually, sorry, I can't start working right away. Then a lot of it is coming through here and setting up this where I'm setting up like my body font family. I'm setting up my font, my heading font family. I'm setting up some colors, my container sizes are set up here, some more header stuff. And we'll sort of jump in here a little bit just so you can see some changes that happen. Cause this is where if you're theming something cause it's easy to set up themes. If you're toggling stuff, if you're making changes to an existing site, this file, once your site is set up, this file sort of like the holy, the controlling of everything. And you just come in here and you can make any changes you need here. And it should fall through the rest of the site based on everything that sort of I start with at the beginning of a project. Cause again, I'm not doing all of this. I'm not building all of this every time. I have this as a starting point. And then I just build on top of this, I'm just coming in and making the modifications I need to it. And it allows me to start much faster is sort of the idea here. So I think what we're gonna do, let's ignore the slot for now and we'll come back to what this slot does because there are some advantages to using Astro but just to give you like a really quick idea and then we'll sort of step the game up a little bit from there is, oh, we're just getting prettier, running very slowly in the background for me. But if we come in, there we go, everything updated. And what I wanted, or you know what? I was, okay, yeah, we're gonna build it out and then we'll take advantage of that slot. We'll build some components out. So the thing that we wanna do, sorry, I'm just checking things on the chat. But if we come in here and I'm gonna come in with my, we'll just do my header. And on my header or let's come in with the standard that you might have here. So you have your header, then here I'm gonna have an image that's gonna, do I do it? Yeah, we'll just do it like this. So I have my logo, I think in my images, logo.svg, let's find out there, good. And then after that, you might have a nav, ulli times four. Whoops, let's come in with links on those. So here it'd be home. I should have my design up so I can see what I'm trying to do. But I think it's about, doesn't really matter too much for now pricing and contact, let's say. And you know, we have to do that and then we have to style all of that up. Again, I'm not starting, I don't wanna have to do this because it's always super repetitious having to do all this every time. And if you find yourself repeating stuff, all the time and like, okay, now I have to style the snap. And it's almost exactly the same every way. Create a starting template for yourself. Put it on GitHub, you know, you just save it as a starting template that has all of these things that you're always repeating your buttons, all these different things. Make something that just lets you start from that and work a lot faster. And you save yourself a lot of time. So in this case, actually, let's, I'll bring my design up on the bottom here just so we can see a little bit of what I'm trying to do. Where we want something that's gonna look like this. Give me one second to get this sort of positioned a little bit better. We'll just do it like that. So we can sort of see this navigation floating down there at the bottom. And I'm gonna move my head down here because my head will overlap what we're doing a little bit. So in here, we want a container, right? Makes sense if everything's inside a container. And as we sort of saw earlier, I already have one set up. So let's just move all of that inside my container. And you can see that's already moved over because I already have a container set up because I have to make one of those every project anyway. Next, what do we need? Well, in the header, generally, you know, here we have a background color on here. A lot of the time we have a background color or something on your header. So on that, I have my class is someone asking why the title is this. Sorry, I'm getting a little distracted by the chat. I try not to, but I see it moving. So the title is this, we'll get to that later when I start talking more about Astro. It's just dynamic content. So it can change page to page really easily is basically what it is. So here I'm just gonna do a site header and you're gonna see the colors are already coming in. We'll circle back to why that's the right color and everything in a minute and sort of how we can change that. But there's my site header already coming in. Then I always do my container and then here we're gonna do a site header, inner. Inner, like that. And then I can drag all of this and go up inside of that site header, inner. And then I get my two columns that are split across like that. Nice and easy. And that's just because my site header, inner is something I've already configured that I use every single project that sets things up like this. And then I can come down. So that's my div right there on my nav here. I'm gonna give that the class. Yeah, here, class is going to be equal to nav. And then I also use that as my flex group. And that did not work because I forgot the extra s. And there we go. Now we get my, this coming off. And you can see there's already like the effects here coming through and everything's working there. And it's just sort of like comes together really quickly. Now, I sort of, as I said, I cheated a little bit because I had a little bit of this set up at the beginning just because it's the really, really boring parts. But all I did ahead of time was I came in my colors and I set all of these up like we've already looked at. And then I went to that tokens area and just looked at my design and I went to my navigation area and I just set up the colors. So here I have my site header color. So here is, I set the color back referencing. Well, yeah, basically referencing what we see here. So it's my, let's just look here. Color neutral 700 is the color of the text and the background color is the brand primary 100. So just for fun, if I came and change this then you can see that gets darker. And then I can come to my site header color and I can make that a 0000 and it will go to white. And I can come through and I can make updates without having to go and find where these are in any of my other files. Everything is being controlled right here. I can even go into the navigation. I have my navigation gap. So that's the spacing that I have between these. Let's just say I need it to be smaller. I can make that a five. I need that to be bigger, make that a 15. It's probably, no, it's not too big. I thought that might be a bit too big, but there we go, it worked. So like this is really where everything gets controlled. So it's just about plugging in everything I want into here and it just sort of comes together. And this is for these types of components and these types of things that are already in place. Let's just bring this back to what it was. This was the 200, I believe. And oh, this should be, I think it was, I forget what number I had, 700. There we go, perfect. So we can set that back up. Now we might, you know, not everything has like these consistent things that always behave in the same way. And actually this is too dark too. There we go. We might get something like this next section that we have to build. So if I come back down to here, we have this header that's right there. I can come down and say this is my section and we'll call it hero, right? And actually I have two classes that I'm gonna apply here. I like doing hero and I like doing section. My section class just adds the space that I have on the top and the bottom of all of these. So like if we have consistent spacing on the different sections, I just use a section class that sets that. The reason I don't do it on a section itself is because you might run into areas where there is no padding. So I like having that set up with a class. And also the reason I'm doing this is because I'm following sort of Andy Bell's cube methodology for class naming. So, and he uses these separations like this to distinguish if something's like a component versus a utility class. So you sort of makes it a little bit easier when you're looking at something to know, okay, this is a, I have three utilities and a layout class on here, for example. In here we're gonna need a container again, right? Just to hold all of our content. And then I have an even columns because even columns is something you need on every single site you ever make. We're gonna do a div times two. And in this first div, we can do an H1. So that would be welcome to brand boosters. We're gonna go through this pretty fast. So we're not wasting too much time. So we'll just throw a little bit of a lorem in here just to go a little bit quicker. Oops, lorem. And you can see I already have two columns just because I have my even columns. I have one div here and I have that div here. And then let's just come here and add my image. And so this is images and I forget what my file name is. So let's go take a look at that one. So it's in my public, my images. And I know I'm going kind of fast right now. Which one was that? Social, no, video, no. I'm going fast because I can't find what I'm looking for. But we'll sort of slow things down. Oh, group on computer. Let's just make that bigger because I forget exactly group on computer. Oh, that's it, okay. So group on computer.webp. So there we go. That shows up. And you should give this some alt text. Again, we're sort of going a bit fast now so I'm not going to bother. But do always provide alt text for your images. And now, so the next thing in here when I've done that is you can see that one thing is my H1 has no styling on it. It's really tiny. I just realized I'm zoomed out here for some reason. That looks better. My welcome to brand boosters here is my H1. I remove all the styling. Some people don't like this. They like H1 should be in H1, H2 should be in H2. But a lot of the time when we're styling stuff on websites in H, you might have like an H3 that needs to look like an H2 or you might have an H4 that needs to look like an H2 or whatever it is. So I like not having the semantics reflect what it's actually going to look like. So just because then people will use it if an H2 looks a certain way, people will pick it because of what it looks like and not the semantics that it actually does. So I have three heading classes that I always have. So I can do a class is equal to heading one which is always my primary heading and it sets things up nicely. And then I can make changes from here. So obviously there's the span that I need in there because the brand booster should be a different color. So then I can just do a span is a class of color, brand accent 400 and make sure that my brand boosters is inside that span. Maybe I should have a word wrap on for now. So you guys can see a little bit more but you can see it's all coming through. And if I come and compare it to here, you can see that it's coming in. I actually didn't put in the right font. I didn't bring in my Google fonts for this one. So the fonts look slightly different but I'm not gonna stress too much about that. But we can see it's already coming in. It's working. I'm happy with it. We need a couple of buttons down at the bottom. So if I come down after that paragraph, I'm just gonna do a flex group and then in my flex group we can do an A button. Button, A button. Actually, we're gonna talk more about this in a second and so it won't go anywhere and it says join now. And this is one other thing that I do. So there's my join now and actually let's bring in the other one. Whoops, we'll duplicate that. This one says learn more, learn more. So one thing I do also and we'll turn off word wrap for a second. When I use, and this is another thing I got from Cube CSS, which is modifiers. Instead of doing them with classes, I do them with data attributes. So data type is going to be equal to primary because blue is my primary color and it brings the styling onto that. The advantage with doing it this way and it's not so much for buttons where this really shines but there's a lot of times where, you know, first of all, you don't want something to be a primary and accent, which if you're using classes, technically you could apply both and then it becomes just a cascade issue. And the other thing is if ever you do have JavaScript that's toggling things, it's a million times easier to toggle a data type to, you know, you're changing it from one thing to another then if you're, even if this is JavaScript, like, you know, maybe you need something that's changing the state of the button and just having the data type on there and so having to remove an existing class and then add another class, you're just changing the data attribute. It's so much easier to do. So yeah, there that comes together and we'll do one more thing up here where on this div, so this is my even columns, this column here is all within this div. So I can do a class and do equal to flow and then I get the spacing between my elements because another thing I do is take off all the default margins and this allows me just to bring back in the regular flow where you'd normally have that spacing. I don't actually, I have some stuff already set up for this area. So we'll do it really fast because it's very similar to this one just to give you a bit of an idea. So here I do my section with a class of section on it but this whole area has the dark color on it. So I can also do a BG primary 700. And then that's it save and it should show up actually. Ooh, it's not showing up. And here I should put that section, class section. Oh, brand, brand primary. There we go. I named it brand primary. So it comes in like that. And again, we'll go through this and just again see how we can, whoops, how we can make some updates to this along the way. And we'll show one more thing I have set up and then we'll talk more about sort of the astro side of things, scope styling, how all of this can come together. I'll look at some questions and pay a bit more attention to the chat at that point because I know I'm going really fast. I just want to sort of show off right now on how I work once I have things set up and sort of the benefits of why I really like this system. So in here, we need a container again. In this container, once again, I'll use my even columns. And actually, let's just, yeah, we'll look at how even columns works in a minute too. But we set up my even columns. Then on the even columns, once again, that just means I set up a div for every column I need. So I can come in like that. This first one has an H2 with a class of heading two. And in this case, let's just write it about us. I'll come back in a second. Let's just put in some text. Lorem, whatever, we'll just do lorem again. And we'll come in finally with another a.button and this one can get a, but we'll just come at the end here, do my data type is equal to accent. And that one is learn more. So you can see it's come through, but there's some problems. We can't read any of the text that's actually in here right now. And I guess I can go back up here since we're working on the bottom. So to deal with this text, the first thing I would do is here where I gave my BG color. We want to just rely on inheritance as much as possible. So I'm also going to do my color. In this case, it's a neutral 0, 0, 0, which is white. And all of these numbers, I'll talk a little bit about my numbering system as well because I do get questions about that. But these are just numbers that I'm used to using. So I sort of know what they are and I know that's going to be the white one. So that's come in. The only thing is my heading hasn't because the headings have a default color being applied to them when I use my heading class. So the two choices I have is I could avoid using the heading class and I could use the utility classes I have instead. So I could use my font weight 700 for bold and then font size 800 probably, that's hit save. And you can see it is starting to come in. My font weight seems a little busted but again, I didn't bring in the Google font. So it's a little problematic there. But you can see it has come in. It's the right size and it's bigger. But just I find with headings you're, you know, I usually have a lot of styles set on my headings. I'll have a font size set on the heading. I'll have a color. I'll have a font weight, often a text transform to capitalize. Then there's lots of different things that are always being repeated on headings. So I like just using a heading class. So that's why I have my heading too. I hit save. And then when I need it, I just come in then with a color neutral 000 if I need to modify it. And then this overwrites the default color that was set up there because my utility classes, I have them set up so they're always going to win. So there we go. That comes in, it works. We'll come in here also with the class is equal to, in this case, it would be flow once again, just to add that spacing in and then I could bring in an image. I just wanted to show with the even columns the way this does work is it is set up based on a breakpoint. So if we just go into responsive mode here, like the stuff will stack and then it turns into columns at larger screen sizes. And if I take, let's just take this paragraph here and bring it all the way up here to the hero area. So if I bring that up here and I paste it in, it will make a third column. So anything, like right now it's a paragraph, but like anything that I'm bringing in, my image is sort of mucking stuff up a little, but anything I'm bringing in here will just get created as its own column automatically with how I've had this set up. So if you only need two columns, you get two. If you need three columns, you get three and you can just bring in more content. So that's sort of how I've set things up there. And again, we could bring in another image. We could bring in the next parts of this and keep going with it. But again, the nice advantage with everything I have set up here is it allows me to work really fast. Once I've gone through a little bit of the work of actually setting things up in the first place. So it does take a little bit of setup, the stuff I did before we started the live stream, but it really doesn't take that long. It might be like 20 minutes for most projects and then you're off and running and just creating things really quickly. I didn't see all the comments on it, but a lot of people asking about the pipe character. So I'll talk about that. It does nothing other than separate stuff. It's just a visual separator between different types of classes. If you look up Andy Bell's cube CSS or just look up cube CSS, he actually uses, whoops, I have the wrong keyboard bindings. This should work. He uses the square brackets to make like sections in it. So then you know, I won't do it on this one because it's not as clear. I'll do it on another one. Cause I think this one's more, we'll look here. This one's more obvious. The section for me is sort of like, I'm creating, I'm making this a section and adds the padding. Maybe I have a few other things going on. So it's sort of like a layout class and all of these are clearly utility classes. So I just want to make this visual separation between them. CSS doesn't know what it is. So it goes, yeah, I don't know what this is, whatever. If you look at cube CSS, Andy Bell talks about doing it this way and he offers the way I'm doing it as an alternative. I just find it easier to do it the other way. But here I'm saying this section is like a layout class or all utility classes. It's a little bit more clear that these are like, so if you like that way better, you can do it. And if you don't like it at all, you don't have to do it. It's just, again, how I like to work. So that's why I do it. So yeah, that's setting all of that up. Now let's jump over. And as I said, I changed my mind I wasn't going to do this with Astro originally, but we're doing that now. So I'm just trying to decide if I went to look at next, but I think I'm going to stay on track of just jumping, whoops, back into my, what did I do? I lost everything. Oh no, I didn't, okay. I was like, nothing's in my components folder. Oh no, it's this components folder I was looking for. So just to sort of reiterate again, if I came in here and I go to my type, not my typography, if I go to my tokens, like this is where most things are being controlled from. So I can come in here. And actually one thing I didn't do with this top section is I didn't use the larger container, but let's say you have a new project to come in, right? And every project, the container sizes are usually a little bit different. And you often have different container sizes. So what I would do for that is I'm looking here and like this area at the top is wider than this area down here. So I have a container max width, which is my normal one. I have a narrow container for things. Whoops, come on, where's the hand Figma? There we go. For things like this, you always have those areas where you need a container, but it needs to be narrower. So I have a narrow container and then I have a wide container. And I just set these up here and then I can control them. And these are mapped from there. Those all go into my, in this case, it's my utilities and then my container. So I have the max width set there. My narrow has the max width there. My wide one has the max width there. And I have a full bleed too. Sort of just like some settings on this to make it all work. But instead of having to go, okay, I'm going to my container.scss. And now I'm going to this other one to set this other thing up. Now I have to go to this other place to set something else up. I prefer just having to go to tokens. And I know this is where everything's being controlled from and this is where I'm making all my changes from. So if ever, let's just move Figma out of the way for now. And we'll probably have to make this a little bit bigger. But say I wanted to come and I could change my container max width to be 40 RAM and then the containers will adjust and now they're 40 RAM. Or if I needed them to be 70 RAM for a project, I make them 70 and they're all 70. So it's nice and easy to use along the way like that. So that's why I like having this one file that sort of is my controlling of everything. And I definitely go into more nuance on like how I set this up and the decision making that I wanna do for all of this that's in the course. And I see someone mentioning Tailwind. So I'll take this time to like talk about a little bit of why I do things this way rather than just using Tailwind is, and actually what we're gonna do, should we do it on? Okay, no, you know what? We're gonna build out a component now and it's gonna give me a chance to talk about why I don't only use utility classes and why I like this a little bit more than Tailwind because I find it's a nice balance between just full out utility classes for everything, which can be really fast for prototyping. Don't get me wrong. Tailwind is that you wanna put a site together really quickly. It's really nice for that. You can throw a bunch of your classes in there and stuff just comes together and it's a very satisfying feeling. And then obviously you get the other end of the spectrum too, which is like something like Bootstrap where everything, there's all these classes and things that already exist. And it's a little bit like what I'm doing here with my own system, right? Where I'm doing even columns and I'm getting columns. It's just happening because I've already set that up. So part of it is these preexisting layouts that I've already created, but with the utility classes mixed in on top of that, because I find like most things, any extreme one way or the other, you're sort of locked into how that works a little bit and there's some limitations with it. And then when you sort of find that middle ground, which is sort of what I did, I've stolen the best things or my opinion and how I like to work and stolen the best bits of everything I like and created these things that I just use all the time. So I don't have to recreate them every time. So that layout already exists or my navigation already works and all these other things like that. So what we're gonna do is let's go back to my layout and I'll talk a little bit about, or I'm just gonna see if there's any questions coming in actually. Somebody mentioned they didn't know there's different types of classes. This is just my own class, like in our own mind, the different types of classes. So if I come in here and I take a look at this actually, I have like component classes. So things like a card is like a component. It's something that it's a bit more. It's not doing one thing. It's sort of setting up a whole bunch of things. Or if I look at my navigation, the navigation is like a component. It has a lot of different pieces going on and it's sort of controlling some different stuff. So I have all of that there or my site header and there's different stuff going on here. So it's actually site header you could probably say is a layout, but layout I tend to have is like very generic. So I have even columns. I have my offset, well, the offset grid is a bit different, but just general, this is controlling a layout. It shouldn't have any control over anything else. I'm just making a layout and I'm gonna plug content into that layout that's being created through that cluster class. So that's my layout stuff. Utilities are things like a border radius, which I could use on my image. I could do a border radius if I wanted to follow the design better and it does one thing and it does that one thing very well. So there's not actually like different types of classes within CSS itself. It's just our own definitions of what those classes are doing instead. Speed and power saying make a course on animations. There might be something I'm planning, but it's very far in the future. So please don't hold your breath for that. Explosive saying Astro seems similar to SvelteKit. There's definitely a lot of similarities between them. Redacted asking what I think about Webflow. I think Webflow is pretty good for what it does. So for my colors, if I look here in my colors utility, they're actually, I'm using an each loop that is coming from a colors map that I have. So I do all of my colors. I do all of my sizes are in a map and then those sizes get generated into utility classes for me. So the sizes get turned into, if we come and take a look really fast at my spacing, I have my margins for top, bottom, left, right and everything like that. So if you, and I do it with the long names. So like margin block start, margin block and all of that. So it's not quite tailwindy, but all of that, like if I need a quick margin on something or padding on something, I can add it quickly, but I don't come through here and write them all. And this looks like I had to write a little bit here, but it's just every, it's to go through and set like a margin for every one of those sizes that we looked at. So I have a margin top, a margin bottom, a margin left, a margin right, a margin top and bottom and a margin left and right for each one of these sizes. And again, I am then using purge CSS that we'll get rid of all of those. Speed and power is SAS and SCSS the same thing. They're both the same language with different syntaxes. So SAS was invented first, I'm pretty sure SAS started, then some people didn't really like the syntax and they also want to be able to copy and paste from a CSS file in. So SCSS looks more like, if I look at, like all of these are SCSS files. So if I look in here, it looks like CSS just with some like sassy features sprinkled in. If it was regular SAS, it would be like this because regular SAS has no curly braces and no semicolons, but they're both, they're both the same thing at the end of the day. Someone's saying you can make your own tailwind out of this, that's a little bit of what it is. I just don't go to the extreme level because I don't want to control everything through utility classes. That's sort of the idea. SAS variables versus custom properties is a very good question. So SAS variables are actually for my colors. It's the one thing that I don't like with this, but it's really like, it takes me an extra one minute to finish setting up, but I have all of this being mapped to utility classes and then I actually redo that, looking at custom properties. And the reason I do that is because I want to be able to change these custom properties using media queries and so that makes it a lot easier. I do the same thing for my font sizes as well. I also use, if I go to like my flow class, I use custom properties within here. So the main thing with custom properties is they can be updated live in your project, right? So there's advantages to that. So maybe you're changing values with a media query. Maybe there's JavaScript that's adding or changing things. Maybe you have a style attribute on there that you're changing with JavaScript to change the flow spacer, you just need to modify it into place and you're just making this hook that you can really easily hook into to make a change to that value. SAS variables, the difference is they're all compiled. So they turn into regular CSS. They can't be changed after the fact. It's a really big difference and a really important one. I do think like with all my tokens, there's obviously a lot of variables in here. One nice thing with it is if I don't end up using one of these in a project, it doesn't get compiled to anything. So it doesn't end up in the project anywhere. So you can have extra stuff in here that's not actively being used. I don't generally, I try to avoid that, whether it's commenting things out or just not deleting it if I'm not using it. But it's nice to know that things that are here never actually make it to the finished CSS. So that's an important thing to know as well. Dragon Apple, yeah, I don't like designing in, he's asking if I design in Figma first. I like having designs and then coding. I can code in the browser, or I can design in the browser, but it's hard. And I find you can be a lot more creative when you can just drag stuff around and resize things really fast. So a simple design, whatever, or if it's like a silly project, I might do that. But most of the time I will have a design and then just code, because then I can separate those two things completely from one another. And it makes, for me, mentally, I find that a lot easier to do. KD, do I ever use React or React frameworks or? Yeah, React is obviously the popular one. I'm not a huge fan of React. You can use what I'm gonna be the next step of what I'm looking at here. And all of this can be used along with React. If you're someone who likes React. Though I tend, because I get to sort of decide what I'm going to use, I tend to use Astro for most things I'm doing. And I'm using SvelteKit for another project. And I very much enjoy that as well. Ard Braha, so I'd use this basically, what I'm showing you now is how I would start a new project because I can work very quickly. So I have this all set up. I just make my new project based on my template, update this file that we're looking, or update first my colors that, so all of these colors are the ones from the project. I map those over to the names I want to use. I said I'd talk about these, so I'll do that next actually. So I do my colors, my typography. Then I go over to my tokens and I set all my tokens up to match my project. And then I just start coding. And as we saw, it's the process I just went through to build this part of it, it goes super fast. So I really like that because I get to do things that come together really quickly. Now the next thing we're going to look at is making something that's a bit more custom that this stuff doesn't control. Cause that's a big part of it too. And I want to sort of tackle and look at that idea and that side of things in a second. Joel asking if I don't have a design to start with, then I look at other designs to get inspiration from usually. Kevin read, I mean, I'm not going to say your name, right? He's asking where you find this template. So this is the template that you learn how to create in my course beyond CSS, which is out now, the link is just down below. I am doing this live stream a little bit to promote my course. I just just just launched. Oh, and I didn't put the coupon code down below and I forgot to talk about it. There is a coupon that you can use. It's good until next Friday that's Early Bird and you'd get 20% off of the course. And yeah, so Early Bird, I should have put that in the description. I don't know if I can do it now. Can I, let's see. I wanted to do it before I went live and I had so much going on. We're going to add that now. Use code Early Bird or 20% off. If anybody got it without using that coupon send an email to support at kevinpaul.co and let me know and I'll hook you up and we'll get it sorted out because I completely forgot on that and it's completely my fault. If you're watching this live stream in the future it is a limited time coupon, so you can't use it forever. But if you did purchase it within the window that it's opened and you didn't use it you can get back to me and I will give you that coupon. So yeah, this whole thing that I'm looking at now is what I teach in the course. And we start the course off, I'll talk a bit about that and then we'll circle back. The course starts off with learning just different SAS stuff and how SAS works mostly because of how everything here like looking at stuff like this like we need to know how SAS works to be able to do these types of things, right? So to be able to like take advantage of that to be able to generate our utility classes or to come in through and do maps or loops like this one. And there's a few other things that I look at setting up with it as well and just really understanding SAS very well. But more than that even, and that's like the, there's three tiers to the course the base tier is that let's learn how to use SAS but it's more than that. It's not just, you know you can go to the documentation and learn SAS it's about learning how not how each function works but how we can use it in projects take advantage of different things. And in that first tier we do start a template it's not quite as in-depth as this one but we do walk, you do finish with a starting template that you can use for your sites. That's again, not this in-depth but it's good to start your projects from. And one of the reasons some people will probably say the pricing is very high on the course and it's my most advanced course. So the pricing of it is higher than any other one I've done. And there is also parity pricing. If you go to purchase it just look for a banner at the top of the page if you have a VPN installed it will not, or not installed if you have a VPN running the banner won't show up so just make sure you have the VPN off. If you are somewhere where priority pricing would apply. So with that out of the way, the, yeah the first module is all about learning how we can use SAS to speed up your workflow. We look at using VIT, we look at using post CSS to purge the utility classes and other stuff like that that we're not using. So it's full in-depth on that. The next module up is design systems and theming where we do a lot of setting up what we're looking at now. And then the top tier adds using Astro as well as we're gonna use Tina CMS to add a CMS to it. So you can have client ready projects. And so that's the other reason the pricing is quite a bit higher is the way I see it is each one of those is sort of a standalone course but they just sort of build on top of each other. So the second tier, the first year is a prerequisite for the second tier which is a prerequisite for the third tier but each one of them is like a full on in-depth course that sort of takes everything that we've already done and then we've learned something completely new on top of what we've already covered. Yeah, I'm talking way too fast but I'm talking too much but there it is, my little sales pitch right there. Let's see if I can remember everything. My numbering system for my colors I always get questions on this. So in this project, let's go back to the Figma file. When I start and I look at my Figma file or the design assuming I have a design, some people, we were talking about if you don't have a design well then actually the actual starter that I have set up has like, I don't know, it must be at least 50 colors just preset in this part. I just have a massive wall of colors so I can just easily pick from those colors if I'm doing something where I don't have an existing color scheme. So I just have like, I have 10 shades of red, 10 shades of pink, 10 shades of fuchsia, 10 shades of green, 10 shades of bright green of blue, everything. So I can just easily just pick from the shades that are in my starter template. But if I have a project, then I'm going through and I'm just taking all the colors from that project specifically and putting them in. Then I'm figuring out how I'm gonna name them. And that's always the hardest part. But I named them based on 400 being the base value in the same way that font weights were. So if you have a font weight 400, that's your regular. So I sort of like doing that where my neutral 400 is like a neutral, my primary 400 is like, that's this one here. It's sort of this middle ground. My gray neutral is a 400. They don't really work really well if you have white or dark text on them in general because it's really middle of the road. The darker it gets, the higher the number and the lighter it gets, the higher, lower the number. And the reason I use 100, 200, 400, especially on a project like this where it had a limited color scheme, I could easily see the designer coming back and inserting colors that are in between the two values that are here. And I think I'm on my big face in between the two that are right here. So if I'm getting the ones that are in between, if I called this 300 and 400, and then they came back, well then I need to get something that's in between those or even let's just go to a better example. They come in with something in between these two values, the lightest one in this 200. I didn't think they would, they're really similar but maybe that happens. I can come here and I can make it 250. And I can put a new color in that slots in between them. Whereas if I did a one, a two, a three, then I can't get a color that fits in between them. Or you have like, or what do you do? Do you rename all your colors? Then yeah, that's a pain in, you don't want to do that. So, you know, in worst case scenario then I could even do like a 275. And a two, at one point it might be a bit much but it just leaves this room for like squeezing more stuff in, which is always handy. So I do that always with my colors and I do the same thing with my font sizes. So I'll leave a gap here because I might end up having a 500 that ends up being a 1.25. So I put that gap, whoops, we want to come out there. But then I leave myself open to having these spaces that are in there so then I don't stress if ever the designer comes back and tells me, oh, we need another font size in here and all my numbers are too close together and it just makes a nightmare for me. And again, here I have a font size map and that map has two different sections in it. So this is my small, so small screen sizes. This is actually like all the font sizes in my project. And then if at different screen sizes, I need to change those. These get changed here because these are going to the custom properties that are all being controlled. This is, there's a media query automatically set up that would work. I could come in here and add in a medium. Let's do it. So it's really obvious actually medium. Sorry. One second, sorry. No. The puppers gets to make an appearance on the stream. Someone rang my doorbell. I think it's my kid's friend who's looking to play with them, but they're not home. So we come here. Hey, hey. No. So I could come here on a medium and at the medium I could redefine my, let's say my 900 becomes a five rem. Don't know why you do this, but I could do that. And now if we come back, whoops. If we come back to my, oh no, I broke something. What did I break? I need a comma here. My font size at one of this, when it hits the right break point, there we go. It's huge. So here's small, then I get to really big and then it goes to the small. So we're going from there to here to here. Not a realistic example. But something, you know, how I set them up. And the medium here is based on my break points map, which is here where I have some sizes already set up. So just how we can quickly do things like that as well. More dogless CSS, yeah. Hey, hey. I brought her in my office too, because if she was outside the office, she'd be barking even more, but I'm glad, I'm glad that Ruby, she doesn't listen to me. The problem is I have my office door closed too, and it's getting really hot in here. So if I start sweating, I do apologize. Okay, next we wanted to look at the Astro stuff and sort of that side of things. And this isn't, in the course, what I'm going to be teaching, this as I said is part of the top module, is this is the first part of it. We're also going to be looking at setting things up with Tina CMS, which is a CMS that I've been playing around with and I really like. And so I decided to use them. There's lots of other headless CMSs that you could definitely use in its place. But I liked Tina, because it has markdown support out of the box, which I haven't seen in a lot of them. They always have visual editors, and then you have to wrangle in a markdown support for it. And Tina was really straightforward to do. It's a Git-based CMS and works really well. But everything we're covering, like if I'm using Astro, you could do this with SvelteKit. You could do it with React if you wanted to and use CSS modules in a similar way. There's probably a couple of small differences, but the idea behind it and the concepts behind it are very similar. And that's even the idea of the setup I'm trying to teach here isn't to show people how they should work. The last thing I want from this course is people just use this exactly how I use it. I want to give the whole purpose of this course is to give you the tools to understand how they work. So you make this your own and you adapt it to these circumstances you need. And you have a good enough understanding of SAS to do crazier things. And you have a good enough understanding of all the, every tool we're looking at along the way to be able to customize it to fit your needs. So if you want to just generate utility classes, you can. If you don't want any utility classes, you could easily adapt it so you don't have any, right? And find sort of everything in between. So with Astro, we had some questions about that. So let's go to my index first, which is here. And actually that's that. And then we also have, this is basically a blank Astro. It's the layout. So I've been working in layout now, which I shouldn't really have been doing. Layout is where you set up the main layout that you're going to be using. And actually one of the reasons I chose Astro is because some people know React. Some people like spelt. Some people don't know any of those things. They've only used HTML, CSS and JavaScript. And Astro for me is really easy to get started with. And I have a video, you can find it, just Kevin Powell Astro, it should pop up where I just look at how easy it is, in my opinion. If you want to dive into it a little bit. But the nice thing with Astro, so here what I'm going to do is I'm going to grab, but actually let's start. Yeah, let's grab everything. I'm going to take everything here that we've created and I'm going to take it out and I'm going to put the slot back. So what slot is means we're going to insert content here. So you know on every page, you have to remember to put all this stuff and that's annoying. You have like a link to your Google fonts and you're putting that on every page. And then you're doing something else and you're putting it on every page. And that gets really annoying over time. So what I would do is I have a layout and you can have more than one, but we have just like one main layout that we're using that just has all of this with my body and then we throw a slot here. Then what I can do is on my index. So it's index.astro, but basically it's my index.html. I'm going to have a layout and you can see it says title, welcome to Astro. Let's change this. Let's make it my project and hit save. Actually you can't see my, let's move that down. Now you can see it says my project. If I do an undo, hit save. Now it's welcome to Astro. So the reason that's happening is that person who was asking before about why we had the title here looking like that is because this gets generated for every page. And out of the box Astro is a static site generator. So it is just making HTML, CSS and JavaScript files, but you can do a lot more with it. They have like partial hydration and everything. It's gotten very, very powerful. But this is like basic templating. It's super, super nice for static site generation. So then what I can do is here, I could paste in all that content that I copied before and it's all going to come in. But if you look at this page, all I have is layout. Layout and I'm importing the layout from where it is in my project. So the reason that's working is because here it's all getting inserted into the slot right here. So that's really nice. Right out of the box, that's wonderful. But we can take that up a step further. Let's come over here and you know, we don't want to repeat a header on every page you're creating. This is the same on every single page you ever have. So I'm going to cut that and let's open up here and in my sources folder, not inside my SAS, but I just have this like components that's floating around here. In there, I'm going to make a new one called header.astro. And so with header.astro right here, I'm going to paste in my header and hit save. Then I can let's do the same thing for my footer. So let's make a footer.astro. And the reason that I'm putting them as capital is it's just a naming convention to say that these are components. If you're coming from React or anything else, this is going to look very, very familiar. So then let's go find that footer that we created. Did I not, oh, I never did a footer. You know what, I'm going to grab the footer from the original project just so we have a footer. One second, I have it off screen here. Footer, copy that. That's like, why, where's my footer? We'll paste in this footer that's right here. And I'm going to hit save on that one. And then what we can do, let's get rid of that. If I go back to, so this actually have two choices. Is this header and footer on every single page that's part of your main layout, then you can just include it right here. So we're going to say that here is my header. Over here is going to be my footer like that. They're self-closing because I'm not adding any content to these. So when I hit save, also if you're are going to use Astro, get the Astro extension. It's wonderful. Usually with the Astro extension actually, when I do this, it's automatically going to import them. I'm not sure what I did. It stopped working for me. I'm also in a different profile now for VS Code. So it could have something to do with that. But a lot of the time you'll write the component here and it will automatically add the import. But basically all I have to do is import header. Oops, not like that. Is it import header? Oops, I'm going to make a mistake right now. Yeah, it is just header like that. Header from and then we just go to where it is. So in this case, it's my layouts folder. So layouts and then header.astro. And then we can do import footer from layouts. And I only have, oh, whoops, not layouts. Components, components. And components would be my footer.astro. There we go, that makes more sense. And now it's all come in. So actually you can see now at the bottom of the page I do have the footer that's come in. Now I think I didn't save something because we have two headers. There we go, I think, yeah, now we have one. So I have my layout here. And then the layout is just the layout of my index page. We have a header component I can reuse, a footer component I can reuse. And then every time I use this layout, I'm always going to have this header and this footer that are always there. So let's just go really fast here. And in my pages, I have an index.astro. Let's make a new file, which is going to be pricing.astro. So in here, let's just start off with a layout. And see here, this is what I talked about, the autocomplete. So layout, it's saying, is this the one you want? I can choose it and it automatically imports it for me at the top. So super easy. So I can say layout. And then in this layout, we're going to give it a title. Title is going to be equal to pricing. And then here, let's just put pricing. So we have something. And we can go and look at pricing. And you can see the headers already there, the footers there, and there's that content right there. So now let's just come here really fast and let's just do, actually, let's go look at our pricing page. We're not going to do the whole thing, but we can do, we'll build this area at the top. I think that'd be a fun thing to do. And this is the part I didn't plan at all. So if things go off the rails, I do apologize. So there we have an H1, which will get my heading one. That will actually see, already making mistakes, that'll be in a container. So the H1 will be my flexible plans. Hit save, it's there. And it should also be a text center. Whoops, there we go. Awesome. So there's the container. The next thing I want in there is we're going to do a div of even columns. We'll get their spacing and everything fixed up in a second. But we can get my div of even columns. And just, I'm going to check the chat in a second, just because I know I'm going a little bit fast, or even for now, let's just say div of A and a B and a C just so we have three columns and we can see my A, my B and my C there. Now with this, just to circle back to setting up the header and the footer here, the handy thing with it all is now, if we go back to my header, and we had the navigation set up here. And so this could be my, it's just going to go to my index and my pricing can go over to my pricing. And for fun, let's add in another link here. We'll just call it new link and I'll put my head down at the bottom. So if I hit save, the new link has come in there. If I go over to home, it's actually going to go to my homepage and you can see the new link is already there on the homepage, because I've added it here. So we only have to make that one update to here. Again, people that are used to JavaScript frameworks, this is nothing new, but if you're just coming from HTML and CSS, this is really nice. And then I can go to my pricing and it works. So one update to here, it updates everywhere. The same with the footer. So Revy, I am using the system I'm showing now is what I teach people how to build in my course that just launched, the link just down below. And so these are all preexisting classes that I already have that I use on my things. So that's why it's already working. Hunter, the final module will look at making a client-ready site using Astro but also attaching it to, or also using it with a headless CMS. So that will look at having everything online and functionally out. Oh, yeah, I didn't explain that part too much. I was just throwing stuff up here. The three backticks here, these are called frontmatter. A lot of templating languages will use this where it's sort of like extra stuff before you get to like the content in a way. It's like metadata for this individual file. And you can do lots of crazy stuff within the frontmatter at the top. Sorry, I'm being quiet just because I'm quickly going off the, I'm just quickly looking through the chat. I don't see too much though. So I will keep going. I'll just go back over. I see a few people asking what Astro files are. So let's just go to astro.build. So this is Astro. It's a framework to build websites. And at its core, it's a static site generator that's just really easy to use. I'm also a very big fan of Eleventy. Eleventy is a fantastic static site generator. I just feel like the learning curve to get started with Astro is a little bit simpler because the templating language they use feels like native HTML that you're already used to with like these little extra things. So I'm making a layout and then importing it, but it just feels much easier in my opinion to get started with because with Eleventy and other static site generators, I mean, you could go to like, I remember the one there's one that runs on like Hugo that runs on something else, whatever. With Eleventy, like you're learning how Eleventy works and then you're also learning one of their supported templating languages. It's not the end of the world, but you do have two things going on at once. Whereas with Astro, I just find it a bit easier. And now Astro seems to be really just taking off and going all out. So you can bring in react components, felt components of you, angular components and use them within it. If it's able to, it's just gonna ship that as static CSS. So it won't even bring react in, but you have that option of having reactive components as well. So they have like partial hydration going on. It's really, really cool. And I like that you can start simple with it and sort of slowly level up with it. So that's a very quick rundown on Astro, but definitely look into it if you haven't seen it. How do I include, oh, so just inside, how do we include a partial? We're gonna do that now. So what I wanna do is these pricing things down at the bottom here. So we'll look at, this is why I wanna look at one nice thing with Astro and one thing people really like with when they're writing CSS is they like having scoped styles. So how I usually would use this system would be every component with my SAS here. Every component would get a component within just a regular SCSS file. So I'd have my navigation, my hero. So I'd make that in, you know, I'd just write my HTML for it and then I'd make a component for the styling of it. But once you get to scope styling, you can take a different approach and I wouldn't mix the two. Like right now I'm going to have a mix just because I started with my old version because I wanted to work with out Astro at the beginning and now we're sort of bringing it in. If I was working just all out from Astro at the beginning, I wouldn't wanna mix these two different things up just because then it's a little bit confusing where do I find what? But what I would start with is I would start with everything else I have here. I would start with the layouts. I would start with my abstracts. I would start with my utilities. If I had any vendor stuff I was bringing in, I would have my vendor things coming in. The reason I would do that is because it just lets me use those out of the gate. So if I need a container, it's there. I don't need like a container component. You could make a container component, but that just, I don't see the point. For, if it's a div class container versus a component, I don't get it. But if you do you, if that's the way you like to work, there's nothing wrong with it either. But we're, you know, let's say we get to these pricing cards now. So what I would do is let's come, we'll make a, whoops, wrong shortcut. In here, whoops, in my public, I keep clicking on the wrong things. In my source folder, in my components, we have a header, a footer. Let's come in and make a new file. And let's say it's going to be my pricing tier.astro. So I want to make one of these. Cool. So what we're going to do here, let's just start off. And I guess I never know what these, if you can make these in article, but we'll just go with a div. So I'm going to start with a div right there. And I'm going to go with the stuff I can do that are, like a few of these things are utility classy to me that are already part of the system I've done. So the background on here, I can do bg brand primary primary 100 and some padding of, let's just try a padding six. And we'll see, I'm just really basically, I could nail down and get the actual sizing, but let's do a padding six on there. Cool. So now there's a few different things in here. We'll sort of make this into more of a component as we go through. Let's make one of these, and then we'll make it into more of a reusable component that's actually a bit more practical. So here at the top, I'm going to do this as an H2. The reason I'm doing it as an H2 is because it's come like flexible plans as my H1, then my plan is basic. So it doesn't look like a heading. It looks like a small little piece of text, but really that is like this section, the title of this section is basic. So that's my H2. So we'll do an H2 with basic on there. Then actually, I'm going to make a small group here. Let's do a div with a class of text center. And the reason I'm doing that is just because this top little section here, and this is where if this was an article, instead of a div, I would probably make this the header because we have the title, we have sort of this information and then we get like the body of it there. So if anybody has any opinions on if I can make these articles, let me know. Maybe they could each be a section, but I think it's either a div or it's an article. They're sort of standalone, but they don't really make sense out of context. So I think a div is fine. So next we could do the price. So I can just do AP, let's make it big. So class is going to be equal to font size, probably 700 and the font weight of bold, which might not work again because I'm having problems with the fonts that I brought in. And that's for now 199 per month. And the per month needs to be small. So that could be in a span. Whoops. Let's just go on a new line for that then span and bring the month in there. And again, these classes are just the utility classes I'm already generating. So a font size of 400 and a font weight of regular would probably work. I can't bring, I'm not bringing this in yet. So I'm doing this a little bit blind, but hopefully it's working okay. We can make some changes to it if we need to after. And then here, let's do AP, that's ideal for startups. Then I need this list that's here. So for now, we'll do an unordered list with LI times four. And let's just do lorem three so we can go a little faster. And so we have this component. We have a pricing tier that's been created, not dynamic. We're gonna make the content in here a little bit more dynamic, but at least it's working or at least it's there. So let's go back to my pricing.astro. And in this first column, let's come in and do my pricing. It's not coming in now pricing tier and we're gonna hit save. It's gonna break everything. So let's just import that. So this is my pricing tier from components and pricing tier. And there you go. You can see it has come in. I think, oh, I know what I made a mistake on. So let's go and fix that a little bit. While we're here, this should have gone down here. So it's not in that text center one. So I get that there, then I have this underneath and of course there's that button. So we can do a button dot button and that would be a data type equals accent, I think it was. Where's the primary? What color was it? It was primary. Primary and it says get started. Okay, so we have the content that's here. It needs fixing up. We need to style it some more, but at least it's coming in. So I think the first thing we're gonna do is because obviously we don't need me. Let's close these that we don't need. Obviously if I do this and then I bring this here and then I bring this here, this is kind of pointless. We have the same one three times. I want everything though. I want all that styling. I want all of those things to stay like that. So what we can do is let's come back here and let's make some content that can be updated in here. So basic should actually be my tier, right? Cause that's gonna be my basic, my premium, my complete or whatever it's going to be. I also, I'm already on the bottom, good. I was worried my face was covering some stuff there. This one's easy. That's my price. And then ideal for, and all of these, we look at the design. All of them are like ideal for growing business, ideal for startups, ideal for companies. So then what we can do is here we can say ideal for and then put ideal for, or I don't know, naming is hard, so I'm gonna put that there. Then come up to the top, we add that front matter with the three back ticks or three hyphens and three hyphens here. And this is the front matter where we can bring in extra information for it. So I'm gonna say const and we have our tier, our price and our ideal for and all of those are going to come from something called astro.props. And that looks a little weird. You might be like, what the heck is astro.props? If you've never used this, so basically we're saying we're gonna get this anytime we're using that component. So anytime you see astro.props, just go, I have to define those different things when I define it. And you can actually give these default values too, like I can do tiers equal to basic, and then they'll all get the basic at the top because that's a default value, but we don't need to, so we can leave it like that. So now if I come back to my pricing, I can say this first pricing tier is the tier is going to be equal to basic. You might as well do all my tiers to start with. So let's just pick up my formatting here slightly. There we go. So we'll just call this one premium, and we'll call this one extra awesome, whatever. So you can see basic premium extra awesome have come in. Got us, if I'm writing awesome, I might as well spell it properly. The next one, so we had, that was the tier. The next thing we had was the price. So price is going to be equal to 199. This one, the price is going to be equal to, I think it was 399, and then on this last one, the price was equal to 999. So I can do that, and then the pricing comes in. Now I realized I made a mistake on my font size here, so I think the font size should have been 800, and it works. I also don't want a space here, so I can remove all of that and take that space out. Pro gaming saying that they can't watch because of weather issues. If ever you want to rewatch this, the live stream will always be available. The replay, I should say, will always be available. All right, so again, it doesn't look perfect, but we're in the right track. We have these coming in, at least we have these sort of dynamic, you know, you can see how it's becoming a little bit more dynamic. We don't have to rewrite everything. It's nice here that we can come in and we can just make changes to it really easily. And then of course this content, I actually want that to be easy to update, right? So there, instead of this, I'm gonna copy that one out and I'm gonna put a slot here. And as we saw before, slot means I can insert content in when I use that component. So if I go back to my pricing, I have my pricing tier, which is self-closing now, because we didn't have, so we just need to make sure it's not self-closing anymore. And then here I could paste in that UL and it's gonna come on that one. And then I could do the same thing here. Let's just close that. And then here, let's paste in the same one, but we'll just add, we'll duplicate a couple of lines just to make it a bit longer. And then we'll do the same thing on this one, just so we have, just the content itself isn't the most important thing right now. So we can paste that in and add even extra lines. And now we get all of that coming through, really nice and easily. And you could like take this the next step further if you wanted and actually make this a component. I don't think you really need to in this case. Sometimes people get a little bit too, they go over the top a little bit with their components like this, but now you can see that the pricing tiers are working on all of them. So that's awesome. They're there, if I need to make a change, I could come here and I make one change to this and it's gonna impact all three of them. So anyone who's just coming from HTML is probably excited by this. Anyone who's used to JS frameworks, it probably doesn't look too exciting, but at least it's working. And now we can get to the scope styling a little bit and we'll start with regular scope styling. And then we'll talk a bit more about how we can use the SAS stuff that I've been using so far. So yeah, what we'll do here is one of the issues is the way I've, well, we need them to stretch, maybe we'll do that after, but let's just say, we'll target my lists actually here. Or we can't do that here. We can target the list on the pricing page. So what's something here we might wanna target. I actually don't see anything. I'm gonna sort of set, if I look at the design a little bit, we just have more spacing on the top and bottom here and my buttons need to stretch. Actually for the, no, I'm not even gonna do, okay, yeah, let's do a scope styling style. And then I'm just gonna say that the div, should I give that a class? Cause we have a div here too. I don't know if I need to, cause I only wanna select this one. Let's make that a section just to make life easier. So I can take this section here and let's just for now, let's say that the background of that section, whoops, section has a background that is red. And I'm even gonna throw an important on here just to show you that these obviously become red. But if we go back to the homepage, it doesn't affect the sections we had over here. This style is scoped to these cards or to whatever we see here. Anything we see in this HTML, this style can, this section will apply to anything else it won't. And that's just anything that anyone knows scope styling, all it's doing is behind the scenes it throws these like, see here, where is it section? And then we get this astro, blah, blah, blah. It's this generated class. So if I find it in there, it's section where, and it gives it this like crazy class name and then the red is on that. So it's only ever going to apply to anything that we see here. So it's scoped to this pricing, anything that's inside this pricing tier and it won't bleed out. There are ways of making it actually go further and you can make it a global style if you want to, but we're not going to do that. So what I'm going to do here is actually to say section is a display of grid. And the reason I want to do that is because that gets my button stretching out. And it's just a really nice like quick, easy way to do that. So that worked out well. And then, yeah, okay. So we'll go back to my pricing here. This is where like you're like, oh maybe for the spacing and stuff, there are ways that we can add it on different things. But here, let's go to this pricing and like this could be another example where you might want to do this because we need to style these ULs anyway. So let's add a style here and we're going to say UL. And this would be normally like, if you were doing this outside of scope styling, you'd have like a class of, I don't know, check mark list or something like that on here because what we want to do is we want to bring these check marks in place of the bullet points. So you'd need that. And that would be the class that you would select because I have this pricing component that I'm working on and I know I can just target my UL and it's only going to affect the ULs that are on this page and it won't are in this component I should say and it won't affect anything else anywhere else. So that's nice and handy. So on that, I want to use some of my, my the SAS stuff that I've created. I want to use things. And this is the question that came up. How can I use my, you know, the SAS things that I was using before, how can I use them in the scope style here? It's actually really easy to do. So here, you know, not the main, but I want to use some of the, the abstract stuff, the variables I've created here. So what I would do here is I just have to say that the lang is equal to SCSS. And if you've used Svelte, this will feel very familiar to you because that's basically, I think the exact same way you would do it. So on this UL now, I can say that I need to have a margin block at the top and bottom. And now I can say that it's a size six. And that broke. Oh, because we're using SAS exactly like you would use SAS at use. And then I have to find my, do, do, do SAS. How come this isn't auto completing for me? SAS abstracts, I think abstracts as star fixed it. Okay. So let's just make this an eight maybe. And you can see it's increasing the space that we have on the top and the bottom there. So I'm going into that abstracts and I'm able to get into those, the different things I have here to be able to use them. The only other important thing is when I started the project, I did do an MPM install SAS. So if we look in my package.json, you will see SAS is here. If you don't have that, it won't work. But once you've installed SAS, it just works out of the box. You have nothing else that you need to do. So I have that coming in that adds that spacing. The next thing I wanna do is we wanna, we wanna get things looking a little bit more, more sassy, right? Sorry, let's just check the chat really fast. So really fast CW asking that there's so many different combinations of text acts. Should you learn every single one before applying for jobs? No, cause then you'll never apply for a job. If you learn how to use one, there's so many similarities between them. You should be able to adapt and do and use, you know, figure out another one. Just, you know, learn how some stuff works and then apply for jobs. Matthew is basic knowledge of CSS and HTML enough or would you suggest a starter course? This is definitely my most advanced course that I have. So if you're thinking about it and depending where you are in your journey, if you're beginner or intermediate, like if you're still learning how to use CSS, I wouldn't necessarily recommend it. What I would recommend is I have CSS demystified that would probably be the right one. Even just the base tier there would definitely, I think is a really nice place. If you're someone who's writing CSS, but you're like, I'm not super confident with it. I'm running into problems with it still. I'm not super confident with like when I should use what I run into problems that I'm not really sure what they're being caused by. That for me is why I have CSS demystified. This is really my advanced course where you feel you're already confident when you're writing CSS. Cause I don't focus so much on like why am I, I mean I try and do as much as I can about my thought process as I go through it. But it's a lot less about how, you know, what's margin block. I talk about it. We even look at how we can make this be safe to use in browsers where it's not supported. But like, yeah, it's more about you're comfortable with CSS, you're comfortable enough that if I talk about something that maybe you haven't seen before, you'd be able to figure it out easily enough. And then, cause it's more about the tooling getting set up and being able to work more efficiently. And like the architecture of your CSS getting, taking those next steps once you're comfortable with CSS. That's really what this is, what this is for. So there we go. We have my margin block on there. It's using my SAS variable. The next thing is that we want to make those checkmarks and I do have those checkmarks in here. Let's just actually, I wanna do that. I'm also gonna change the margin inline start to be maybe a size six. Cause I just wanna push them over a little bit more. There we go, that looks better. So that's on the UL. So yeah, we want those to be checkmarks. So because I am using SAS, I can just come in here and nest it and say that my marker. And so if you don't know marker, we could say color is red and it will change it to red, except it's not working. I don't need that, do we? Why is my marker not working? I know it's on, somebody could tell me why marker is not working. I would appreciate it. Am I thinking of the wrong thing? What am I thinking of if that's not working? Why is marker not working? That should be my bullet points. Li, yeah. I shouldn't have to make that global. Ah, that's why. That's interesting. Okay, we'll stick with that then. Curious why that wasn't working. You shouldn't need the ally cause the marker is nested inside there, isn't it? Anyway, whatever. You can change the color of them but you can also change the content of them. So I do have these checkmarks in my images. So if I go to public, I go to images, I have a checkmark.svg. So what I can do here is instead of color, we can use the content property like a pseudo element and you do a URL. And we're going to look at two different options here or the first one is if you already have it set up properly, which I don't know cause it's going to be black, but I can come in here and we can do, so that's my images and then it is my checkmark.svg. Except that's how you want to do that. It's not a string. Ha, there we go. We have checkmarks. So on there, the ally, or you know what we're going to do, we will do some nesting here cause my ally needs a padding left, which will be say a size four, size four for me is one REM. And then here we will do a and marker and wrap that so we have that nested in there. There we go. So they're coming in. So this size four again is just the variable I have for my sizing variables that I can use. Now the problem is this is an external SVG. So I can't control the color through fill or anything else like that. So one way we can do this, and this gets a little bit more advanced, but we can do a URL encode SVG. I'll put that in the chat so people can check it out. And if you have something like that, let's just open up my checkmark. You can copy an SVG in here and it gives you a background ready one. I don't want a background ready, but I do want the URL here. So I'm going to grab all of that, copy it, and then we can go back to here where I had that content and paste it in right here. Oh, whoops, it was my whole URL, right? I have it twice now. It is a very long string when you do this. So just a word of warning. And it looks exactly the same as it did before. Oh, it's not too long actually for this one, but I can now control the fill. So I can actually change the fill here to red. Now there were some questions about differences between custom properties and variables, SAS variables. So SAS variables are compiled. So if I see size four here, it's not a live variable in the finished code. If I look in the code, I will see like a set value there to be, in this case, one REM. If a custom property stays live in the browser, that has very big advantages. Like, you know, you can change it with JavaScript. It's very easy to change what it is in different situations. You can redefine them in different ways than you can with SAS variables. But let's say it came here and I said fill is red. And I've never done it with this, but I don't think it's gonna work. If it does, then it does. But I've done it with background images and it doesn't. So fill, yeah, it's actually broken. And this is the most frustrating thing in the world because if I come and take a look at this, it will show me the fill is red. And if I find the SVG on the marker, it's going to look like it's working. I see the red, I see the fill. You're convinced that it should work. The problem is this SVG, because it's looking at a URL, it's still an external SVG. So being an external SVG, it does not have, even though it's in my CSS file, so it feels really weird, it does not have access to the root of this document. Right, it does not see the custom properties that are defined even though it's defined right here. Whereas, if I made this a fill, whoops, with a dollar sign. So this is a, why can I not hit the right key? There we go. That was embarrassing. If you're doing it like this, this is a SAS variable, it gets compiled. Meaning the code here, it will not keep the fill, it will actually change it to be red in the finished code. So here, I can take this out and I can bring in my SAS variable, fill, and it will show up. And if I go and I look in the DevTools now, you can actually see in here that the, if we find it, that's the marker. There it is. And the fill, you can see right there, it actually says red in it. So we're getting, the real red is coming through. So that means I can actually, you know, bring in colors here. So if I read, you know, green, it comes in as green or whatever it is. The important thing is here, you cannot bring this in as a custom property. And you can't even define it as a custom property here. A custom property will not work if you're using SVGs in this way. And if anybody knows a way to do it in the chat, please let me know. But as far as I know, this is one of the limitations of SVGs. Yeah, let's see. Is there anything? I don't see too many questions coming in. So what I'm going to do now, so yeah, that's sort of, we're going to take a look a little bit at the course platform now. Cause I think this gives you a bit of an idea of sort of what we're working up to achieve and what we're working up to get to is we're really the beginning, or we'll look at that now, but this is sort of, we're not quite at the end. Cause again, we want to hook this up with a CMS eventually. So if you had a blog or something like that and you want to deliver that to a client, you'd have everything in place for that. But we sort of go through the different stages of all of that. So let me just get, I'm going to log in off-screen and get started and I was in a rush. So I was a little bit behind. So if anybody has any questions, while I'm doing this, start leaving them cause I'm going to start paying a much more attention to what's happening in the chat as well. Or actually what I should be, I'm going to the wrong place now. I think I have one small problem. Oh no, I don't, okay. I know what we're going to do. This might take a second. But it shouldn't take too long. So again, if there's any questions coming in the chat, please, please. I think that one, nope. The fun of live streams when I didn't have everything I needed ready. That's not the right one. This is probably the right one. It is. There we go, finally. That should work. Awesome, I'm in now. Okay. So yeah, I wanted to show a little bit of what the course platform is and what's included in it. So I did use a different course platform this time around when I made this course. And one of the reasons was because I wanted to do things a little bit differently. So when you come in, you sort of get access. The main portal when you do come into it, sort of like this general hub. But some of the things that I wanted to do or a little bit differently was, let's just at the very beginning, and we'll talk a little bit about the content, but I did want to make it as interactive as possible. So you'll see there's lots of text, there's lots of writing, there's many challenges that are coming in. There are videos as well and the early lessons is a little bit less. I'm trying to find a video that has, there we go, there's videos that are sprinkled in throughout. And so what I tried to do as much as possible with the course this time around is a make it interactive, make it easy for you to keep going through it, making progress through it. And I know like, especially in the, like this is the really early stuff. So this is very early on. And actually I will be doing a full section on CSS nesting versus, this is SAS nesting versus CSS nesting. I'll also be adding a section comparing it to regular CSS nesting, though I haven't done that yet. But just as like an example here, I can come in and update the indentation that I have here and hit compile. And I made a mistake in that because I was using tabs, but you can see, all right, let's go over to this version of it. Reload, there we go. So like I can take this off and do that and compile that. And just to show you like this gets compiled in real time. So you can see like little changes in SAS that you're writing and how that would actually get compiled into regular CSS to make sure you understand that connection through these small things. I give little challenges throughout to make sure that you're actually like try doing this or do this or here's how this code block works and all of that. And the very beginning of the course is very much just getting you comfortable with all of the different functionality. So nesting variables, colors. I also look at like there's weird things with SAS that it does with colors that you wouldn't even expect where it might change the value to hex code even though you're not using it. We do some practice projects. So there's the little challenges. Some of the little challenges are more complex. There's bigger challenges that are in your browser or in your own editor. So you're opening up your editor to do it. And then there's practice projects as well, which again is all you're doing that in your own code. So the first modules, the fundamentals of SAS, getting into the logic of SAS, architectural. And then we get in like, then it's the architecture and build processes. So it's really about like, let's take that next step up. And we know what we need to know now to be able to do more. And module three is the end of the base package, the bottom package, but it covers so all the SAS stuff and everything, but then how we can organize our files, how we can build out a project, we're using Veet and post CSS to be able to do a little bit more and you're getting a starting template you can start your projects from. And that's the base package. The second one gets into design systems and theming, which is setting up sort of that file that I looked at with all the tokens in it where we're making changes there and it's just updating the site. And then the final one, which will be coming soon, which is why the top one is on sale now because it's not quite finished yet. That one's where we're gonna look at using a CMS and that side of things as well. So I'll leave this open, but I'm gonna switch over to my full face for now and see what's going on. Eduardo, thank you so much for that. That was super generous of you. Thank you very much. See, I'm gonna jump over to the chat and see if there's any questions or anything coming in on there. So I'm mostly focused if you have any questions about the course, but if there's anything else you do have questions on, you can ask away on those too. It's another 15 minutes. I thought this would go about two hours and I'm doing pretty good. So I'll stick around for like 20 more minutes, maybe half an hour. So if we wanna look at anything, we can do that. Oh, code stacker's here. How's it going, Jesse? I'll let you know what the platform is because there's not, yeah. Actually, I'm really happy with how it's working but the setup was, it took a long time to set it up properly. So I'll let you know afterward. Jake Tate asking if I have JavaScript videos. I have some, not very many, but I have some. Jason asking the differences between SCSS and SAS or SAS and SCSS. So I'm gonna go to sasmeister.com. That's a silly example we have here. I think I can make the font size here bigger. So basically like if you're used to CSS, SCSS is gonna look very normal, but let's go to the other one first. I'll put this, if anyone wants to play with it. It's a fun site just to see like SAS and what it compiles to. So in SAS, like SAS, it would look something like this where you might do like header and then you would indent and then say font size is two rem and then you can indent again and say your links are black. Whoops, I don't wanna save. Whoops, this would be color black, right? Color black. So it's all based on indentation. Why can I not do an A there? Oh, I don't know. What did I do wrong? Oh, I don't, there we go. That should do it. That should work. No. Font size that font family, serif. Okay, let's come back here and do a nav. And here it's me, yeah, LI, this should work. And then we could say that the font size is one rem, just for fun. There we go. So it's all based on like the indentation replaces the curly braces and there's no semicolons at the end. So here because it's nav indentation LI, it's nesting it as nav LI. If I switch this over to be a CSS, it's going to look a lot like regular CSS because it stands for sassy CSS. And so here I get the headers working and then I have my nav and then this LI is nested inside. So this CSS that it outputs looks like this. So that's the big difference. The regular, there's a few like mixins. It's like you have your plus instead of, there's a few little syntax, other syntax differences, but the big one is no semicolons, no closing braces. You'll mostly see SCSS used. It's by far more popular. One advantage is if you see regular CSS, you can copy and paste it in. And this is perfectly valid. Whereas if this, if I pasted that in into a SASS file, I'd have to delete this stuff. So if you had a big file, you have to change it all, which is annoying. So in general, the SCSS is much more popular and it's a little bit easier to get started with because you're just learning the new bits and you don't have to like worry about forgetting or the extra semicolons and stuff. But some people do like the two of them or some people do like SASS just cause it's much cleaner looking. I actually started by using SASS, so the regular SAS syntax, but I stopped using it just cause when I would be doing regular CSS, I would always forget my semicolons. Raj saying the platform looks awesome. Thank you very much. It was quite a bit of work to get it working the way I wanted it to, but I'm really happy with how the platform turned out. Let's see if I can, SASS-erif is better, yes. Sticky position on wanted space from bottom and angular. I don't know there for sure. Vishal's asking if you can mix SASS and SCSS in one HTML file. Yeah, let me do, I'm just trying to think, I can do it in this file. So if I look at the project I was working on, which is this one, right now I own, you can't, yes. Okay, so the way SAS works is it gets compiled down to, so if I go to my base and I have like my general file here, so all of this is here and then I have the reset that's here and then I have my font face rules coming in and then I have these routes where my custom properties are all being set up and then I have my layout that has my layout classes, but everything is its own file and then I have this main that's taking all of those and outputting one single file at the end. So what I could do if I wanted to is in this layout, I could come in and I could do a, let's just call it example.sass. So it's not the SCSS, it's the ASS syntax. So I don't have the extension for that here right now. So the syntax highlighting won't work, but if I did my nav li example and then font size of trem, like this could get brought into the final one. So I can mix those two and I could even come in and do a new and do example two. Oops, we should put an underscore on that. Example two.css and you could also have partials that are regular CSS files and you can import those into and it's just gonna be regular CSS to your writing. So say you have like an existing reset file that you don't wanna like convert and the conversion could just be changing the extension. You don't even have to do that. You can import, you can do all the SAS magic. The only thing in here is you wouldn't be using SAS, it would just be a regular CSS file, but then you could bring that into your main file that way. So that would definitely work. Just so you guys know, I definitely will miss questions along the way here, but if you have really specific questions about how you're trying something that's not working, pretty sure in the description, there is a link to my Discord you can ask there. If you have more questions for the course, there's a section in there where I'm taking questions and you can also email me support at kevinpaul.co and that I'll get those and see if you have questions about anything there, you can send it there and I can get back to you on the course. But if you don't send like your CSS questions or layout questions or whatever, just go to the Discord and ask there. It's the easiest way, just give an example of the code you're working on because YouTube comments, it's really hard to help people with code problems. Hey, there's Tony Eagle and they're seeing you. Jake's asking if we should avoid Bootstrap. How's this, if it comes up for a project, you could always use it. If you're in learning stages and you say you're doing something that's like, I'm doing something where my main goal is to, I was gonna say if your main goal is to like learn this other thing, the only problem is that you'd also be learning Bootstrap along the way with it. But like if you did one project with Bootstrap, it wouldn't hurt. It's still out there. It's still widely used. Even if you might get hired and then you have a legacy project that's built using it, it's kinda handy if you've at least dabbled in it once. I wouldn't go all in with it and make it the only way that I know how to make websites. But if you've used it, it's definitely not something that would hurt you if that makes sense. Cause it is really out there. Mr. Phoenix, 30 to 45 minutes a day enough to learn. I think you'd learn a lot in 30 to 45 minutes a day. I wish I could give myself 30 to 45 minutes a day to learn new things. I think even going, having too much time on certain things can be bad just cause you get stuck. Taking lots of breaks is usually the best way to learn. So just like small little bits on a consistent basis is probably a lot better than one day a week that's like the whole day. Exxonity asking what's happening in the fourth module of the course. So the fourth module of the course is theming and design systems. So it's about how you can set up easy theming. So if we jump back to here, in my colors, it doesn't only have to be colors. You could change a whole bunch. You could change like your font families and change other stuff as well. But in my colors, in here, I look at how we can, like this is my default map for my colors. So I could just take this map, duplicate it, and then we could come in with a dark theme and then you just come in with your new dark theme. And I look at how like you could just set up your dark theme through all of this. And then just through a media query, even have it switch. We also look at how we can actually make it user toggleable as well. And how you can have, if you're making it user toggleable, I don't know if I'm saying that right, but then you can have your dark theme and then you could come in and just create a new map that has, I don't know, another theme. So we look at theming like that. You could also, again, play around with other stuff with the principles you learn there, but I mostly look at doing colors with it. And then there's the design system stuff, which is more about how I go about creating my tokens file and how I like using the tokens file. And then we also build out like a project. We use one project to sort of create everything. And then a second project, which is using what's here. Where I also talk about like, okay, we've set up the tokens. This is all the really reusable stuff that lets you work quickly. Now what do we do when we run into like more custom layout pieces and sort of how do we approach that as well? So that's what the fourth module is about. And again, the fifth module would be about using Astroscope CSS and hooking it all up with ACMS. Ross asking if my course would help with 3D website projects. I definitely don't cover anything 3D. 3D CSS is the realm of amachine and other CSS wizards. It's not something I'm super comfortable with and it's not covered in the course. It could be useful maybe, I don't know. If it's just about the 3D side of things, no, it wouldn't be the course you're after. Yixing Zhang asking why SAS uses the SCSS file extension. So you might've just missed what we were talking about because you have SCSS and SAS file extensions. So it's just two different syntaxes for the same language effectively. So yeah, it's just a different one. And I don't see the original, should we learn SCSS to start a job? So SCSS is something, again, I use it all the time. I know some people see it as dying off. I don't think it will be anytime soon on larger projects. There are other ways of working, of course. I wanted to share with people how I work and also give them the tools to adapt this to how they work. If that sounds interesting to you, then that's what the course is for. There's a lot of functionality obviously that from SAS that's making its way into native CSS. We had custom properties forever now. Nesting has just made it. We have the color mix functions, which are really cool. And there's a lot of cool stuff we can do with colors now. Those originally were in preprocessors, which makes me think I do need to add some more lessons about that as well because I look at color mixing in SAS in this course, but I don't look at this. I want to compare that to the native CSS stuff. One issue with the native CSS things is you do have to wait around for browser support. The other issue is nesting doesn't work quite the same way and there's some limitations to the nesting that is in native CSS. One of them is actually being fixed, but there's still another one that's a little bit annoying. And then there's all the different other things. There's maps, there's mix-ins, if-else statements, which I use for my theming, there's, what else is there? The custom functions that you can create in SAS. If I was doing a small personal project that didn't involve a lot of styling, something like this could definitely be overkill and you could just write some vanilla CSS and vanilla CSS is amazing now, but on larger projects where you need to wrangle and keep things under control, I find using SAS still is so much easier and just having something in place. I think that's the big thing is just not starting a project from scratch, to be honest with you and having something in place that you understand how it works, that you can customize to make work for you is really what I wanna do with this to let people work faster and smarter. And I do think as modern CSS gets better, a lot of that can be incorporated into the things here where I'm using a SAS map to generate custom properties using for each loop and stuff like that. So you can sort of use both of them at the same time in interesting ways. I think I just missed some questions because I started scrolling down. Oh, Amit's here. Hi, Amit. Someone asked him a gradient orders with an image inside. I have a video where I look at stuff like that. I don't know what it was, but I definitely have a video. Hidden Singer, if you're looking at getting a button stuck to the bottom, you might be looking for position fixed and not position sticky, possible. Again, if you have specific questions, I definitely would recommend asking in the Discord. Have I used React, Next.js? Yes, my biggest issue is I'm not a huge fan of React. So I find for what I need, I can accomplish with Astro or I have another project that I'm slowly, slowly working on with SvelteKit and I just find the developer experience side of things so much better. So yeah, but again, there's a lot of options out there, which is a nice thing, because you can find the things that work better for you and use the ones that work better for you. Yancey, I mean, compare vanilla CSS and Tailwind CSS with React. One of the nice things, React, when you start getting into the world of components, something like Tailwind definitely shines more. I wouldn't want to use Tailwind if I wasn't using something that was component-based because if I had those pricing cards if I was creating before, if I had to just create all of that with utility classes and I needed the same thing three times and then I have to change, oh, the font size changed. I have to change it all three times. And then this, that's a nightmare. If you have something that's component-based, it makes a lot more sense because you make one change and it goes through them. So, but I mean, I don't know, that's also why. I also think the issue, I mean, the nice thing with some of the other JS frameworks like Svelte and I mean, Astro sort of is with the simplicity of the scope styling. So you're not bringing in a third-party tool to be able to do it. I think to me makes that easier to bother with than like, oh, then with Tailwind, I guess. So I get why people use Tailwind, definitely. I do think, yeah, we'll keep it there. I've been asking, I don't, sorry, been talking for two hours, so my voice is going. I haven't done enough with Svelte that I'd be comfortable doing any videos on it right now, but you never know, but probably not. But you never know. So if anybody has any other questions, specifically about the course, you can get them in now because it's been two hours. It's right on how long I wanted this to be. So we're gonna be getting off. If you have questions about the course and I've ended the stream, you can ask them in support at kevinpal.co. If you have questions about just general coding questions, if you ask general coding questions, I'll let you know right now. And it goes to the support, they won't get answered. Just because I can't keep up with my inbox already. So if it's course-related, send it there. If it's not course-related, ask in the Discord. You can ask my mods. I'm in the Discord or anyone else who's here. I'm in there often enough and there's a lot of other people in there. You'll get a very fast reply. If your question is clearly asked and you have examples of what you've tried, you will get a fast reply. So the link for that is in the description. If you're thinking about enrolling the course, it is obviously, it's beyond CSS. The link for it is just down below. And if you use early bird at checkout, you'll get an extra 20% off any of the tiers. And yeah, I guess that's it. So I'm just looking really fast. But it's mostly general questions coming in. Oh, yeah. If you are interested in Svelte, definitely check out the Joy of Code. Tons of really good Svelte content. That's where I've learned most of what I'm doing with it. So definitely check it out. Anyone asking if they're late, then sorry, I'm about to, we're just finishing up. It's about to come off. If you didn't miss everything up until now or you just got on near the end, the replay will be available as soon as YouTube processes the file or whatever it does. So I'm just, I'm ending the stream and setting it to public. So it'll be live as soon as YouTube's ready to put it live, basically. So yeah, we're at the end of the stream. Sorry for anybody who's just come in. I actually saw the stream numbers were going down because it was obvious that I was ending it. And YouTube must have done something to push it to more people because all of a sudden the stream numbers jumped back up a little bit. So I do apologize if you're coming here close to the end. But yeah, I'm getting very close to hitting the end of stream button. Yeah, thank you everyone for coming. If you do end up getting the course, I really do hope that you enjoy it. I'm super proud of this course. It's something that has been two years, maybe more in the making. And I really do think it's super valuable. And I'm really proud of the content that's in there. So I'm hoping that anyone who does end up in rolling and it really, really enjoys it. And with that, I'm gonna say bye. So have a good one. Yeah, we'll end it there, I said bye. I liked a ramble, but that's it for this one. Bye everybody.