Live CSS: Testing my CSS skills

Good morning. I hope you're doing okay today. Uh I got uh news that this webdev daily project that I've used before in the past added a new CSS mode. And so I figured I'd take a couple minutes today and just try it out. So we're going to try this out live together. Hope you're doing okay today. Uh thanks for following along if you're watching. Um I figured this is the most live or the most real kind of coding I can do is just coding uh live. So hopefully you're ready to go. I'm just going to jump straight in and we'll look at this together. Uh WebDavidy is this project here. Um it's by a guy named John that I've done some stuff with before uh just like streams and stuff like that. Um, but to my knowledge, uh, this is fairly brand new. In fact, I think if you jump back out, uh, kind of to the main, uh, CSS daily section here, you can see there's just a few challenges. They also have, uh, other challenges here as well for building like full UIs. Um, the difference here, I think, is that there's some kind of uh, check on like what your score is versus. It's like a CSS battle kind of thing. Um, but they're more realistic designs. Um, so figured I'd just walk through it and kind of give you my thoughts as I go. And uh, yeah, hopefully this is enjoyable for you. But we'll jump straight in. I, as so far as I can tell here, it looks like I haven't looked at this besides just what we got right now. Uh, but you've got all the HTML that's set already, so you can't touch that. Uh, so it's CSS only and they give you all the the things. Um, so any we're just going to jump in and see what happens. So, uh, let's start by adding, I guess, on the HTML here, which we're going to see how autocomplete and emit and stuff like that works here, but, uh, let's do background. Okay, cool. Um, nope. Background color. I guess I can just type at this point. Okay, cool. So, you can pull in all these as well. That's nice. Um, so we can at least get some of this started the right way. The only hard thing is like I would love this to be split so I could actually see the HTML or at least have the option to split this. Um, looks like I've got a timer going to which I didn't know. So, good to know because now I have to flip back and forth between these. So, we'll do body with some padding which I don't think we've got any variables for that. So, I'll just have to kind of guess. Um, we'll do padding. I don't know. Two rem display grid. Don't like that. display grid. So, it doesn't have emit. It looks like it's just like autocompleting. Or maybe I'm messing up emit. Uh place items center. I think that should work. And then here, let's have a background uh color. Can I do it like this? Yeah, hopefully. Color card maybe. All right. So, we're at least in the middle. I don't know. We've got like some kind of border uh radius on here. Do like six pixels. Um, and then some kind of padding. Again, maybe two rim. I'm not totally sure. All right. We can at least throw this overlay on here. And until we get this thing having a max width or something like that, we won't really know uh what this should be. So, um, I'm not sure the way I'd want to do this to start with. So, let's just flip back and forth. Looks like this is the this text stuff which I don't know where this is. Quote text. See, do we have that down here? We're going to set a max width on here of like 60 characters. It's probably too few. Okay, we'll start there at least so that we're kind of in the right spot. It's a little hard to see, but I'm It looks like there's a little bit of a border on this. So, uh, border like one pixel solid. We have a border color. Um, color primary. Not really sure. And now it's not autocompleting with the var. I don't know. Like either these need to be more semantic names or less colors. I think like like this is probably way too many colors for this design in my opinion. But um that's that's one thought I have. But okay. Uh so let's call that good. I'm going to wrap this here. This also needs some kind of color. Do max width of fit content. Can we do that? um needs to be display block because we've got that weird uh little section down here below. That should work. No card header. Where's this image avatar wrap card header? So, it's the image that needs this under here. Can I do this? Okay, cool. Um All right. Let's also do Oh, it doesn't like nested stuff. So, that's another thing I would probably change. Oh, looks like you gave it to me here. But, yeah, I'd love to be able to do nested stuff in here. Um, because that's how I typically do that on something that's only ever going to be tied there. All right, we'll do border radius of like 16 pixels. I don't know what this is supposed to be. All right. So, we probably just need to take this whole thing here. Something like that. And that's obviously too much. It's hard with these kinds of challenges because you want it to be something where they have to actually like strive to get there, but then you just end up making a lot of things like this where you're just like playing around with like six pixels, four pixels, you know, whatever it happens to be. All right, author info. Uh, so let's stack these things. Let's see. Card header. So, let's start there, which should be right here. We're going to display flex this, which I really wish DF worked in display uh flex, especially for speed sake. Uh align items center. Cool. And then gap one room maybe. Something like that. Looks about like that. Um we've got these items here. And then the stars. We need to align these. See items. Align self would be top start. Isn't that it? Flex start. Yeah. So up top there. Um, and then probably want want these things justify space between justify. Let's see. Justify content space between something like that. Okay, cool. Um, do we have a font? No, we don't. So, space grotesque, I'm guessing. I think if you're just asking people also font family here um to like only ever use this font in the whole thing. I would just put it here for people cuz Jet Brains Mono Antspace. Okay, so there's two fonts then maybe just declare these as like um variables at the very least. something like that. Font family. Let's look at fonts.google.com and just see how they recommend space grotesque. Um, okay. Well, I was actually looking for this guy. Okay. Well, that's what I did. So, um I guess let's see. Didn't I maybe this is the other font then? Okay. So, we're going to do most the font like this. Um and then I'm guessing it's hard to see this. This looks like something else, but that's maybe the only one that's the monospace. I don't We'll figure it out. All right. So, inside this author info, let's again check the HTML. We're going to stack those as like a grid. So, we'll do display grid. It's probably fine. Um, let's see. Font weight would be bold. And we'll do text. There's probably some spacing there. Like, what is that thing called? uh text text spacing CSS. I can never remember the names of some of these things because Tailwind does different things too. Letter spacing which is the one I usually remember and I don't remember Tailwinds which is something else I don't remember. Letter spacing uh two pixels one pixel probably should do M but it's fine. Okay, cool. Uh so down here do display or sorry let's see text transform case uh font size. Again I wish I had variables for this kind of stuff cuz this is just pitly stuff that you end up like oh is it 12 pixels? Is it 6 pixels? Is it whatever. Um, let's also set the color on this font for the whole body. I don't know exactly what it would be. Text dark, text mid, text light. Okay. Not sure what that is. So, let's uh steal this and say most of it is mid or most of it is dark. We'll start there. So, let's set this color here. Oops. So, at least we're kind of close, maybe. and author RO right here. Let's do color var. And we'll use text mid light. Too light. Um, let's go. Is there even a light anywhere on this page? I don't think so. Let's go uh mid then. I get this doesn't quite look like the right font. Maybe this is another uh what is it? Jet Brains Mono. So, it's still here. And maybe I'll set these as their own variables. I'm obviously not doing the uh race for this font family uh mono. We'll do jet brains mono like this. Um, should I do the same thing here? Probably. So, let's pull this up here, too. I'll take the body here. And I suppose I should do uh mono here. Okay, cool. So, let's now reference this And again, change HTML. We'll just grab this here, add it down this way, and change this out for mono. That could have gone better. Um, so um I guess let's check here again. Uh, let me jump back over J brains mono. See what's going on here. Hello. Welcome. Hopefully, by the way, music and stuff is okay for you. Um, and not too loud or too soft. So, probably should check with that mono space. I probably just would I type mono. Yeah. All right. All right, that seems closer to our final version. So, that's cool. All right, let's go to uh the stars here. I'll change the background or it's probably text color because I think I saw it was just like uh text here. So, let's see. Uh star isn't there. Yeah, cool. There's probably It looks like there's some kind of like shadow on this, too. I don't know what that would be. Um, on each of these items are the individual stars just say stars. So I I don't know. There's probably a backdrop filter blur two pixels or something. I don't know. That doesn't make sense. Maybe a box shadow 00 um two pixels. Oh, it's probably a filter backdrop filter then off of this, right? Isn't that the thing that does that? We'll come back to this. So to do edge shadow thing. All right. All right. That looks okay so far. Let's just take this section here. And there's probably a couple different ways. So like we have this thing spaced between, but I can't adjust the spacing of like I can't adjust the HTML. So I guess I'll have to just move over this. Uh so let's do justify self flex start. No. Not sure what I have going on here. It's this gap here, but Oh. So maybe we don't do and instead I just say that this thing should take up the maximum space it can. So flex row one and call it a day. I guess this actually looks higher too, right? So, I guess I'll just get rid of that. Or I guess we'll say flex start for both of these. And then I'll just add some padding or something up top. I think that's closeish. Uh means we also don't need that other roll padding top. I don't know. a pixels, something like that. All right, that's not going to be perfect, but I'm fine with that. Um, it's hard like without a design. This is just going to be playing with pixels back and forth, and I don't really have a ton of interest in that personally. So, um, card body. Let's come over here. okay. So, just I would just do this as a flex, I think. Uh, display flex. I guess we could set do this a couple ways, but let's just do padding block. Um, do like one rim, two ram, something like that. Um, I need a gap on here of like 0.5 rim maybe is. All right, cool mark. Uh, we'll take the color here. primary. I don't know. I don't know what this would be. A font size here of like two. Oh man, we're going to go so big here. Um, it's interesting. They gave me the wrong quote, Mark. They actually gave it to me there. I don't know. Maybe there's some CSS thing I'm supposed to know to like switch between different variants like of curly versus straight quotes or something that I don't know. But we'll just say that that is right right now. Um interesting. I don't know what that would have been naturally. Did that make a difference at all? Maybe it did. Okay. So, we're going to come in here. We've got some uh line height things. Something like that. Uh color v text light mid. I guess it's that it looks like f smaller font size, but it's hard to know. I don't know. We'll do text uh wrap. Isn't it text wrap balance? So, seems like whatever rendering engine they've got for the CSS here isn't up to date with some of the latest stuff. So, that would be one thing I'd change here. Um, I guess we could do pretty and just change this here to try to match it a little closer. Sure. Um, and then we'll have to have some kind of min height, I guess, on the card itself. Uh, so let's come here. M not min height, min width. I don't know, 500 pixels. I don't know what it's supposed to be. Which one am I? So, it's got to be bigger than that. 540. Sure. All right. So, I'm kind of close this closeish. Obviously, this is taking some time, but that's fine. I'm not here to rush. Just figured I'd play with this this morning. And uh yeah, let's stack this stuff up. I'm guessing there is some kind of Okay, we've got these dots, these active dots. Card footer. Let's just flex these things. Display of flex justify content space between source tag background color here. Uh let's see. secondary idle. I have no idea what these things should be. accent. It's too dark. I mean, am I supposed to use like color mix or something? Probably not because it doesn't have I'm assuming this isn't very Oh, it is. Okay, cool. I don't remember even how to do this. I don't think that's what you're supposed to do. Surely there's a color here. I'm supposed to be able to use color text light. Maybe dot idle active. Yeah, maybe. or I could just look up the color mix syntax and see what I can do. Probably good to do a video on it if I can't remember how to do it. Um, plum 60%. Do I have to say what kind it's in? I guess so. Rectangular polar color space hue interpretation. What was that? Huh. Okay. I think I just I can adjust this here. Something like that. I'm not sure what this is supposed to be. So, I guess we'll leave that alone. We'll say color or text size, font size. Um, 14 pixels. I don't know what this is supposed to be. Um, and then let's steal our declaration for mono here. Steal this down this way. Uh, text decoration transform uppercase something like that. the letter spacing. Sure. Uh we'll do padding. let's do looking at this maybe like something like that. All right. All right. And then we'll have a border left. Um two pixel maybe solid of our no idea what this is supposed to be. Um sure. Let's do that. All right. That's loosely there. It looks like maybe there's a border to it. It's hard because I have my screen darker so it doesn't shine too much. Um so I guess we should add that too. So, let's do uh border top one pixel solid. And let's just steal this because it looks similar. Yeah. All right. We'll do padding block start. one rim. Something like that. All right. That's closeish. Uh carousel dots. Let's finish with these. Um I guess let's have like uh we'll do width of like 16 pixels. Maybe we'll do a height here too. Probably should display flex these things first. Uh and then let's do probably what I would do is do some kind of like local variable which I like to declare like this. we do like dot or something and then we'll have as our variable here and then we set this here. So background color and that way like it's just scope to this particular thing. Um that should work. Okay, cool. I could also change these to be variables, I guess, too. But in this case, I don't think it's a big deal. 8. okay. Which means I can just change this declaration here directly here and then I don't have to update anything else too. So if our color dot active and then oops and then that one is its own thing. I could also change the width here. We'll do like 16 pixels here. Probably more than that. 22. All right. gap 0.5 rim point 2 rim. I think we've got some issues with this not being a line content line items center. All right, that's pretty close. Um, I'm fairly happy with that. Obviously, there's like if we overlay here, there's going to be some issues where things are lined up, but I don't know that I really want to get into that. So, that's what we got. Hopefully, that was interesting. Um, yeah, John asked me to check this out. And I was like, "Okay, I'll see what I can do." And had a little bit of time today because I was waiting on some other things for work. So, I just figured I'd do this quickly. So, uh, hopefully you found that interesting. Um, and yeah, I guess I'll submit it. obviously could be better than 81, but the nice thing is if there's only three players and I'm ranked third, I'm still in third place, you know. So, uh, hey, hope you're doing okay. All right. Well, hopefully that was interesting. Just kind of a random stream today. Uh, told John I'd check it out. So, uh, I think overall as far as feedback, I guess I would say I wish I could split these and see HTML and CSS at the same time. I would like there to be better like actually emit in here because it doesn't look like that's what we've got going on. Um, so like this should default to background color or background. Yeah, I think that one usually defaults to background color and it doesn't or like display flex should be display flex and it looks like it's doing some kind of fuzzy searching. So, it's hard to go fast, especially when you have a timer, which obviously I didn't really care about today, but um the rendering engine doesn't seem to be up to date with things like text or nesting. Um I think I'd probably prefer more either more descriptive variables, names, like this was good because I knew these are for the dots, but like if you want borders, just do border or uh that kind of stuff. I' I'd like variables for uh these so I don't have to like look up how to what should I name these things and maybe that was on me some spacing stuff too maybe I I wouldn't mind like a way to inspect which fonts are being used where um and like especially letter spacing stuff like I just feel like that's kind of dinky to be playing around with and I don't love like the box shadow grid stuff just because number one I feel like it's kind of a dated design but number two like I'd rather focus on layout if you're talking about speed um and pick like really predictable sizes between everything like only have like three different gap sizes or something and maybe those are also variables. I just think the more you can standardize on like thinking about layout instead of thinking about which pixels where seems like that would make for a better experience. Um, so anyhow, hopefully that's useful feedback and yeah, I forgot I changed my screen, so here I am pointing to my screen. Um but yeah, I hope