MadCSS Round 1 Breakdown and Solution

Welcome to the Marchmad CSS round one breakdown. In this video, I'm going to be taking a look at competitor solutions, showing you what they got wrong, what they could have done better, and I'm going to show you the official round one solution. Now, if you're new to all of this, check out the Mad CSS tournament that we're hosting here on the channel. Round one from the left bracket and the right bracket has already been released. Tomorrow, we're going to see the quarterfinals released here on the channel, and then over the next two weeks, we'll see the semi-finals and the finals as well. But this video is all about breaking down the solutions and showing you the real solution for round one. If that sounds good, let's dive in. My name is CJ. Welcome to Syntax. All right, first up, let's answer the question that everybody's wondering. What would have happened if Adam Wan, creator of Tailwind, set the correct background color? So, he was in this competition against Julia. They got a 91% score. And really the thing to look at, and this is what our competitors will learn, as you'll see in these later battles, is overlay compare. That's totally fine, but you really want to look at the diff heat map. Because if you look at Julia's heat map, wherever you see black, that means things are the right color and in the right spot. If you look at Adam's heat map, it's all red, which means all of this area here has the wrong color. So, he's got a 26.05% match. What would have happened if he actually set the background color to white? 94%. So that actually would have done it. If if he would have set the background color, he would have just beat Julia by a couple more percentage points. So it's sad to see, but you'll notice in the diff view now all of that area that was red is now completely black. So he had the header, the tagline, the top of the input box, all of those things in the exact right spot. And one thing I'll point out about several of our competitors is they didn't set the color on the headline here. So you can see with Wes's, it shows up as blue. That means it's not quite right. So on this H1 here, if we set the color to that dark purple. There we go. That bumps them up about half a percentage point. But you can see inside the letters, it actually is totally black, which means that part is in the exact right spot. So several of our other competitors didn't find the fact that that H1 wasn't the default color. It actually needed to be set to be dark purple. All right, let's take a look at the official solution and how someone can actually get to 100%. So first of all, select the container and give it 100% width and height. set the background color to that white variable and we're going to use flexbox. So this is why a lot of competitors had to push things around if they weren't using flexbox and depending on the flex direction column with justify content center and align item center. You're kind of positioning each thing itself instead of letting the container position everything else. So it is a flexbox and then that flexbox has a gap of 10 pixels. So I am not setting any specific margins on any of the other elements. We're depending on the gap inside the flexbox to position everything accordingly. Now, that headline there has a font size of 30 pixels. Font weight of bold, which is already the default for each one, so you don't necessarily need that. And the color is dark purple. So, a lot of competitors miss this because they thought it was just the default color. So, you need to actually set it to dark purple. And you can see we haven't lined it up yet, but where it overlaps is almost an exact match because that's the color it's looking for. Put it in the center, which it already was. And then set the margin to zero. So, the HTML itself is using an H1. and that has some default margin on it and we want to get rid of that so that way the only spacing is that gap that's set by the parent container. From there, we're going to target that hallucinate word with the highlight selector and set its color to purple. So, this is the overall layout and unfortunately things aren't lining up yet. And that's kind of what our competitors were running into. If they tried to use a flexbox to start, they got really paranoid that the text at the top wasn't lined up. But what you'll see is if we get the right styles for everything else, everything kind of falls into place. And that's it's really just that's kind of the name of the game. Like you'll see my score is going to hover around 50% or so once I get these other elements in because it needs everything else to lock in the right positions. So the tagline had a font size of 15 pixels. A lot of competitors missed this. And the color was gray. And also we removed the margins from it as well. So the uh tagline here is a P tag which has some default margin. And so we're just going to get rid of that margin. So that way we only have the gap from the flexbox. From there, we can start to style the input box. And this is where a lot of competitors took different paths, right? I think the HTML is kind of guiding you to say, "Hey, style the parent container input box with that background color and then put the text area and the button inside of it." A lot of competitors kind of just ignored the parent container, styled the text area to look like this, and then fixed position the button inside. But I'll show you how it works if you actually style the parent container with that background color and then position everything else inside of it. So the input box has that background color of gray has a width of 420 pixels, border radius of 15 pixels and this is what I mean by position the parent container and then everything is positioned inside of it. So make the parent container a flexbox flex direction column and give it a padding of 15. And this is another thing where changes will start to cascade. Right? If you put the padding on the text area and not on the parent container, things won't be aligned up perfectly. So the pairing container has a padding of 15, but that actually makes it so that submit button is going to be lined up in the right spot. And then we'll have to adjust the padding inside of the text area itself. So for the text area, set the background to transparent. And you'll see I'm already up to 60%. Um, so we're doing pretty good here. We need to get rid of the border, but then we remove the padding. So notice how without the padding, the text inside the texture is just pushed in a little bit. But if we remove its padding and depend on the padding of the parent, then it puts it in the right spot. Font size of 15. remove the outline from that text area, set its height to 40 pixels. And that actually is what makes the parent input box have the correct overall height is by setting the text area to be 40 pixels high. And then the one thing that most of our competitors didn't see is there's this little resize handle there on the text area. And you need to remove that. So you say resize none. And then we can style the placeholder text which has a color of light gray. All right. Now it comes to styling that button inside the input box. And you'll notice it's wrapped in a container, this input footer. So in my mind, that should be a flex box where you just flex in the button that's inside of it. And that's exactly what the solution does. So target the input footer, set the display to flex and justify content flex in. So that pushes the button to the far right. And now you don't have to worry about padding or anything else because the padding is already set by the parent and we can just directly start to style that button itself. So the submit button has a background of orange, a color of white, font size of 20 pixels, and a fixed width and height. So it's 35 pixels x 35 pixels. So again, don't worry about padding or anything like that. If you set the height and width to a fixed value, it's going to be the right thing. Remove the border that comes with buttons and then set the border radius to 10 pixels. So that is our submit button and it's in the exact right spot. Now, this is kind of what I was talking about where like if someone had this solution, which so far would have been perfect, it's messing with their head because if you look at the diff, things are not lined up yet. And they're not going to be lined up until we actually set the height of these three buttons down here. And so that's when you're going to see the overall diff lock into place. But if someone had the perfect solution, this would have at least gotten them to like 63%. So that last area down there has appearing container called suggestions. We're just going to make it a flexbox so that we can set the gap to 10 pixels. Again, we don't have to worry about margin of each button. Set the gap on the container and then everything else will fall into place. So, for each pill button, set the background to dark gray, the color to white, the font size to 15 pixels, remove the border, set a border radius of 25 pixels, and there's only one more property we need to set, which is the padding on the buttons themselves. But this is crazy to see that right now it's a 63% score, but the moment I add that padding, boom, everything else locks in because that changes the height of the container and then everything else is in the exact right spot. So, this is why you saw a lot of our competitors setting specific margins, specific paddings, because if you don't have the big picture and have everything else locked in, it's going to be a lot harder to know that you're doing the right thing. So, overall, the solution fairly straightforward, but in a competition setting and the fact that you're seeing this overlay and your things aren't lining up early on in the battle, you're more likely to start tweaking things. So overall, I would say that this is a fairly straightforward solution and the way that most people would implement this if they were doing this on the job or for a client because uh we're using flexbox. We're depending on the gap and we're we're using parent sizing instead of exactly sizing all of the things inside of it. So I I stand by this this official solution, but this is the solution that would have gotten you to 100%. Now, another one I want to look at is Adam Argyle's solution. So overall, this thing looks really good, but they're only at 92%. And if you stay on the overlay comparison, you'll see that like it's really hard to spot anything that might be off slightly, which is why in this case, and definitely in later battles, Adam is going to want to use the diff overlay because if you look at the diff, you can see which aspects of this are slightly off, right? The placeholder text isn't there exactly. The headline is just a little bit off. The tagline's a little bit off. the text inside the buttons was a little bit off. So, these are some of the things that were preventing him from getting to 100%. Um, one thing I do want to note which he missed is he set the background color directly to white instead of using the white variable. And now this doesn't bump him that much. So, he's at 92.02. If he would have gotten that and used the variable, that would have increased his score by about 1.6% because you can see this isn't perfect white. It's got an A on the end there. So, that is one thing that would have done a little bit better. Now, the other spot that could have increased Adam's score a little bit is setting font sizes. So, we saw him dialing in the letter spacing, which increased his score a little bit, but he didn't set the font size. So, the font size of the tagline was, I believe, 15 pixels, and that is the correct size, but now that moves everything else out of alignment. So, you see that brought him back down to 91%. But if you set the font size there, he might have actually seen the fact that like the bottoms of these and the buttons were a little bit out of place. So, set the font size there. I saw this in another spot. Yeah, on the placeholder it was setting the letter spacing. Again, you want to set the font size here to 15 pixels, which gets it locked in a little bit better. And then there's a couple of other areas that just like slight tweaks would have gotten a lot closer. Like we saw that padding should actually be zero on the text area, but then if you set padding to 15 on the parent, that gets those things in line a little bit better. But then down here for the button, we don't need to set any padding, and that gets it much closer as well. So there's a lot of these little things that if you didn't get them exactly right, the there's slight pixel movement cascades to everything else. So Adam was super close, but the 92% makes sense just because if you're looking at the diff view here, there's still the outlines of the text, the input box, everything is not exactly the right size. And that's really what's hurting his score here. Now, another competitor that didn't set that text color was Cassidy. And it's unfortunate to say, but if she would have caught this, it would have given her the percentage points she needed to get past Josh's 96.27. So, if we take a look at this H1 and we set the color to be this uh dark purple, look how that diff just locks into place and that 96.7 would have beaten Josh's score. So, it's these little things. And you'll see our competitors learn this later in the competition. look at the diff view because that's really where you're going to figure out how to move these things around. Now, I say that Cassidy would have won with that one property change, but the thing is Josh was also missing that property. So, if they both would have said it, then Josh probably still would have won. So, you know, it just comes down to these little things in a competition like this. So, lastly, I want to look at our highest scoring competitor, Chris, with a 97.47. And it's actually amazing that they got their score that high. And it really is just a matter of pushing things around because they didn't use a flexbox. didn't use the container to position everything. Every single element is kind of positioned relative to the other. So the body has this padding which kind of pushes everything down instead of having a container inside of it. And then each element is either setting margin or padding to like push it into the right spot. And I think a competition like this kind of forces you to create a solution like that. Um but his overall solution is pretty far away from the target solution because it was depending on the container being a flexbox. And so there's a lot that needed to change here. Also, Chris was one of the competitors that actually styled the text area with that background color instead of styling the parent container. And so the parent container he set with just a max width and then put everything inside of it, set the overall height and then absolutely positioned this footer inside of the uh the parent container there. Whereas, if you look at the official solution, that input footer is inside of the input box, which is a flexbox. So, there's a lot of tweaking that would have needed to go on here to get it to 100%. And I think it would have likely been also sub pixels. So, in some of these padding values, instead of just being five or 10 or 15, it might have been 15.1 or 15.2 to really get it into the right spot and match up with the official target solution. All right, that's all I've got for you. But if you want to give this challenge a try and the upcoming challenge that's going to be released tomorrow, head over to sinhacks.synax.fm. So once you log in with GitHub, you're going to see the targets here and this Mad CSS official battle round one. You can do a solo battle to see can you complete it in under 50 minutes. Now, if you watch this video, you're potentially going to have the the keys to the castle to get to 100%. Uh but if you want to give it a go and not cheat, uh definitely check that out. And by the time that you watch this video, round two is going to be released as well. So you'll have a chance to try what our competitors are going to be doing in the video that's released on Friday before you see the video. So if that interests you, definitely go check it out. Sign up on Syn Hacks, give it a try, and also uh leave a comment. Let me know if you liked this video. Let me know if you'd like me to do this for the next uh round of challenges. And uh yeah, I'll see you in the next