16 Pro Web Devs Compete with CSS | Round 4 | Semi Finals

We started with 16 web developers and now we're down to four. Today's semi-final battles will determine who's going to the final and who's one step closer to winning this trophy. Kyle versus Scott and Josh versus Wes. Two battles, two tickets to the finals. I'm CJ from Syntax. Welcome to Mad CSS. Let's recap the challenges they've faced so far. Round one, a landing page. A super familiar and simple layout. Or so they thought. We do have this button which is orange, but the text box sneakily has a button kind of floating on top of it. Round two. A bento grid. Tight layouts and spacing, typography, and a few tricks thrown in and zero room to improvise. So the container has padding and it looks like there's gap. probably just do grid areas cuz I can never remember the syntax for like columns and spanning and all that. And these four made it through all of that. Hey Wes, are you are we going against each other? Is that what's happening here? Yep. This guy sounds stressed already. Oh, you have no idea. This is probably the calmst I've been, Kyle. So, for the semi-finals, let's just say I hope you've built an e-commerce site before. Let's do it. I'm ready. Uh, I'm not ready yet. The format hasn't changed. CSS and HTML only. Two minutes to plan, 15 minutes to build. First to 100% or the highest score when the time is up moves on. And the UI waiting for them today. Is this? Oh jeez. Okay. Uh, so the first thing I see is that we have a giant image. I need to check my IDs again. Yeah, ID, container, classes for everything else. Okay, not making that mistake two times in a row. So, this is a a pretty standard uh e-commerce style looking thing, which is is quite nice. That's not terrible. Ooh, the text spacing on that. Ah, I think it's called letter spacing. Oh, Kyle's fast. So, I'm going to have to move fast. I'm going to dial in the grid. I'm going to dial in the product image. I think that's maybe what I want to do first. Oh, wow. It goes product image, then product thumbnails, then product details. So, that is the tricky bit. Okay, so we got four children. So that's going to be a grid. Oh, but they're not in order. What else we got here? What's this little line at the top? Oh, come on now. Okay, so product image is going to be this business over here. Product thumbnails is down here. So I'm thinking CSS grid, a 2x two grid, right? The first row is this with a column here and a column here. Second row right underneath. It looks like the thumbnails are going to be equally spaced within that. The buttons going to be full width. Woo! Getting nervous all of a sudden. Semi-finals. First up, Kyle versus Scott. Okay, container. Let's start with the container. We do a D grid. We do a grid. No, let's do a grid. Uh, one frid template calls. And then we can adjust this where we'll even give this like hard pixel values like 300 pixels and then uh 100 pixels for the uh rows. Oh, sorry, rows. Okay, let's get started with this. First of all, I think on my container, I want this to be a display of grid. And I want my grid template columns to be 1 FR 1 FR cuz I just want that evenly spaced. And my rows, we'll figure out what the spacing is for that in a little bit. And here we go. Semi-finals of Marchm CSS. We've got Scott Tolinsky versus Kyle Cook. Now, I'll be honest, folks. I did not think Scott would make it this far, but he's proving his own, right? I I we see the nerves, but it looks like when he locks in, when he when he basically just goes on autopilot, he can get stuff done. And you can see it already happening, right? So, he's locking in the grid here. Yeah, there's my image. Also, it's got a lot of margin around it. So, on our container here, we'll just come in here with like a padding of like, I don't know, let's say like 50 pixels. Uh, that's actually pretty close. 40 pixels. Okay, that does line up my image perfectly. Uh, I'll need to shrink down this to like 60 pixels or whatever. We'll get to that in a little bit. image needs to have a border radius. Whoops, I cannot type today. Yeah, and Kyle's is looking good. He's already at 66%. He's dialing in the sizing here. I think once he pulls those uh tiny thumbnails to their smaller size, we're going to see a higher match percent because those are essentially going to be uh no longer a part of that diff there. Okay, we'll want to do grid template columns. The column is going to be 2 to three. The row is going to be 2 to three. Okay. Uh let's go back and check this stuff out. We want product image and we'll want this thing to be border radius 10 pix. We want it to be a width of something like 200 pix. Like get it down there. Let's get this something like 260. Yeah, Scott jumping up to 70%. You can see as he starts to dial in the sizing, the diff algorithm very much likes that. So I need to change around the order of things. So product thumb nails, we have our grid column that's going to be one. Oh gosh, what is this? Is it go like one to one to say it's one? And grid row is going to be two. Two. Hey, that actually is the right spot. Okay, perfect. So, now the rest of the stuff is in the correct location, which is great. Yeah, Kyle's is looking really good. He's already had an 80% match. Um, we can see his text is in the right spot. Scott has already got his text in the right spot. This is incredible play. 12 minutes left and we're seeing the layout start to appear, right? The image is in the right spot. We got the text in the right spot. Once they start to dial in those text sizing, this is going to look really good. Okay, this is looking pretty close at least. Uh, product title. We'll do Okay, we need What's the next one? We need product description. Okay, let's go. Let's go. Let's go. Let's go. Let's go. Let's go. All right. Yeah. And we can see over on Scott's side, he's looking at the diff view, which when we're trying to get to 100% match, I think this is the right way to go cuz you can see that his text is aligned for the most part. So, as he starts to get these other elements into position, the height beast title, the title of the product, all of that's going to start to align as well. So, I like that he's moving on now to product pricing. He's he's kind of going top down and then he can come back and adjust the sizing from there. Uh, the other thing I need to do is my product pricing. I want that to be a flex direction of column. There we go. That fixes that problem. And then I need my price row to say align items center. It looks like that looks really good. Now I just need to get the discount price. Original price I guess is what it is. Yeah. And Kyle's is looking really good at this point. Now, I don't know about alignment, but the overall sizing of his uh resale discount badge kind of looks perfect. So, we'll see if he can dial in the sizing of everything else to kind of get that into the right spot. Okay, we have a taller padding height, which is probably something closer to five. And since this is in increments of five, we need to be five. Five. Cool. Perfect. All right, let's go. Next one. Next one. Let's go. Original price. Original price. Original price. Original price is a display block. DB DB DB. Now, I don't know about you folks, but Scott is making me nervous and repeating things over and over. But he's making progress, right? He's he's doing everything he needs to do here. So, 6 and 12 minutes left in the battle. This is really where we're going to see some moves made, right? Because if they can get those thumbnails in the right spot, that's going to bump them up. Product thumbnails. Why is this not applying? Uh, refresh the page. Nope, that's not it. Thumbnail active. It's not applying. Uh, product thumbnail. Thumbnail active. Why is this not applying? Border radius. Scott, what are you doing, man? What are you doing? Oh, it's the image. Oh, yeah. And this is not the kind of mistakes you want to see. Thumbnail was a rapper, right? He needed to target the image itself. And so, he caught it. It only took him about a minute. That one mistake might actually cost Scott the win here. All right, I'm going to move on to the bottom section cuz I'd rather get as much of it done as I can. We'll just come in here with all unset to get rid of all the base default styles. Width is going to be 100%. Padding is going to be like 10 pixels. We go. Color white. There we go. The font size on this I believe is like 20. Nope, that's too big. 15. Now, webdev simplified. Kyle Cook, he's over. He's working on that add to cart button. And you can see it's increasing his percentage match overall, right? He's getting that that bump that he needs because the diffing algorithm is very colorbased. Now, if he gets it into the right spot, we're going to see that bump up higher. Personally, folks, I don't know why we're seeing a higher match percent on Scott. It might be that he has actually locked in the position of that text a little bit better than Kyle. And that's kind of all you need here. But with four and a half minutes left, Kyle has plenty of time to now work on the product thumbnails because he he's got that add to cart button in the right spot. He can get those thumbnails in the right spot. And then this is going to be such a close battle, folks. Only 4 minutes 20 seconds left. Okay. Um each one of these is going to be much smaller. Okay, it's going to be much bigger. It's going to be pretty close to that. Uh the padding right here, we can do two pixels. Uh 22 pixels. That looks close. Um this needs to be a display flex. This needs to have a gap of 15 pixels. This needs Oh, they're so close. Okay. Um, the active one gets a box shadow of orange. The other one gets a box shadow of light orange. Dang it. Okay. Uh, so I think I want to do this. Set my image to be a width of 100%, height 100%, object fit cover. There we go. And the size on these is still a little bit off. I think I want this to be overflow hidden. That should cut off my image to make it rounded. Yep. Okay. Try 45 on these. And now I just need to position in the correct location. So let us think here. I think I just need everything centered. Where'd my grid container go? Ah, yeah. And so I think if Kyle can get his button aligned right, he needs to push it down a little bit. That's going to help his overall score. Only a minute and 50 seconds left. The name of the game here in mad CSS is getting stuff in the right spot. And if you don't, those tiny percentage points are going to be what cost you the game. Yeah. 1 minute left. Here we go. Let's see what these players can do in the last 50 seconds. We've got a 95% match to a 92.86% match over on Kyle's side. I'm so afraid to touch anything right now. Oh man. Okay, let's go. If I change the gap at all, I'm like, product details. Oh man, I'm so afraid to touch anything. Product details. Oh man, there's definitely something off on my spacing that is just killing me. 30 seconds to fix it. What could it be? Where's my grid at? Let's try changing my gap to 20 pixels. Uh, let's change my padding to 50 pixels. zero. Um, this is hilarious. Uh, not enough time here. Uh, we're just too wide on one of these. Maybe we'll change this to like 200 pixels. No, that's way off. It definitely can't solve it in 30 seconds. Slightly ahead. Only 10 seconds left. That gave him the percentage point lead. He needed to take the win. Only 5 seconds left. Is Kyle able to pull it out? I don't think so, folks. No. AND that was tough. That was tough. That was close, too. I kept looking over at Scott's design and I was like, "Oh, man. He's like a half a step ahead of me every singlewhere I go." Oh, I was I was feeling the exact same way. I always very very uh concerned. Good one, Kyle. Thank you. A nailbiter, too. Yeah. Only a 5% difference in the score. This is It's crazy. Okay, Scott, you are on to the finals. You're either going to be up against Wes or Josh. Honestly, I hope it's Josh because it's going to look like we competition. Definitely going to think you rigged it. I I really hope it's Josh. Wes was talking monster. Uh so Scott will be moving on to compete in the finals and his challenger either Wes or Josh. What's that? Yes. Yes. Oh, I'll absolutely let them know that uh this video is brought to you by Sentry. Just like everywhere else, we got to pay the bills around here. This video, this series, the podcast, every video we put out on YouTube, brought to you by Centry. Head over to centry.io. io/intax to learn more. They are application monitoring software considered not bad by millions of developers. So definitely check them out. We'd really appreciate it. All right, back to All right, CJ, that's enough of that. People want to watch me win. But before we do that, I want to ask a question to the audience. How are you watching us right now? We want to see a photo of your watch setup. Are you at your desk? Are you watching on the couch? Are you on the can? Are you driving a van? Well, snap a photo and tag us. And we're going to be giving away prizes to the best, the worst, and the most midwatch setups. Tweet it, ski it, insta yeet it, whatever you want. Post it on LinkedIn if you're that type of loser. Uh, post it anywhere. Tag us. We're going to be giving away some sick ass prizes for the best watch setup. And we're off here in this semi-final battle. West Boss versus Jos Ko. This could be anybody's game. Both players got really high scores in the previous battles. Okay, here we go. So product the container we're going to set display grid grid template columns 1 FR 1 FR product image product thumbnails product details product and purchase control product image grid column one grid row nothing okay what's the second one product details uh that is going to be grid column two okay and we've got product pricing yeah and we see west essentially locking in which part of the grid or each of these elements in. Right? He's putting the image in the top left. He's putting the text in the top right. He's putting those thumbnails in the bottom left, the button in the bottom right. So, he's essentially assigned all these elements to their spots in the grid. And now, he's going to start working on the sizing. And we're going to see those things popping into place. Product image. The image inside product image. We're going to set you to I wonder what the best way to do this is like. Should I start by trying to get that image to be the right size? The other thing too, like there is some spacing around here. And I need my thing to be sort of Yeah, that's probably going to be padding. So, let's do that. Padding on the grid of 50 pixels, more like 40 pixels. Perfect. Okay. I I'm cooking with fire here already. Yeah. And we can see early game. We're only 2 minutes in here, but Josh already at a 72% match, so he's he's got the the size of that image a decent spot. So, the diffing algorithm likes that, but he does need to lock in the positions of these elements cuz he set up the grid as well, but he needs to get them in the right order. Oh man. Oh man. Oh man. Oh man. Oh man. Padding 20px. No, that's got to be 40. Okay, good. You know what? Let's make this 50% 50. Oh no, you can't do 50/50. Screw it. I'll go back to it. Product image. Image width 100%. Now, uh, the grid for this, it's stacking them in the wrong order, right? So, we're going to set grid template areas. That actually sort of did it almost perfectly. So, now your grid area is thumbnails and the product image. Grid area is image. Why isn't that moving down? Oh, cuz I literally did it wrong. Yeah. And Josh's is looking really good. He's got everything in the right spot. He's already locked in the sizing of these thumbnails. I'm moving on to the next part, which is my gosh, what do I focus on here? What's going to get me the most bang for my buck? You know what I'm going to do? I'm going to put a overflow hidden on all of the children just so I can see where everything is. Good. Okay, that that makes me feel a bit better. Yeah. And it's curious to see that Wes did not choose to go for grid template areas. I actually learned that trick from him watching some of his videos. So, he's explicitly assigning each of these elements to their grid row and grid column. But grid template areas, we've seen some other competitors use this. It gives you nice names where you can place these things. And so Wes might be getting a bit confused here as to which elements are popping into which area of the grid cuz my image is still a little bit too small. Actually, my image it's slightly too narrow and slightly too tall. So this image has object fit cover and it's sort of shrunken a little bit. We'll deal with that later though. We have more bigger fish to fry right now. The gap is going to be 10 pixels. Maybe a little bit more. Maybe 15 or 20. We'll come back to that. I want to start working on the actual content here. Grid column one, grid row one. Okay. Image width 50px. That's going to be display flex with a gap. Good. Border radius 10px. Okay. How we doing? Oh, that's not looking good at all. Oh, my rows are wrong. 50 px. Oh yeah. Hell yeah. Look at that. I nailed it. Yeah. And here we go. Wes is starting to lock it in 89.39%. He's got those thumbnails at least in the right grid area. Um, and then he'll have to swap where the button goes and the text goes. Okay, we have this orange button. Add to cart button. So, let's grab you. The background is going to be orange. The uh color is white. The text transform bold text. I don't actually know if it's bold. It also needs to be width 100%. Display block. And there's a height on it, I'm guessing. Yeah. And I like the fact that Josh is starting to lock in the color of this button. This is going to play mind games with Wes because once he gets that orange button the right size, his match percent is going to be maybe 95 96% and Wes is going to start to feel the heat. There's two big things left, right? The the thumbnails and I have to give them their border and then the alignment of all this stuff. The alignment of all this stuff is worth more points. So, let's start with that. So, I think for the container for all this stuff, for the product details wrapper, this guy needs to have some padding. Okay, so Hypebeast Ink is almost perfect. Wow, look at Josh's diff just drop into place. Amazing. Oh my gosh. Why is it off by that much? Where's my grid column? Yeah. And if looking at Wes's, he really needs to just set the font size of the title, right? Cuz you can see his title is just way too big. So, if he sets that font size, that's going to bump him up. I don't know if it's going to get him to 97%, but he definitely needs to lower the font size of the title. Oh, what's this thing in the top on the container? Watch this. 10px linear gradient from white to orange background show up top of container. Boom. No, I think this is actually a good play by Wes. So, you may not notice it, but a keen viewer might see that there's this slight orange across the top. And if Wes can lock that in, he it might give him maybe two or three percentage points. Um, so he's working on it now. We can see he's trying to figure out his linear gradient syntax. If you can lock it in, I'm thinking maybe 93 94%. Like what I'm trying to do is just get the left edge and the right edge to each look correct, and then I'll deal with the stuff inside afterwards. Yeah, incredible play from Jos. Just looking at the diff view, you can see all of these things just lock into place. Uh, background size. I can't spell today. Background repeat, no repeat. Background position, top center, 100%. hell is going on here? Yeah, and this might be what cost Wes the game. Basically, you have to have perfect play here in the semi-finals, right? You have to know the syntax for linear gradient. How do you make it go from the top to the bottom? And if you don't, that might have cost him a minute where he could have been spending time elsewhere. Okay, so he got one. It's not perfect, but that did maybe give him one percentage point bump. Yeah, there we go. He got the sizing that bumped up to 93%. Uh-oh. A minute. Okay, in the last minute, what I need to do is get my button to overlap. Where's my button? Yeah. 1 minute left. Oh gosh. What else can I do? Okay, you know what? The thumbnails are giving me challenges. I'm jumping to the tag discount badge. So, you need background light orange and Josh at 98%. Incredible play in the semi-finals. This is what you need to take you to the finals. Yeah. 25 seconds left. 94. Okay. Uh H2 font size 30 94. I don't know why it's asymmetrical. Come on. 25. Yeah. Only I'm not touching anything. There's 7 seconds left and I'm just going to break it if I touch anything else. This might be a good play by Josh. Just let it ride. Hope that this 98% match is enough. 20 BX. Wow. Oh, that was so hard. There was so many. All right, Wes, you got knocked out of your own competition. How are you feeling? I'm bummed, but also I'm I'm kind of glad that like like it's not rigged. people know that I actually got my my butt kicked. Um, and like there's no one I'd rather lose to. Like if I lost to Scott, I would be pissed. But if I lost to Josh, he's so nice. He's Canadian. You know it. Like you better win this thing. I'll do my best. I appreciate that. That wraps up the semi-finals of Mad CSS. Scott and Josh, you reached the final step, and next week you'll compete one last time. One of you is leaving with this trophy and will be crowned the champion of this year's Mad CSS tournament. This is Mad CSS.