MadCSS Quarter Final Breakdown and Solution

What's up? CJ here. Today we're talking all about the round two challenge from the Mad CSS tournament. I'm going to show you the solution and dive into some of our competitor solutions to show you what they might have done wrong or what they could have added to maybe increase their score a little bit. If you're new to all of this, check out the Mad CSS competition that's been happening here on the channel. We've been releasing videos every Friday of this competition. All of the world's best CSS developers are competing and tomorrow is the semi-final battle between West Boss and WebDev Simplified and Josh Ko and Scott Titinsky. Not exactly in that order. Watch the videos, check out the bracket if you want to see who's competing. Uh, but that's happening tomorrow. This video we're breaking down the round two challenge. I'm going to show you the official solution, how you can achieve this perfect diff. And like I said, we'll dive into competitor solutions to show how we can get this 99.69 69% up to 100%. All right, if that sounds good, let's dive in. My name is CJ. Welcome to Syntax. Now, let's take a look at the official solution that would get you to 100%. And one of the ways to get to 100% because obviously there's a ton of ways. So, the first thing is we set this up as a grid. This is absolutely a CSS grid. You could use other things, but you're going to have the best time if you use a CSS grid. Now, in terms of columns, there are three columns. So, we use the 1 FR to do that. So, 1 FR, 1F, 1 FR. We could use the repeat function like a lot of our competitors did, but this basically gives us three columns. And then we have two rows. Now, I didn't have to specify exact heights for these rows because the container is already 100% width and 100% height. And it has this fixed size of 400 pixels x 600 pixels automatically. Competitors didn't have to do anything for that. So, as long as you set it up as three columns and two rows, things will work out. Also, as long as you set the individual testimonials to overflow none, which is what I'll show you in a second. But this is a grid and it has a gap of 10 pixels. So, there's 10 pixel gap between every cell in the grid. And there is also 10 pixels of padding around the whole thing. So, this 10 pixels gives you the spacing from the body and then the 10 pixel gap gives you the spacing inside the grid. Now, for each of the testimonial cards, you set overflow to hidden. And once you do this, you can now see that we have all of the particular testimonials locked into a given cell. And by default, they're just going to flow through to the individual cells, but we can now put them into specific cells by targeting each one individually. So, if we target the first one, which is going to be Chad, so we're using inth child here. A lot of our competitors added a class name to these elements. That's totally fine. But if you do inth child, that'll select the first one. And we set its grid column to one with a span of two. So that makes Chad go across two columns. And then we set its background to that navy color. And then we can work on Binda. So target Bindda, which is the in child of two, and set their grid column to three with a span of one. So it's going to span one column. And then we set the row span. So grid row with a span of two makes it so that Brenda goes across both rows. and of course set the background color. Then we do the same thing for Gary and for uh Linda. And for those you don't have to set the specific uh grid row and grid column because it's just going to flow through. So basically we set Chad's span, we set Brenda's span, and then the next ones flow through automatically to those specific cells. So with just the basic grid layout and the color set, we already have a 76% match. Now, it's a matter of setting the text sizes and everything else inside of each of these testimonials. So, of course, set the font color to white. Now, this little quote here that we're going to need to position is going to be absolutely positioned inside the container. So, that's why we're setting up position relative now, but we'll work on the quote later. We set a padding of 15 pixels. So, that's basically the space between the edge of the testimonial and then it goes to the text and the images. So, that overall is 15 pixels. And then we set a border radius of 10. And we're going to set up each of these testimonials as a flex box. So we set it to flex and then do flex direction column. And then that flex box which is inside this testimonial has a gap of 10 pixels. Now let's work on the top area which is this author element here. So essentially it has the avatar and then an info element that has their name and the title. So we target the author. We're going to set it to a flexbox as well. Leave it as flex direction row because then it's all across the top. We'll set it to have a gap of 10 pixels. And then we can style the avatar. Border radius of 50% is going to make it a circle. And then we need to set the width and the height. So if we just set the width, you can see that Brenda and Linda have like a stretched long face. And you have to set the height here. Some of our competitors tried to do an aspect ratio of one, but because this is a flex child, you have to be specific about the width and the height. So with that, you can see on our diff here, all of the avatars are locked into the right spot. Now we can work on that info class. So we set it to be a flexbox with flex direction column. So it puts the title, it puts the name on top of the title. And then it has a gap of five pixels. So everything else gap of 10 pixels. This info at the top does have a gap of five pixels. And then for the name font size of 15 and make it bold. You can see on all of the cards that's just locked in the name there. And then for the title, a font style of italic and a font size of 10 pixels. So with that, the top parts of each of our cells are completely locked in. And then we can work on the quote snippet, which is this next line here, it has a font size of 15 pixels and a font weight of bold. And now again, it's it's locking in. And so that's one of the nice things about this challenge is if you set up the grid first and got that locked in, then it's just a matter of getting things locked in inside of each cell. So we're moving right along. Now, for the text at the bottom, we're setting it to position relative for the tricky piece that I'll show you at the end. Uh, because there is just this little bit of fade out at the bottom, and we're doing that with an absolutely positioned pseudo element. So, position relative will come into play a little bit later, but that text has a font size of 15 pixels. And just like that, that gets us to 89% and all of the text and everything is locked in inside of each of the cells. Next, let's do the box shadow. So you can see on the official solution there's a little bit of shadow there and by default our diff is showing all of that as red because we haven't locked in the shadow. So each testimonial has a box shadow where the X and the Y have an offset of 5 pixels and then there's a 10 pixel blur and there's a color variable called light black and that locks in the box shadow. So you can see now we're really close. All we have to do is get that bottom area and get the quote in the right spot. So for the quote, it has a selector of double quote. And if you look in the HTML, it's literally just an image here inside of Chad. So that's why testimonial has position relative because we're going to absolutely position that double quote there. And then we give it a top of five pixels, a right of 15 pixels, and then this thing is exactly 100 pixels x 100 pixels. So once you've set that up, everything is locked in. Now it's just a matter of that tricky piece. And you can see in our diff, the bottoms of our testimonials are not quite right. And that's because there's this subtle fade out. And the way that we did that was with a pseudo element. So we created a an after element on the quote full, which is the text for each of these testimonials. We're going to create an element with no content, position absolute, bottom zero, left zero, and a height of 60 pixels and a width of 100%. So that basically creates a rectangle that just sits right at the bottom of each of these cards. And then we're going to give it a linear gradient to make the make it look like the text is fading out. So for each of the testimonials, we have to create a new linear gradient that uses its specific background color. So for Chad, we can create a linear gradient that goes from transparent to that navy color. And you can see that locks in and it just looks like it's fading out a little bit there. And then for Brenda, exact same thing except it's using purple. And you can see that one locks in. And then for Gary, same thing but with plum. And then finally for Linda, exact same thing but with blue. And so this is the target solution. As you can see, we got to 100%. And overall, pretty straightforward. Like I said, I think the real strategy here was lock in the grid first and then work on the individual elements cuz just locking in the grid with its colors got you to like over 70%. And then from there, it's like tweaking all of the elements. So this is the official solution. Let me know down in the comments if you hate this. Let me know if you if you would have done something slightly differently if you were trying to implement it in the official way. All right, first up, let's take a look at Wes's solution cuz he was so close. 99.69%. If you look at his diff heat map, everything is in the right spot except for this tricky little bit at the bottom. And so in the target, there's this linear gradient at the bottom of every card, and that's all he was missing. Everything else was spot-on. If if you compare the code that he wrote with the official solution, it is hauntingly close to what the official solution was. The only difference is for his double quote, instead of positioning it relative to its parent, so instead of positioning it relative to Chad, he positioned it relative to the entire document. So that's why you see these off pixel values here, but he still got it into the right place. Except these were just a little awkward because it wasn't relative to the chat container. Now if we take a look at WebDev simplified very very close as well 99.63 a few differences to point out is for their grid template rows instead of using fractions they just figured out the exact pixel value. So this takes into account the gap and with that you can dial it into a specific pixel amount but you saw that Wes just use one FR with repeat and then in the solution that I wrote I just had one FR twice. So you didn't necessarily have to have the exact pixel value but if you figured it out it would still work. What I did like about webdev simplified solution is they used grid template areas. So we've got top top so that's going to be Chad right will be Brenda bottom middle and then right. So essentially we can use these name values to place the elements in the exact cells that they need to go into. If you look at Wes's solution they just like the official solution essentially targeted each child and then told it which column and row to go into. But with grid template areas the syntax is much nicer. And so you can see for each of the testimonials, he just tells it which grid area it needs to be into. So this is a much nicer syntax. I think I probably prefer this than setting the specific grid and row span in each of the elements. Now why did Wes get 0.3 more% of a match than WebDev Simplified even though their diff looks exactly the same? Uh maybe Wes put a back door in his uh his diffing algorithm. It also could come come down to browser differences. Um, but West and WebDev Simplified essentially had the exact same solution. They both were just missing that linear gradient at the bottom of each testimonial. And one thing I'll point out for both Wes and WebDev Simplified, they absolutely sniped this box shadow, right? 5510 with the color like amazing work like to be able to figure that out. Both of them kind of like tweaked it a little bit, but uh the fact that they were just able to nail that box shadow, the diff looks perfect. It's awesome. If we take a look at Josh's, his box shadow is just a little bit off. You can see there's some of that red edges there. And so if we look at his syntax, he picked all the right values, but didn't realize that there is a CSS variable that you should have used. So this light black here is the one that you should have used. And I think it's like 08 or 0.9 instead of 75. Now Josh did not lock in the text in the exact right spot, but they were really close to getting the uh gradient at the bottom. This is one of the last things they were working on, I believe. But you can see they were setting it up as a pseudo selector. So set up that after element, put it at the bottom. He didn't get time to set the height and the width, but I do think he was on exactly the right track of the official solution where essentially you have the pseudo element and then you apply the linear gradient to it. So Josh was really close to that. Now what I do like in Josh's solution is he got the positioning of that double quote exact, right? So position absolute, but the testimonial has position relative and then super easy. Lock it in on the top right with a width of 100 pixels. Now, if we take a look at Scots, he had a really high score of 92%. But one issue I see in here that would have gotten him a little bit higher is this info selector here. So, this sets margin bottom to -10 pixels, which basically gets this area exactly lined up, but that's only being applied to Brenda here. So, you see it's inth child of two. If we take this and apply it to all of them, that bumps him up to 95%. So, it could have been the heat of the moment. He accidentally put the selector in the wrong spot, but essentially applying this to all of the elements instead of just one of them would give him a few more percentage points, which is cool to see. Now, taking a look at Adam's solution, this is one of the mistakes that they made in round one of the challenge as well. They didn't lock in any of the font sizes. And so, you can see that the text is just ever so slightly off. So, if we target the name selector, which he did not have, and set its font size to 15 pixels, we can see that that locks in. And then the quote snippet has a font size of 15 pixels, and that also locks in. So, I do agree it's a little bit tricky because the reset that we have applied here has the font size set to 16 pixels. And so, it it pro probably in the heat of the moment didn't think to change it. But I will say all contestants were briefed before the battles happened to let them know everything is a multiple of five to make it easier to guess. So instead of like pushing by one pixel, font sizes are either 5, 10, 15, 20. So all competitors were told that, but I think Adam in the heat of the moment kind of forgot about that and so they did not set the font sizes. But as you can see, setting the font sizes on each of those just locks it in. The other thing, the name here needs to be bold. So if we set its font weight to bold. So just a few little things that would have bumped Adam's score up just a little bit more. But I think the one thing that got him was not realizing that in the HTML there is this image element that needed to be positioned. So props to Adam for figuring out a unicode value. We can see in the after selector here that's where they set up this unic code value. So yeah, props wasn't the right play because there was an image, but a really nice pool in the heat of a battle. Now, if we take a look at Kevin's, I think one of the main things is the elements are extending to the bottom here. And that has to do with the fact that they have margins set here on the container. So, if we get rid of that, you can see that it everything shrinks up. But if we change this to padding instead, that will make it so that they don't extend to the bottom. However, it is baffling me that these elements are just a little bit shorter. I can't really find anything in the CSS that would make that happen because like yeah, there's no there's no crazy properties. I don't know if it has anything to do with how the grid column and grid row are being set, but setting the padding instead actually decreases the score because then you have less matching underneath. So maybe somebody who's really good at CSS, you can take a look at at Kevin's solution here and maybe figure out why are these elements not extending to their full cell. Uh but other than that, if you look at the diff, there's a lot going on here. So, um, they were not able to dial in the box shadow. Um, the text isn't perfectly aligned. So, if you compare that to Josh's solution, who they were competing against. There was just a lot more that Kevin would have had to have dialed in to reach the 97% that Josh got. So, that's it for this breakdown. Like I mentioned earlier, if you would have done it differently, let me know down in the comments. If you want to give this challenge a try, head over to synhacks.synax.fm. You can try it exactly like our competitors did. There will be a 15-minute timer and you can do your best to try and implement it. Though, now that you've seen the solution, you you might you might get it a little bit better than they did. All right, that's all I got for you in this one. Definitely tune in tomorrow for the semi-final battle. same place, same time.