Live Code: Dark Mode Landing Page (Astro Basics)

Hello. Hello. Hope you're doing okay today. Uh we'll get started here in just a moment. Uh if you can let me know if you can hear me or not. Uh this will mostly just probably be me just kind of coding. It's pretty basic tutorial, but figured uh take take a little bit of time today just to hand code some stuff and talk through kind of how I think through coding designs like this. Um, but yeah, if you could let me know if you can hear me or not, that will let me know whether or not I can get started. Uh, I'm going to get a couple things up and running so that we can kind of map out how we would do this. Um, especially if you're kind of new new to this, you know, kind of front-end development and want some help thinking through a design like this. Again, this is not going to be a super advanced tutorial. Just kind of walking through uh stuff as as I can. So, hopefully that's useful to you and uh excited to get started here. All right. I don't see anyone saying they can't hear, so I'm going to assume that means maybe we can hear. Okay. So, let's let's assume that's the case. I'm going to move everything over and uh just get started here. Um, hey, uh, good to see you today. Uh, we're going to get started on this design. This is just from Frontend Mentor. I actually do have a coupon code they gave me, uh, to make things a little, uh, cheaper for you if you wanted to use Frontend Mentor. It's a good way to practice stuff. Um, I've done tutorials with Frontend Mentor for years. Um, so hopefully, uh, yeah, hopefully you'll find it useful as well. Uh, let's get started though. I'm going to transition so you can see my full screen. And again, let me know if there's any issues with music or volume or anything like that. Uh, but I'm going to assume that we're good unless I hear otherwise. Um, okay, cool. All right. So, here we are over this way. Uh, you can see I've got the design up here. This is just for some fake brand here. And, uh, so I just want to think through kind of what we would want. Looks like I don't know if I didn't turn on do not disturb or something. I think we're on. Okay, we're okay. Um but yeah uh what we're going to do is just think through the design. I think these are showing basically active states uh on this one over here. Uh so I don't know how like precise we're going to be. I'm mostly concerned about layout and how we would think through this. Um and then I do have uh just like the repo pulled up over here um and like the designs over here. So nothing's done yet. This is exactly what you download when you download this from the link in the description. Um, so that's what we're going to get started with. Uh, so let's go ahead and start thinking through kind of how I would plan this out. Um, so first, like I always think of the most simple view to the most complex view. So in this case, the most simple view is going to be uh this one right here. So why don't we, yeah, I'll just leave it like this. Uh, so I'm going to grab this and let's change this to Oops, that's not what I want. Um, let's draw this first. Here we go. Okay. Uh, so let's get rid of this. So, I'm going to add a little stroke here of red just so we can see what's going on. And let's change this to like three or four. Okay, cool. So, this weight right here, um, this section right here is going to be pretty much the exact same. I'm not sure why I've got a drop shadow on that. Uh, the exact same as what we've got over here. There's like a max width we want to hold, but since this is the same, we're just going to assume this is the same section. Now, here we've got a couple different ways we can organize this. To be safest, what we can do is use a grid container because this allows us to set the exact number of columns we want. In this case, on mobile, we want four. Uh whereas over here, we're going to want two. Uh there are other ways to do this with flex, but you have to basically make sure you set the widths accurately based on like how wide the screen might be. Um thank you. Um so that's what we're going to do there. Now, here this is a simple flex. Uh, and the reason we've got this as a flex is because it's just two sections. On desktop, it's next to each other, and on mobile it wouldn't be. So, this is um should be a fairly simple one to work for, too. We got these two sections like this. And like I said, on mobile, we're going to just collapse them down. So, we'll collapse it down. So, it'll flex wrap. Same thing here. This is a nice opportunity for a flex wrap. There's one little difference, and that this first one should have this uh little SVG. There's a couple ways we can handle that. We can either have it like um positioned absoluteely within the container or we could have it connected to this very first card. Uh I think I would tend to do it in the container itself. It is positioned slightly different on mobile versus desktop, but we can kind of play with that. And then this we've got the same basic thing. This would be a single container. The only difference is this little mini section inside here is going to be flex uh because we can wrap this one section down. And basically what I tend to do is on global layouts, this entire thing uh would be one big grid layout that has this spacing between them. You'll notice even with my poorly drawn boxes here that these spaces are kind of all the same between the sections. To me, this is a really great candidate for a grid container. Um when we come down this way, uh these all stack centrally. Uh so I'll have to think through kind of how we position it, but looks like it's doing it on this section, too. And then all of these would basically wrap. So this is another really good candidate for a flex wrap. So anytime the the parent itself can just wrap the the items and um stack them like this, this is a great candidate uh for something like uh flex. Now there are some oddities here in the way this is uh like f uh patterned out or whatever spaced out. You can see here that this section, there's some space here, same space basically here, same space basically here, and same space basically here, which means we've got four sections. But on desktop, it looks like we have five sections. So, probably what I would do is inside here, we're going to have this as its own little flux container. Um, this whole thing is a flex container and then these things are going to be inside of their own flex containers for structurally. And that allows us to basically have one, two, three, and then this will be four. And this will have no gap between it um when they're stacked. That's kind of my guess of how I do that. Um we could also stack these. I suppose maybe that's the better way to do this. So, just kind of thinking through this structurally, we could stack these like this and then have these in their own flex container with no gap vertically because they obviously have a gap horizontally. Maybe that's an easier way to handle this. Um, and then the whole thing would be stacked as well with the flex. So, just thinking through the way it looks on mobile kind of tells me like there's a couple different ways we could handle this. All right, hopefully that's helpful um to kind of walk through what what we would do there. Next thing I want to do is get my basic variables in place, but I haven't even started a dev server or anything like that. Um, so what I want to do is come over here and I'm going to use Astra for this. We're going to use, you know, fairly basic stuff, so I don't know that we're going to need a whole lot of anything, but we'll do bun create a latest and we'll call this uh dark mode landing page fm for front-end mentor and get this up and running. We'll use bungee just because it's slightly faster to install here. um and kind of get going with. Let's do an empty template. Install dependencies. Let's not do a new git repository right now just so I won't be distracted by all the normal uh time there's changes and I want to commit stuff. Uh we'll just stay focused on our goal today. All right. Uh let's get inside there and bun uh add or let's see bun astro bun x isn't that I think what that is. Astro ad. I know we're going to need a few things. We could use tailwind if we want. Um, maybe that's a good option here. Uh, we might want to use React. I'll probably use something like Versell to deploy this. And so if we end up connecting that form to something, we would want some kind of server side uh, rendering so that way I can do server safe stuff. Uh, so right now I'm going to add those two things. And if you haven't used Aster before, it's a really simple framework that allows you to um, basically write in HTML, CSS, and JavaScript, but then when you need more power, you've got more power at your fingertips. Kind of any rendering option you want. um works great. So, let's do bun rundev and get that up and running and I'll come over this way and you can see um that we've got nothing going on except for inside here is where our Astro project is. So, we'll keep all the images and all this kind of stuff outside here. In fact, what I might do is just drag them here like this. Um and we're going to call this uh assets. Uh yeah, that's fine. So, we'll call this assets. And then I'll probably separate these out between SVGs. So, we'll call these icons. Um, that way I can just know where I'm importing stuff from. And there's a couple other things that I like to set up certain ways that I'll show you here as well. So, lots of SVGs, which is fine. Let's pull these in here. Um, and here. And then the other ones will just be images. Uh, yeah, that's cool. All right. So, we'll go images and pull these things all inside here. All right. So, just kind of getting organized right now. Um, all right. Next thing we need to think through, let's get I guess let's keep the design just in case we need those. Uh, I'm not going to do a whole lot with any of this. Do they give me text here? Okay, they do. Maybe that's worth saving so we can copy it. Don't need that. Let's get rid of all that style guide we have, which will be good. Okay, so next thing I'm going to want to do is probably take the style guide and use it. Where is it at? Right here. Uh, use it to set up the colors I'll need and all that kind of stuff. So, they give me uh different colors, the accents, um the type of weights, body, we've got a different one, icons. Okay, for the social icons, okay, there's a couple we can use. Okay, cool. Uh so, what I'm going to do is let's structure this page out. Uh generally in a lot of frameworks, Astro is one of these. Uh you can have like a layouts directory and we'll just call this like base layout. Astro um and get started with a basic layout. Now, you actually have one already here in the index. So, I'll pull this thing over. And you can see it's got a head uh where we can pass in dynamic data here in a second. And then we've got a body as well here. Uh Aster has this concept of slots. I thought I turned off all autocomplete. Um snooze just so I can kind of walk you through this. Uh let's give us 30 minutes and then wherever we're at, we can speed it up a little bit with autocomplete. Uh but here we're going to have a title and this is going to come in from this front matter. If you're not familiar with Astra, you've got this front section up here um where you can pull in uh items. So like title for instance from what's called Astro.props. So you can pass props into these components. In this case it's a page component and this will be passed in dynamically and then we can have it come in down here. Now you can actually type this as well. By default it includes TypeScript. Um so I can have something like props. We'll just call it that and it automatically assigns it here. We'll have title is a type of string and since I am requiring it here I'll have to pass it in. So one thing you can do in this case um oops one thing you can do is pass this in optionally and this is how you mark this in TypeScript. It can be string or undefined. And what I can do is just pass in a default if I don't pass something in. So we could say like dark mode uh landing page or I guess it had a name, didn't it? uh fire or something like that landing page. So, this will be used by default if we don't do anything else. So, just to see what this looks like, if I open up over here, localhost 4321, and we look at the page title, it says uh Astro. So, it's cuz we're not using it. Uh so, what we need to do is actually use this uh inside the index here. So, now that we've got the layout, I'm going to replace this with base layout. This should pull in from there. And there's a really nice VS Code extension for Astra that you should definitely be using. And then let's just put an H1 here that says hi. All right. And now if I come over here, you'll see it says hi and it says viral landing page because I haven't passed anything in. Although I can pass in a title if I want like something else. And that's what will be used in the page title. All right. Hopefully that makes sense. Uh kind of the setup the structure of everything. Let's move this all the way over and uh like that. All right. Next thing I want to do is think through some of the basic styling we'll need. Everything will eventually be dropped inside of here. Um, but the best way to do that is probably over this way. You'll notice we've got this navbar. Everything has a footer and then everything else kind of goes in the middle. And I'm assuming all the rest of this page content will be dynamic based on the page that people are on. Um, so that's what I'm going to assume. Uh, so let's structure it that way. Uh, so here we're going to have a nav uh right here. And then down here we'll have a footer. So we can add these directly in this uh section. Usually I like to keep like all the layout type stuff in the same area. Uh so I'll do like uh base nav I guess. Aastro and here we've got this front matter section where we can do stuff if we want. Um one thing to note is everything in the front matter is done server side or when you build. Um so this is all safe. You can do anything you want JavaScript in here. Um it's actually all wrapped in an async function. So you can do top level await and stuff like that as well if you're uh familiar with that. And then down below this is the act actual HTML. And this is built at buildtime or runtime if you're server side rendering. If that doesn't make sense. Um don't worry about it. We'll we'll get to that. All right. So we're going to have a nav. And right now I'm just going to say nav just so we know it's here. And we'll copy this over and do the same thing. Uh base footer. And here we're going to change this to footer. And this will be footer. All right. All right. So, let's pull both of these in over here. Um, so that we have this kind of structure in place. So, we'll have our nav that we pull in if it lets me. And then we'll have our footer we pull in. See if this one lets me. Base footer. Oh, I forgot we called it that. And base nav. Come on. There we go. Okay. So, both of these are pulled in. Base navnav like that. Um, you can separate these off if you want to like components just to keep stuff organized. Um, so now we've got these on every single page. Um, but yeah. All right. Next thing I want to do is add some CSS. Uh, so I'm going to create a new directory. Uh, we'll do styles. And then we'll call this like global CSS. And there's some basic stuff we can do. Uh, let's pull in after before. We'll do box sizing border box. Uh, I like to do padding zero and uh, margin zero as a starting point. Um, so let's at least get this thing in there. And in order to use this anywhere, you just need to import it into a page. And now this can be in a certain component and it will be scoped to that component. I want this on my wrapper so that it's global uh on everything. And now before we do that, I typically like to come into my TS config and inside this compiler options, which you may have to add if it's not there, there's a base URL that I'll set to this. And then I always forget this one, but it's paths. Um, and then what you're going to do is define different paths for um how you want um how you want to import stuff, your your aliases. And so what I'm going to do, I think it's like this. Oh man, now I'm forgetting where is um where's Copilot now that I stopped it. Uh instead of looking this up out of date. I don't know what that means. Stop it. Okay, cool. This thing should know what to do. Uh, that's fine. Okay, so it was an array. I should have just trusted my guts. Um, let's go here. And here we're going to say anything inside the src directory can now be scoped with this at symbol, which means as I move stuff around, it's just a little bit more dynamic. Um, that's what I get for not trusting myself. All right. Okay, cool. So, the way the reason I'm going to do that is because I can now come into my base layout here and we can just import. We're going to say styles. Uh, we'll do import. And now I can just simply use this at symbol and go straight to styles, which I don't know why that's not showing up. Global CSS. So now this will be imported directly and used on this page. And we can tell that because now something happened. I can't find it. Maybe I need to restart the dev server. So let's try that. That should work, I think. Yeah, there. So now you see all the padding um and stuff is uh gone. All right. So we'll also next need to think through some basic styles. These I would typically do as root declarations. Of course you may be using TypeScript or Tailwind or something like that and that's totally fine. Uh but what we're going to do is set this up side by side with a style guide so we can just grab the things we need. And I'll zoom out here just a touch. Um we've got all these navy a bunch of different navy colors. Um, so we'll have these as color declarations. I'll drop these things in here. Um, and let's come in here like this. Okay, cool. Uh, we're going to go navy. Actually, what I'm going to do is do color first, just so I kind of know what these things are. We'll do navy. And some of this might be useful to know, like, so I'm going to just drop this if I can inside here so I remember what this is used for. Um, all right, cool. And let's do the same thing here. So we'll do color navy and set those up this way. I'm not sure why these are so out of order. Um, so I'm going to change that, too. Uh, so let's drop this in here. Let's see. Um, so 950 we'll put top. Then we'll go 900 in a second. This is our main background. So you can declare these variables however you want. Typically if you're going to tokenize these, you want to set them up as like uh colors that could change. So like background background muted, you know, background 900, that kind of thing. And that way you can kind of port port these to each other uh when you need to. I'm not sure why I got rid of that. Um because now I don't remember what this was. Um so that's what I would typically do. So that's probably what we'll do here. 900. Okay, cool. And let's move this up as well. Uh, what am I doing here? That's not how CSS stuff is done. I'm just going to leave get rid of this so I don't have to mess with that. And we'll just look over at the style guide when we were setting this stuff up. All right, 800 testimonials background. We'll figure that out hopefully. All right. So, there's our basic colors. That took too long. Um, now we've got some accents. Um, so let's add these in here as well. Um, and I'll probably just set these as accent something so I don't have to remember what they look like uh when I'm setting them up. So, we'll say accent teal. I don't need to know that it's 200. Not super important for me. And we'll drop this here. Cyan, same thing. This actually might be a really good use case for some autocomplete. uh because this isn't super helpful for you to watch. Uh so maybe let's turn it on for this section. Not because it's hard, but because it's not particularly useful. All right, cool. Same thing here. Let's now grab our uh color white. That's fine. I think that's all of our colors. Um we've got some font sizes. So, let me do this. Let's come down here. We'll say typography and here we're going to say font family. We've got railway. Um we'll we'll probably add this using uh Google or asteris font uh declaration. So we'll do that in a second. Um so it looks like the font size for the body is 14. That's kind of small. I ain't going to do that. All right. So, we'll do font size um base and we'll do one rim and then we'll do large. Sure, that's fine. Uh we'll figure this out what it should be as we go. But let's let's have at least three declarations as we go. We're going to kind of guess on this because I don't have the Figma file. Um so, yeah, I think that'll work. Uh we've got two different weights. So, we could say font weight um 400 be 400 and then 700. 700. That's fine. Uh hopefully it's picking up some of this. I think just because it's in the same directory. All right. Next thing we'll want to do is add um the actual font families here. So we've got uh this railway. We've also got open sands. Now Astro has a really nice font declarations API font. Astro font using custom fonts. I think this is it. Um so what you can do is just simply add this uh font providers in your Astro config and just pull in uh files like this. Hey, there's my course. If you want my course on Astro, you're welcome to grab it. Um, yeah, I feel super lucky that Astro has included, let's see, guide reference. What am I looking for? Was I in the right place? I think so. There we go. Um, but yeah, you can just simply grab the font providers and then drop it in directly here. And you'll notice that it gives you a CSS variable. This gives you a bunch of helps like it intelligently loads stuff. Um, it ensures that you're only pulling the exact kinds you need. It means that every time your users go to your site, they're not pulling down fonts from Google, which Google actually knows who's coming. Instead, they're pulling them just from your your local download because it actually locally downloads it for you. Um, so let's grab an example using Google Fonts. Um, font source, that's fine. Font source will work, too. All right. So, this as our guide here. Uh, I'm going to open up my Astro Config. There we go. Um, and we're going to pull this in up top. Um, and we can just pass this whole thing in here like this. And there's a couple fonts we need. Let's remember what those are supposed to be. Um, Robboto. Oh, man. It's railway. Thought I thought that was one of them. Uh, so we'll say railway. Um, and we can pull it in from font source. That should give us everything we need. We can actually define different weights we want as well. If this thing will help me um if not if not then I can come over. Okay, there we go. 400 700 I think that's right. Uh, so those are the only ones we really need for railway and for open sands. So same kind of thing. So then let's also do the same thing here. Font source should also have access to open sands. uh like that. Font open s. Now, this variable is what we'll use to get it into our CSS. In fact, let's just let the docs guide us here. We're going to pull in this font component because I want this in the entire page. You'll do it at whatever level that the font would be available in. So, this would be a layout. Uh so, let's pull this in up top here. Uh we'll just say um types typography. That'll work. Uh we'll import font. And then you'll add this in the head uh where's this at? Yeah, right here. Uh with the CSS variable passed on as well. So we've got both of these that I'll pass in here. See, this one is railway and open sands. Perfect. All right. So hopefully that makes sense kind of how we got it in there. Now to actually use it in the CSS, we would just point the font family to the actual variable name. So we can do the same thing here. Um, let's have two font families. So, we'll say uh font family headings font family. No, get out of here. Uh, what was it? Now I got to pull this over. Um, let's simplify this a little bit too. Railway body. I think that's right. All right. So, we got that down. And then we can actually apply this uh like we would any other CSS variable. So let's come inside here. Font family body base color white background navy 7 950. I think that was right. Uh although I need to check now main background is 900. Okay. So come back over here and main background will be 900. Now if I come over here and we reload possibly. How did I kill my dev server? Let's reload this. Move this over to low. There we go. Okay, so now it's using all the different uh typography typography that I need, the background color, all that kind of stuff is set. Hey labelled, welcome. Thanks for joining. Doing kind of a basic Astro tutorial today uh using this uh simple landing page. All right, so we've got some of the basic structures in place. We could do a couple things from here. We could just start building. So I could go straight into to this uh which might be good. We've also um got different font sizes so we could actually set up like different heading components. But maybe for the sake of like just kind of getting to it, let's start building some stuff. So we've got features team sign in and pho is the name of that. So uh what we'll do next, let's get rid of this. I don't know if we'll need that again. Um we'll get rid of that as well. I want to come into the nav component. Let's build that out. So we've got a few things you might remember. Um and we can add them in a little array up here. So I could say like nav items. Um maybe I should turn this off now. Let's see. Features team sign in. Features team. Okay. So it's actually pulling from here. So just so I don't have to retype everything. Let's do that. So here uh we've got assets icon. And then there's several of these different icons. Let's see which one we need. Logo is the one. So we'll import logo from and see it's trying to do these relative directories. I don't really like that. So we're going to do assets logo SVG. Now, Astro has support for just pulling in these uh SVGs as individual components, and you can pass along props and stuff like that to them, as you need to. Um, but I can actually just drop it in like that. And this should pull in. Why is this not pulling in? Oh, because it's icons logo SVG. All right. So, it should pull in right there. And we can actually set all the normal things we would set on this. So, I could have like a width that I pass along. So, let's say it's only supposed to be 100. Then I could pass that on. Ooh, must be the way the logo is actually set up. Um, let's see. Logo.svg. How do I stop the preview? I don't remember. I want to see the code. How do I have this thing set to just preview? Well, I don't know because now I can't change it. So, I guess we'll have to change it with CSS. But, we can add a class to this for instance and say like logo or whatever. Now, I can al also pass along things like Arya labels and say that this is like I don't know if I wrote a logo. That's fine. Um, I might want to wrap this inside of a link tag or something like that as well. Um, but uh we can decide that later. Now, these items we can loop directly over here. We can take uh uh UL, which is what we'll want here. And I'm not actually going to put as little classes on things as I have to. Uh we'll take our nav items here. I'm going to turn off autocomplete so just so it doesn't get ahead of me and I can talk through this uh with you. All right, we'll take our nav items and we can just map over these. For each item, we'll just call I. We want to output an LI. And ultimately, this will have a link inside of it as well. Right now we don't really these obviously aren't going to point anywhere but ideally these would point somewhere and that would be you know the href. So let's go ahead and do that. We're going to take oops the i dot and it can just actually give us the typing directly here. Now you can import this as well if you want to uh in astro um we'll just drop it directly in here and then here we'll have the i do name right so it has all those and it should list those off for us here. Now you'll notice that we've got um no classes on any of this. One of the nice things about Astro is you can scope everything to a individual component if you want. So I can come inside here if I want. We'll take this nav and you'll notice I'm just doing top level nav here. And we're going to say that this we want this to be display flex and we'll say width. Actually I think we're good there. justify uh content space between and then we'll have align items of center. All right. So, this should space all that stuff out. And you'll notice if I look at the actual CSS here or the the declaration, it's got this data astro CD, whatever. That's because I've scoped it to the style tag, which means if I can find my styles, wherever those happen to be down here, uh that it's actually scoped it automatically based on this component, which is really nice. So I can overwrite it with a global component, but basically all of my JavaScript, if I have any JavaScript, all of my HTML and all my styling is scoped to an individual component, which means it's really nice to colllocate all that together so you kind of know what to expect um and where everything lives. Now, there's some spacing here that I don't totally know what this is supposed to be. We can change this in a couple different ways. Like we could do a padding around the entire site. Um, it looks like it's slightly different though. So, probably I'm going to do it per component because you see how it's like bigger here than it is here. So, that to me tells me the body should have its own padding and this can have its own padding. What this should be, I don't know. It's not super important. I'm not trying to get um exact representation. Something like that is fine. 1.5 maybe uh around the whole thing on mobile or desktop, whatever it happens to be. Now, I've got this logo itself, and I did add a logo class here just so I didn't have to use just SVG, although I guess I could have done that as well because this just basically dumps the actual SVG on here um and in the actual page content as well. It does it intelligently so that it doesn't like duplicate um that code uh if you have multiple people um whatever I'm trying to say. Um yeah, if you have multiple uh SVGs that are the exact same on the page. So, here I'm going to set this width to like 120 pixels, something like that. Man, this is weird how it's scoping. Whatever this logo file is. And since I can't remember how I'm previewing these, I have some Can I not just like I don't want to see it this way. Oh, there we go. Okay. Width. So, it has no uh box. What is What do I call this? Icon box, I think. 1440 4449 0. I think that's right. And now I should be able to uh except that's the wrong thing. So, let me steal this. Uh go into the logo file. Um switch to here. Drop this in here. And let's see if this works. So, 176 52. I think that's right. And now if I come over here and I set the width to like I don't know 50 pixels. No uh view box. I should just turn back on my autocomplete again. This kind of stuff is like icon box. That's what I thought I had. All right, let's What is going on with this thing? view box. Oh, it's the opposite. 0076. Okay, there we go. That's all I wanted to be able to set this dynamically. That's all we were going for. Um, these should have view boxes for all those. In fact, uh I'm going to I'm not in Let me open up a separate cloud here and just say like because that's not something I want to do with you. Add view box. Yes, I trust it. It's fine. View box to all icons in uh icons. Okay, we'll let it do its thing. Uh that's not something human should be doing. Okay. Uh so hopefully that makes sense. What we're trying to do is resize this logo. Um, and we can do that uh once it has a a viewbox on it. Um, all right. And we could do something more dynamic here, like we could set it at a certain width for mobile, like 100 pixels. And then we could come in here and just say at media screen. Um, yeah, what is this? Media uh width. I can never remember this. Media query. Uh CSS. I still have to look up stuff sometimes. Uh let's see if this thing helps. Media type. Yeah. Well, that's not what I care about. Um common breakpoints media. There we go. There's this new range syntax. I think should work in modern browser browsers, but we can do this. That's fine. Uh min width is what it was. Okay, cool. So, let's get rid of this. Um, so once it's at, let's see, smaller screen sizes, it should take on the smaller size. And once we get to bigger screen sizes, it should go bigger. Let's see. Is that right? And the reason that we have stuff is, let's see, max width. No, min width is is right. All right. So, that should be 600. And now when I go here, it'll go 50. Uh, I don't want it to be 600, but we'll do something like that. All right. Uh, now we've also got these items. And because we can just scope these things directly to the component, I could come in here with list style. Actually, we if we just do display flex, it gets rid of a lot of this. Um, so we'll do flex. And it doesn't wrap for some reason. So, we won't make it wrap either. Uh, and I guess we do need list style of none. And now we can space those things out. We've also got we could do some global decoration decorations uh declarations uh for this as well because most of my links I'm not going to want to have that styling. So maybe let's do that. Um we'll have like global well this whole thing is global so it's fine. Let's do something like this. We'll say text decoration. Let's not get rid of that. But uh we'll take our color at least set this to var of uh color white like that. Um, and then after I click on it, it usually will also change. So, we could change the active and that kind of stuff, too. Maybe at the very least, uh, we should declare a hover state. Um, that's fine. Something like that. Okay, cool. Um, this nested syntax is newish in in CSS. Um, it's been around for a while in SAS and other things, but um, definitely the way to go for me. Just be careful of over nesting. I think when I was first learning CSS a while ago, however many years ago that was, like I just kind of over nested everything and then it's really hard to overwrite anything. All right, so at least we have the basics of kind of what the design is supposed to look like here. These colors are probably a little off. I don't know. Um maybe they just had some kind of opacity on this. So we'll have like point I don't know nine something like 08 I don't know. All right. Now, on the nav in particular, uh, for these items here, I'm just going to do like any link inside here. Basically, we'll do uh font uh size. I don't think did I have a font size on stuff? I think so. Var. And this will actually pull in my font size. It should at least. Nope. Not. Okay, let's do small or these small. And then I need to make sure I have small, which I don't think I do. Um, so let's come up here. Font size small. And that's fine. All right. You see automatically adjust. And then I also want text decoration uh to be none. All right. So, we've got the header section good. Uh, which is great. Let's think through the rest of the section and kind of start to crank on this. Uh, hopefully uh let's actually double check that Cloud did its thing. Yes, do your thing. Um, and we're done with the snav component basically, right? Uh, it doesn't really shrink on mobile. Uh, it should all still fit. And if it doesn't, we can just change the size of the icon. So, let's do that actually because it looks like it doesn't quite fit. So, we'll go 50 here. Width 50. Oh my. This was supposed to be 600. There we go. 500. So, I think we're good here. like 65. Okay, cool. So, that should work for pretty much any screen size. Uh, great. So, next section we want to think about is the body and kind of how we want to break this up. We already mentioned like one section, two section, three section, four section, five. So, we've got five sections to build out. Um, and this first section is like a hero section. Now, notice the gaps between here. Like I mentioned, I like to kind of divide these things by um with a parent container. So, we would use uh grid parent and then space them all out uh depending what we need here. Uh, so let's close this down. I'm going to come over to my global CSS and set some basic stuff on my body here. Uh, so we'll do display grid gap of let's do something like two rim. That looks fairly big. And then we'll have padding here. And I'm going to do something a little bit larger than the rest of it. Although, you know what? Um, I think what we're actually going to do is put this inside of a main tag and then do this in the main. That way I don't have to worry about the way I set that up. So we'll do display grid. It already had that there. Yeah. Um, like that. Now, I don't yet have a main tag, but typically all the stuff inside this slot. If I've got a nav and I've got a footer, everything else should be inside of a main tag, and you just have one per page. Um, so once I do that, let's come back over here. Main, display, grid, gap, two, padding, uh, two rim as well, and it'll space everything out. Now, you've got the footer down here as well, which we haven't done yet. Uh, we'll get to that. But now, you see it's spaced out between everything. Um, I don't have to have padding up top and down below. We can space that out with another grid pair if we want. Um I can just use the padding in the footer if I want as well. So maybe let's do that. We'll do padding inline which is left and right in uh English languages or like right to left uh left to right languages. Um and then we can add our own padding on the footer itself. Uh so maybe let's do that as well just to kind of separate this all off. We'll say footer and we'll say padding and we'll use the same as we did on the nav bar. Okay. So this is kind of inset a little bit. uh but the nav and the footer are not. The other thing I'll want to do is space these things out evenly um to where the nav's always at the top, footer is always at the bottom, and everything else takes up the rest. Um so the way I would tend to do that is come into the body. We'll do display of grid here actually and we'll do min height 100 v height. That's fine. Grid template um rows. And what I want is to set it to auto 1FR auto. So now this is always going to be stuck to the bottom no matter how big the screen size is. Uh this will always be stuck to the top and then this will be this will take up the rest of the space and by default it flex it like sits to the top all the children do. Uh so I'm happy with that. Um kind of depending on what you want maybe you want this to be center aligned in which case you could um display uh let's see place content center and then it would be center aligned. Nope. Um items tail one messed me up. line items items. Come on. This is inside the individual comp uh the children. In this case, this would be a child. This is a child and this is a child. And you're saying like align it vertically center. So you could do that as well for like a 404 page or something. So maybe that's a better thing to do because as it takes up more space than it needs, it will automatically kind of move to the top of the page. So that's probably a better move. Uh the other thing I typically like to do on the body here, if you have like a really really big screen, notice as I zoom out, it just gets massive. So you want to protect against that typically whenever you're developing by setting a max width here. You could do something like 200 pixels and then do margin uh margin inline of auto. And now you'll notice like it only ever gets that big. So even if somebody has a massive monitor uh you kind of protect against that. And then most aren't going to be larger than 2,000 pixels. So you should be set there. So that's another little trick to kind of pay attention to. All right. Um let's next look at this section here. So we've got these items stacked. And typically whenever we have a stack, you'll notice like this spacing here is about the same as this spacing here. And it's about the same as this spacing here. So usually you have kind of consistent spacing patterns on a good design um some of these might be a little bit different. Um but it's fine. Uh so what we're going to do is create a little grid stack um utility class in CSS. So let's come down here. We'll have some utils. And here I like to just do like a stack. And then we could have variations of this. So we could have just a normal stack. So maybe that's where we should start. and we'll do display grid and then a gap of I don't know we'll do something like one rim and then you can have other stacks now um just to keep this separate we'll do stack sure large is fine um and the same thing we'll do display grid and then gap uh two something like that so I can use these just to stack stuff um and it's a global declaration so it's available in all my components so I don't have to retype this every time I want to stack it out and also if I want to change any of that spacing I can change it in one The other thing you can do is set these things as variables. A lot of times I'll do that, but for sake of time, we won't here where you actually have defined gaps between stuff. Um, just so I don't get too much in the weeds and we can get down to a decent time because I don't have that much longer and we haven't really done that much. Um, I'll leave it like that. All right, we've got layouts src. Let's come in here. We're going to have components and then I'll have uh a hero component um and here we want it to look like this. So we're going to pull in this SVG, whatever that one is. And then all this content. I think we've actually got some of the content in the index. So, let me grab this. Oh, like that. We'll get rid of everything we've done so far. Uh, that way we kind of keep track of stuff. Oh, boy. That could have gone better. Let's save without formatting hero. Um, so we got this top section. We're going to import that logo in a second. I'm just going to drop the rest of this stuff in here. And maybe let's actually pull up the design as well. Desktop design. Doesn't really matter. So, let's pull this one up. It's a little smaller. Split it with the hero. Where's my keyword shortcut? I don't remember. I guess I'll drag it like a K person. All right. Let's come up here. All right. We've got all your files, one accessible location, anywhere, whatever. Okay, these are all center aligned. I don't like that, but it's fine. Nobody asked me. Um, we're going to import um uh an icon. Where's our icon? Let's see. Curly mobile desktop. Okay, so we have different ones based on mobile or desktop. So, that's good to know. Uh, let's see. Access anywhere, security, location, email. Let's just click through these. Maybe it's an image. Illustration. Okay. So, illustration intro PNG. So, we'll use the same kind of uh item here or concept where we'll pull this thing in. Now, I got to close all this down. Uh here we go. Okay. So, we're going to import um we'll just call it like I don't know hero image from. And here we're going to go assets images uh illustration intro. Okay. PNG. And then we can actually use uh a native image component from Astro like this. And we can drop this directly in here. Now, this whole section is probably going to be in a header uh just like semantically. And then I'll pull in the image. Come on. Image like this. And then I can pull in the actual imported hero image. And it does a bunch of nice like customization for the image tag. Uh which we can look at in a second as well. But at the very basic, let's see if it pulls it in. Oh, turns out you have to link it. So, let's come back to our index. Astro and let's pull this thing in. So, instead of this, we're going to pull in our hero component like this. All right. And now this should be here once it pulls in. Okay, cool. So, we'll need to set some basic CSS styling here to make sure that we can actually see it. So, let's do some other resets. Uh, while we're here, I'm going to take the button and that's fine. Also take the font family and set it to inherit. Uh we'll do the same thing on like input. We're going to need that as well. Font family inherit. That's fine. Um these are like pretty standard ones you you want to do here. Uh text area. We don't have any of this. Oops. Uh site and that kind of stuff. But you'll also want to take the image. I typically just make these blocks so you don't have to worry about the there's like a weird little inline thing that happens if you're not used to that. And then we'll set a max width of 100%. Um, so that way it doesn't overflow the viewport like it was. Okay, cool. And now it's all squishy. Um, but here, this image right here, if we inspect this, we'll see some stuff that Astro already does. Um, so you'll see it adds loading lazy decoding async. Now, in this case, because it's at the top of the page, I actually don't want to load it lazy. I want to load it eager. So, we can change that as well. But we can get a little bit better even. Um, let's see. Let's come back to the hero component and we will go ahead and loading set this to eager. So, it'll load right away. Um, eager. There we go. Um, the other thing we can do is come over here and we can add an images thing. And there's a a couple things we can do, but you'll notice if I can find this responsive styles, uh, break points. Don't know where that's at. Domains. So, we're going to pull this in from somewhere else. Uh, what is it's layout? This is what we're looking for. constrained. And so, what this will do is it basically knows now to like how you want the image to be rendered at different viewports. So, it'll actually create your dynamic images for you. So, notice I come over here and all of these see image src. Do I have to restart this or is there something else I need? No, I don't remember. All right. Now, we're going to have to look this up. Astro image and then I'll stop um getting into the weeds of Astro and we'll just build this thing out at some point. I need to do that. Uh constrained. Okay. Generated images constrain. So this is what it will generate right here. Layout constrained. You have to set widths on it maybe I think is the issue. But it should do that automatically if it's in here. Layout property. where's the Astro Config? Oh, Chris, so much for showing you how this Oh. Ah, our image guide. Uh, where to store them, blah blah blah blah blah. Um, by putting them in the src directory, it allows us to like change uh the images dynamically like this on build astro.config. There we go. Okay. Domains, image patterns, remote. That's not what I want. Um, passer image service. Ah, dynamic. No. Using dynamic tags. Nope. Let's see if that worked. Um, maybe I just need to restart the server, too. I don't know. Oh, no. It was working. Did I just not see that? Yeah. SRC. It's been working the whole time. Cool. Um, so you see it has different images depending on the sizes. So, it's actually generating smaller images. And you can see that. Um, if I come over here, um, let's come over here in the directory. You'll notice the come on collections fonts something. Oh, by the way, this is what the fonts thing does. What am I looking at? Astro. Look how it actually copies the fonts locally here. So, you're not downloading them from an online source. Once you build this, it'll actually load uh, you know, put those files up on your server. So, it's just downloading from your own server. Uh, collections. Why can I not see whatever it's trying to do? Uh, maybe I need to build this. Um, so let's spun run build uh just to see the output. What? Oh, I got to go inside dark mode FM and then bun run build. Just trying to show you what this will output. Should have a dist directory. Okay, here we go. So notice we've got this Astro file that has our fonts, but it also has these different illustrations at different sizes or should Why am I not seeing this? Well, you see the fonts? That's what it's doing. And it actually converts them or uses a WFF2, which is great. Uh, like as the default. I'm not sure why those images aren't being rendered at the different sizes. Maybe I need to set widths on this, but that should do it automatically. I don't know. We're getting in the weeds at this point. Basically, I can do responsive images even if I don't um remember how to do it. Or maybe I just need to maybe I did need to restart my dev server. or maybe this didn't think didn't save and that was the issue. Um, but yeah, you see you've got all these different widths. That's what it should be doing. And now I think if I did it, it would it would show that. Um, so at each of these different sizes, it basically has different size images that it's rendered for you dynamically. Um, all right. Uh, let's come back here. why isn't this Yeah. Okay. Okay. So, now we've got the image in there, which is all we wanted in the first place. Um, and uh, let's continue on. There's a couple of things I want to think through here. We've got this button component. That's its own component. This component, that's its own component. And this component here is probably some kind of heading component. You've got a heading here. These are likely like um, subheadings like a heading three. If we wanted to, we could just do those bold as well. This is a heading two, heading two as well. So, there's a couple kind of componentized things we could do here. So maybe let's do that next. Um and we'll try to stay locked in so that we can finish heading. Um here I'm going to have different types of headings you can pass in. So this is a great um use case for typing this. Uh I'm not going to pass that in. We're going to have a tag. And this can take basically any of those. That's fine. We're just going to pass that in dynamically. in order to use a tag because you can't just pass in like if I come in here with tag like this and we just try to pull this in and do aster.props, you'll see it already was trying to fix it because it knows that you can't just have an HTML tag like this because HTML doesn't work like that. It'll actually pull in the actual tag uh like this tag right here. It doesn't pull into the dynamic tag. So, you have to actually use an uppercase tag. You can also rename it like this like con tag equals tag or whatever. Uh but now anytime you use an uppercase which is why all these components have uppercases this is why just how HTML works then it basically can dynamically render that for you. So we'll pull this tag in here and here we'll have a slot where whatever we put in here takes that size uh that item and then we'll have a class and there's actually a cool little thing called class list in Astro um that allows you to basically pass in an array of items and you can do objects inside of here. You can do a lot of cool stuff. So what we're going to do is have a default. We'll just call this like heading. I guess it doesn't really matter. That'll be our default. Or maybe we call it default. Um and then we'll pass in whatever the size happens to be. So this will be the other thing we have. Uh let's take size. Um and we can default this if we want to to something. Um but this size here we'll need to pass size. And let's just do three. Let's do large, medium. Not going to help me out now. And small. Uh like this. Um, and then I can pass this in dynamically. So, we'll just have the size. So, whatever I pass in will be passed in down here, which means I'll have those classes available to me. So, for the default, we're going to say, let's see if we can grab the font weight should be 700. Line height. I usually like 1.1 on these. Um, astro config changes not being saved manually. Made me feel like I'm not alone. Yeah. Yeah. I think the weird thing about my Astro Config is like prettier is super slow with this. I don't know if it's something I'm doing, but it always has been that way for me. Um, and so I think I've saved it or sometimes I have and it's just stuck spinning. Uh, but I'm glad I'm I'm here for you. Um, we'll go uh what am I doing here? Font family. Um, here I'll pull in my var font family. Uh, what it heading, I think. CSS. Come on. What is this thing called? headings. Okay, cool. So, that should pull those in. And now I can just have different sizes based on whatever it happens to be. So, we're going to only have three large. Um, and let's actually pull in the variance I had. Uh, so this was font size large. I think large maybe. Again, I need to see font size large extra large. Yeah, let's do that. So font size, we'll do extra large and then hopefully autocomplete can figure out the rest of this large in sure whatever. Um hopefully that's right. Medium it was base. Not sure why I did that but anyhow so now I've got this dynamic heading I can pass in for any component. So, if I come back to my hero, um, hey, awesome. Hope your study's going well and thanks for the upside sideways frowny face. Uh, oh, you fixed it. Um, so what we're going to do now is pass this in as a heading component. Heading, if it will let me. There we go. Um, that's going to yell at me for now because those aren't the right things. Uh, but let's paste this back in here. And now what I need to do is pass a tag. In this case, this will probably be my H1, I guess. Um, I don't have a class that I can pass in, although that's something I probably want to handle, but the size will be uh large. Um, and now you see it's it's pulling in right here. Now, there are other items I might want to pass in. So, for instance, I might want a class that I can attach to this. Um, so I could do that. The other thing I probably definitely want is some kind of uh rest property. So I can pass this in as rest and pass it in down here as the rest. So anything else I pass in uh should be connected to this. Now if you really want to get um good what you can do is take this uh top this types here. We're going to change this to an interface um props. We're going to extends um HTML uh what is this thing called? Uh attribute like that. and we just pass in the type it is. In this case, uh we'll just pass in like an H1. I mean, it could be any of those. It doesn't really matter. But basically, this means it will only take in the types that a heading can actually actively take. All right. Now, you might remember we had a stack um that allowed us to just uh space stuff out. We also had a stack large, I think, which is probably what this one would be. There's a couple other things I can do as well here. Like I could have a center if I want to center align this stuff. Maybe that's another global declaration. It kind of depends how you want to set all this stuff up, but like a center would probably be place items uh center. And that declaration will put everything in the center if I want. Uh we could also have text center. These are just like nice utility classes to have. Um text utils. Uh let's see text center align. Let's have like uppercase um for transform uppercase. So those are some like basics that usually people do. Um, I like to also do like text uh pretty because I usually like to use this uh lots of different places with this text wrap of pretty, right? Yeah. And then we'll do balance as well. Um, actually I pretty much only use those on headers. So let's do that as well. So let's come over here. That's another one I would typically add here is text wrap of balance. So that way it's always evenly balanced like that. All right, back to the hero. Now that we've got those helpers, we can also do text. Oops. Text center. And that should center align everything as well, which is what we want. Uh, now we need to move the rest of this into here like this. Um, and this is just going to be a paragraph tag. You can also make that your own tag, but then at some point you're just like reduplicating every single HTML uh item, and that seems stupid to me. So, I don't like to do that. You can do whatever you want. Um, all right. So, that's all center aligned, which is what we want. Now, there is like a max width we want on this whole thing as well. And here, maybe I just want to take like this header class and have a local declaration that's scoped to this component. Um, that's fine. Um, I'd probably do margin inline inline of auto, but that's fine. Something like that. So, you see it scopes it internally. Uh, is that the right font size for everything? I don't know. It's probably not, but I don't have the It looks like it it's not quite big enough. So, maybe this should be like 2.5. Oh, that seems too big. Let's do two rim. Um, space the rest of that stuff out. I probably also want to have like um line height here of like 1.4 as a good default for me for for body font. Maybe even 1.5 uh to space that stuff out. Okay, so now we've got a little stack section on mobile. It's the exact same. The last component we need to build and then we should be able to go a little bit faster now that we've got some of these components built out um is a button component. So we'll say button.astro Astro and you can actually handle multiple different types in here. So we could do a link or button depending on what we pass in. Uh but what we're going to do is have a couple items here. Actually, let's interface um props extends HTML attributes button. That what I want. That's what I want. Pull this in. We'll speed ourselves up just a little bit this way. Const variant rest. At the very least, we'll have a button. Um sure, that's fine. So, it's just copying what I did at the other one, which is fine. Uh, we'll have a variant where we have primary and secondary, which probably will just change the color. Although, do we even have two different colors? No, we don't. So, we don't really need this, but now you know what it would do. Um, okay. So, let's open up our style guide. I don't remember what the buttons were for. Oh, it was inside call to action gradient. So, we go from teal to cyan. seems like. Um, let's go back to our button component. So, we'll take our style and let's just default this thing uh to primary so we don't have to pass it in. And then I'll make it optional here as well. Um, but we can pass in an ID, anything else we want, which we'll probably use if we ever get around to that, which man, we'd have to really start working to get there. Uh, so default, um, the font family, that should all be inherited automatically. So, I'm going to take padding. We'll do something like one RAM and like 2.5 RAM. Um, let's actually get the button in there so we can see it. It says get started. Um, so let's pull this in here. Get started. Help me out. Come on. All right, there we go. We pulled that in. It says get started. You can barely see it. It's okay. Button over here. Um, some padding font size base is fine. Is that not uppercase? So, we'll do color. Now, here typically because like this could be a couple different kinds, I like to set local variables. So, here I might do something like uh button background. it probably would be gradient anyhow, but let's just call it background. And this is going to be our gradient linear gradient. Let's see if we can go to right. We're going to go uh color accent teal maybe to accentu cyan it's got a chance. Um and I'd also do the same thing here for the color. So button color would be white. Um border 9 is already on the declaration we had. This would be uh border radius. I like to do uh radius 100 view max. Uh right now let's get some background on here so you can actually see what's going on. So here we're going to need to use the background declaration since we have a linear gradient and that looks semi close. Background color will be the white. Cool. Um it's probably a little bit more like somehow 3 pixels. Um but I'd say that's like close-ish. It's even wider than that and maybe a little narrower. maybe what we can do is just set like something reasonable on this and then set like a width of 100%. And then we'll say like max width of something reasonable. Um, so here we can do a couple different things like we can do fit content um like that, but that will squeeze it back down again. I think can we do like a calc off of this? I don't actually know. fit content plus like for rem. No. Um, but we could do 100%. Uh, no, we can't do that. Hm. How do we want to handle this? Maybe. Let's just not over complicate stuff since I said we were going to move faster. All right. So, we at least have this component right here. It could take you somewhere. Uh, this could be, if we want, it could be an actual like link or not a link depending on how we want to name this. Why is this thing yelling at me? No, I didn't mean button. That should be fine. Um, so we could actually do that. In this case, let's not worry about it. So, we can keep going. All right. Next section. Um, let's get these components built out quickly. You might remember we had probably going to do a grid layout here, but it's a little stack with an icon. They're all centered. So, this should actually go fairly quickly. And we can do this in a few different ways. Probably the easiest way is just to keep it inside of one component. So, we're going to call these things like feature cards. Aastro. Um, usually these would be separate feature cards as a feature card component that then I would pull into a feature cards section, but we're just going to do it all together here. Um, all right. Now, just to show you you can have some flexibility here. Um, why don't we set up Chris, don't over complicate this. I don't have time. Um, I was going to set up a content collection uh just to show you the power of Astro on dynamic data like that, but I think for sake of time, uh, let's just import what we need. So, we're going to import whatever it is that we need. Let's pull up a design so I can actually see what this is. Um, okay. So, we've got these items here. Um, and over here, see, assets, icons. Okay. Uh, we're going to pull in files from Assets. Nope. Get out of here. Assets. Uh, icons. Any file. Uh, let's see what else we have. Uh, import. Uh, security. Icon security. Is that right? Looks right. Import access and real-time collaboration. Uh, okay. So, this is access anywhere. Trying to figure what these things are. Import access from access anywhere. And then finally, um, file, access anywhere, any file, collaboration, security, collaboration. Did we already pull that one in? Real time collaboration. Okay, so let's put these in the order. We need them just so I can keep track of stuff. Um, security you can trust. That goes top. Yeah. Nope. Second to top. Access files anywhere. I think this was up here. Then we have security. Then we have real time Um, then we have files. All right. I think that's generally correct. And what we're going to do is have uh an array of items where each of these things has a couple things. Um we do have a get over here our HTML page should be able to pull this stuff in. Access files anywhere. Okay. So yeah, all this stuff here real time collaboration store any type of file um stay. Okay, so that's that section. Let's get rid of this as well and we'll save without formatting. All right, back to featured cards. Um, what I want is title. which let's see if it figures it out based on the existing. Oh, I think it will. Sweet. Okay, perfect use case. File binding ammit. Okay, it has any type. Can I pull it in like a component? No. Oh, why why is it yelling at me? Security implication has any type, bro. I should know what type those are. It's importing it. Okay, it's fine. All right, so now we've got all those. So, we can just loop through them basically and have cards on these. Why are these struggling? It's values never read. Collaboration icon description, comma, that's fine. Icon. Why is this thing struggling? icons. Icon anywhere. Is this actually Let's just pull this in. Uh what is this? Access uh index to Astro. We're going to call this thing a featured cards. Isn't that what we called it? Yeah. Um and if Okay, so it can't find the files. That's the issue. Get out of here. Yes. Close that process. Why can I can I not find these files? Import complex. Oh, wait. What of security? What? What am I doing wrong here? What am I doing wrong? Can these things be Is that helping at all? No. What am I messing up here? import declaration conflicts with the local de declaration of collaboration like I am trying to link these two what am I messing up here so what it's saying is that this access um is conflicting with this so it thinks I don't understand what's going what's going on here all right we're just going to get rid of this um now this thing has no like icon for all these, but it's fine. Um, plus any type. Do you see what I'm doing? Am I doing something stupid? if you see what I'm doing, let me know. Do I just get rid of this here? It's something to do. Oh my gosh, I haven't named the constant. Okay, I knew it was something dumb. Uh, not even auto correct can save me. Const. We'll call this uh cards equals. Uh, okay. Now, what we're going to do is loop over this. Oh my. So, we'll have a section here uh where we're going to pass in uh let's actually change this heading. Oh goodness. Uh let's pass in um like a custom class if we want as well. Uh so we'll have to pass this in as we can pass this in as a class that we renamed a class name. Let's do that. A class class name. There we go. So this will be class name as well. And we have to rename this because class is like reserved keyword. Um, okay. Thanks, Leold. Thanks for making me feel better. I kind of feel like you're just saying that to make me feel better, but I appreciate it all the same. I'm going to take it. Um, we'll have a global CSS here where we're going to have another util uh where we're going to have a um SR only flag. And I'll just steal this from AI. Uh, should drop that in there. So that way we can hide uh like a header, which we probably should have in this section. Um, so what I'm going to do is pull in this heading. It doesn't really matter what the tag size is or anything. We could just like key features. Um, but the class I'm going to pass in, if we can make this thing smaller. Um, I'm going to pass down here. It says key features right now, but now I'm going to pass in SR only. And that way it will hide it except for screen readers only. And so it won't show there. The other thing I'll probably want to do, and I think maybe either of these work, but to be safe, I'm going to add both of them. Uh we're going to do a label, although you can do labeled by and point it to an ID of this header. Uh but we'll just say key uh features. And what that does is it sets this section off as its own uh let's see, where's my um accessibility um show accessibility tree. So you see it sets it off as its own section here, as own region of key features um which is helpful. So that now we know what this region is about. If you use the section tag and you don't do that, um, then it's the same as if you just used a raw div with nothing else. Raw div is not a sentence I've ever said. All right. So, now what we're going to do is come down here. We're going to have like a little like wrapper, I guess, is what we'll call it. And then we'll have our cards. Uh, is this right? Yeah. Cards map over each card. Let's see. We're going to have a class of stack. Um, we're going to pull in the actual icon. So, here I think we're just going to drop the icon in here. Right here. Um, directly here. Heading invalid components past. Uh, let's see what is it doing wrong. Title description. That should work. Let's get rid of this icon. Okay. So, uh, we could do it an image tag, I I suppose, but how do I dynamically pass this in? Man, I'm not remembering it off the top of my head. Can I like rename this thing as icon and then pass it in as an icon? Yeah. Okay. So, it just had to be a a proper uppercase one. All right. Uh, so that should work. This wrapper here, we'll need some help. Um, so here, let's have a style tag where we have this wrapper. Um, we'll display grid gap. That's fine. Whatever. Um, by default, all this stuff needs to be centered as well. Um, so center and then text center. I think that's how the design was, although we can check. Yeah. Okay. Um, and then we'll have like a max width on this wrapper as well, or I guess on the card. So, let's throw a card on here. card, which will also control this with the parent, but it's fine. We'll have a max width. Um, actually, I like the character idea. Let's do that. Ah, let's do like 40 something like that. All right, that's fine. Um, we can do margin zero or it should just be able to take my wrapper and like place items uh center. That should work as well. Okay, now we're going to have grid. We're going to have on media screen min width. We'll do like I don't know 700 pixels. Then we're going to do grid template columns repeat. So we're going to split it into two. What did I mess up here? Code template columns min width repeat 1 FR. What am I messing up? Uh because I did place item center. I think I need to do width 100%. Because it's putting all the No. Oh, Chris, what are you doing? Now we just forgot standard CSS. Happens to the best of us. All right. Uh columns. It's not applying that for some reason. That's why. Um it's a media screen. Oh, it's cuz I have it internally like this. Let's If I do this and then then we take the wrapper. Somehow that nesting was messing it up. Did I go wide? No. Okay. I don't know what's going on there. So, let's go as we were. I guess that's just cuz I forgot how to do the declaration. Okay. Um, so let's also set the max width here. Um, in fact, maybe if I do that, it will set it already. No, it doesn't. Okay. Um, so we'll do max width. And here, let's just do fit content. Um, that should work. Um, and then I just need to center align it. So, uh, justify if I content center or we we could do margin. I guess we need to do margin because it's the whole section. Um, margin inline of auto. Put that in the center. Okay. So, those should stack properly that way. Go like this. Um, and they stack properly this way as well. Okay, cool. Uh, we're getting there. Um, let's get a move on instead of me talking through everything. So, these two sections, uh, looks like we've got a little link icon, which is cool to know. I didn't see that before. So, that's another little component we can add. Uh, I don't think we added this wave thing, but for now, uh, let's just forget about it for sake of time. Um, all right. Let's come inside here. Future cards. We're going to have I got like 10 minutes. So that's why we got to start hurrying. Should have been all long, you know. What do we call this? What is this section? Um I guess it's like a CTA or Yeah. Oh, the CTA is at the bottom. So let's call this thing like info. I don't know. The Astro info section. Now we're just doing whatever we want. So, we'll have AR label like more information about Pyro. Now, we're going to have two sections in here. We don't have any um like helps here. So, we can just use a style tag. Like I don't have like a flex wrap helper. Although, maybe I should um just like a because we're going to have that in a couple different places. So, let's do that. So, let's come down here. We'll have um like let's just call it flex wrap. And here I'm going to say display flex flex wrap. Um and actually usually what I like to do is call stacks for grid and then flex wrap. We'll just have a normal wrap and then we'll have a wrap large which is that. Okay, cool. Uh so we'll probably use uh the flex wrap large on this. So let's do that. So I'm going to class FL or wrap large. So whatever is in here will be wrapped between those two. And we know that we have an image at least uh which I think should be stay productive. Uh so we'll pull this in. Uh import stay productive from assets uh images. stay productive something. There we go. Uh so we'll pull that in. Um we know we'll need the oops the image component from Astro Assets. Uh so let's drop this thing in here first. So we'll say image help me out. There we go. Class image. Don't need that. All right. So this should pull this in once we get it in there. Uh where's our index and we call this thing info section. Okay, cool. Um let's also grab from our index.html that section stay productive wherever you are. See how Pho works. Okay, so we can pull all this in um here like this. So, let's just jump this in for now. Um, I think this is our H2. So, I'll pull this heading in. Heading tag two. Size large. Stay protective wherever you are. Is it the right thing? Yeah. Um, let's make sure this looks semi right according to this. Yeah. All right. Um, now we'll probably need to add some extra stuff to the image itself. So maybe we should have um like a I don't know info image class. And here I'll have a style tag. Let's close that down so we can actually see what we're doing. We'll take our info image. Nope. What I want is um let's see on media min width. We'll do something like the 700 pixels. Again, you probably want to set these more predictably. Float right. Man, that's a blast from the past. Uh, we're going to do a flex uh grow of one. Nope, I want flex grow of one normally. And here we'll have flex basis of 48% because uh flex stuff is weird. Okay, so it'll be small until it gets here and then it'll split between the two of those things. We'll have to set um like a max width on this section as well. Uh, max width, we'll do like 800 pixels, 1,000 pixels, I don't know. Doesn't really matter. Uh, max MX auto tailwind. Stop it. Um, okay, cool. So, now it'll only go that big. And then this section should take up the section it needs. Uh, so we'll have it all in its own little stack. So, we've got a wrap large here. Now, oops. Now, what I want is all of this to be in its own little section. We're going to call this um stack. I think just stack. Uh we'll get away with that size. Um and this stack here, I can even like come in here and grab that as a class. Um or we can say um flex. It should grow no matter what one. Isn't that the default? I'm not sure why I put that there. Um flex direction. What's this bases? Um, we'll go back here. Flex. I don't think I then I even need to put anything on that cuz as it gets bigger, it should h Why is this not applying to this info image? Like it should only take up flex can be kind of weird like this sometimes. It's like half the reason why like these should be What am I doing wrong? Flex wrap. Let me make sure my global CSS is okay. The wrap flex wrap display flex gap. That should be fine. okay. Flex grow. What's the default for this? Like these should both flex shrink. All right, let's just set this to at uh 01. 50 and call it a day. See what that does for us. Um, same thing here. It's been too long since I've written like straight up flexes. Flex 0050. Um, and then let's set these both. Uh, what am I messing up here? Why am I making this so hard? Okay, let's just go display grid since I'm obviously not remembering how that works. And we'll get rid of all this stuff and just let the parent control it. All right, let's do that. Let's get rid of this wrap large al together. Oops. Um, we'll display grid. We'll gap um like two rim and by default it'll be like that. We're going to set it center as well. Um, can I do that here? I…

Transcript truncated. Watch the full video for the complete content.