How I build a website from scratch

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 gonna 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 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 um but yeah let's uh I can 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 uh to be showing my face like we're looking at now and talking about what's on my screen and forgetting that I need to switch over to a different scene um 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 size project I 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 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 um 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 um 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 um 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 [Music] um and people asking if the stream is available afterwards it will be sometimes YouTube takes a little while to process the 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 gonna publish it as is so uh 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 uh so people asking what the technology we're going to be using so um we're going to be using a combination of SAS and Astro and scope styling um is the main parts we're going to be looking at uh as we do this so and that's sort of the the thing I changed because this final module doesn't involve asteroidal Astro is sort of the beginning of the next module in the course um 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 um because it's not just your regular SAS it might be a bit different from what you're used to seeing uh in in setting up a project so uh 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 um 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 um 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 um 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 gonna make a Tailwind video um I don't really like Tailwind a lot uh but I do appreciate utility classes up to a certain point and so I'm going to talk about that and sort of show um 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 um 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 um some people let's go to the big face for now some people ask me um 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 to ask for I will argue that and we'll see here hopefully that uh SAS does a lot more than just nesting um if you're only using SAS for nesting then you probably shouldn't be using it I'd rather even now like browser support's 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 architect the architecture of your projects and and maintenance and all of that and working in sort of a bigger 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 um and if anybody here uses svelte it'll look very familiar to that but you could even use this type of thing with like um CSS modules or whatever if you're using react uh it's a very similar idea and process behind it all uh so I already see somebody asking what the slot element is we'll get to that uh in a minute but first what I want to look at here um is sort of what I use to to do most of my projects um or what controls most of it or you know what we'll come back to that in a second um I'm gonna 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 uh 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 um 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 um that's another one okay round that's a nice simple one um right where we get like these classes that just do one thing they do it really well uh tech center text align Center that's all it's doing nice and simple these are sort of the these Tailwind things that you'd get right uppercase 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 um I also have some layouts so I have like an even column set up I have a pile which is when you want to layer you know stuff on top of each other using grid um what I call a cluster uh and a few different sort of laity things that are in layouts I have a few pre-done uh actually I have one here that I wanted to do later so we'll delete that one um but we have some stuff in here that are like sort of those ones that you always end up using um so in navigation a side foot or a site header my buttons that are just pretty straightforward but you'll notice 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 uh in my tokens file this controls most of my site and most of the styling of everything that's in my site and this takes a long or this is sort of like the the main feature of what we're going to be we're going to 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 um so the first thing I want to do is if we jump over um in my abstracts I also have some colors set up here and I have some uh Juju typography stuff that's set up here um 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 start 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 map them over to these custom are 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 uh colors here um 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 um 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 on each Loop and this is some sort of I guess 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 uh is here's my blank page and let's just say I came in here uh and I'll talk a little bit about this slot in a second but let's just come in here and do in each one and say hello world to start with uh so you can see it's right there and now I can just come here uh and let's do my color is going to be so we'll do a class is going to be equal to text uh brand primary let's close this Brian primary 400. and that might not be one of my colors oh wait I used to use text now I use color no grid start to your um to the 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 want to include this because with Astro it is important um 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 um so here at the top all I'm going to do is say let's just come here uh actually I don't need this we can just come here and say 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 uh it's because as I said I was playing with something ahead of time uh that's just fine uh 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 uh index we'll talk more about what that is in a second ah there we go so these things are actually working my my SAT my style sheets are actually coming through um 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 um 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 um my brand primary is this one let's just change this to Red for fun and hit save uh whoops that wasn't this is my oh yeah that's that one uh I just want to make sure let's come here that's looking at my right 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 going to say um what are we going to say BG brand accent uh 700 because I know that's one of my colors and that color comes in so it's just all these pre-existing 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 takes 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 want to work there we go um 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 um 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 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 breakpoints set up as well so the breakpoints 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 um and then basically I can start working uh 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 uh I'm setting up my flat my heading font family I'm setting up some colors my container sizes are set up here um some more header stuff and we'll sort of jump in here a little bit just so you can see some changes that happen um because this is where if you're theming something because 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 because 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 you know I'm just coming in and making the modifications I need to it and it makes me it allows me to start much faster is sort of the idea here so I think what we're going to do Let's ignore the slot for now and we'll come back to what this slot does um 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 um but if we come in there we go everything updated um and what I wanted or you know what I was okay yeah we're gonna build it out and then we'll we'll take advantage of that slot we'll build some components out um so the thing that we want to do sorry I'm just checking things on the chat um but if we come in here and I'm going to 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 your header then here I'm going to have an image that's gonna uh 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 um and then after that you might have a nav Uli times four um whoops let's come in with links on those uh so here would 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 we have to do that and then we have to style all of that out again I'm not starting I don't want to 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 uh 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 going to look like this give me one second to get this sort of positioned a little bit better uh we'll just do it like that so we can sort of see this navigation floating down there at the bottom and I'm going to 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 it 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 um generally you 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 um sorry I'm getting a little distracted by the chat I try not to but I see it moving um so the title is this uh we'll get to that later when I start talking more about Astro um it's just Dynamic content so it can change page to page really easily is basically what it is um so here I'm just going to do a site header and you're going to 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 going to 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 um on my nav here um 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 uh and it 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 uh well yeah basically referencing what we see here so it's my let's just look here uh color neutral 700 is the color of the text and the background color is the brand primary 100. so just refine if I came and changed this then you can see that gets darker and then I can come to my site header color and I can make that zero zero zero 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 um 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 could make that a five I need that to be bigger I can 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 um so like this is really where everything gets controlled so it's just about plugging in everything I want into here uh and it just sort of comes together and this is for these types of components um 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 um and oh this should be I think it was I forget what number I had 700. there we go perfect um 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 um 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 uh right and actually I have two classes that I'm going to apply here um I like doing hero and I like doing section uh 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 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 the class uh and also the reason I'm doing this is because I'm following sort of Andy Bell's Cube methodology for class naming um so and he uses these separations like this to distinguish if something's like a component versus a utility class um 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 uh in here we're going to need a container again right just to hold all of our content and then I have in even columns because even columns is something you need on every single site you ever make we're going to do a div times two and in this first div we can do an H1 so that would be welcome to Brand boosters let's just we're going to go through this pretty fast so we're not wasting too much time so we'll just throw a little bit of 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 um at that one so it's in my public my images and I know I'm going kind of fast right now um which one was that social no video no I'm going fast because I can't find what I'm looking for um but we'll sort of slow things down a group on computer let's just make that bigger because I forget exactly group on computer oh that's it okay um so Groupon computer dot web p uh 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 um but do always provide alt text for your images and also 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 um my my welcome to Brand boosters here is my H1 I remove all the styling um some people don't like this they like H1 should be an H1 H2 should be an H2 but a lot of the time when we're styling stuff on websites in each 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 uh 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 um and it's certain 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 uh color brand Pro accent 400 and make sure that my brand boosters is inside that spam maybe I should have a word wrap on for now uh so you guys can see a little bit more but you can see it's all coming through uh 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 going to stress too much about that um but we can see it's already coming in it's working I'm happy with it uh we need a couple of buttons down at the bottom so if I come down after that paragraph I'm just going to do a flex group and then in my Flex group we can do an a button button a button actually we're going to 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 uh this one says learn more learn more so one thing I do also and we'll turn off word wrap for a second um when I use uh 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 uh and the other thing is if ever you do have JavaScript it's toggling things it's a million times easier to toggle a data type just you know you're changing it from one thing to another then if you're even if this is javascript's like you know maybe you need something that's changing the state of the button and just having the data type on there instead of 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 um 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 would normally have that spacing um I don't actually I have some stuff already set up for this area so we'll do it really fast um 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 let's hit save and it should show up actually oh it's not showing up and here I should put that section class section oh Brent brand primary there we go I named it brand primary um 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 um 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 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 um on uh how I work once I have things set up um and sort of the benefits of why I really like this system uh so in here we need a container again in this container once again I'll use my even columns and actually let's just just uh 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 uh 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 uh lorem whatever we'll just do lorem again and we'll come in finally with another a DOT 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 uh 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 uh and I guess I can go back up here since we're working on the bottom uh so be 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 uh in this case it's a neutral zero zero zero 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 um 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 uh 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 uh 700 for bold and then font size 800 probably let's hit save and you can see it's 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 um but you can see it has come in it's the right size and it's bigger um 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 um often a text transform to capitalize them 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 zero zero zero if I need to modify it and then this overwrites this you know 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 um that comes in it works we'll come in here also with the class is equal to um 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 the hero area so if I bring that up here and I paste it in um it will make a third column so anything like right now it's a paragraph but like uh 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 um automatically uh with how I've had this set up so if you will need two columns you get two if you need three columns you get three and you can just bring in more content um 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 um 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 you know in the first place so it does take a little bit of setup the stuff I did before we started the live stream um 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 um so I'll talk about that um it does nothing other than separate um separate stuff that's just a visual separator between different types of classes if you look um 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 um he uses uh the square brackets to make like sections in it so then you know you I won't do it on this one because it's not as clear I'll do it on another one uh because I think this one's more we'll do we'll look here this one's more obvious this section for me is sort of like I'm creating I'm making this a section it adds the padding maybe I have a few other things going on so it's sort of like a layout class and all 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 uh 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 uh so if you'd like that way better you can do it 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 foreign all of that up now let's jump over and as I said I changed my mind and I wasn't going to do this with Astro originally um but we're gonna we're doing that now so I'm just trying to decide if I what to look at next but I think I'm going to stay on track um 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 component's folder I was looking for um 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 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 in 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 um 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 I'm 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 ramp 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. uh so it's nice and easy to use um 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 want to do uh for all of this that's in the course um 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 um rather than just using Tailwind is uh and actually what we're going to do I'm uh should we do it on okay no you know what uh we're gonna build out a component now and it's going to give me a chance to talk about why I don't only use utility classes and why I like this a little bit more um 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 want to put a site together really quickly it's really nice for that you can throw a bunch of your classes on there and stuff just comes together and it's a very satisfying feeling uh and then obviously you get the other end of the spectrum too which is like something like bootstrap where everything there's are 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 just it's just happening uh because I've already set that up so part of it is these pre-existing 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 um so what we're going to do is let's go back to my layout and I'll talk a little bit about or I'm just going to see if there's any questions coming in actually um somebody mentioned they didn't know there's different types of classes this is just my own clap like my 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 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 save 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 uh you know 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 going to 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 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 um explode explosive saying Astra seems similar to stealth kit there's definitely a lot of similarities between them um redacted asking what I think about webflow I think webflow is pretty good for what it does riviero I do so for my colors if I look here in my colors utility they're actually um it I'm using in each Loop um that is coming from a colors map that I have so I I do all of my colors I do all of my sizes or 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 uh 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 um 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 um and 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 will 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 um so SAS was invented first I pretty sure um SAS started then some people didn't really like the syntax and they also wanted to be able to copy and paste from a CSS file in so scss looks more like if I look at a like and 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 both they're both the same thing at the end of the day someone saying you can make your own Tailwind out of this that's a little bit of what it is um 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 um so SAS variables are actually for my colors um 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 re-do that looking at custom properties uh and the reason I do that is because I want to be able to change these custom properties using media queries um and so that makes it a lot easier I do the same thing for my font sizes as well um I also use if we go to like my flow class I use custom properties within here um 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 you know changing with JavaScript to change the flow spacer or you just need to modify it into place and you're just making this hook that you can really easily like hook into to make a change to that value uh 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 um 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 foreign Apple yeah I just I don't like designing in he's asking if I design in figma first I like having designs and then coding um I can code in the brow or I can design in the browser but it's hard um and I find you can be a lot more creative when you just drag stuff around and resize things really fast so a simple design whatever um or if it's like a like a 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 um and it makes for me mentally I find that a lot easier to do um 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 going to 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 uh though I 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 svelt kit for another project and I very much enjoy that as well Ard Braha so I'd use this basically my own like what I'm showing you now is how I would start a new project because I can work very quickly um so I have this all set up I just make my new Project based on my template update what this file that we're looking or update first my colors that you know 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 the 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 um 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 um 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 because that's a big part of it too and I want to sort of tackle it and look at that idea and that side of things in a second [Music] um Joel asking if I don't have a design to start with um then I look at other designs get inspiration from usually Kevin read I mean I'm not going to say your name right but he's asking where you find this template so this is the template that you learn how to create uh 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 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 uh and you'd get 20 off of the course um and yeah so early bird I should have put that in the description I don't know if I can do it now um can I let's see I wanted to do it before I went live and I had so much going on we're gonna add that now uh use code early bird or 20 off if anybody got it without using that coupon send an email to support Kevin Powell dot 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 uh if you're watching this live stream in the future uh it is a limited time coupon so you can't use it forever um 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 um so yeah this this whole thing that I'm looking at now is what I teach in the course um and how it's not it well we start the course off I'll talk a bit about that and 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 uh 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 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 well not just you know you can go to the documentation and learn SAS uh it's about learning how not how each function works but how we can use it in projects take advantage different things and in that first here 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 um that's again not this in depth but it's good to start your projects from um and one of the reasons some people will probably say the pricing is very high in the course and it's my most advanced course so the pricing of it is higher than any other one I've done and um 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 uh if you are somewhere where priority pricing would apply um 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 Veet we look at using post CSS to purge the utility classes and 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 uh using Astro as well as we're going to 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 learned something completely new on top of what we've already covered I'm talking way too fast but uh I'm talking too much but um 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 you know we're talking about if you don't have a design well then actually the the actual starter that I have set up has like I don't know it must be at least at 50 colors just preset um 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 going to name them and that's always the hardest part but I name them based on 400 being the base value in the same way that font weights work so if you have a font weight 400 that's your regular so I sort of like doing that where my four my neutral 400 is like a neutral neutral uh my blue for my primary 400 is like the you know 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 or lower the number uh and the reason I use 100 200 400 is 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 uh in between the two that are right here so if I'm getting the ones that are in between you know if I called this 300 and 400 300 and 400 and then they came back well then you know 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 right 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 you have that's a pain and it's 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 font um 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 oops we want to comma there um but then I I Leave Myself open to having these spaces um that are in there so that I don't stress if ever the designer comes back and tells me um oh we need another font size in here and my all my numbers are too close together and it just makes a nightmare for me uh 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 nope the peppers 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 for them but they're not home um so he comes here hey hey no no uh so I could come here on a medium and at the medium I could redefine my uh let's say my 900 becomes a five Ram don't know why you do this but I could do that uh 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 um but something you know how I 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 dog less 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 the Ruby she doesn't listen to me the problem is I have my office to work close to and it's getting really hot in here so if I start sweating I do apologize um okay next we wanted to look at the Astro stuff and sort of that side of things um and this isn't this is I in the course what I'm going to be teaching this as I said is part of the top module um is this is the first part of it we're also going to be looking at setting things up with uh 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 cms's that you could definitely use in its place um 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 like Wrangle in a markdown support for it and Tina was really straightforward to do it's a git based CMS it works really well uh but everything we're covering like if I'm using Astro you could do this with spelled kit you could do it with uh react if you wanted to and use CSS modules in a similar way there's probably a couple of small differences but the the idea behind it and the concepts behind it are very similar and that's even the idea of like the setup I'm trying to teach here isn't to show people how they should work I 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 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 um 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 uh 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 um layout is where you set up the 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 spelled 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 um but the nice thing with asteroids so here what I'm going to do is I'm going to grab 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 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 uh you have like a link to your Google fonts and you're putting that on every page and then you're 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 could have more than one but we have this 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 gonna have a layout and you can see it says title welcome to Astro let's change this let's make it uh my project and hit save actually you can't see my let's move that down now you can see it does my project if I do an undo hit save now it's welcome to Astro so the reason that's happening is the person who was asking before about why we had the title oh the title here uh 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 um but you can do a lot more with it um they have like partial hydration and everything it's gotten very very powerful it just isn't like basic templating um 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 have 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 I have 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 dot Astro and so with header.aster 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 dot Astro and the reason that I'm putting them is capital is it's just a naming convention to say that these are components um you if you're coming from react or anything else this is going to look very very familiar uh so then let's go find that footer that we created uh do they not have 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 uh footer copy that it's like wait where's my footer we'll paste in this footer that's right here uh and I'm gonna hit save on that one and then what we can do let's get rid of that if I go back to um 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 uh over here is going to be my footer like that um they're self-closing because I'm not adding any content to these so when I hit save and also if you are going to use Astro get the Astro extension um it's wonderful usually with the Astro extension actually when I do this um it's I 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 um 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 uh is it import header oops I'm gonna make a mistake right now um no it is just header like that yeah header rum and then we just go to where it is uh so in this case it's my layouts folder so layouts and then header dot Astro and then we can do import footer from layouts and oop I only have oh not layouts uh components components and components uh would be my Twitter dot Astro there we go that makes more sense and now it's all come in so actually in C 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 uh 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 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 dot 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 footer is 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 uh 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 uh so there we have an H1 which will get my heading one that will actually see already making mistakes that would be in a container um 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 um 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 um but we can get my diva viewing columns and just I'm going to check the chat in a second just because I know I'm going a little bit fast um 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 might be in my C there now with this um the um 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 uh 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 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 home page and you can see the new link is already there on the home page because I've added it here so we only have to make that one update to here again people that are used to um 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 revi I am using uh 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 um and so these are all pre-existing classes that I already have um that I use on my things so that's why it's already working Hunter um 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 and functionally out oh I yeah I didn't explain that part too much I was just throwing stuff up here the the three back ticks here these are called front matter a lot of templating languages will use this where it's sort of like extra stuff um 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 front matter at the top um sorry I'm 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 um so I will keep going but I see a few questions I'll just go back over and see a few people asking what astrophiles are um so let's just go to astro.build so this is Astro it's a framework to build websites um and at its core it's a static site generator um that's just really easy to use I'm also a very big fan of 11t 11t 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 and 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 11t and other static site generators I mean you could go to like I remember the one there's one that use it runs on you like Hugo or is it Hugo that runs on something else whatever um with 11t like you're learning how 11t works and then you're also learning one of their supported uh 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 um so you can bring in react components felt components view angular components and use them within it if it's able to it's just going to ship that as static CSS so it won't even bring react in but you have that option of having reactive components as well um so they have like partial hydration going on uh 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 um but definitely look into it if you haven't seen it foreign [Music] how do I include also just inside how do we include a partial we're going to do that now um so what I want to do is these pricing things down at the bottom here so we'll look at this is what I want to 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 um 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 just write my HTML for it and then I'd make a component for the styling of it but once you get the 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 without 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 want to mix these two different things up just because it 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 um for for so if it's a div class container versus I can component I I don't get it um but if you know you do you if that's the way you like to work there's nothing wrong with it either um 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 uh whoops wrong wrong shortcut uh in here whoops in my public or 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 mypricing tier.astro so I want to make one of these cool uh 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 an article but we'll just go with a div so I'm going to start with a div right there and I'm gonna 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 um let's just try padding six and we'll see I'm just really basic like I could nail down and get the actual sizing but let's do a padding six on there um cool so now there's a few different things in here well 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 kind of like flexible plans is 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 uh actually I'm going to make a small group here let's do a div with a class of text Center uh and the reason I'm doing that is just because this top little section here and this is where if this was an article uh 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 could make these articles let me know maybe they could each be a section but um I think it's either a div or it's an article um they're sort of Standalone but they don't really make sense out of context so I think a div is fine uh so next we could do the price so I can just do AP uh 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 um 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 in a new line for that then spam 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 bond weight of a 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 um and then here let's do a p that's ideal for startups then I need this list that's here so for now uh we'll do an on 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 going to 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 dot Astro and in this First Column let's come in and do my pricing that's not coming in now pricing tier and we're going to hit save it's going to break everything so let's just import that so this is my pricing tier from components components and pricing tier and there you go you can see it has come in uh I think oh I know what I made a mistake on so let's go and fix that a little bit uh 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 was it 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 um so I think the first thing we're going to 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 it's 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 because 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 uh this one's easy that's my price and then ideal for in 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 four or I don't know naming is hard so I'm going to put that there then but 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 going to 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 uh if you've never used this so basically we're saying we're going to get this anytime we're using that component uh so anytime you see astro.props just go when I'm I have to define those different things when I Define it and you can actually give these default values too like I could 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 fix up my formatting here slightly there we go uh so we'll just call this one premium and we'll call this one uh 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 uh 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 um price is going to be equal to I think it was 3.99 and then on this last one the price was equal to 9.99 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 um I also don't want a space here so I can remove all of that and take that space out foreign Pro gaming saying that there can't watch because of a weather issues if ever you want to re-watch this the live stream will always be available uh 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 you know you can see how it's becoming a little bit more Dynamic we don't have to rewrite everything um 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 going to copy that one out and I'm going to 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 going to 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 you know we'll duplicate a couple lines just to make it a bit longer and then we'll do the same thing on this one just so we have just you know 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 um sometimes people get a little bit too they go over the top a little bit with their components like this but um 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 you know I could come here and I make one change to this and it's going to 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 um 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 um so yeah what we'll do here is one of the issues is the way I've uh well we need them to stretch maybe we'll do that after but let's just say uh we'll Target my lists actually here um or we can't do that here we can Target the lists on the pricing page so what's something here we might want to Target I actually don't see anything I'm going to sort of set if I look at the design um a little bit we just have more spacing on the top and bottom here um and my buttons need to stretch actually for the no I'm not even going to do uh okay yeah let's do a scope styling style uh and then I'm just going to say that the div should I give that a class because we have a div here too I don't know if I need to um because I only want to select this one let's make that a section just to make life easier uh so I can take this section here and let's just for now let's say that the background of that section us whoops section has a background that is red and I'm even going to throw an important down here uh just to show you that these obviously become red but if we go back to the home page 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 who knows scope styling all it's doing is behind the scenes it throws these like see here uh 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's ways of making it um actually go further and you can make it a global style if you want to but we're not going to do that uh 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 uh so that that worked out well um and then um yeah okay so we'll go back to my pricing here this is on the 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 um 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 ul's anyway so let's add a style here and we're going to say UL um 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 check mark list or something like that on here because you want to we what we want to do is we want to bring these check marks in place of the bullet points so you need that um 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 ul's 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 um some of the uh 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 felt this will feel very familiar to you um 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 uh margin block yeah at the top and bottom and now I can say that it's Ace i6 and that broke oh because we're using SAS exactly like you would use SAS at use and then I have to find my um how come this isn't Auto completing for me SAS abstracts I think abstracts as star ah 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 abstract and I'm able to get into those um 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 npm 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 um so I have that coming in that adds that spacing um the next thing I want to do is we want to we want to get things looking a little bit more more sassy right sorry let's just check the chat really fast so it's a really fast CW asking that there's so many different combinations of tech Stacks should you learn every single one before applying for jobs no because then you'll never apply for a job if you learn how to use one there's so many similarities between them um you should be able to adapt and do a use you know figure out another one um just you know learn how some stuff works and then apply for jobs um 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 uh if you're beginner or intermediate like you're if you're still learning how to use CSS I wouldn't necessarily recommend it um what I would recommend is uh 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 com you're already confident when you're writing CSS because 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 um as I go through it but it's a lot less about how um you know what what's margin block I talk about it um we even look at how we can make this be safe to use in browsers where it's not supported um but like yeah it's more about you under 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 um and then because it's more about the tooling and getting set up and being able to work more efficiently um that's and like Arc the architecture of your CSS getting taking those next steps once you're comfortable with CSS that's really what this is um what this is for um so there we go we have my margin block on there it's using my SAS variable the next thing is um that we want to make those check marks and I do have those check marks uh in here let's just actually let's I want to do that I'm also going to change the margin inline start to be maybe a size six because I just want to push them over a little bit more there you go that looks better um so that's on the UL so yeah we want those to be check marks 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 uh I don't need that do we why is my marker not working I know it's on somebody could tell me my 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 well we'll stick with that then um curious why that wasn't working you shouldn't need the LI because 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 um so I do have these check marks in my images um 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 um the first one is if you already have it set up properly which I don't know because it's going to be black but I can come in here and we can do so that's my um images and then it is my checkmark.svg except that's how you want to do that it's not a string ah there we go we have check marks um so on there the LI or you know what we're gonna do we will do some nesting here because my li needs a uh padding left which will be say a size four size four for me um is one REM and then here we will do a uh 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 this 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 um and if you have something like that let's just open up my check mark 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 um as you can see it 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 um variables SAS variables so SAS variables are compiled so if I see size 4 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 you can re 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 it's red and I I've never done it with this but I don't think it's going to work if it does then it does but VAR I've done it with background images and it doesn't uh so Phil um and 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 of this document um 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 uh whoops with a dollar sign so this is a why can I not hit the right key there we go um so that was embarrassing um 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 dev tools now you can actually see in here that the if we find it that's the marker and 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 uh 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 um yeah let's see is there anything I don't see too many questions coming in so what I'm going to do now um so yeah that's sort of we're gonna we're gonna take a look a little bit of the course platform now um because I think this gives you a bit of an idea of sort of what we're working up to to achieve and what we're working up to get to um 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 because again we want to hook this up with acms eventually um 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 um of all of that so let me just get I'm going to log in off screen um 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 because I'm going to start paying much more attention to what's happening in the chat as well um or actually what I should be I'm going to the wrong place now um I think I have one small problem oh no I don't okay I know what we're gonna do this might take a second um but it shouldn't take too long so again if there's any questions coming in the chat please please uh I think that one nope fun of live streams when I didn't have everything I needed ready it's not the right one two this is probably the right one it is there we go finally that should work awesome I'm in now okay so uh 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 uh when I made this course and one of the reasons um was because I wanted to do things a little bit differently so uh when you come in you sort of get access the main portal when you do come into it sort of like this General Hub um but some of the things that I wanted to do are 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 um there are videos as well and the early lessons there's a little bit less so I'm trying to find a video that has uh 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 um 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 uh this is SAS nesting versus CSS nesting I'll also be adding a section comparing it to regular CSS nesting um though I haven't done that yet uh but just as like an example here I can come in and update the the indentation that I have here and hit compile and I made a mistake in that because I was using tabs um but you can see all right let's go over to this version of it uh reload there we go um so like I can take this off uh and do that and compile that um 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 um 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 um 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 um or in your 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 in your own code um so the 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 um and module three is the end of the base um the the base package the bottom package um but it covers so all the soft 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 going to look at using a CMS and that side of things as well so I'll leave this open but I'm going to switch over to my full face for now and see what's going on Eduardo thank you so much um for that that was super generous of you thank you very much um so yeah I'm going to jump over to the chat and see if there's any questions or anything coming in uh on there um so as you know I'm mostly focused if you have any questions about the course but if there's anything else you do have questions on um you know you can ask away on those too um it's another 15 I was 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 um so if you know we want to look at anything uh we can do that oh code stackers here how's it going Jesse um I'll let you know what the platform is because there's not yeah it 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 um afterwards Jake Kate asking if I have JavaScript videos I have some not very many but I have some um Jason asking the differences between scss and Sass or SAS and scss so I'm gonna go to SAS meister.com um that's a silly example we have here uh I think I can make the font size here bigger so sat basically like if you're used to CSS s CSS is going to 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 s-a-s-s um it would look something like this where you might do like header uh and then you would indent and then say font size is 2 RAM uh and then you can indent again and say your links are black um whoops I don't want to save uh whoops uh this would be color black right color black um 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 font family serif okay let's come back here and do a nav uh and here it's me Ella uh yeah Li this should work and then we could say that the font size is one round just for fun there there we go um so it's all based on like the the indentation replaces the curly braces and there's no semicolons at the end um so here because it's nav indentation Li it's nesting it as nav Li uh if I switch this over to the scss it's going to look a lot like a regular CSS because it stands for sassy CSS and so here I get the 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 um so that's the big difference the regular C there's a few like mix-ins 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 uh you'll mostly see a CSS 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 you know if if I pasted that in into a sass file I'd have to delete this step so if you had a big file you have to change it all which is annoying um 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 your the extra semicolons and stuff but some people do like the two of them or some people do like sass just because it's much cleaner looking I actually started by using sass so the regular SAS syntax but I stopped using it just because when I would be doing regular CSS I would always forget my semicolons foreign Raj saying the platform looks awesome thank you very much it was it was quite a bit of work to get it working the way I wanted it to but I I'm really happy with how the the platform turned out um let's see if I can saser if it's better yes sticky position on wanted space from bottom and angular I don't know there for sure uh vishal's asking if you can mix SASS and scss in one HTML file yeah um 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 um right now I own you can't yes okay so the way SAS works is it gets compiled down to uh 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 the reset that's here and then I have my uh font face rules coming in and then I have these root where it's my 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 uh let's just call it example dot sass so it's not the scss it's the ass syntax so I don't have the extension for that uh here right now so the syntax highlighting won't work uh but if I did my nav Li example and then font size font size of 2 RAM 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 new example two oops we should put an underscore on that uh example two dot CSS and you can also have partials that are regular CSS files and you can import those into and it's just going to be regular CSS that you're writing so say you have like an existing reset file that you don't want to like convert and the conversion could just be changing the extension you don't even have to do that you can import you can 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 it would you know you could bring that into your main file that way so that would that would definitely work um definitely just so you guys know I definitely will miss questions along the way here but um if it's 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 Kevin powell.co um 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 to help people with with code problems um hey there's Tony Eagle nice seeing you uh Jake's asking if we should avoid bootstrap um how's this if it comes up for a project you could always use it um 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 was 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 um even if it you know you might come in you might get hired and then you have a legacy project that's built using it it's kind of 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 um because it is really out there Mr Phoenix 30 to 45 minutes a day enough to learn I I think you could learn a lot in 30 to 45 minutes a day I wish I could give myself 30 to 45 minutes a day learn new things um I think even going having too much time on certain things can be bad um just because you you get stuck taking lots of breaks is usually the best way to learn so um 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 uh exxonity asking what's happening in the fourth module of the course so the fourth module the course is theming and Design Systems so it's about how you can set up easy theming um so if we jump back to here um in my colors um 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 uh in here I look at how we can like this is my 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 uh 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 uh and then just through a media query even have it switch we also look at how we can actually make it um user toggleable um 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 another theme um so we look at theming um like that um you could also again play around with other stuff with the principles you learn there but I mostly look at doing colors with it um 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 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 uh hooking it all up with acms foreign Ross asking if my course would help with 3D website projects I do def I definitely don't cover anything 3D um 3D CSS is the realm of Amit Sheen and other other CSS Wizards um it's not something I'm super comfortable with um and not it's not covered in the course um 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 asking why SAS uses the scss file extension so you might have just missed what we were talking about um because you have scss and Sass file extensions so it's just two different syntaxes for the same language effectively um so yeah it's just a different one and I don't see the original uh should we learn scss to start a job so scss is something again I 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 um 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 so if that sounds interesting to you then that's what the course is for the um 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 now we have the color mix functions which are really cool and there's a lot of cool stuff we can do with colors now there came those originally were in preprocessors which makes me think I do need to add some 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 the native CSS stuff um 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 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 um and then there's all the different other things there's Maps there's mix-ins there's if else statements which I use for my theming um there's what else is there uh the custom functions that you can create in in SAS like 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 sort of 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 it's 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 want to do with this to like let people work faster and smarter um and I do think as modern CSS gets better A lot of that can be incorporated into the things here where like I'm using a SAS map to generate custom properties using in each for each Loop and stuff like that so like right so you can sort of use both of them at the same time uh in interesting ways um I think I just missed some questions because I started scrolling down um oh Emma's here I am it someone asking about gradient borders with an image inside I have a video where I look at um stuff like that if you 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 and xjs yes and my my biggest issue is I'm not a huge fan of react um so I just I I find like I can for what I need I can accomplish with Astro uh or like the pro I have another project that I'm slowly slowly working on with feltkit and I just find the developer experience side of things so much better um so yeah but again every you know 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 um Yancey I mean compare vanilla CSS and Tailwind CSS with react one of the nice things react if you when you get start getting into the world of components um something like Tailwind definitely shines more I wouldn't I wouldn't want to use Tailwind if I wasn't using something that was component based because having like 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 like 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 um so but I mean I don't know it I I that's also why I also think the issue I mean the nice thing with some of the other JS Frameworks like svelte um 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 um I think to me makes that easier to bother with than like oh I then then with Tailwind I guess so I get why people use Tailwind definitely um I I do think uh yeah we'll keep it there I've been asking I don't sorry I've been talking for two hours so my voice is going I haven't done um enough with felt that I'd be comfortable doing any videos on it right now but you never know um but probably not um but you never know uh uh all right 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 uh so we're gonna be getting off if you have questions uh about the course and I've ended the stream you can ask them um in support kevinpole.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 um just because I 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 I'm 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 uh if you have a very if your question is clearly asked and you have examples of what you've tried you will get a fast reply um so the link for that is in the description um if you're thinking about enrolling the course it is obviously uh it's beyond CSS the linkboard is just down below and if you use early bird at checkout you'll get an extra 20 off any of the tiers um and yeah I guess that's it so I'm just looking really fast but it's mostly general questions coming in oh uh yeah if you are interested in svelte definitely check out the joy of code uh tons of really good stealth content that's where I've learned most of what I'm doing with it so definitely check it out um 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 did miss everything up until now or you just got on near the end the the replay will be available as soon as YouTube processes the file or whatever it does um so I'm just amending the stream and setting it to public so it'll be live as soon as as YouTube's ready to put it live uh 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 um so I do apologize if you if you're coming here uh close to the end um but yeah I'm getting very close to hitting the the end stream button um yeah thank you everyone for coming um I if you do end up getting the course I really do hope that you enjoy it I'm super proud of this course uh it's something that has been two years maybe more in the making um 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 enrolling in it really really enjoys it and with that I'm gonna say bye so uh have a good one I'm I yeah we'll end it there I said bye I like to ramble but uh that's it for this one bye everybody

Channel: Kevin Powell

Views: 204,813

Keywords: Kevin Powell, css, front-end, frontend, html, web development, website from scratch, scss, sass, postcss, vite, build website, how to make a website, how to build a website, creating a website

Id: IGVWLd3P8ig

Length: 120min 1sec (7201 seconds)

Published: Thu Jul 27 2023