I Challenged An Expert Designer To A CSS Battle

in the last css battle i went up against kevin powell and just barely lost to him and in this css battle i'll be going against adrian my favorite australian and before we jump over to him let's do a quick recap of the rules essentially we have three different rounds whoever wins two of the three rounds is the overall winner and each round we have a 10 minute time limit whoever completes the round at 100 completion first is the winner but if neither of us complete the entire round then whoever is the closest to 100 at the end of those 10 minutes is crowned the winner so let's go jump over to see how adrian's doing okay time to do a css battle i better make sure i look good oh what my hair it's terrible how can i compete with kyle this just doesn't work i need to do something about this maybe i can quickly touch up my appearance yep alright this probably can't compete with kyle's hair but it'll do hi my name is adrian and i'm from australia i do videos around design and development on my youtube channel which you can check out in the link in description below so kyle you better get ready bring everything that you have because today i'm gonna simplify the web for you and if you're wondering why my hair looks so good i can't really help you out because i wake up this way okay so this first battle we have to create this sunset looking image shouldn't be too difficult just a lot of circles essentially so the very first thing i want to do is i want to get our body and i want to set it up with that dark background color so let's just come in here and we'll use whoops copy that dark background color there we go then we're going to need to have a couple divs this one div here is going to be for encapsulating everything we're just going to give this a class of container so inside of our container we're going to have a background which is equal to this color i believe these are all really similar colors they're kind of hard to tell apart we're going to put a width in here of like 200 pixels and let's try a height of 300 pixels and we need to make sure that this is centered so we can just uh choose flexbox for that and display flex justify content center align items center okay it's definitely too big so we'll try like 200 and 100. the 200 height is correct but it looks like it's maybe 150 pixels wide there we go and we're going to have a border radius on the top and this border radius is going to be 100 on the top and on the bottom maybe like 10 percent looks like it's maybe more like 20 percent on the bottom this top is actually not 100 it's like 80 maybe no not even not even 80 like 50 maybe even less like 20 no 30 or 40 i guess nope maybe it is 15. [Music] no that's not quite it also this bottom is a little bit too big maybe it is 10 10 is definitely what the bottom is this top is not quite 50. it's like 45 maybe all right we've got our first challenge which is this sunset looking thing so let's just jump straight into it uh what i might do is create a tag here called body and after that i think i'll do a display flex justify content center maybe a align items center and then we'll grab this background color and place this in here beautiful now we've got these weird looking sunset things so what i might do is i might create the top circle first i'll do a class here to top half circle and make sure i spell that correctly and then let's grab this in here and paste it in as a class and i think this has a width of maybe 150 and a height of maybe 100 pixels i think and we also have a bit of a background color here which i'll apply in there and we'll do border top left radius 50 maybe let's leave it at 50 for now and bottom right radius 50 percent let's increase the height to 150. so that looks about right i'm pretty happy with that then what we can do is inside of here we could possibly hmm uh let's leave it for the time being we'll create a uh another one down here we'll call this bottom half circle or bottom half maybe and for the bottom half let's create a class for that and we're going to do something similar here except for this we'll probably need to do a just flex direction of column and i'm going to remove the top here for the border radius and put it at the bottom beautiful then we'll probably just do this at like 15 pixels or something like that that should be better and maybe the height at about 50 pixels maybe also a negative margin at the top of 50 pixels maybe 25 pixels so that is a little bit better uh it's not exactly scented though which is a bit weird i do want it to be centered so i suppose let's get rid of this for the time being and if we change the height on this to say 100 pixels it loses the styling i do want that styling in there hmm this is tricky maybe let's do 25 pixels here all right what we could do is we could wrap these two in a parent container and that should center them a little bit better i think okay maybe it hasn't centered them very well there oh okay definitely have to increase the height just a little bit that looks like the perfect amount of height there it's just that the margin isn't right so what i might do here for the top half is margin top 50 pixels maybe 25 pixels and there we go that's almost right i think it also needs a little bit more height so let's do 75 pixels here a little bit too much maybe 60 pixels maybe maybe the margin on the top has to be a little bit more uh let's try 40 pixels from the top all right that looks almost right 41 yeah 41 pixels from the top is just about right somehow yeah that's that's more or less perfect now for this border radius i'm going to increase that to 20 and 20. so the next thing we need to do is these circles in the corners they're going to go inside of here so we're going to have a div with a class of right goes off that div we're gonna have a couple other divs this one's gonna be center and then we're gonna have a left to get these three different circles so we're gonna start with our right one our right one has what this dark brown color i believe there we go width is like 100 pixels eight 100 pixels and uh border radius is 100 it looks like it's actually a little bit bigger so maybe like 150 150 container we need to make sure we have overflow hidden and we want this to be in the bottom left so we could say position relative and for this one position absolute make sure i spell position correctly we want the bottom to be negative 75 pixels and we want the right to be negative 75 pixels that way the dead center is in that corner there we go now we just need to make this bigger so maybe like 300 uh and then this would have to be like 150. all right to make this a little bit easier we're going to do a transform translate negative 50 in both directions that means that we can just set these to zero and then that should work and we need it to be 50 there we go so 300 was too big try 200 200 is dead on okay now we move on to left and the left is very similar to the right so i'm just going to copy this except for we need our left side to be 0 and our translate to be negative 50 in that direction and the color is this orange looking color here there we go and we just want this to be behind so we're going to move our left up here above the right now finally we have our center which is all the way in the back so we're going to move that to the top and center is going to be very similar to these two okay and this color is this whitish color here and we're going to have a no left here um and no bottom because this is in the dead center actually so let's just change this to like 100 pixels by 100 pixels and we're going to say is for this up here in our container we'll just say display flex justify content center and align items center there we go that centers that for us and the center is a little bit smaller we'll try maybe 50 pixels that seems to be the right side we're just going to position this relative we're going to say top is like i don't know 25 pixels it needs to be maybe a little bit bigger let's see it needs to be slightly bigger so we'll be like 55. the top is like 10 20. okay looks like it needs to be a little bit bigger so we'll do 60. that looks dead on and now the top is the only thing i have to worry about i'm going to submit this to see what we're at so far just to give us a baseline 99.9 we really just got to smooth out that top not even close by and now we just need these two sunsets with three minutes in so we're doing all right um so for this i might do bottom left i can't do autocomplete so let's actually just copy this div here let's do bottom left circle and for the bottom left circle we might do that as a position of relative here and for this one bottom left circle position absolute let's do maybe left negative 50 percent top negative 50 with say 200 pixels height 200 pixels and border radius 50 and for the background let's grab this darker orange and paste that in there and i think that's it i'm missing something here let's do a border of one pixel solid red because i can't see where this is ah okay so what's happened is this bottom half doesn't have the position of relative i didn't put it in the right place so that's better uh and i might move that back to negative 50 percent and negative 50 here remove the one pixel there and over here what i'm gonna do is do a overflow of hidden okay that doesn't look very good at all um height let's increase the height to 150 and margin top of negative 150 pixels that's too much maybe negative 50 [Music] here and 100 here uh let's do a little bit too much i think i have to increase this circle 100 from the bottom 100 from the okay i'm failing here really badly uh what am i gonna do i swear i could do this but it's just not working out right now hmm all right let's see let's see so we've got we've got this bit here for the height 100 pixels no ah let's see all right so instead of negative 50 i might do just negative 100 pixels here and negative 100 pixels from the bottom there and there we go we got that okay okay we're back in we're back in so let's do bottom right half i suppose of the circle how much time do we have all right four minutes left we can we can finish this off i believe now let's grab this as the right half and this has a darker shade so let's copy that over and then we only have a little sunset thing here so this sunset thing probably is this one over here and i'm just going to call this sunset to make the class nice and simple and this almost has to be what is it it's a light color it's probably only like 50 pixels and where is it it's like right in the center so we have three minutes left left fifty percent uh and then let's do a transform translate uh x maybe fifty percent come on there we go little bit higher it has to be but that's okay i can fix that up in a sec uh let's do so is that index said index and for these two i can do a higher z index of 51. beautiful and then just make this circle a little bit bigger so maybe say 60 pixels and then move it up a little bit so margin margin top negative five pixels oh that's that's pretty much almost perfect we're just getting it capped off at the top there a little bit which is not good at all we have one minute 30 left so let's try and boost this up just a little bit so i might do this height s 10 pixels and 60 pixels so we still have the same there and that looks about right so let's actually get rid of this this negative margin that i'm getting and there perfect alright some bit king nine minutes what 91 come on that's perfect how is that 91 surely not all right here's our next challenge this one looks like a bad symbol i'm batman it looks a little bit tricky to do but let's give it a try so again what i'm gonna do is jump in here for the body and do the display block oh sorry display flex justify content center and align items center great and let's quickly add in the background here and spell background correctly and i'm so used to autocomplete it's so strange without it uh then we've got this div here and for this div i'm just going to leave it as is but i'm going to here do a background here which will be the bat symbol or the essence or the bat symbol once we start it up let's just put it right in here and the first thing i'm gonna do is set up the background color which is right over there to a position of say relative and do a width of maybe 250 pixels and a height of maybe 75 pixels so let's have a look at that that might need to be boosted up a little bit but that's okay uh we'll also do a margin top here of maybe negative five pixels maybe 15 maybe even 20. let's have a look so 20 is still not enough 22 24 maybe 25. beautiful so that looks just about right and it needs a little bit more height so i'm going to do maybe 77 pixels no maybe 80 pixels so let's have a look at that that looks almost perfect maybe a little bit more 82 pixels and that's almost there at the bottom 84 pixels yeah we'll do 84 pixels so we've got the outline now now we can start customizing the design so that we can probably do the head first let's do div class head close that off and then what i want to do is pass it in here head and i want to do that as a position of absolute now left 50 and then we probably want to do a width of 50 pixels or maybe even 80 pixels a background of red so we can see it for now and a height of 20 pixels maybe 40 yeah about 35 yeah 35 pixels is good uh the other thing we want to do is oh that's odd all right that's anyway let's quickly fix up the height here because it looks like i've got the height wrong let's move that down to be a little bit better aligned so negative 16 17 negative 18 19 20 14 15. this is really odd with the centering because it should just be centered properly but it doesn't seem to be doing it anyway so then we do transform translate we'll do the x-axis at negative 50 and that should center it so there we have that we'll decrease the height here to maybe 32 maybe 30. so that's great and then we'll do a border left border bottom left radius and i'll do that at say 10 pixels it looks about right yep and we'll do that on the right side too and then finally put in the color that we had in here so that's just there okay so for this one we need to create this bat mickey shape this looks actually pretty difficult not going to lie so as we always do we want to get the body set up with a nice background here and also while we're at it i'm just going to do display flex justify the content in the center and i want to align items in the center as well just so we can get our shape in the center and then this div right here we're going to call our body and the body is just going to be a rectangle i'm going to cut out of it with circles so body and background here is that let's make sure we set our width here to be maybe like 200 pixels and our height is like 100 pixels probably a little bit too tall not quite wide enough yeah maybe this is like 250. that looks like about the right width the height is a little bit too tall so we'll try 75 pixels even that looks a little bit tall potentially no no no no i think 100 pixels right because it lines up on the top and the bottom will be cut away with circles okay so now the next step is the hard part where we have all of our circles so let's just create a bunch of divs this is going to be left bottom actually let's just be left dot left and we want this to have a position of absolute a background for now we're just going to set to red so we can see it easier but eventually we're going to change it to the same color as our body background it's going to have a width of 200 pixels height of 200 pixels and uh this position absolute doesn't seem to be working make sure we put it on our body as well okay uh that looks way too big under 100 i don't know why if i spelled absolute correctly maybe it would work okay there we go and uh order radius 50 or i'm sorry 100 either way doesn't matter and we want our left to be zero that actually looks like it might line up if we just make this bigger that definitely doesn't line up but it doesn't need to be bigger so we'll try 125 125. that actually looks really close like right there it lines up pretty perfectly she goes a little bit too tall so we're going to try doing a like top of 50 100 ooh okay really close really really close we'll try like 130 a little bit too wide so maybe 120 on the width [Music] now okay so how tall is our entire body it's a hundred pixels high so we make our circle 100 by 100 to be the exact same size here and then if we just make the left like 50 that's too big 25 there we go that cuts in the exact right spot so now all we do is just copy our background from our body whoops zoomed out there by accident we just paste it onto this background uh whoops i want this background here there we go and now we got the cut out now we just need the other part of the head which is the body of the head so let's do a copy here of this class uh we'll do this head body and let's pass it in here let's do a width of say 20 pixels a height of say 20 pixels uh we'll do a display of flex justify content of center and we'll do a line items of flex and i think that should be it and background here red so we can see it so that's the head there we'll get the right color for that and then we just have to draw in the ears so let's do say let's copy this we'll do left and right ear and for the left ear we'll do that as a position absolute as well i do like my absolute positions so i will do that as maybe five pixels five pixels to red absolute and let's do say left negative 20 let's do negative 40 pixels and top negative 40 pixels uh and what happened here the head body should have a position of relative which it does so why is this one not working is it not nested properly it's very odd uh because that should be just at the top of my ear uh and we're five minutes in as well so head body maybe head here let's see what's going on so we've got our head and we've got our head body which is just over here let's do position relative okay so that's definitely working but our position relative doesn't seem to be relative to our head body let's do border one pixel solid red on our head body so there it is and then with the ear what i might do is i might just make sure this is all working properly and i'm gonna paste this in here do i have any extra divs one two three we're missing one closing div that's really strange maybe i've called it the wrong thing no okay oh i've made it too far all right no worries that's fine that's fine so we can do that as 10 pixels which i think it's meant to be and left negative 5 pixels and top negative 5 pixels and border radius 50 then we'll fill in the color that's one and then let's fill out the other one and this one can be on the right so let's copy this year across right here 50 and we'll do this as right so there we've got our two ears and our body and we'll take out the border radius line that we're doing so now i just need to do this exact same thing a bunch of different times so we got our left bottom here left bottom and our left bottom is going to be very similar i think the circle's a different size but we'll get to that problem when we get there again again change the color to red this time i want the left to be 50. [Music] maybe 75 actually the top is going to be like 150. okay it still needs to go more left so we'll try 100 and we'll try like 175 here now that's too far potentially yeah we'll try 150 because 150 is too high up but it could just be that our circle's not the right size like maybe if we do like a 90 pixels i don't know i think this is correct we're just going to change this to like [Music] 160. see i think this circle's a different size well let's first of all just get our right side position done because that one is very easy it's just a direct clone of this but we use right here instead so we just copy left paste it down call this right boom we have our cutout on the right hand side as well and we might as well do the cutout on the top and make sure we get our closing div in here because our top i think is actually pretty easy so we'll come in here we'll say top and we're going to say that this is going to have a background of red width is 100 pixels height it's 100 pixels height doesn't really matter that much and we want to have position absolute top is zero 50 pixels and border radius is going to be 10 okay it's a little bit too wide so we're going to try here 7 780 80 looks like the right height change this to like we can keep this as 100 pixels we just need to make our left our top smaller nope 30. that lines up pretty correctly in my opinion so we just give it the correct background color and boom there we go uh okay so now we have these bottom circles which are just a nightmare to figure out it looks like um gosh three and a half minutes left so this left bottom the circle itself is mostly lining up it needs to be a little bit wider so we'll try 110 pixels wide okay that actually lines up perfectly just change the background color here again i did that zoom out by accident there we go and then we just need to have another thing we'll call this left bottom b just copy this left bottom b it doesn't have to be exact essentially i just want to make something that covers that position so we'll just change our left 150 i'm sorry 50. and our top is going to be 200. oops too far 170. there we go that cuts off too much though uh let's change this color to red to see so it looks like we need to actually cut off a little bit more so our width up here needs to be like 120 or 110 100 and maybe 110 was right because that lined up so perfectly it's just over here it doesn't quite line up for some reason so border radius what needs to be changed oh i'm not going to worry about that right now let's change this back here and we just need to clone this over to the right hand side so we have right to bottom right bottom b we just change these from left to right hopefully that should be all we need we can just copy these change it to right and right okay and we got uh 90 of the shape here now we just need the left wing and the right wing and these wings are going to be hard to do i guess we can do little circles right so let's do um let's copy this class over here to left wing one close that off and copy this class over here we'll do that as maybe position absolute left negative 50 maybe just zero pixels uh this has a width of maybe 50 pixels and a height of maybe 50 pixels and a border radius of 50 pixels and let's do a background of red all right where is that that's there so that definitely needs to be a lot bigger maybe say 75 pixels and 75 pixels and then it probably has to be margin left negative 50 pixels maybe more uh and then margin top negative 5 pixels there we go and then let's copy over this color and that looks okay but it needs to be way bigger and we're running out of time which is terrible let's do the width as 125 pixels and the height is 125 pixels oh this is hard this circle is not looking anything like i need it to i'm not going to even be able to finish this at this rate [Music] come on what can we do here say negative 75 pixels off the left oh that's perfect there we go okay uh we've got 10 seconds left but i don't think we're going to make it in time i'm going to submit it so we can have a look at the score it's probably going to be terrible 95 i got 95 percent okay i'm gonna say background is this color width is 50 pixels height 50 pixels i think that's way too big we'll just immediately chop that down to 20. and uh what do we want this to be positioned we'll say position absolute for now just change this to red so it's easy to see top is 100 pixels 125 pixels 110 pixels at the right size it honestly looks a little bit wide potentially that looks way too small though whatever we'll stick with it for now because right now i'm just trying to get it good enough it doesn't have to be 100 perfect even though we could just come in here and say like 18 pixels and that's probably the right size yeah that looks right okay now we want the ears we're really low on time here copy the head here it's going to have a border radius of 100 percent and we want the left to be 100 pixels 200 pixels 50 pixels oops so 100 pixels 200 pixels 10 by ten this is a hundred and five and this is like 205 and uh not quite what we're looking for okay that's cool enough we just ran out of time so let's submit this and see what we get for our score by 99.8 that's a little bit generous if you ask me but good enough all right let's try this let's see how we go all right we've got this bell and this looks really odd but uh we'll work with it we'll work with it so let's do body uh display flex uh background let's put it in here let's do justify content center align items center beautiful in our div here we're going to do our main bell how are we going to do this let's see main dash bell i'll do this as a class bell let's close that off and then after that what can we do i think the main bell oh that's like a z index but that's okay what we can do in the main bell is pass it in here with this background color a height of say what 200 pixels wait that's too much 150 too much 100 no too little 125. it's almost there and then let's get rid of this text it needs to be offset a little bit margin top negative 25 pixels maybe a little bit less negative 20 maybe a little less negative 15 so that's about right and then we'll do a border top left radius of negative oh sorry 50 and we'll do the same oh no no that's terrible that's not what i want let's do say 50 pixels and then we'll do the same here on the right 50 pixels all right that's looking good um probably probably going to remove this div background ah this is probably what's been killing me before let's get rid of that so we just have the main belt uh here and then for the height to 100 pixels and the width sorry under pixels beautiful so it's a little bit more than 100 maybe 110 maybe 105 yeah it looks like a actually it's a little bit more than that maybe it is 110 maybe even more maybe 125 no that's way too much 120 yeah that looks pretty good maybe just a few less and margin top maybe what if we got rid of this yeah that's perfect all right then do border bottom left radius say 10 pixels just like a tiny little bit in bottom border bottom border bottom right radius 10 pixels so that's a little bit better the height i'm going to increase to 130 pixels and this here i might increase to 75 pixels and 75 but it's still too high like it needs to be maybe 120 as well oh that's perfect look at that okay for this one we have to create this bell-like shape here this shouldn't be too bad i don't think so the very first thing that i want to do inside of here is just get our background the right color so background background of course this is body already subcoming to the pressure the next thing i want to do is create this bell shape this is going to be an interesting one so we're going to give this a class here of bell come down dot bell and we want the background to be this color i believe width is going to be 100 pixels and height let's say 200 pixels looks like it's about 150 pixels wide and we'll center that with display flex justify content center and align items center okay looks like maybe a hundred pixels are 150 pixels tall and maybe 100 pixels wide maybe 125 pixels wide 120 it's a weird shaped object here that looks pretty close height is too much so we'll try like 120 high there we go and now we just need our border radius on the top it looks like 50 percent and on the bottom let's try like 10 percent that looks to be correct to me so now we're going to work on the bottom part oops don't have emma installed and i'm going to copy this one more time to give us the top whoops there we go and the bottom actually needs to go up here above the bell so the bell can show up on top of them so our bottom i'm going to copy this code a lot of similarities here our color is this light color actually the bottom is a dark color our width is like 60 pixels it looks about half the size and that'll be the same for our height and our border radius is 100 there we go and to make everything easier we're just going to use position absolute that way things stack on top of each other position absolute there we go and let's come in here and we're going to say that our top is going to be like 100 200 pixels 175 pixels is that correct all right this looks a little bit too big so we'll try 50 by 50. and then we have to drop it down a little bit to like 180 pixels 185 pixels boom that looks perfect now we can move on to the top which is very similar to the bottom so i'm just going to copy this top get this light color here paste that in our top here is going to be much smaller so what's the height of our entire thing it's 120 so this would be like 65 essentially it looks like uh maybe 70 is correct i don't know 65 looked better let's see if this is right it looks a little bit off but maybe it's close enough okay there we go 100 match that only took almost four minutes that's actually pretty quick not surprised ah then i'm gonna copy this and we'll do bell dash top on main dash top now let's do that here three minutes in bad uh we'll do this as a position of absolute uh we'll do the top as maybe negative 20 pixels width maybe 20 pixels height 20 pixels border radius 50 and let's do a background of red just to see where it is that's going to need to be bigger so i'm just going to do that to 40 and 40. let's do a left of 50 and a transform translate x negative 50 percent so that's centered still needs to be a little bit bigger so i'm going to do that at 50 pixels here and there and i'm pretty happy with that it just needs to be offset a little bit more from the top so i'm going to do negative 25 and that's perfect and then i'm just going to change the background color here so that's going to be there and z index can be negative 1. it just needs to be maybe one pixel smaller but that's okay let's paste this in at the bottom two and for the bottom one i'm going to copy over the same styling over here and this time i just put it at the bottom and we'll set the color to be a little bit different there we go beautiful so this top one maybe just needs to be out by maybe two pixels maybe even one pixel it's not much uh but once we get it perfect we can pretty much submit so i'm pretty happy with that uh i do think that maybe it's one pixel off but i'm going to click submit we're five minutes in and that's 100 so that's awesome i'm really excited to see what the results are i'm thinking that kyle might have beat me this time around but i might invite him to my channel next time and give him a run for his money so the results are in and it looks like i was able to beat adrian at this css battle i'm not gonna lie he definitely should have beat me in the first round but a win is a win so i'm gonna take what i can and i just want to say a huge thank you to adrian for coming on it was a ton of fun and i just can't wait to do this again

Channel: Web Dev Simplified

Views: 105,227

Keywords: webdevsimplified, css battle, Adrian Twarog, css challenge, css, Adrian Twarog css, css challenge tutorial, css battle challenge

Id: 8ZDCp6t7bsQ

Length: 45min 56sec (2756 seconds)

Published: Tue Mar 02 2021