The hardest CSS Battle yet!

[00:00:00]We're back with another CSS battle. This is the classic style where CJ and myself are going to be going head-to-head to see who can get the best score, which is the smallest amount of code. And we only have 10 minutes on the clock. Once those 10 minutes are done, pencils down and the best score wins. CJ, are you ready to go?

[00:00:24]>> I'm ready. And I'm officially claiming this battle uh declares winner forever.

[00:00:29]So, whoever wins this is the best person of CSS of all time.

[00:00:33]>> Let's first things first, obey your thirst. Let's do this. Uh, we got the colors here. It's been so long since we've done this and I miss my autocomplete. Okay, we'll have one div.

[00:00:44]We'll have this div have I forget the um the sh I forget the way we used to do this. I forget everything. Well, we're going to have a class of B on this one.

[00:00:55]So, okay, div with a class of A. This is going to be Shoot. I'm already panicking because I forgot all of my tricks.

[00:01:02]>> I might regret this, but I'm going to set it to be a flexbox so that it centers everything. Actually, if I do display grid place content center.

[00:01:12]Yeah, that's that's the play. Let's also set the background color of the body like so. And then increase the width and height. I'm going to guess this is maybe like 300. No, that's way too much. 200 150.

[00:01:29]>> We're going to say border radius 50%.

[00:01:33]And then we're going to give this a bump up. We're going to say it's 200 pixels.

[00:01:37]Sure. We're going to say 150. Oh man, we don't have that much time. That's the whole thing is you got to move quick. Um position fixed. And we're doing fixed because fixed is uh faster or smaller.

[00:01:49]Top 10 pics. Um left negative 100 pix.

[00:01:54]So we want to do sorry not that far negative left. We want to say negative like 20 pix. Okay that's pretty good.

[00:02:00]Top again. This is going to be like negative like 50 60. Okay. I mean it's pretty close. Let's do the diff view here. Um um um man I've forgotten like all of my all of my tips here. 75. Um I don't think the widths on these is even correct.

[00:02:20]>> That is spoton perfect. I'm going to go ahead and submit. see what our score is.

[00:02:24]But that's looking good. So, we got that little square in the middle. My next thought is I just create one circle and then use box shadow to repeat it. So, I think I'll create the one circle exactly above it and then just repeat that one.

[00:02:39]So, uh let's add another P tag. And I'm actually going to give these some attributes. So, I'll call this A and I'll call this one B.

[00:02:48]And that way this first one is only targeting A.

[00:02:52]And then we'll target B. I'm going to copy the things for now. We'll make it that blue color. I'm going to set everything. I was going to say position absolute, but I think B needs to be position absolute. Absolute. We'll do a top of uh I don't know, a left of 150, something like that. Uh we'll also set the border radius 100%. I'm I forget all the tricks to make the code small. But uh we'll we'll just get this going and then maybe try to remember cuz like there's I think there's a a better way to do it than 100. I mean if I did 50% that's one less character. Yeah, 50% works. Okay, bad start. Bad bad start, Scott. Bad sp start. All right, let's get this dialed in. The width is still not correct. This is a perfect circle and we're going to say left is now needs to move over slightly. 125. this I feel like you you could just do this into infinity here. Okay, so from here what I'm going to do is I'm going to say box shadow. I'm going box shadow, folks, because box shadow is Okay, I don't have time for this. Okay, box shadow, we're going to say 0 0 and then it's going to be sorry, we're going to say it's moving over 150 pix 0 and then it's going to be the color is going to be this blue color. So, okay, let's just look at this. Okay, it's not bad. It's not bad, folks.

[00:04:21]>> That is dead on. Oof. Beautiful. Okay, let's get this thing repeated to the left and to the right of a different color. So, we're going to add a box shadow. Can't spell today. Box shadow.

[00:04:34]Man, I haven't done CSS in so long. What is the What's the syntax for for box shadow? Is it something like left uh 100 pixels and then down 100 pixels?

[00:04:46]Yeah. Okay. Okay. We're getting there.

[00:04:48]And then we want to give it a color. And I'm going to give it this this color. I think we can do the thing where if we set the color here. Yes. Then we only have to override it in certain scenarios. Let's do this color. Okay.

[00:05:04]Now we don't have to do that. Okay. Now, next. Let's have some more commas. Oh my dear god. Umh.

[00:05:15]Shoot. Shoot. Shoot. Shoot. Shoot.

[00:05:17]Shoot. Scott. Scott. Scott. Okay. It needs to be blue. Focus. Scott. Focus.

[00:05:21]Focus. Focus. Focus. Focus. Focus.

[00:05:23]Focus. Let's go. And this is going to be zero. There we go. That's better. You can immediately see the problems that are going on here. And this is also going to be the same blue color. You can no Da Vinci Resolve. Why is Da Vinci Resolve loading? I didn't tell I didn't tell that to do that. What? How? How could I have possibly had Da Vinci Resolve loading? What? What? That box shadow I want to do it off and to the left first. So, it's going to be 150. The Y should just be zero. Let's look at that. That's also in the perfect position. Beautiful. And so, we can actually just copy that one. So, we do comma and it should be 150.

[00:06:08]Beautiful. Okay. Uh 5 minutes left.

[00:06:11]We're looking really good at this point.

[00:06:13]I want to draw that beige square on top of everything. Obviously, mine is very wrong, but I'm just going for uh as fast as possible here. Okay, Scott. Come on.

[00:06:23]Get your game face on. Get your game face on. And this is going to be no color.

