Am I Good Enough To Solve These CSS Battles?

Key Takeaways

in this video I'm going to show you my thought process for how I approach complex projects by attempting to solve multiple CSS battles entirely live these are CSS challenges I've never seen before and I'm going to go through my entire thought process of how I would approach it start writing some code debug live any problems that I run into and this is great for seeing how I actually approach problems how I overcome bugs I run into and you can really apply some of these skills to your own coding welcome back to web dev simplified my name is Kyle and my my job is to simplify the web for you so you can start building your dream project sooner I'm going to get started by tackling this Deadpool CSS battle which has like Wolverine Deadpool that's cuz I recently watched the Deadpool Wolverine movie great movie if you haven't seen it but I think this is going to be a great starting point cuz it doesn't look like it's too challenging but it's challenging enough it'll make me think through certain things so the very first thing I like to do when I approach a project like this is I like to look at all the different components and think about how they're going to work together obviously the background is super simple I just make a background that has that particular color same with this red section it's just going to be a red circle but the more complicated sections are going to be these black circles as well as the white eyes so this black circle the first thing that pops into my mind is I could create a shape that is essentially a black circle and cut it in half but the problem with that is you can see that this black circle is actually a full circle with like a middle segment taken out of it so if I create a normal circle with this height and this width and I cut it in half it may not give me the exact rounding that I want I may play around with both approaches of creating one big circle and putting a red strip down the middle and creating two separate circles and cutting them in half to see which one actually gives me the approach I want but those are the two ways I think about that problem now the eyes these look to be perfectly cut in half circles so I'm just going to create a circle cut it in half and that should be all that I need to do so to get started we can kind of tackle the easy things which is the yellow and the red sections so the very first thing I want to do is I'm going to have this div here which is going to be my background and I think actually I can probably just style the body I haven't done a CSS battle in a while but I think I can just say body and I can give it that exact color whoops this should be background color there we go paste that in and yep that did work exactly as I want now for this div this I'm just going to have to be the head wrapper there we go I'm going to give it this red color so we can say head wrapper background color is going to be that there we go and let's give it a height here it looks like maybe it says right here this is 400 by 300 pixels so the head's probably about 200 pixels tall and if we want to Center that we can do that here we can just do a display of flex and justify our content in the center and align our items in the center now if we give this a width which is probably also going to be 200 pixels and we round it with a border radius we'll just do 100% you can see we get a perfect circle and when I do my comparison here if I just do a little diff we'll notice that these green sections that appear mean that I am off on the shape and if I look at the comparison you can see that my shape is actually a little bit lower than the one above and it's also not quite big enough on the or it's a little bit too big on the bottom so I actually just need to move it up a little bit so it's actually not perfectly centered which I find a little bit strange yeah it does appear that it's just not perfectly centered so instead of doing this what I'm going to do is I'm just going to position this absolutely absolute just like that we'll say the left is going to be 100 pixels cuz that did look like it lined up perfectly left and right centered and the top here I'm going to do like 90 pixels that does way too far so let's do actually yeah 45 pixels nope so it's going to be 50 pixels nope 55 pixels still not quite right 56 57 looks like I'm going the wrong way so 54 53 54 looks like it's dead on the money as you can see there's pretty much no green coloring at all there's just a faint outline which is probably because my browser is slightly zoomed in if I zoom this out to 100% it's still there but either way it looks pretty good at that particular level now we can turn this diff mode off so we can actually see our product that we're working on and the next thing I want to work on is going to be the black circle and like I mentioned there's two different ways that I can approach this with either one Circle or multiple circles cut in half I'm going to get started by approaching it with the multiple circles cut in half just because I think that's the way that will not work but I'm interested to see if it actually will work so we can come in here and we can say that this is going to have a class which is going to be uh black circle there we go and I'll also give it the class of left so we know this is going to be the the left hand side close that off I'll copy this down cuz I'm going to have a right hand side as well so we'll come in here call this one right so now we have our black circle and for all of this we're going to put all of our generic classes inside of there and then we're going to have a black circle. left which is specifically for position it to the left so we'll come in here close that off and then we'll do the exact same thing for the right side just like that there we go so let's look on a black circle first obviously we need to give it a width and a height and a background color so we'll say background color and it is actually pure black so that's nice and easy we'll say the height here is going to be 90 pixels or something like that and we'll say that the width is going to be I don't know let's just say 90 pixels as well so we get essentially Perfect Circle obviously this is not showing up as a perfect circle I'm not really sure why my height and width are both exactly the same they're maybe something going on with the display going on in these oh it's because I have two black circles obviously stacked on top of each other that makes a lot of sense for now I'm going to comment this one out so I can work on just one of the circles at a time and obviously this height of 90 is not nearly big enough let's try 190 that's going to be too big we'll just do 150 I know it's probably not correct but we can kind of get started at that point and same thing here I'll make this 150 now I will make my border radius 100% so we get a perfect circle and I'm going to try just doing a little bit of work to position this in the correct location so here I can do a top and essentially this is just going to be in the dead center so it should be 50% so I can say top 50 50% and I can also say transform and I want to translate actually I'll just use the translate property and I want to translate essentially 0 and 50% actually maybe 50% 50% let me see what's going on here so if I have just a top of 50% that's not doing anything it looks like oh duh I should probably position my element absolutely first so absolute just like that and now if I add in this you can now see that this is perfectly hor or vertically aligned in the dead center just like I want it to be now I just want to offset it a little bit we'll say that maybe like the left property here is going to be like 10 pixels let's see we'll put the diff mode on not quite right it's probably going to be 20 pixels still actually a little bit off if I turn it off div mode it looks like it's a little bit too big so we'll maybe say like 25 pixels that's obviously too far 22 still might be too far so maybe it was going to be like 18 or something put that diff mode back on we'll see 17 that actually looks really good at 17 now we just need to make sure the height is correct cuz right now it's a little bit too tall at 150 so we will try 140 as our height that's actually no it's too small actually I need to make it a little bigger so 160 165 164 it's going to be somewhere around there it looks like 164 lines up pretty well with this top section but you'll notice it's actually too wide my circle is currently too wide and that's because if we look at the arch you can see the arch doesn't quite line up exactly as it does before and that's because this thing I think is technically taller than it is wide just based on the way that this curve is working and I could try to fine-tune this by modifying my width for example making it 140 doesn't quite work making it 160 actually looks like it lines up pretty well if I try 170 it's going to probably go the other direction and we can see it does so 160 actually lines up really well with this it doesn't quite line up with the right hand side of my circle shape I bet if I make it 164 now I have a perfect circle still not far enough along in this direction so let me try making it a little bit wider we'll say 165 166 that actually looks really good we'll make this 166 and you'll notice now that the entire circle shape is essentially what I want it to be around that entire section but again you'll notice I now have just one full circle here doing a circle that was cut in half doesn't really work because again to get the curve to be perfectly aligned as you can see like I have right here to get that perfect lined curve I essentially need a circle that is this big so I would need to cut off essentially everything in this middle section to make it work or I could cut off everything to the right of here and then copy it and cut off everything to the left of this one in my case I'm just going to keep this one black circle get rid of these left and right classes I actually don't even need them if we go with just this particular approach and instead we can close off this there we go what I'm going to do is I'm going to have a band that essentially goes just right down the middle so we'll just call this red band and I don't have EMT in here so we'll say div class Red Band close that off there we go and we're going to have our red band and the Red Band for this one is just essentially going to be the full height of this so we can say height 100% let's do a width of like 20 pixels it'll probably have to be bigger than that the background color is just going to exactly match the color of this Deadpool Mask so we'll just copy that over there we go you can now see we have a red band I obviously need to position it in the very dead center so we'll do position absolute and we're going to come in here with a left of 50% translate of 50% that should put me in the exact dead center and now I just need to increase the size of this looks like it needs to be about doubled to 40 pixels maybe 45 pixels actually that's too far we'll try 35 pixels that actually looks pretty good let me try 36 versus 37 I don't know I would say somewhere around there 35 36 somewhere around there looks really good where you can see if we toggle between these modes you really can't notice almost any perceivable difference between them and if there is any difference is most likely due to my zoom level now I'm going to change this to 165 and 165 to check to see if that actually looks good it actually looks like it's a little bit off on this diff mode so we'll go back to 166 166 it looks a little bit better still maybe not perfect but it looks pretty good at that level now the final step is going to be positioning the eyes in the center here for both of these so I can just put them inside this black circle so have a div we'll give it a class of I and we'll also say that this one is going to be the left because for these ones it really doesn't make sense to have both of these be the exact same div I mean that would be kind of crazy to do so we'll have the right and left eye and again we'll do this thing where we have our eye left and our eye right now before we get any further on the eye I did actually notice one thing just looking over at the side here there's a little bit of a black bar you can't really see it very well especially probably on YouTube is almost invisible but there's a slight back black bar at the very bottom and the top of this black circle that we have going on and that's because our red band is essentially just not quite tall enough I'm going to make it just a little bit taller than 110% so or than 100% so we'll make it like 110% and we're also going to set our black over or Circle to have an overflow of hidden so it doesn't actually Escape any of the bounds that actually still gives us that black bar if I zoom out it is still there that's interesting that that black circle is still up there so we'll get rid of the Overflow hidden we'll come in here we'll put a top of5 pixels and this way we're just essentially getting 5 pixels of overflow on the top and bottom to get rid of that black you know halo effect that was showing up there it may be because of my browser my zoom level not 100% sure what's causing it but this at least will eliminate that particular problem now for these eyes they're going to be pretty similar to what we have here for this black circle so I'm just going to kind of copy all of this that we have paste it into here for the eye but obviously the background color for this one is all white as we can see over here the size is going to be significantly smaller so let's bump this down to like 20 pixels so we have something much more reasonably sized to work with there we go it looks like it's going to be a little bit bigger than that but for now that at least is working as we expected to and I should probably make sure yeah both my eye right and my eye left are there I just need to make sure I position them in the correct location so they're not 100% in the very center so this top 50% really doesn't actually work instead I'll probably need to manually position it with some top and left values so let's go ahead and we'll start with a Top Value here let's just say we want to do 50 pixels 90 pixels and I'm going to put this into diff mode so 90 looks like it's too far 60 is not far enough 70 80 so we'll say it's probably somewhere around like 75 or so that looks pretty close and now we'll go with our left values we'll do like 20 maybe 25 that actually looks pretty good if I increase the size of this circle a little bit we'll do like 25 and 25 that looks really good actually maybe just needs to be a little bit biger actually so we'll make the width a little bit more we'll try 30 and we'll make this 30 as well and we're just going to move the eyeball back a little bit so we'll try 70 here 20 here maybe needs to be moved down a little bit too move this over a little bit maybe move it back one that actually looks really quite good it looks like it's in the exact right spot it just needs to be essentially cut in half if we move this off of div mode yeah it looks like it really just needs to be entirely cut in half now probably the easiest way for us to cut this shape in half is actually just to only put a border on one/ half of the shape and then essentially reduce the height of the shape in half so to show you what I'm talking about our border radius here we're just going to do it on the bottom left and let's do the bottom right there we go so now if we let that save real quick hopefully it should do something let's make it actually like a pixel value so we like 20 pixels for example same thing here 20 pixels that's actually not quite working we'll move back to 100% And I think that's because I seem to say left bottom here let's try that I never remember the order of all these so we'll say that doesn't look like it's working so we'll say border left radius here we go we got bottom left and we got bottom top border bottom right radius there we go and now that has given us a simil or half circle shape but of course it's too tall if we cut our height in half we should hopefully get that shape correct I just need to make sure that this value right here is essentially a pixel value so we'll say 30 pixels because it needs to be essentially a value that is the same as our width so we'll say 30 pixels here and now you can see I get a perfect semicircle shape that is exactly what I want now I just need to rotate this so we can come in here with a rotate we'll try 30° at first that actually looks like the perfect rotation so that was a pretty good guess on my part I just need to move it down a little bit and to the left so we'll say here that we're going to do left a little bit we'll say I don't know let's do it back a couple pixels with like 15 16 17 18 now let's try moving it down so we'll do like 67 oops that's not right direction we need to do like 75 6 7 8 and I need to maybe move it left just a little bit more 18 and actually maybe need to rotate it like 29° 28 27 looks like 28 is about correct and maybe move it down just a little bit more whoops that's the wrong direction still the wrong direction that actually is probably about correct let's do this in normal mode looks like I maybe have it slightly too big on the ey size so we'll say like 29 here and I'll just copy that down to these values here let's actually do 28 so we can get exactly in half for a height 28 and this would be 14 let's see if that shrunk it down enough it looks pretty close we'll try moving it up a little bit Yeah I'd say that's pretty close it doesn't have to be perfect looks like it's a little bit small now which is kind of an interesting take so maybe the 29 was the correct value there we [Music] go and we'd probably just need to move it back down just a little bit yeah it's it's a little bit tall I don't know I think it's close enough though it only moves a very very slight amount when I look at it in diff mode it's almost exactly perfect so I'd say say that that's probably good enough now all I need to do here is change what I've essentially done for my left so this will be down here so I can get rid of this left value on this section and the I right should just have a right of 18 pixels and I just need to rotate the I the other direction so we move the rotate down into here to be -28 and it looks like that is exactly what we want but it's positioned possibly in the wrong location so I think maybe it's because I need to change something about my rotation let's see exactly why that is or maybe my right value needs to be modified a little bit there you go actually just adding one to that looks like that was exactly what I needed to make this work and the way that we can test to see if this actually works is just by clicking submit and it'll give us a ranking essentially between 0 and 100% for how close we are to what the actual thing looks like and I got a score of 601 that essentially means I have 100% accuracy on this you can see 100% accuracy now the scoring the way that CSS battle works is based on the least amount of code that you write but I generally don't actually follow that I just like to write the code in the way that makes the most sense cuz generally writing the smallest amount of code makes you do a lot of really hacky weird things that you would never do in a real world application and I try to make this about as close as possible to a real world application now let's go back and see if we can tackle something else on the CSS battle so we'll just go to the overall all the different battles and just kind of see what there is that pequs our interest actually I kind of like this one right here which kind of works with some weird shapes going on so we'll just do this one right here so the very first thing I like to do is just get rid of all this extra code we really don't need it and I actually like to put my CSS Styles at the top it's just more like how I actually write CSS so here we go this is what we're going to work on first of all we're going to get our body color the most straightforward thing we can do background color is going to be just like that there we go and then we essentially just have two different types of shapes that we're going to be giving these two different colors so I have 1 2 3 four five different segments that I want to do and the interesting thing to note is that segment one and five and segment two and four are essentially the exact same thing they're just positioned in slightly different locations so that shouldn't actually be that hard for me to do so we can come into here and we can specify different segments that we have so we can say segment one which should be essentially the same as segment 5 there we go I'm going to put them both in the same selector and then we're going to have segment two and also segment 4 and those are going to be in the exact same selection and then finally segment three now to actually style these segments is essentially just going to be creating a rectangle and I think what we're going to want to do is use the skew property to give us this angled shape on it but I'm not 100% sure it's not a property I use almost at all in my day-to-day CSS work so let's just go ahead and we're just going to get started with something really simple I'll create a single div and we're just going to give it a class of segment one just to get us something to get started with background color is going to be this color right here there we go width let's just say it's going to be 50 pixels and we'll do a height of 100 pixels just so we can see it on the screen there we go we have it right there I should probably get rid of any padding that I have on here as well or margin there we go that way we have nothing extra showing up on our screen and now I'm going to just move this down I think it's just it's actually not quite centered I don't think but we can try centering it we can say top 50% position absolute and we can say translate 0 and 50% there we go that should translate us to the correct location doesn't look like it's moving though and I think that's cuz there should be no comma here there we go so it actually looks like it may actually be centered it looks like it is actually lining up perfectly and I think I actually have the height of this element right the width is also correct actually that's kind of surprising all I need to do is try to skew it into the correct location so I think the skew property is what I need but like I said I almost never used this so we'll say transform skew and we'll see exactly what we need to do here so let's try skew X and we'll just put in a value I think it's based on degrees so we'll say 20° obviously that looks to be the wrong direction for the skew so we'll say -20° and this actually doesn't quite look like what I want because I only want the tops and the bottoms to be moving I don't actually want the sides of it so let's try skewing in the y direction there we go that is actually what we want we'll do 20° we do a little diff on this and now let's try skewing it a little bit further maybe it's 25° nope 25 there we go that looks like it lines up perfectly for the angle of the thing now I just need to make sure the position is correct it looks like I need to move it down a little bit further and that's because the skew essentially just moved the position of this so I'm going to put this Top Value in pixels we'll get rid of this translate because we don't actually need it so we'll say 100 pixels see if that lines up we'll use the diff tool for this 120 110 105 looks like 110 was pretty close let's come in here and look at this maybe I need to skew it slightly more in One Direction or the other so we like 26° that actually might be more correct and we'll try moving this down just a little bit that actually looks perfect so if we look at the actual view here and analyze yeah I can't really notice any difference between these so this is a good example of me kind of knowing about this skew property I should probably capitalize the Y here just so it looks a little better so doesn't say skewy so it's just a thing that I was familiar with this skew property I've never really used it all I knew is that it was a way to make shapes kind of bend a little bit and have this little angle to them and just by tinkering around I was able to stumble upon the correct answer but a lot of times just stumbling upon the correct answer doesn't happen like I noce SK X doesn't work and skew doesn't work and skew y I happen to find out is the one that worked but if I didn't ever find out what was working and I knew that skew was probably what I wanted I could just easily go to ndn look up the documentation for skew they have tons of examples and I would find an example that essentially looked like this and I'd be like oh that's probably what I need so now that we have segments done I want to come in here with a second or uh separate selector for segment one and that's going to be specifically just for positioning the left property so where do I have the left property obviously I don't have a left property so we'll do segment five here because obviously this is as far left as it goes so I'm going to copy this do segment five and all I want to do is say right of zero and there we go that should put it in the correct location but it looks like it doesn't it is way off it needs to be either lower or higher so I'm going to move my Top Value up into segment one there we go segment one put a Top Value in here and this one I'm going to have a separate Top Value which is going to be pretty similar so we'll start with 100 pixels and I'll move the Top Value out of here there we go let's do 90 80 there we go and I think I need to go a little lower so 85 86 oops pixels there we go 87 there we go 87 looks perfect so we'll keep it just like that so now I have everything for Segment 1 and five entirely done now we can move on to segment two which is going to be pretty similar so I'll just take the code in here directly copy this I'll make sure I add a semicolon to the end of here just because that's good practice for when you're writing actual CSS code background color for this one is going to be this darker color so we'll paste that in and the width for these is going to be quite a bit wider so I'll come in here we'll get segment two and four and I might as well while I'm at it add in segment three so segment two is going to have the exact same height but I believe the width is probably about double so we'll say it's going to be 200 pixels sorry 100 pixels for the width there we go and now all I need to do is just move it down to the position that I want it to be so we can come into here and select just segment two there we go and I'm actually going to move this code up a little bit into here abouts there we go just so I get it in between segment one and segment 5 to kind of keep it aligned a little bit better we'll minimize these back down and this one is just going to have a Top Value there we go and for now I think I'm actually going to comment out segment four so it doesn't get in the way of what I'm working on also my skew direction is probably going to be the exact same but with a negative value so let me come into here change this to a negative value and skew me upwards instead of to the downward Direction so my left property let's see if just putting in 50 pixels lines me up and of course it does that is great now all we need to do is move this down a little bit more so we'll do 90 95 maybe even 100 actually 100's looking very close let's try 101 102 it's going the wrong way try 99 98 99 that looks really quite good let's see yeah I really don't notice almost any difference other than it needs to actually move down a little bit so let's try 100 yeah 100 looks really good I like that looks like the skew is maybe a little off though because if I look at the far right side it should be bent down a little bit more so I might actually have to skew this slightly more for example we'll just come into the diff mode here we'll see how this looks with 27 versus 25 26 27 27 looks decent let me just try moving this up a little bit 99 pixels 98 99 100 oops 99 it looks pretty good I think what I'm going to do is I'm just going to go back to when I had 26 move this to 100 and I think that's probably good enough again it's probably just a little bit of zooming of my browser if I zoom it out a little bit still off by a little bit but honestly you get the gist it's pretty much the exact same thing so now we can mess with segment number four so we can come in here segment four is essentially the exact same thing but I need to change this to be the right property just like that I want to comment segment 4 back in and if we look at the diff mode it actually lines up perfectly so we don't really need to change anything at all which is great because the top value for Segment four and two is the same so we can just leave it directly into there and take it out of here I'm a little bit curious why the top segment or the Top Value was different for segment one versus segment 5 little bit strange but overall nothing really to worry about now the final segment is going to be segment number three which actually looks to have the same skew as the other ones so we'll come into here with segment three I'm going to copy essentially everything I have in here this one is going to be at positive 26° the color is going to be slightly different for this one and we need to specify our left property which I believe is just going to be 150 pixels there we go and that actually does line up properly now we just need to make the height of this a little bit bigger so I think it's going to be 200 which which will drop our Top Value by 50 and it looks like that actually just lines up perfectly we don't even need to make any other changes so the nice thing about this shape the way that I kind of analyze it this whole entire CSS design is I was able to break it down into distinct sections I notice section one and section 5 are identical just placed in slightly different locations same things with section 2 and section 4 they are identical just again placed in slightly different locations and section 3 is really just like a really big version of Section 1 and section 5 if we actually look at the code for Segment 3 here you can see this one has a width of 50 and a height of 100 for Segment 1 and 5 this is just a width of 100 height of 200 so it's literally just doubled the values of the previous one relatively straight forward and now if I do a quick submission I should hopefully see that I have 100% accuracy on this I'd be pretty surprised if I didn't because it's really pretty much exactly there and if I close out of this you'll notice we get 100% match now if you want to be able to tackle CSS problems like this with relative ease I highly recommend checking out my CSS simplified course it's linked down in the description below this course covers everything you need to know about CSS from the absolute Basics all the way up to complex things like animations and responsive designs and the best part is it really Builds on the core fundamental knowledge of understanding how CSS Works which makes it really easy to write more complex CSS code since you know exactly what each line of CSS is doing that's why I created this course to really help me and other people understand CSS at a fundamental level so if you're interested in that I highly recommend you check it out in the description down below with that said thank you very much for watching and have a good day