 Hi there, my friend and friends. Thank you for coming back to join me for yet another video. And in this one, we're going to be taking on a little challenge because my friend Florin Pop has created this new site, iCodeThis.com, which is daily projects and little challenges that we can take on to try and build different stuff. And it tends to be smaller UI components and things that you can do in like 20 to 40 minutes, maybe 60 minutes for some of the bigger ones. And when you're trying to work on your skills and improve at HTML, CSS and JavaScript, it's nice when you can take on some smaller challenges. So I've already picked out this one right here, because it looks like it would be fun to make. And we're going to jump on over to here, which is what you start with. And this is kind of cool because we're in, we're literally in there. You push the start challenge and it brings you directly in. I just, the code is a bit small, so I zoomed in on it. And this is like a fully functional IDE in here, as we're going to see. So that's kind of nice, but we're going to delete all of the starting stuff that goes up to right there to get started on this. And we can start with this, with a nice blank file. And as you write code, it just shows up in the preview on the other side here. If you want to see what you're building, there's a little thing and I can load in the image. And this isn't like other things, you're getting a Figma file. You're just getting a static image that you're going to be basing everything off of. And it's the idea isn't necessarily to be pixel perfect like you might be used to. But it's like, if I go into these other challenges, like I can see the or the other solutions that people have made and they might have different colors and they might have animations as they load in and different stuff like that. So, you know, if I click this, you can probably see, there we go. We have a nice little animation. And so you can see what other people have done. And once I've actually submitted mine, I can also see the code of the solutions from other people. But in my case, because I haven't finished this one yet, I can't see their code. So we're going to get started on it and we won't waste too much time. One thing I will say is this is an older challenge. It's not today's challenge. And I only have access to that because I have the pro membership, but I'll talk about that in a minute too. But you can get a daily challenge completely for free if you do sign up. But let's get into how we're going to build this. And one thing I will say is I am Firefox because this looks like a nice use case for subgrid and it's something I wanted to try for a while with subgrid and I never actually got a round to it. So let's actually I'm going to do a main here and in the main we'll just throw our div. We don't really need the main, but we might as well stay sort of semantic. And I'm just going to call this class equals card, I guess, because I'm not original with my naming and I'm not really sure. Contact card, maybe I don't know, but there we go. So this is going to be the parent for this entire thing that we have here. And now I haven't planned this out. I haven't done anything. So we're going to see how I can tackle this and hopefully subgrid does work for this as I'm expecting it to. But we'll see because I think you could do this without subgrid using a pseudo element and using a regular grid to make it work really well. Because the idea is like you could do this in a lot of different ways, but if the content here gets longer or shorter or things change when it's responsive, you want to make sure that like the spacing and everything stays consistent, right? So let's do hi, George, you can contact us and then it has that. So we'll do like, I don't know, we'll just call it welcome. And then we'll do a start chatting. The nice thing with this too is because it's a smaller type of thing, I'm not too concerned, like I'm using subgrid because I can just experiment with new things. Hi, George, that will just be my H one, I guess. Hi, George. I'm not really sure if that's an appropriate H one, but hi, George. And then we'll do a paragraph. You can contact us whenever you need help or just curious. Now, this is one thing about, you know, I don't have to take the exact text or whatever, but I'm just going to write it all in. I don't have anything to copy and paste because we're just looking at JPEG basically, I think maybe I'll fast forward as I bring in the other. Hi, George, start chatting. I guess we're going to do this and we'll need some, so start chatting. We'll need some, oops, H two. Sorry about that. We're going to need a little bit. Actually, I wonder if I save the formats code. I'm not sure it doesn't seem to. So yeah, H one, H two, I'm not 100% in love with, but start chatting, then we're going to do a, I think I'm going to wrap all of this in a div, actually. We're going to do class is equal to, I don't know what, we'll figure that out in a second. The reason for that is I see like the space here and here looks equal. So we could use grid with just some gap on that to create the spacing around these elements. And then this I could treat as sort of this sub element that's inside of here because the spacing here is a bit more consistent. And I did a video recently talking about why I don't like using grid with margins all the time for spacing, but to me, this is like I'm breaking up components or different elements. I'm not having like flowing text. So in those cases, I don't mind doing that. So here we are going to need an image. So let's do an image. I'm just going to use, I think it's pravatar.cc. Let's open, is it pravatar? Pravatar.cc.cc not CSS, there we go. Let's just grab this example right there. We'll worry about the size after. So if you want to see what I'm getting, I just turn off my image and I can see what's come in. There we go. Perfect. It'd be, I think every time the page loads we'll end up with a different image. So that's fine. We'll just throw a paragraph here. That will be my name. That one is SC Walton, I think. Then we're going to have that little, we'll do a div of status, I guess. And then I'm going to put status and I'm going to put a data status is equal to active. And I'm going to write active here. We could probably do that whole thing with a pseudo element to actually use the attributes. This attribute could be used to populate that or populate a pseudo element anyway on the content property. I'll look at that, but I don't think it's easy enough just to do it like this for now. That's my div. And then, sorry, one second, that's this one. And then so after that we'll just have a button with a class of button that says send a message. Yeah, looks good. The next thing I'm going to do is, I guess we can jump on over to our CSS. Let's just make sure, yeah, every time the page loads we'll get a different image, but that's fine. I think everything we need is in place based on that HTML. So just we can do this. There's no wrapping on or less wrapping. So you can get a better idea of what I've put in there. Yeah, I think that's going to be good. We can always jump back. I know right now it's HTML, CSS and JavaScript in here. Lauren did tell me eventually they want to add a little bit more. Oh, and another thing I forgot to mention is you can time yourself on these as well, which is kind of cool, but I forgot to start the timer so we won't have a timer running. So let's just start with my body here. And on my body, I'm going to do a min height of 100 VH and a display grid and a place content of center. Just to get everything we need in the middle. We won't really, oh, we can see it is working. We're in the middle now. I think we can actually specify through Pravatar. I thought there was a bit more, whatever, it doesn't matter. Any image will work. Okay, so that's what it's looking like now. I said I want my card to use grid. And so let's do that. We're going to say dot card is a, whenever I do this as a challenge, I feel like I have to go fast, which is never good. Amzarin display grid. And I'm going to do a grid template columns, rows. I don't need columns, rows. So I want one row for this, one row basically this area that's overlapping. And then I want this bottom part here. So we're going to have, do I even need to specify or repeat, free auto? I don't even know if I need to specify them to be honest. And then let's just do, what did I call the two sections? I had my welcome and my start chatting. So let's just give those a color welcome. Background will be light blue and my start chatting. And this is just like proof of concept right now. So I can make sure that my idea here is even going to work. Let's do coral. I think coral is kind of a nice color. So my welcome, my start chatting. So let's go and actually take a look. So we have it like that now. And what I want to do is, let's go look at the image again for a second. I could do this with grid template. Okay, you know what? Just because I'm already using grid anyway, let's do a grid template columns as well. We're going to do a, it looked sort of like two RAM will say it's, I don't know, 20 RAM and two RAM. These numbers we can modify a little bit later. So my welcome is going to be grid template columns of one over negative one. So it's going to go from the right all the way to the left. Oh, grid column like that. I'm not setting up a template. So it goes all the way across. And my start chatting here will be a grid column. Of two over three. So it should start, there we go, just like that. Perfect. Now what I want is this blue background, as I said, to sort of drop down, right? So this is where we're going to say, yeah, we're going to do a grid row of one over three. And I'm choosing one over three. Grid row one over three should have changed how that looks, but maybe, oh, and then here let's do a grid row of two over three. Now, there we go. Now they're overlapping, but not how we want them to be overlapping. I have my dev tools just off screen here. And let's see if we can figure out, there's my image. So if I turn my grid on, so something's not working right. Oh, I have the grid row three and the grid row three. That, Kevin, that should, there we go. That's more of what I wanted. But obviously we now run into this problem with the text here. And this is where I'm hoping this is going to work. So let's come here into my welcome. And in my welcome, let's add in a div. I'm just going to, we don't need anything in there. I just want to grab that div and bring that content inside of that div. And the reason that I want to do that is by having the div and then having that nested inside of there, what we should be able to do is my welcome is going to get a, trying to think the best way, I guess we'll come here and just say display grid. And then we can do a grid template rows of subgrid. And is it going to work? It worked. Yes. So this is really cool. And yeah, okay, awesome. And this is one of the reasons I'm so excited for subgrids. I'm going to keep the dev tools off screen, but I'm going to turn on my line numbers. Basically what's happening is because the grid template rows are a subgrid now, we have the one, two, three, four. I'm looking at the pink ones, but the one, two, and three here are being shared. It's like the parents numbers, one, two, three, four are being shared within here now. So this content, which is inside of this div here is living not on the welcomes grid basically, but on the cards grid. And it's taking up that cell right there. So what we could also do, I didn't even think of this, but we're also going to do a grid template columns of subgrid. Oh, this is fun. And then by doing that, the, we're going to say welcome, div is going to have a grid column of two over three as well. And then it's going to keep those columns that are there. So if we turn that grid back on with my inspector, there's the grid, and actually let's just turn the subgrid on so we can see it. So it's living within that subgrid, but it puts it onto the cell. But the nice thing with this, which is an improvement over like other solutions like this is let's just say I added another paragraph with some lorem, just a little bit of extra text in here. That has complete control over the cell now. So even though this is like nested one deep away from the parent because of the subgrid, subgrid items are living basically on the parents grid itself and they influence that grid. And that's why this is really good because if we're trying to create something like this, you could have that set up and you can have it work perfectly for two lines of content, always no problem. But as that content would grow, you could run into problems or it would just be like the spacing. Anyway, I think it would be a little bit more of a nightmare. The only other solution I could easily think of would be to use regular grid and have this as a pseudo element, which would 100% of work as well. But, you know, this just avoids having to do the pseudo element or anything. So I'm super happy with, I wanted to proof of concept that to make sure it would work and now that it does. And also really nice because they're sharing the grid, we don't have to worry about like padding numbers and trying to figure stuff out, they're just lining up with each other. So I'm using the PowerToys color picker here, which is Windows PowerToys if you want to look into it, which is really nice because now what I can do is quickly come and set up my custom properties based on the colors that are in here since we're just working from a static image. So let's just do color. We'll do a primary. We'll have a color secondary. We'll have a color neutral 100, which is always my white and then a color neutral 900, which is my darkest color in general. And I think that'd be it. So I'll fill these all in and I'll see you in just a second. Awesome. So there we go. We have the colors are set up as custom properties now using that eyedropper. Really useful if you are on Windows, I strongly recommend looking at PowerToys. I'll link it in the description. So we have that. So that's cool. Now we have to use those colors and we could set up a gradient because both of these do have the same gradient. So I didn't think of that, but it's probably useful to do something like that. So we could just do gradient, gradient. And you know, this is for again, a small project like this one. It's a lot. I just like doing, I'm not too worried about my naming I should be saying. So that's my color primary and then my var color secondary just like that. And it is at a bit of an angle and this will probably end up getting changed. It looks to be about, we'll try anyway, 45 degrees. And we'll see what happens. That seems to have broken. Can I not do this? Okay, we'll do it like that then. I think it would have worked anyway, but I just put that on multiple lines to make it a little bit easier to read. So let's turn this off for now. The two actually look like they had different border radiuses and I'm gonna fix this blue thing to pull it up but we'll do that a little bit later because I'm gonna change my template rows here let's get some of this styling in place. I never did like a reset on anything but I think we'll be okay not to bother with one. We'll see. I have to get some font families and stuff here too actually. So body, let's do that here. Font family, I'm just gonna do a system UI because I want something that's a Saucerif. And okay, we'll leave it like that for now. We obviously need a bit more styling. I just wanna look here. Everything is centered on the entire thing. So we might as well do a text align of center just on the whole document. Cause why not? There we go. So yeah, we'll bring in, that's my card. My welcome has that background. So it's gonna be my bar gradient which doesn't seem to want to work just for fun. I don't see why multi-lining that would be in. Oh, should I not have? Oh, that wasn't actually breaking like that. Okay, there we go. That was because of the word wrap. 45 degrees, color primary, color secondary. It doesn't like that, why not? So in these cases, I always come into my DevTools to try and find out why something's not working. So that would be on my welcome. I'm probably doing something silly. Oh, I know why. It would help if we did this linear gradient. That would definitely help. There we go. So maybe it would be negative. I'm really terrible with the gradients and actually what you should do. Cause if we look here, we're going from the blue to the purple. What I should do is just use my DevTools cause I never know what angle to pick. So if we grab that in my DevTools we should be able to find, oh, I can't see it cause it's there. Cause usually you can play around with your gradients. I wonder if I can play with it here. I can, perfect. Oh, it's not. Is he gonna let me get the gradient, the angle? Okay, it's not. I'm just trying to think negative 125, 55, 95. Negative 230. Okay, I mucked around a little bit there and it seems negative 250 works. I'm sure there's a positive number you can get there. If you know a better way to get gradients in the comments to know where they're going. I know that I can also give like two bottom left or two bottom right. I don't necessarily want to do that cause I don't think we want it to look like that in my button. So that's the main reason I've avoided it there. Just because I think it's, we want it to be at an angle but not going right to the bottom corner, which is why I'm sort of playing with this a little bit more. I wanted it at a slight angle like that. And then the other thing we have this, we'll do color here. We'll also be my bar, neutral 100. So it's the white color. The font sizes seem small, but yeah. The high George is obviously a lot smaller. I used H1 as I said, I'm not super happy with that. I'm just going to actually give this, I don't know what else, I guess it's a paragraph, I don't know. I'm just trying to think semantically, but this could just be like, hello, does that make sense? It's terrible class naming here, but we're just trying to, I'm just so happy with the sub grid thing working that font size is like 1.25 and the font weight is 400 as well, probably. That looks a little better. We definitely have a little bit more padding on the top as well, but overall I'm pretty happy with how that's looking. And again, like the sizing and stuff, like if you make it bigger, you get to your bigger image and stuff. So again, we're not after pixel perfection. So I'll leave it like that for now. We're also going to add in here a border radius, which will be, I forget if this is the bigger one or smaller one, but we can always tweak it a little bit after. Okay, so that's okay. Let's just look here at the spacing. So we have about the same space on the top here as the bottom here, because of that, and because the spacing is here, I think we're going to put that here. We'll do a padding block, which is the top and the bottom. In this case, let's just try to rem and see what happens. So it's a little bit big. Here we go. Cool, I'm happy with that. Now we can come down to the start chatting spot. So that has the background no longer like that, but we'll do our var neutral 100 on that. So it's white. And just so we can see it a little bit better, I will put the box shadow. I'm not going to put a nice one right now. I'm going to do a 001 rem and use black, just so I can see where the shadow is. And it highlights my element. And then I'll come through, because the shadow is really subtle. And I just want to be able to see my div a little bit nicer. So we're going to do that. And yeah, this one has the bigger border radius and this one's border radius looks a little bit smaller. So start chatting, we'll get a border radius, border radius, we'll do like a 0.5 rem on that one. Okay, come back, start chatting looks okay. Obviously the image is a problem. So start chatting and we can choose our image that's in there. This could have a class on it or whatever, but you know, this works as well. People are scared of doing stuff like this because it's like you hear use classes for everything, but like I'm just, I'm choosing my image that's in there and it's going to be the only one that's in there because it's just for this little section. So, you know, maybe if it's, if you had obviously something like this would be part of a bigger system. If it wasn't just this little challenge we're working on, then naming conventions become a much bigger thing. You wouldn't call it start chatting probably. It would probably have a different name for whatever. I'm sure you'd reuse this in other places, but you could still probably get away with something like this. Though you might just have an avatar class that you can use across a whole bunch of different stuff as well. So it depends. But let's do a, what do we want to do on this? Max width of, it's pretty small. Probably smaller, yeah. We'll do like a six RAM. We'll do a border radius. Whoops, not the key I wanted to push. Border radius of 50% to make it a circle. It's a little bit annoying the image loads in every time, but it's just part of how things work. I did mention that we had, this is the class I didn't know what to give it, right? I don't know what, like a good name. And it's just like barely escaping me because I want like the name for this thing here. And I'm sure there'd be, we'll do like rep because it's the representative that you will be chatting about. Rep info, we'll call it. Right, it's the person that we're gonna be talking with. So we'll choose that rep info. And for that, actually the first thing I'm gonna do is choose everything in there and just give it a margin of zero because I didn't do that off the top. I didn't do like a reset where I margin zeroed everything because I didn't really feel the need for it. But in this case, because the spacing and everything is different, we do, you know, there is basically no spacing here. So I am gonna put that in there. So we have start chatting, the image is going to be there. So then I did say, we're gonna say, sorry, grid column. I'm gonna come here and say it's a display of grid as well because I, as I mentioned earlier, okay, we're gonna do it anyway. This is, I talked about not using grid. It actually, it is sort of stretching the whole thing. So maybe we can stick with that because there's always these downsides of using flexor grid to add spacing and this is one of them. I might actually change this to something else but we'll get there in a second, grid. So let's just do a gap of like two rim and it's gonna get a lot of padding. And I'm gonna bring the padding up here with my background padding of like, hmm. We're gonna say it's basically the same spacing. So maybe we could say it's gonna be two rim and then on the sides, it looks a lot bigger, almost double the bottom actually looks really big too. So we're gonna do two rim, four rim, four rim. So it's two on the top, four on the sides, four on the bottom, not bad. There's too much on the top but that's because this has a margin on it. We wanna go to this tab, not that other tab. So what we wanna do there, that's my H2 because we could do this sort of the same thing. So if there was other content or it's not the H2 or whatever, like here I did margin of zero and everything. So I could do the same type of thing of start, chatting, star. And this is where you go like, maybe you just wanna take off all your margins and add them in where you need them to. That would obviously work as well. Which, okay, that worked now. And the reason that we have our spacing here is because it's our gap, right? So if I did a gap of zero, this all gets much more stuff together. But the space on the top here looks like it's about the same space there. And then this bottom one's obviously bigger. So I think the two REM does make sense. So we get two REM at the top, two REM, two REM. And then we get that four REM on all the other sides. I feel like that's looking pretty good. The other thing, I'm gonna come all the way back up to the body just cause I would assume it's not local to here. We can add color right here. Color is my var neutral 900. It's actually a really dark blue rather than a black. It's hard to see a difference, but that's okay. The name of the person looks really similar. The start chatting doesn't, though. So that was my H2. Should I give that a class? Again, it's a little challenge here. I don't wanna worry too much about naming conventions. So let's just say font, actually, let's come back here for one second. The high George and the start chatting to me look the same. And that was my hello. Maybe this could just be card heading. And by doing that, what we could, cause this is sort of like a big card and then a nested card almost. So I think it makes sense. Class is going to be equal to card heading. It sort of makes it a little bit more generic and reusable. And we can use that class on the H1 as well. And this is why relying on inheritance is nice cause I'm getting the color from, this is getting the color from my body. And then this one, I used a color white on the whole thing. So I don't have to declare it here. We can use one class to do all the styling and then rely on the second class to come through and just set things up to look the way they look. Looks a little bit heavier. I did font weight 400. I think we're gonna go with a 500, which because we're using system UI, I should be able to. Doesn't look like it's working. There we go. I think we'll go with that. Cool. SE, the name, I didn't change the font size for either one of these. This one looks like it's slightly larger. But I'll just leave it like that for now, but I will do this active one. Cause that one definitely, I did do name. Okay, we can do name and then I have status. We'll do both of them. They're both inside the rep info. So we'll do name here, which would be a font size, something like this. It's not very much bigger. One, two, five, rim. And then the status, not status. We're gonna do a couple of things here, but let's just do the font size looks small. So I'm gonna do a 0.825 rim, which is tiny, maybe a 875 would be better. The color was also, I'm just gonna lower the opacity. Not always the best choice, but I don't have another color to use. And the color here is definitely like a little more faded out. So I'm gonna go with that. I'm gonna make this a bit bigger. Again, we'll do a nine, two, five. It's not that much smaller. So I think nine, two, five should be fine. We have the lower opacity. We need the pill shape on it. So we can do a, for that is a border radius of 100, just make it a really big number and it will work. Don't use percentage. Any big unit other than percentages will give you a pill shape, but we won't see that. So we're gonna add a border of one pixel solid and we'll just come in probably like a, I don't know if we'll try that and see. Oh, that I was going the wrong way. I wanted lighter, not darker, but because this is a code editor, I can just come in and grab a color. I should probably have that as a custom property, but not the end of the world. So we can see it's working. The parent is a grid. So because the parent is a grid, I can come on the, this is a child and just say align self center, not align self, justify self. And this is something you can't do if it's grid. Of course, just T, justify self should work, right? No, justify a line. There is a way of doing this. Justify self center. It's not a grid item. Oh, I didn't make rep. That's right, it's not a grid item. Okay, so you could make it a grid item and make it work. I just assumed it was, but I forgot that we had the nested div inside of there. So the other way we could do the same thing, which is probably a bit easier, is we could say a width of max content. So there won't be any line breaks because I'm gonna add something to this. So it's as big as the text inside of it and then just a margin in line of auto. So it's basically margin left and right of auto, but it's a logical property. So it was a vertical writing direction. We wouldn't worry about that. And then we will come in with some padding. So we can add the padding here, padding of like 0.25M on the top and bottom, maybe 1M on the left and the right. It's probably too big. I think the font size probably was the smaller one, eight, seven, five. And then that could be a bit smaller and a little bit smaller. There we go. I think that looks a little bit better, maybe even smaller here. Cool. Now we need that green dot. And for the green dot, you could have different statuses. So we're gonna have a status and that's why I use the data attribute. So we'll do a status before because the color I think is coming on the left side. So it's coming before the text that's in there. So we can do a content of nothing because there's no content. And this is just a visual thing. So active says what it needs to say. So the color isn't something we have to worry about the accessibility on in terms of like conveying information. Like we're not adding extra information here. We're just sort of duplicating the information we have for the active in a more visual way. So we have that, we have a width. Or you know what? I wonder if I can do this. I don't think it's gonna work, but we can try. Let's just see what happens with of 10 pixels. And then background is red. It's not gonna work yet because we're gonna need to throw a display of inline block on that. It has the width, the height didn't work. So I can do 10 pixels and it should show up. So one thing I'm gonna try instead of setting a width I'm gonna try doing a one X, which is the X height. And then do a aspect ratio of one over one. And X height is the height of your lowercase letters. So it's the same height as like the letter C there. But we'll try another one. I don't know if this has browsers for yet. We're gonna find out LH, which is line height, not active. I think there is, I think it's in Chrome maybe, LH we can use. We can't use it in Firefox, but we can't use subgrid. So anyway, we'll just do one M. See, it's a little bit too big, which is the problem. I don't think we have a cap height, but something like that should work. And I did this as inline block, but I'm actually thinking it would be easier just to do my status is a display of flex instead. Then we can do a line items center. Perfect. And then instead of worrying about display inline, we probably need that anyway. It's just, it could be a block instead. It doesn't really change. No, we don't need that. It was still there, right? Yeah, because it's a flex item now. The advantage with this is then I can just use my gap here. One rim. Ooh, that's too big. What's one M actually? So it's the same with the font size, still way too big. Point five. Of course, the color is not bad. And I didn't get the color. I probably should have got it, but we'll just go with lime green. So we have a color, lime green there. And then the border radius to make it a circle of 50%. So that's way too big still, right? Well, maybe it was okay. And I just have too much. Oh, it's the gap is too big still. It was a pretty small gap. And I do think it's a little bit too tall. We could muck around with that for a while, but I think that's okay. And maybe this is like a three, five or something. There we go. That looks pretty good and nicely balanced. Perfect. So start chatting. The image is a little bit problematic if you have a white background, but normally it won't be. So we just need our send a message thing, which is my dot button. I'm coming up because it's like a generic class for me. So I just have a habit of putting them closer to the top. So, oh, you know what? The status, I just realized the color I put here. I said I was gonna mention this. So the background, we could have a default background color on there, but what we could actually do, yeah, you'd always have one. So I think like if you had a status, you're always gonna have either active or whatever. But what you do is you do status, and then with our attribute selector, data status is equal to active. There we set the color. And even we could do this as var status color. And then you could give it a fallback. So like something shows up if there's no static. And because my opacity is lower on the parent, it's not pure black. So that opacity thing is definitely not the best way to go. But then we could say that the status color is the lime green. And then if you had another status, status is away, maybe then it's a yellow type of thing. That's really too bright. So you'd never really see that. Let's go more into the oranges, right? So you could have several different statuses, maybe a ways even gray, whatever. It doesn't really matter. But then the data status is really easy to update with JavaScript. And then if they're away, it changes the color of it. And you're not worried about classes because one of the classes, you have like an away class and a, what is it in a way class and an active class, it's hard, you can't really, you're not toggling classes so much. You're like adding or removing classes with JavaScript because you could have both of them there at the same time, which would be problematic. Whereas if it's with a data attribute, you're gonna switch what it is, right? Sort of like an ID or something else, you can only have one on there. So it's a little bit safer in that sense. And I've had people ask about performance when it comes to data attributes, your selector performance is not something you wanna worry about. Don't worry about it. Yeah, and now we can come up to that button that we talked about, so we're almost done. Nice, fun one to work on. And so I like about these, it's not too long. You get to like muck around with a few things that maybe you wouldn't have tried. We still have to fix that box shadow too, but we're almost home free. So on this, you could do the, I'm a fan with the data attributes for styling buttons as well, but let's come in and just do one generic button. Let's come take a look at what it looks like. So the background will be my var gradient and then the color of it is my var neutral 100. Border is zero, border radius is, I don't know, 0.25, something like that. Their font size is a little bit bigger actually. Font size 1. We'll do go with a 25 RAM maybe, way too big. Okay. Even that looks a little bit too big, zero five. I don't know, it was definitely bigger than the default or maybe it was inheriting, I don't know, whatever it is, it looks a little bit better now. We could also add the cursor pointer on there, which I got the right way around. And then if we have a button, we should probably have a button hover and a button focus. And let's just say that when that happens, the background size goes to 200%. And here we'll do background size is 100% and we'll do a background, sorry, a transition of background size over 200 milliseconds. And it's not the greatest because of the way the gradient is. We could do a little bit more with that. We could do, we have a shadow coming in. So we could also do a scale of 1.05 or something and scale is its own property now. So we could do that. And so we're transitioning the background and the scale by 200 milliseconds, let's say. And maybe it gets a shadow or we could just scale 200 ease in, just so it's a little bit more obvious. If we tab on to, we get a tab style. Oh, and I'm Firefox. Firefox has changed away from the dotted line for their focus by default, which is kind of nice. In, out, we could come in with a better transition and stuff, but maybe this one's like 250. It could probably come up with something better, but we'll stick with that. And then we'll also come in on that box shadow that I mentioned, which is terrible. Right now, I just have to find it. That's my border, control F. We do have box shadow, there it is. RGB 000 over 0.1. And then it looked really big. Three might be too much. Oh, it doesn't look too bad actually. Maybe it's even bigger than that, which is a huge shadow. But there we go. Something like that, I think looks not too bad. It might not be 100% perfect, but again, that's not exactly the goal with what we're doing here, since we're just working off a static JPEG anyway. But if you do want to get things where you're getting a Figma file and trying to follow things a little bit more closer, if you do sign up for the pro membership, they do offer that as well. So if we go to their site, and actually I should submit, but if I go to the pro challenges that are here, right now they have three, they're definitely planning to add more. It is a new service, so you get access to full things, including being able to get like the Figma file and everything, which is pretty cool. So if you're after bigger designs as well, it is an option. And like I said before, with the pro one, I do get access to previous challenges as well. So if I go to view daily challenges, I can go through all of them and see everything that's there and they're always added. But again, you can sign up for free. And if you sign up for free, you get access to today's challenge and you can work on that one, submit that one and all of that. But if you would like access to the pro one, you can use the coupon code Kevin to get 10% off. That will be through the end of the month. So it's only about 15 days left that the coupon code works. So if you do decide to sign up, you're also supporting this channel at the same time. So thank you very much for that. They also have PPP, you can't combine the coupons. So the PPP coupon might be for a little bit more than what they're offering for this. It's not a monthly subscription, it is a lifetime purchase. So you get it and then you have it, which is kind of nice. So yeah, there is that option if you are interested in it and getting into that, but the daily challenges are always there. And as I said, once you're done, you can submit them. And when you submit it, you can start another one or you can view the other people's ones. And by viewing the other ones, as I said before, you see something that was cool. You do get access to all their code and all of that after the fact, which is kind of fun. And you can see that people have taken different approaches to do the same thing. And there's different looks and different styles and all of that, which is also really cool. But while it's nice for that, this is also just a really fun project and it's probably something I'm gonna use again in the future for more YouTube content, because it's nice when I don't have to think about the design, if I need to practice something or wanna make some content for my channel or whatever, just to have a whole bunch of designs ready that I can just sort of pick up and try something out. And again, that they don't take too long, I really like that side of things as well. So yeah, I hope you liked what I came up with. I hope you liked that little exploration of SubGrid because I think it was a nice solution for doing this type of thing. And I'm really excited for when SubGrid finally lands for everything else. And with that, I will leave you by thanking my supporters of awesome over on Patreon, Andrew, James and Rico, Michael, Simon, Tim, Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner on the internet just a little bit more awesome.