[00:06:29]Where did that one go? So, 450 pixels.

[00:06:32]Oh no, no, no. 450 Da Vinci Resolve is quite literally opening up a project.

[00:06:38]Gosh darn it. Move out of here. Da Vinci, what are you doing? And I do believe I can remove the pixels in a lot of these scenarios. Like this one, I can I should be able to get rid of the pixels here, pixels there. Can I get rid of pixels on box shadow?

[00:06:55]No. Need those >> 450 in this box shadow. It should be right here. And then 300 pixels and 450 pixels should be down here. Why is it not? Where did it where did these things go here? This Da Vinci opening has really screwed me. Is there am I missing a comma here?

[00:07:13]>> Needs to actually have a background color of uh transparent but then a border color. We'll do a border of 20 pixels solid that color. Okay. Do I need the pixels on that? I do. 20 pixels. Solid that color. And then we should be able to set the left to 50 pixels. Okay, that's perfectly aligned there, but it's not aligned there. So, we need to change the width to be more like 250. Um, Scott, let's abandon this for nerve. Right now, we're going to say the B div, let's get something else on the page here. The B div is going to be um it's going to be height 100%. Width is going to be 40%.

[00:08:00]No, it's going to be 80%. It's going to have a border solid. It's going to be this color tan.

[00:08:08]It's going to be 10 pixels that. Okay.

[00:08:10]Okay. Okay. Scott, you're freaking out.

[00:08:12]Okay. Let's go. Let's go. Let's go.

[00:08:13]Let's go. 2 minutes 55 seconds left. All we need to do now is work on these box shadows. So, let's get all of the red ones in line first. So, if we want one at the bottom of the screen, it's going to be something like 200. The X offset stays the same. We then just go 200.

[00:08:33]Okay. So, 250 300. That's exactly right.

[00:08:37]We're then going to do the next one there. Beautiful. And lastly, we create the blue ones.

[00:08:44]>> And then I guess this 150 makes so much more sense. We're going to do position.

[00:08:50]Brother, add SSH keygen. What is going on on my computer? Am I being hacked on on uh stream here while I'm trying to absolutely position this div? Only 2 minutes left. So, we go over 150 down 150. Amazing. Last one. X of 0300.

[00:09:10]Or was it -1 150? Oof. Minute and 30 seconds left. Uh where is it? I don't see it.

[00:09:17]>> Why didn't these box shadows work here?

[00:09:19]Where are they? Where do they go? 0450.

[00:09:22]So 0 pixels and 450 pixels down. Like let's say I did 250. Oh, it's Is it relative to 300? Okay. Ooh, yes. Which one am I replicating? Oh, it's not negative. It's just 300. Okay, that's it. Uh, we only have a minute left. I'm going to get rid of that. There's probably other spacing I can get rid of.

[00:09:42]I'm just going to submit because I think I got 100%. Oh, no. No. Oh, the bottom the the height of the the rectangle is wrong. I missed it. The height needs to be like 290, 280, 270, 260.

[00:09:55]Okay, that's it. 45 seconds left. 100%.

[00:10:04]99.9. Come on. I got to look at the diff. No, everything is just off tiny tiny tiny tiny bit.

[00:10:11]>> And then this one also needs to be 300.

[00:10:13]Ah, there we go. Okay, this is my C.

[00:10:23]Um, >> there's no way I could adjust like I think if I adjust just B. I only have 17 seconds left. I don't want to touch it.

[00:10:31]We're at 99.9%. I don't want to touch it.

[00:10:33]>> I have to abandon this last one. Do I? I don't have to 15. Um, I got to abandon it. F F one. Everything is just slightly not big enough.

[00:10:45]>> 50.

[00:10:45]>> Slightly too small.

[00:10:47]>> No.

[00:10:47]>> Right.

[00:10:48]>> Okay. Submit.

[00:10:49]>> Time's up.

[00:10:55]>> That time crunch.

[00:10:57]>> Oh my dear god. CJ, you don't know what was going on on my computer. Da Vinci Resolve started opening for no reason.

[00:11:04]And I I didn't like I didn't open it. I didn't do anything. D and then it like popped up. Open cloud project. And then some like other all these pop-ups were flying up on my computer.

[00:11:12]>> Well, that gives me better odds then.

[00:11:14]But I forgot how to write CSS for a second. So, >> I'm just saying now a major mistake. I got an 87%.

[00:11:21]I had no opportunity to optimize. 87.7%.

[00:11:25]I had no opportunity to optimize. Great.

[00:11:27]Uh, resolve quit unexpectedly. Okay. Why are you opening in the first place? The the strategy was classic box shadow for me. Just doing box shadow on repeat. And the alignment overall was off, but I was counting on not getting to 100%. So, oh, I didn't delete any of this stuff either. Oh, >> it's been a while since we've done this.

[00:11:46]We forgot all the tricks. Like, >> I forgot all the tricks.

[00:11:49]>> Yeah, I'm I'm very happy with this. I got a 99.9%.

[00:11:55]>> Um, but same approach. I basically did did box shadow with three elements. So, one element for the center square, one element for the circle. I just made a circle exactly above it and then box shadow repeated it. But if you look at my diff, I don't know if there's anything I could have done here because it is just like the the edges of the elements.

[00:12:14]>> I'm I'm guessing maybe it's because I did grid place content center for that square in the middle. Like I almost feel like I should have absolutely positioned everything.

[00:12:23]>> I position fixed everything because of that. Yeah, but yeah, good battle. I apparently am the best CSSER ever. Until next time.