I Challenged The CSS King To A CSS Battle

for some reason i decided to challenge kevin powell who's literally the king of css to a css battle am i going to lose probably but is it going to be fun you betcha the rules are pretty simple all we're going to do is try to complete the css battle that we're given in 10 minutes or less the very first person to complete it 100 wins and if we both run out of time whoever's the closest to 100 at the end of the time is the winner just in case you don't know me my name is kevin and i'm really looking forward to this kyle challenge me to this uh css battle and i'm really looking forward to it i really enjoy css and i think it's gonna be a lot of fun uh i'm a little bit nervous to be honest i feel like kyle has nothing to lose on this you know he's like oh kevin knows what he's doing with css so if he wins i just look silly but if he loses you know he's like oh kevin kevin's the king of css of course i was gonna lose so i'm a little bit nervous about this but hopefully hopefully it goes well uh and yeah hopefully i crush him but we'll see how it goes all right start the timer and let's go this one i think will be not too bad uh for it we need three divs and each one of those will be a triangle so i think for all of them and we want them all to be the same and i'm going to leave the that's these comments let's get rid of the comments i'm not worried about the scoring i'm going to leave the background there but we're going to set the width to 0 pixels and the height to 0 pixels and i think you can actually cheat here in this and actually just make it zero and it still works um and let's do a border i have to remember how to do an up arrow uh border left we're gonna do is it man okay let's just try 100 pixels solid transparent is it like this i'm going to have to i'm going to screw this up border right and then border i think the bottom is gonna point up um solid red ah i did get it right awesome awesome super okay i don't use this trick too often and i always forget how it works so we don't want the background it's all based on the border color to create a triangle in css the easy way we're going to be using borders for that it kind of sounds really weird but i'll just show you essentially we have a border we want it to be pretty big essentially as big as we want our thing to be so we'll say like 50 pixels solid and we want it to be transparent which is going to sound really weird but you just take one of the sides and give it a color so border we'll say left and we'll give it the color of this for example we want this to be the border left color so now you can see we have these triangles obviously i don't want the left one to be this color i want the bottom one that should give us a triangle facing upward so the border will give it a also we don't want this to have any width so we can say width of 0 8 of zero there we go cool so that is that except we need it to be a bit wider and to do the width is it here that i can do that 150 that made it taller it's these ones 125 you would do it instead and they need to be the same that looks pretty close actually so i'm happy with that okay definitely the size of our triangle is way off we need our triangle to be uh less big so we'll do a hundred and 100 pixels and we'll change this to like negative 71 51 okay i see part of our problem our triangle needs to actually be wider than oh this is kind of a pain our triangle needs to be wider than it is tall i have to think about how to do that i i've gone the wrong direction with creating this yeah to get them in the middle i guess what we could do here is we get to say that it's position absolute absolute uh top 50 left of 50 and then we could do the transform transform translate negative fifty percent negative fifty percent to get them right in the middle uh the only problem with that oh they're stacked the wrong way darn okay we can play that's fine um translate so that's that okay i'm gonna leave that there and then we're just gonna go we're just gonna use the cascade and keep doing it this way um so this one the my first one needs the one that needs to go up negative 40 percent whoops 40 is this one 30 maybe 20. that one needs to go up we want uh 60 then bigger negative 70. oh negative 100 okay and then this one i guess would be a positive 100 no zero no negative 20 negative 10 20 was zero's two oh wait wait wait that's perfect perfect perfect okay i was eyeballing it on the side that's perfect ah this is just not not at all correct i feel like i should have just gone with boxes on their sides then cut them off [Music] okay i pretty much had to scrap this entire plan unfortunately this is this was wrong i got four minutes left to figure this out so instead of doing all of this junk no god no god please no no i just need to switch the ordering of them um now i would normally just actually fix this a different way but we're just going to index this because it's going to be faster than doing it how um you know the i think the right way to do it would be to just switch the order they are in the dom um and how i'm styling it here but this one will be 100 and then my last of type will be a z index of negative 100 and there we go that looks perfect to me let's hit submit come on come on come on 100 match done awesome that one wasn't too bad at all cool happy with that how much time did i have left five minutes left yes cool that one was good kevin's gonna destroy me on this one i'm like at a loss of what i need to do for this for some reason it's probably really obvious and for some reason i can't think of the correct technique because the the triangles i was originally going these are not uh what is their correct word they're not like 45 degree triangles so it's not going to line up properly let's just back this up a little bit and see where i had my triangles maybe we can just try to get close and maybe we'll be closer than kevin was okay we'll submit it's definitely not correct but maybe i'll get like 50 accurate all right 89.7 percent that's pretty good i got 20 seconds left let's see if we can get it slightly closer um maybe make this 120 let's see if that's closer than 89.7 oh that's definitely not closer what am i thinking we'll keep it with what we had before we only got nine seconds all right we'll just hope that kevin somehow didn't get this one complete and he somehow got less than 89.7 i'm highly doubting it because kevin's really good at css but we'll see we have to do this circle thing over here essentially so i know i need an inner circle an outer circle and then just some lines that go through it so we're going to have two divs this is going to be our outer circle and this one is our inner circle and of course my ocd is kicking and we have to style that a little bit better so we're going to have a what is it our inner circle outer background is going to be this mustardy ugly looking color and border radius 50 right i think it's 200 pixels width is 200 pixels there we go and we need to center this so we're just going to use our body i wonder if i can even do this position absolute and if i want to say like top 100 pixels oh i can do that okay so let's say top 50 pixels left 100 pixels uh 75 pixels that looks dead centered [Laughter] [Music] looks like our square is maybe not 200 by 200 now it looks like it's just off so our top should be like 30 pixels maybe we have to get rid of margin margin 0 and then do top 50 pixels there we go and our left should be uh 90 pixels nope 100 pixels oh yeah there we go that's definitely perfect so we want the parent or we can do i guess the background first because that makes sense body body body background is that good um and then let's just try with 100 height 100 percent and then a display display grid place i don't know if this is gonna work place items center should work oh it did see it didn't work before and the height 100 seems to be working um so i'm hoping that stays true cool okay that that's i wonder why it didn't work when i used the the place item center last time and so let's make this 200 by 200 looks a little bit too big um but we'll do the border radius border radius 50 40 not 40 50 percent the placement's off i think the size is good it's just too low um i could fix it another way but transform translate y negative 10 pixels this is where i guess maybe the margins would work a little better with my like negative nine oh man i'm going to be slightly off on this aren't i is my shape my shape isn't good it's not a perfect circle this is more of an oval okay so now we're going to do our inner circle which is technically bigger than the outer circle and i should have named these better got this yellow color width will say 250 pixels eight to 250 pixels border radius 50 and for all the divs down here we're going to say position absolute that way they overlap each other um okay interesting i need to put this i guess i just don't want to bother with my styling here we're going to put our top and left directly on our outer and this one's going to have its own top and left but this time it's going to be like 25 and 75 that line the orange up correctly that looks dead on so now we just need to put it behind you just copy this line put it up here that gives it behind and now we need our lines so we're going to create a div with a class of line there we go close that off and then inside of here dot line we want this to have 100 width our height is going to be maybe 50 pixels background is going to be this background which is the same as our body so let's just put that up there perfect perfect and um let's see what else do we need to do say top is going to be 100 pixels width is 100 and uh to make it so we can see this i'm just gonna change this to red temporarily of course i don't see it anywhere so maybe we change our width to 100 view width there we go that'll show okay and we can put it back to this correct color and it looks like that's way too big we'll try 25 pixels that looks better and we'll start with a height of 50. nope we'll do 75 that look lined up it looks lined up on the bottom but it's a little bit too big so maybe it's only got to be 20 pixels tall and if we move it down 80. there we go it looks exactly like where we want it to be so we just need a bunch of these lines now the fun part is we need a whole bunch of inner pieces um yeah okay so what we're gonna whoops what we're gonna try and do first is the yellow ones and then oh crap okay wait a second okay okay we're gonna have okay i should have given this a class from the beginning class equals circle circle um i don't know about 10 minutes on this one um then we're going to have a [Music] i have a big problem here that's how am i gonna do that oh man i don't know oh know am i gonna okay let's just try i can make the stripes and i don't know if we're gonna get this done in 10 minutes so now we got all of our lines the only thing left to do is we need to hide the uh green color in the middle here and we also need to hide our yellow color at the top so i'm going to wrap our outer in another div and we're going to call this outer wrap just put it inside there we're gonna have dot outer wrap overflow hidden that'll hide it perfect okay um for now i don't want to do the hidden though i'm just going to leave that blank because i want to just uh we'll say border 1 pixel solid black just so we can see where this thing's at we're going to give it a width of say like 150 180 pixels and a height of 180 pixels our top is going to be our top of our outer 50 plus 20 so we'll do 70 pixels and our left is 100 pixels okay is that that's a little bit too far pushed down so we'll try 50 pixels nope we need to be pushed more actually so 90 pixels not quite 90. where does 70 put us right there so where does 80 put us okay 80 put us us in a good territory yeah i think so and here we can get rid of our top and our left we actually know top to be oh wait this isn't going to work let's just do inner i can't do emit div class equals uh inner box and then i'm just gonna do it i need to organize this one a little bit uh so my inner box i can do it up here it doesn't matter uh whatever um dot inner box will have my background of this the height will be like eighty percent um and a margin oh you know what no uh position i'm gonna have to do position absolutely i think position absolute which means on this one i want to have a position of relative to make that the containing block uh height and then a width of 200 this doesn't matter so much the width um and then i can do a top actually let's make this 60 maybe 60 and then my top here can be 20 these numbers are probably off that's not terrible though so the height maybe is 70 and then this would be a top of 15 then everything looks like slightly slightly off look it's like the whole thing bounces when i'm doing that like the top is off by one pixel there we go that fixed that so see there it's good oh i know what i can do aha okay good uh we're gonna okay that's fine oh oh oh oh wait wait let's change the background on this for a second i wanna see it uh boom oh no this isn't gonna work okay never mind i need this to be really small actually because i'm gonna have two circles essentially i want to cut out the top part so we're going to say the height here is going to be like 50 pixels and our top is going to be zero and our left is going to be 100 hope not 150. i put us in the right territory the most part yeah that does i think we'll just do 40. there we go and then what i want to do is i want to remove the top from this and the the left from this we're going to put the left down here and then i want to say overflow hidden that will only show us this top section we get rid of that black border now we just have that top section that's exactly what i wanted and now i just need to do the exact same thing for the bottom this is where i wanted my yellow lines to be a single circle i almost feel like i'm mucked up and that this shouldn't be one div that i need one div on the top and one div on the bottom for those instead of two separate ones uh kevin you screwed it up because i want this to be a big circle that has things overlapping it but i have like an overflow of hidden or something i think i'm mucked up or you know what maybe i didn't maybe i didn't maybe not yet i don't i don't think i have enough time to fix it though i don't know if i started my timer i didn't start my timer i don't even know how much time i have left ah okay let's change my background color to yellow uh on here is yellow the right idea yeah yellow this guy up here is going to get a background color no that's yellow yeah i know what i want to do now i really mucked it up though the only final step that we have left is to remove the yellow so that'll be easy this we need just one wrapper for equals i w copy this div and we'll say iw and we'll say height is 200 pixels width is 200 pixels and overflow hidden top 50 pixels left 50 pixels is that what we used for our inner where's our inner at uh so top and left for these numbers and we'll do 250 250 we actually want this to be slightly less so we'll do 50 here and height of 225 and here we'll do a bottom of 50 pixels 100 pixels no no no no why is this not working oh we need to reduce our height we'll do a height of 200 115. there we go it's not quite right our circle is now off a little bit our left should be 50 60 70. what happened i'm just going to submit it because i'm out of time but we'll see how far off i am 98 we'll take it let's just add a border uh for now my idea here is then i could do a border of this uh solid and say like i don't know 30 pixels 32 pixels uh do i need to do a box sizing is that even box sizing border boxes i mean to fix that yeah um oh but that doesn't fix it see i wanted that to stick out the top and not oh okay so width 100 then this could be at 100 and 100. no no nope nope i mucked this whole thing up big time this isn't going to work i'm just waiting for kyle to tell me when i'm out of time [Laughter] oh my goodness because my idea was if i set that up with a border there to hide that maybe without the border box it would work actually um [Music] okay i'm just gonna try one more time because that was closer to what i wanted when i didn't have the box sizing on there um but then it screws up this it's like here i need to do a calc almost right of um 80 minus what was it 32 pixel i mean whatever um and then i need the same thing for my height and it should be a circle at least ah i'm out of time not even close that was a complete complete complete disaster okay here we go we have to create supposedly what the letter b is to me looks like a few circles but we'll call it the letter b so let's get the body in place always a good place to start because that's like 90 of your code right there and then for our first div we're going to give it this background here that we just copied i want to make this one a complete circle so we'll say order radius 50 and also to make these all centered i'm just going to do display flex justify content center and align items center there we go now we have that in the dead center and i just need to make this quite a bit bigger i'm guessing like 200 pixels let's see okay that looks perfect that is exactly the size we need so now what i need is another div this is going to be the inner circle so we'll say class of inner close off that div really wish this had auto closing of tags that'd be nice so now we have dot inner i'm guessing it's going to be a slightly smaller size of course so we'll give it the same background we're just going to position all these absolute so we'll say position absolute all of our divs uh okay background is that and we need the width here to be 100 pixels in the height 100 pixels that's my guess on what the size is yep that's the exact size this one looks like super easy and it depresses me because i have no idea what to do uh we want my body set the background on there that's you know back you start with a quick win start with the things that you know how to do uh we want the dollar sign not a dollar so i'm going to pound i'm so not used to the pound sign being included in there okay so this is not too bad in that it's easy to get a circle and a circle inside a circle it's this part that's really throwing me for a loop but we want to start with the easy wins so let's just grab this and we'll put that and actually i think what i'm going to do for this one is have a div with a uh can i do emmet in here oops whoops whoops whoops e apparently not okay oh that's my emoji picker what am i pushing okay no uh so let's just do a div and we'll do a div actually i'm just gonna do a div we'll just do this close div i might have to give these classes or find any better way to do this eventually but yeah we're gonna start with it like this um so this one no this isn't gonna work okay we're gonna give this one a class class is equal to uh outer so that this can become my outer and then let's just do any margin uh with height let's just do border radius first i guess border radius will be 50 um and then i want to get it in the middle it needs to be bigger i think it's almost like 200 right that looks maybe a little smaller um i'm just gonna use margin just margin left or no margin like 30 pixels auto should maybe do the trick i think the the top needs to be a lot bigger 60. this is the i have so much trouble getting things in these challenge still like line up that looks pretty good okay i think that's good and then i can choose this one let's give that a class of uh inner so then my inner can what can we do with that that one gets the background color on it again so we can throw that you got actual background background and then what do we need to do we need to give it a width of say is it like 50 of the parent and then a height 50 we could try and see what happens here height 50 percent um and then a margin or you know what i'm going to do this could work um display grid and then we knew it place items center that should not of course it's not working i didn't why is that not working that should work okay it's not working border uh radius of 50 50. why'd the place item center not work i could do what if i did a display flex then display flex yo i just want this on the parent i just want to make sure because then on the inner then i can just say margin of auto i just want to make it easy to get it in the middle okay that worked uh that looks perfect actually super that was 50 now is the part i don't know what to do now all we need to do is do this top section up here which is going to require us to create a square that covers off that section so we're going to have dot square this will make a little bit of sense once i get the square in place so a new div class is equal to square just like that and for this square i'm going to move a lot of these styles out none of these styles are applicable to all of our divs so we're going to call this big we'll call it outer and then we'll give this a class of outer there we go and now for our square we want the background color here so we'll say background is that and all we need to do is just move it up so it covers up this top section of our circle that should be all we need to do yeah so let's just say that our top is going to be or we'll just use margin instead so we'll say margin top is like negative uh what is it 200 pixels so we'll move it 50 pixels let's see that didn't do anything square background oh of course we first need to take our border radius and put it on our inner now for some reason my square is not showing up oh i don't have a width or height so we'll say width is 100 pixels height is 100 pixels that should show up now of course it's not see if i'm missing anything margin top negative 50 pixels we'll just remove that see if we can get it show up of course it's not give it a different color to really make it pop green uh remove the margin just with the height and it's not showing up in a background and it's got the position absolute it should be there it really should be there i don't know why it's not showing up let's get rid of these yeah it's just not there square i spelled square wrong okay now we can go i'd wasted some time margin top negative 50 pixels negative 100 pixels yep that's what we need margin left negative 100 pixels and we'll give it the correct color and okay for this part i'm going to use another div which i'm going to put inside my inner i guess we'll call it div class is equal to inner inner because names don't really matter here close div sorry for the really messy html um but we're we're on a challenge here so i'm not worrying too much about naming or anything or inner inner i should have called it like inner bar um we'll do a background of inherit so i don't have to mess around or copy anything a width is going to be 50 percent because i want it looks like it's 50 of its you know the width here is like 50 of that circle right and then what do i want to do with this 50 and then let's just say the height it can be anything 100 pixels should be fine um and then i'm going to do a transform translate y because i want to move it up and down and i should be able to do a negative one hundred percent too much negative fifty percent there we go now all we need to do is do our line let's make sure i spell a line correctly this time l i and e and we need to have this background we need to have a height of 100 pixels a width of 100 pixels and i think the height actually needs to be 200 pixels and we're going to copy this margin okay so our width definitely does not need to be that big it needs to be 50 pixels and our margin left needs to be 125 115 and our margin top needs to be 150 [Music] 175 180 90 i'll just say 200 there we go and then the height obviously doesn't need to be quite that large oh that looks perfect let's submit that 91 match what am i missing i i literally can't tell a difference between these images what the heck how am i so far off am i just crazy i'm going to try resubmitting that i i cannot see a single difference unless i have like some colors wrong but the colors look the same like when i hover over this maybe is like slightly inset from where it needs to be oh gosh that looks close oh okay okay you're gonna love me we have an inner inner i'm gonna copy you copy that and inside inner inner i'm gonna put an inner inner inner enter enter which is going to have this so inner inner inner this you know when you have no time to spend on naming your classes inner inner inner so let's just start with my background uh i don't need the hashtag there we go um width is inherit height can be inherit i guess in hair i don't know if this is gonna work inherit okay so i got my bar and then i just want to do a transform translate x now of negative 10 10 pixels oh wait no it's way too small uh width is why is the width oh it's inheriting a 50 percent uh 100 then we can just do that okay and then this could be negative 100 percent that looks good that looks good that looks good submit come on come on 100 match yes i honestly didn't know how i was going to do that one and my class names are a complete mess maybe instead of using flexbox to center we'll just try doing uh we're just going to position all of them in the dead center i guess so we'll just wrap this in a container this and then we'll do section position absolute i can spell position correctly we go we'll say top is 100 pixels left is 100 pixels this should be 50. absolute absolute and now of course all of our other measurements are off so we need to readjust everything to make it in the center we should be able to do it by just saying like this is still going to use flexbox though justify content center align items center and let's change this to 200 150 200 this works 91.3 hey we got slightly closer and it's still wrong yeah this one is killing me because i feel like i'm so close i know exactly what to do like the square versus the square versus the inner circle in the outer circle but i'm just off by something something that's just slightly different i can see it moves like the inside moves a little bit like my inner circle is like one tenth of a pixel off that makes sense i'm pretty sure it has to do with using flexbox because it's like half pixels essentially so we want this to be 50 100. oh okay so let's try to position this this is our outer ring this is already in the right position we need our inner ring to have a top of 50 pixels and a left of 50 pixels our square here we need to give it a top of zero actually we can just remove the margins that should put in the right spot there we go and this one we can remove the margins too if this works i'm gonna be so upset oh my gosh never again am i going to use flexbox to center because that like one tenth of a pixel is what killed me well let's hope that kevin also sucked because there's 20 seconds left so hopefully he didn't finish i'm looking forward to seeing how kyle did and i think one of the most interesting things with all of this be seeing how we approach things differently um you know trying to get the same results but just completely different approaches to it i think that would be fun to see so looking forward to seeing how kyle did on this and how he did everything as well so the results are in and to nobody's surprise kevin beat me but it was quite a bit closer than i expected it to be and it was a ton of fun so thank you very much kevin for doing this with me i hope to do this with other people in the future especially if you enjoyed the video so if you did make sure you let me know down in the comments below and also if you want to check out some of my other css related content click over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 882,934

Rating: 4.932518 out of 5

Keywords: webdevsimplified, css battle, kevin powell, css challenge, css, kevin powell css, css challenge tutorial, css battle challenge

Id: -QgJgZCJvo4

Length: 37min 44sec (2264 seconds)

Published: Tue Jan 19 2021