I've been challenged to a CSS Battle!

css battles are already a lot of fun just doing them by yourself but they're made even more fun when you have somebody to challenge or to sort of play against in a way and so i put a challenge out to all of my patrons to see if anyone would want to take me on and someone took up the challenge and that somebody is frank frank is a senior front end engineer over at undercovertourist.com and as i said he took up the challenge against me so the way this is going to work is we're not trying to get low scores because that can be a little bit finicky on css battle uh we're just going to see who can get to the 100 mark first so a big part of the fun thing is seeing the different approaches that me and frank will take to get there and seeing who can beat who i am giving frank a little bit more of a fighting chance too because i'm gonna set myself a extra challenge on top of getting done first and that's if i don't get finished within 10 minutes he automatically wins that round as long as he can get up to 100 so just put a little bit extra pressure on myself to try and get through there hopefully it doesn't bite me in the foot so let's go and jump right in to round one and so we have a circle and then we have those yellow things and i think it's a double circle here um is the easiest way to do it let's get a quick win with the body of a background of that now is the harder part so we have a circle so let's call this class is equal to outer then we're okay i'm going to start with just the outer and the inner and then we're going to add in something afterward so let's do a um div class is equal to inner whoops close div and then we want to do those so let's start with the outer because that should be fairly easy uh dot outer is a background of this one right here and a width probably of about 100 pixels 100 pixels a height of the same uh so what i'm actually going to do for this is it doesn't recognize it but we can still do an aspect ratio here one uh because that just makes it easier so is it 200 then maybe uh and let's do a display grid place items center so that's the easy part right center make it into a flex box so display flex align items look at that okay good guess from here we need to actually need to put i'm thinking we're going to put a yellow circle with in the div and then inset that with another red circle to start with so we'll click div here and we'll put it here uh and okay so rather than give that a class our name id you can do div directly and this one will be a background of this color let's see well so back around this color now this one's a little too big so the difference needs to be i'm going to guess that's less than 100 so i'm going to start with this [Music] here we can do a background of no no a border so let's start with a let's start with the background of red background of red just so we can see it uh we need the aspect ratio too because that'll make my life easier width is 75 maybe and a border radius of 50 oh that looks close this looks like one of those annoyingly close things that's not perfect i'm going to go with that and hope it's the right number that actually looks really good so i think we'll do that and then what i can do is add my border of 20 pixels solid it's bigger than that but we'll use the right color at least um [Music] so we need bigger than that so border let's just come here and then is it 40 then 35 we'll go 35 of course 31. i'm not used to these numbers being so small like usually they have nice round numbers but i'll stick with that which is a dip within a dip within div the background will be this red color and it's too big so maybe we'll choose 70. there we go too small let's try 75 spot on okay so we're there all we need to do is affect the first and the third quadrants so what we can do there is hmm what will we do um i'm going to do this over here i think that'll just be the easiest way uh this will be a block one and a block two and i just rely oh no okay uh two i thought of a problem but my problem's going to go away pretty quickly so the outer needs a position a relative because and actually uh yeah it's gonna be easier to do that because then my both my blocks will need to have a position of absolute so that stops being an issue uh we'll do width width 100 uh 100 pixels aspect ratio everything's squares and circles so aspect ratio is your friend and we want a background background once again we'll just go with red so we can see it uh then we can say my one has a uh i u i used the positioning anyway we're using absolute so let's just say top is zero and left is zero and then i'm going to do a two i don't know if this is the right spot um will be bottom and right and that should be on my two oh that looks like it'll probably be pretty good so their color will get changed from red to this color and now there's two solutions here um since i'm here let's do border radius fifty percent no yeah fifty percent zero zero zero border oh what the height there she is okay with that height right there and we're going way too much so let's do i don't know 50 and 50. oh look how that worked pretty good okay let's give it a bigger width what's going on can you only get it to be so big interesting all right so what are we overlooking here first keep moving and with high content and then oh this one will go bottom and then right this is okay yeah that make that makes sense that doesn't work i think i thought i could do that i'm not going to waste my time we'll come back to that i thought i could do a border radius but let's just go up to my outer and say that the overflow is hidden and oh look things are moving around a little bit but i'm going to hit submit anyway but we're not perfect so maybe it should have been 80. that's better so that should get me closer apparently not but i know i'm closer because i can see that i'm closer and now it's theirs is smaller remember i said the numbers were kind of weird what did i mess up my colors again this time i did break the algorithm because the colors are identical too what's wrong with that yeah that's where i want okay and then the bottom is negative 50 and then no what am i doing here of oh oh wait so this is the one here awesome awesome i i literally don't see a change that gave me a lower score how does having a margin zero and nothing move give me a lower score uh justify items center should work anyway no justify content seriously seriously at least we got there let's just do there and class i probably should use ids but whatever class of a and we'll do a class of b and i don't know i have an idea but i don't think it's going to work um so a and dot b this gets a little easier because they both have the same background color that makes my like easy background is that the width is what's i always do too big so i'm going to go smaller and can i do this aspect ratio of one ha i can't uh it doesn't look like one but it's because we only have two boxes right so if i did that there we go i think it's a bit small but we'll do that it doesn't even like aspect ratio i think it's giving me an error there but a border radius of 50 yeah that needs to be bigger we'll go with a hundred and we do want my a and my dot b let's get our background on the body because that's easy background a background we need body first body and then the background and i did that again back ground and we can do that left right height of i don't know i'll just start with 50 pixels and we're going to have a width of i'm not sure we'll call it 50 pixels and we'll change that later um and the circles well um i can't actually measure them so the circles will be what we know let's just do a high level stuff circle is going to be a background color of that yellow here's our yellow and we're going to have to look at height and we'll call these 50 pixels and um it's going to have a quarter radius make a circle of sure and that's way too small so let's change it to 100 probably 100. yeah that seems reasonable and then align content align items center and then justify content space around no it went the wrong way and it's not between evenly won't work either but we'll start with even lee the space in between them is way too big oh they're not even that's annoying do i position each one individually and just do position absolute on both okay i want to try one thing though here i want to see if i can do what i thought i could do and i have a feeling i can't so we're going to do a box shadow of this one and i always think box shadow when doing css or css battles right um so i want zero no we want like negative 100 pixels zero zero oh no it is this one whoops i'll just throw a zero here there we go yeah it didn't work the way i wanted to so i could use a pseudo element or i could just put another div i'm gonna have a left custom properties we're gonna have a lot of custom properties right is gonna have a background color of that guy and it's going to have a border radius of zero zero fifty percent that's gonna have the same stuff except the different color and actually this is gonna alternate so we're gonna have zero and the background is going to be this other color this fuchsia okay we need to split you guys apart but left and right are actually going to go display flex let's not do that yet because that's confusing uh how do we separate you guys um we don't do a line item center definitely want that it's my content center and let's give them just so we can see all right let's just go with red for now actually background of red and a i don't see anything why not uh border radius of uh inherit should work oh okay so it makes ovals um but that we can fix that here border radius uh 100 viewport width look at that okay so that i think might actually work uh z index oh this got easier than i thought it would be by doing this or not why why why why is the negative one here not work because i'm position absolute this is position relative what's causing why can't i can't put a z index on this what's giving this a stacking context oh come on i'm angry now let's just see something mix blend mode of a screen this is cheating i didn't even think screen would work there but it is i don't know if it's going to work with this color hopefully it does and then i got away i i did this just to see if i could find my yellow circles and now i'm i'm feeling good about that so the height here could actually be like 150 i guess looks pretty good and then i just have to go on dot a and say that it is bottom of zero no thought a bottom zero is not working top zero bottom one 100 oh wait oh dot a after kevin dot a uh before b4 bottom of zero yes uh and then i hope that these blend modes work with the colors that i have background is u and then i got lucky here actually um and then my dot b before normally the mix blend mode it's not the right so it's not the right solution at all here well that's not the right one it gave me are my colors oh my positioning is stored oh see the colors are off ah that sucks seventy seventy yeah it's close enough for now okay um well that's much closer 90 60 50. that's much closer okay and we need to move so this is what we have this is what we want it's moving over a couple pixels so seven to the two oh yeah okay we'll have to figure that out after um but we'll fix the positioning margin ah that sucks margin left of 30 pixels or you know what i'm going to do positioning um right of negative 20 pixels just negative 30 no negative 10 pixels the left to right looks okay and then i'll just do the top i don't like doing stuff with positioning like this but so the top then can be negative 10 pixels oh negative eight that's weird okay uh whatever it lines up my color's off that's so frustrating oh my cheat didn't work and then b is gonna be the other way around i'm guessing oh uh the top is still going to be negative eight i guess ah that worked okay i'm gonna hit submit and see if it gives it to me anyway okay so it my colors are oh there's a little bit of a shift there too i guess but my colors are probably what's causing the biggest issue um can i just change my blending mode i can it 92 ah come on okay what do i do here this is weird why it's like that on it i'm not going to stop to think i'm just going to keep going all right and it's going to go one way or the other um circle where are we right 160 nope wrong way 140. we got it it's still giving me 92. it doesn't like my mix blend modes because that looks like a perfect match to me so i didn't like my mix blend modes i don't know what happened to my zit index but that's what we got all right um let's just see what happened with those z index actually i just i want to figure this out so if we take off my zn uh if we take off my lighten those are on top but i have a negative z index here position absolute i don't know why this won't go behind position oh my goodness all righty so here we go and we're off and running on this pinwheel one which is kind of interesting i think what i'm actually going to do uh is have this we'll call it an outer again class is class is equal to outer yes um and then we'll have four inners um and i've sort of gotten i'm enjoying this naming convention close div um so we're gonna do an outer one all right this should be inner right inner i don't know yeah i don't know if i need the outer one to be honest but we're gonna do it anyway just because i think i don't know i don't know if we need it but we're gonna do it uh so let's set my background on my body and what we'll do is we'll say give and child we need them to have that blue color that's right here remote quickly we can be kevin um okay so from here they're gonna wrap uh we need to set uh a margin on the body get them all in the middle um let's do uh 40 pixels 50 pixels okay and then we need to set um up here um items center and then justify contacting the middle center very good all right an aspect ratio once again i love aspect ratio so much for these um just to try and make sure so the top and bottom actually look good so i think that's about what i need now i don't want it to actually have a background though so we're gonna i'm gonna put zero and just leave that there in case i need to come in actually put changes on there and then i have inner and i guess for the inner actually we could do um nth child two every second one uh we'll get this background color background of that um let's just for now give it a width of 50 a height of 50 perfect and then the other ones will get this so that actually let's copy this first copy 2n [Music] plus 1 and then those ones will get u we could definitely dry this up a little bit by having um you know they all have the same width and height so i guess i could put an aspect ratio on those two and actually we'll do that here uh dot inner is going to have a border radius 2 border radius oh you know what i just thought of something though that's a problem 50 border radius okay and then the third one is the same thing actually it's gonna rotate a little differently this will rotate um 270 and then child 2 will rotate uh i won't say 90. my geometry from high school nope middle school all right and then these are just too tall so our heights will be 50. oh wait a second so we'll need to change this 50 and i can't oh i can't select at all okay um well our our width is that so uh pixel 50 pixels so that's good oh and they're so close you just need to tighten them up and then three and then my four four is going to be top 25 percent left zero i didn't even need that left because it was already there okay so there we go they're all in the right spot now i have to cut them in half and okay there's shoot i made a mistake kind of sneak them in next to each other did that work it did okay but here what we'll do is um transform on the x negatively oh sure that's pretty cool and we'll do number four rotate we know it was 180 degrees and translate this one's which one we're doing here all right and then we have the last one this was actually kind of fun um let's rotate 270 so we'll do that and translate 35 and it's on the x-axis positive and yeah there's some light backs there submit it's going to be like 99 points something 82. oh wait wait wait 1000 pixels zero thousands too much 100 pixels zero 20 pixel zero i haven't okay i know but none of that because like oh wait whoa i'm just curious i still it for some reason it thinks that this isn't going to work because when you zoom out so it needs to be 100 of the browser uh oh all right well let's just let's just change that 30 margin of zero online they're wrapping now why are they going like that that's interesting so i mean if you look the way it was when we just zoom in it's on but it's not on because whatever's reading this in the background is you know seeing it as this not as the human sees it okay okay and then i'm gonna do a inner after position uh position absolute it's fine um content okay content content of uh content of nothing this border radius actually won't be on here this border let's make these red just this one for now um and then this is going to be background uh let's just say width 100 height 100 uh background is yellow border radius is 50 and then transform translate x uh y y negative 50 percent or fifty percent fifty percent and then this would have an overflow of hidden there we go um so now we can take the yellow is off this i'm going to take off of here and put it here this is going to be my nth child after this can come off and child or maybe the inner and child after yeah after okay we got the shape um zero yeah so 50. uh this one could be 180 and then the top is actually going to be at 50. yeah and then this one is going to be 270 and then the top the bottom the left will be 50. zero that one actually looks good and then number four the rotation is actually okay it's just this should be at 50. zero aha oh that was like a little bit more there we go went over time but i got there um yeah okay cool so yeah that was a ton of fun uh i definitely got bit there by a typo of mine frank sort of got bit by the uh the algorithm with the zoom in there screwing things up a little bit for him and you know that's the way the cookie crumbles a little bit he was done in like half the time i really messed up that last one i definitely have to put some more effort into using and learning how to use border radius i thought i knew how to do it but clearly um it just escaped my mind on this one so some improvements for me for next time if you enjoyed that video you can check out this one right here where i battled kyle of web dev simplified you can see how i did against him and with that a really big thank you to frank and all my other patrons for their monthly support i can't do this stuff without you guys so thank you very much for that and of course until next time don't forget to make your own internet just a little bit more awesome

Channel: Kevin Powell

Views: 133,625

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, css battle, css challenge, css battle challenge, css battles, css battle kevin powell

Id: GSQitrPY35g

Length: 33min 0sec (1980 seconds)

Published: Thu Oct 07 2021