Front-end developer takes on a CSS battle

Key Takeaways

oh no oh no oh no oh wait wait wait wait where's my first color can we do this oh this better work no that's not what I want either hello my friend and friends it's been a while since I did a CSS battle so I figured why not jump in and do their most recent one cuz they're always a lot of fun but before we dive into it I just want to mention my ground rules that I always have for these so first off I do not try and get high scores in these I just try and get a 100% match as fast as possible so it's not about how many characters I use it's about matching the finished design as quickly as possible and I try and do them all in under 10 minutes and that also means that you can try and see if you can beat me as well so whenever I start them I time myself I'll show the timer on the screen so even if I edit Parts out you'll still know exactly how long it has taken me and so what I'd actually encourage you to do is try and do the challenge before me see if you can beat me and then also you can compare the different methods that we used for each one and I'm not going to do all eight of them just cuz it's going to take a little bit too long so what I'm thinking of is doing these first three and then 164 there so the video doesn't become like 3 hours long so yeah I think it's going to be a lot of fun and we're going to dive right into that so first up let's jump on over to this first one so it's what we're trying to create no it looks like they they've changed things you can actually see like an overlay I haven't done a CSS battle in a while so when I'm hovering I get like a faded out version uh and then I also get the full one so that's kind of cool um and I'm just going to see if I can zoom in on this a little bit there we go um just to try and make the code a little bit bigger for y'all I've now got my timer on there as well so we're going to hit start on that and let's see how I can do this and I have an idea in my head already 1 2 3 4 5 and then one 2 3 4 five I'm going to regret this a little bit um we're going to do a class is equal to Orange on that one can I multiplace my cursor oh I can thank goodness we're going to put class of Orange there now all of these are going to get it these are all class of orange and maybe you already have an idea of how I'm going to approach this so inside my style tags we want grammar Le on that's great let's do body background I'm a little bit concerned actually cuz sometimes we want this one on the body actually there we go um body background that I'm going to do a display of grid and I'm hoping this doesn't muck things up I'm also zoomed in so I know in these um battles sometimes being zoomed in does cause some problems and I'm talking and that always slows me down too uh but let's just do a uh Place content Place content of Center um I might need a Min height on there but I'm not sure there's a few little quirks with uh these CSS battles that do let you do things a little bit differently so we can sometimes take some shortcuts we're going to find out in a second uh let's say width is going to be I don't know 30 pixels my sizing is hard too cuz I'm zoomed in uh we'll say 30 we'll say a height oh no I always like doing an aspect ratio actually uh of one CU then I just have to change one value to change the width and the height and for now let's just give them a background of red so I can see um so I already know that my height is not working that's okay though and my width we need to make that maybe 50 um I think the width is actually good in my place I can't tell oh we can shift there we go shift so it is 50 so we're perfect there so if you shift it switches the axis there um on the way around you are uh so I have my grid there let's just try this then uh grid template rows uh columns I don't need rows columns um I was going to use flex box but let's just do a repeat of five and 50 pixels I think this might actually work I think it might work I might not even needed to do anyway uh so div will take off the background from there and then we'll take this one and we're going to say that my orange has a background of that that color and let's hit submit where's submit submit and see 100% 100% yes we got it that was in just under 3 minutes all it was I just looked at the time it's a little bit over 3 minutes but pretty happy with that it's all good and that was a nice easy win I like those I was hoping that's that's how that one uh would work actually that was sort of my plan going in um when I saw the picture of it so I'm happy that it was functional uh I'll let you know now I'm thinking conic gradient for this one but I'm terrible with conic gradients so I don't I don't think I'm going to have as much luck with it and I'm going to try and remember how conic gradients work so let's hit start on here I haven't done one in a really long time and let's go again for an easy win with a body of a background of that color right there um I think we want two divs so let's just do div class uh odor and then a div class is equal to Inner and it sort of makes sense I guess actually to Nest them um I was going to use absolute POS or do I just whatever uh no yeah we're going to do them separately um we'll find out maybe it's a bad idea let's just select both of them though uh we're going to do a div position and I found a new trick here actually thanks to mine um position absolute we do oh I don't know if it'll work we'll try inset of is it 100 50% and then let's just try uh background is going to be red just so we see something and then or is that not the trick is it negative 100% it's not working whatever I'm trying inset of oh 100 aha 50 50 it wasn't negative it was positive not out we want to pull it in um and then let's give it a width of like 10 pixels and a height of 10 pixels and it's sort of in the middle uh I guess that does mean we need the trans for or translate of 50% um 50% and we don't need the transform on there that's a new one so I think that's dead in the middle um it looks pretty dead in the middle to me so we'll find out uh in a second I guess both of them will also have a border radius of 50% to make them into circles odor will have a width can I measure on this side no width is the total is 400 so maybe 300 pixels and the height would be the same three I should have used aspect ratio um because obviously that's not correct that looks bang on okay and then so background uh let's just try giving it two colors so I have that first one is that one comma that one and just seeing ha okay it did work um better than I expected already so I want it to go yellow to 75% and then this one starts at 75% that was so much easier than I expected amazing I got it uh so that I thought this would be a struggle I won't lie uh inner will be a width that's 200 we'll do 150 pixels height 150 pixels uh 125 maybe it's still too big 120 this is where the aspect ratio would have been a lot better apologies for my dog we're in a rush though so we'll do a background on there of that and then we're going to hit submit and we're going to hope for the best 100% in 325 I'm on a roll I don't think I've ever done these so fast before awesome so I'm I'm sort of glad that my thinking going into them is working cuz that's usually not the case uh let's reset my timer hit start on there and we're just going to go with it body this one when I look at it my thinking is that we want it to I did my classic mistake where I pasted before I put in the property um we're going to make the shape and then we're just going to turn it um to make the shape I'm actually wondering if there's a way of doing this with gradients cuz it seems like most of these Solutions can be done with gradients but I think what we're going to do is and I'm going to make main this color uh main so main will have a background of that color once again let's do the display grid Place items Center content should also work on that it doesn't really matter uh the width is probably about the same right width 150 pixels height 150 pixels oh no it's not 190 in the height 185 182 183 184 that's weird that it's that looks like it's right on though so we'll go with 184 um usually you don't see those okay and then what my idea is we just want something that's going to oh no oh yeah okay this will work um I was originally going to take an entire shape and rotate it but I only want these two things to be the rotated things right so let's just do uh I don't know line we'll probably have two of these but we'll do a div class uh I'll do line one and then we'll probably have a line two um my line my line line do line we've already mucked this one up a little well not mucked up we're going too slow though um line is going to be this background color uh background can be that color I think we're just going to do the position absolute trick again so we know we're right in the middle we'll give it a width of 25 pixels and uh up for now actually background will be blue um and the height will be 100 VH whatever something like that um and then we can do a rotate of 405 not 345 45° it's a little bit too narrow width I guess is 30 that is it weird that something's off still is my width not enough here that looks better okay the whole size was 18 E4 perfect that's my line and then as I said we're going to do a line one and a line two I guess I didn't need that one class but we're going to do a two on this one and then two we'll just get a rotate of 45° and then we'll hit submit I took some easy ones this time I think I usually struggle so much more with these 3 349 about I guess so yeah we're going to we're going to go with this one as the final one for this video um yeah I this one I have less of an idea the other ones when I first saw them I sort of had an idea I'm just going to make them space before I hit start here okay I think we might do that same trick with the conic gradient it's basic actually now that I think of it it's exactly like that other one um so 1 2 3 4 uh you can use nth child but it's easier obviously if you have classes or IDs on them if you're trying to save characters IDs I think are the way to go with these challenges but I'm not trying to save on characters so we're good um would be good though if I actually gave these different classes once again are going to be a position of absolute oh you know what I'm going to do we're going to custom property this one um yeah let's come here and say color and for now I'm going to do Red O I think this will work really well and we're going to do a I don't need that actually color is going to be red and grammarly wants me to spell it with a u that's awesome I'm surprised it picks it up in that but not when I'm doing regular ones anyway don't get distracted position absolute we're going to do the inset trick again to get to the middle of 50% and then the trans late of 50% 50% so they're all dead in the middle we're going to have to move them a little bit but that's fine um okay so on all of them let's do the background background is going to be a conic gradient and for that conic gradient let's just do again like a red blue so we can see I guess we need a size on them that would help um I still have nothing showing up position absolute inset is okay with 100 pixels is my back let's just do a background here background of red conic gradiant oh red blue shouldn't there we go okay um so we should do a border radius of 50% whatever the 450 there would have worked I think good so what we want is one of the colors is going to be this color so I'll set that as that one and that was at 75% so this one is actually going to be a VAR of color at also 75% there we go I just realized they all need an inner but we're going to not put in those because I'm um div after we'll just do it this way instead because it' be easier which will be uh content because it's a pseudo element we need a position of absolute we're going to use the same trick actually here with I already have an aspect ratio so let's just say a width of 80% and then a background of yellow just so can see it if it shows up which it doesn't content is okay position absolute with an inset aspect ratio with div after I'm inside another declaration we don't have nesting maybe we do have nesting I don't know there we go um 70% we might want to go with pixel values here but that doesn't look terrible we'll have to position it better to know for sure so the background won't actually be yellow the background will be that color and then it looks more like we want but clearly the width is not right um that looks a little bit closer so now what we're going to do is we're going to choose a and let's do uh transform translate and you know what I'm going to do to make this a lot no it's going to be fine I'm just going to copy paste stuff translate um let's just say 100% and zero uh comma zero there we go um so that one's okay we're going to fix the colors after translate so this one will be a zero and then 100% down are these numbers okay they're too big but let's get them all sort of spaced itish um let's copy both of those and then we do a c and a d because then this is going to be the negative version of the same thing so the number is way too much maybe it's a 50 and we'd actually be in the right spot let's just try really quickly updating those and then we'll fix the colors they're not perfect so we'll have to adjust this hopefully I don't have to do it with pixels uh but a so a is the one on the right so that one is going to be the color and my color is going to be that one there we go and then the next one is I forget which one the next one is 50 was down so this one so that one the color is that then I guess it's going to be the orange one uh this should be a color to do that and then the last one is the yellow one at the top so at least those are okay and I'm glad I I did that I think it's I don't I yeah because it's with the conic gradient I do think this is probably the easiest way to do it um rot actually maybe uh no their positioning is a little bit off we can see so the other thing a is actually okay so B we're going to have to rotate rotate 45° at 90° 90 oh no it's rotating based on the transform so we can't do the rot there we're going to have to do the rotate here rotate of uh I said 40 90° right 90° um so that's one thing with the Trans rotate property you can't control the order if you're using transform you can either rotate it first and then translate it or you can translate it first and then rotate it um so the transform is a little bit more useful sometimes if you have multiple things going on so that one's actually okay this one so we have to come here and do a rotate here rotate of uh I always forget this uh oh this one's this 180 no yeah and then the last one would be the 270 uh rotate 270 I guess perfect oh no oh no oh no oh wait wait wait wait where's my first color this one can we do the oh this better work transparent no that's not what I want either is that what I want that's closer to what I want yes okay I was really worried there that's going to work the weird overlap is this cuz we need to move them out a little bit can I use okay uh I wish I had a a custom property setup for this um so that's the first one we're going to do 60 60 is perfect okay so that's that's not too bad then choose you choose you and choose you and do 60 it looks good let's hit submit there's plugins now didn't know that come on 100% match yes in 827 so that one was longer um but yeah that was fun too so a few things we ran into with the rotation on that one um I was glad that we did the conic gradients already though CU that saved us and then being able to do the transparent on there if that hadn't worked we would have been in deep trouble cuz I was thinking we could Z index could we Z index them if I did it the other way maybe we could have cuz if if this one were on the bottom then that's the next one up and no sorry I don't know maybe we could have mucked around but this makes our life a lot easier so there we have it um I hope you paused and and took your battles at it let me know if you beat me in any of them or if you had better approaches to any of them um down in the comments and if you like these videos and like seeing me do this it has been a while but I have uh done quite a few of them in the past so there is a playlist of them that you can find right here and with that I would like to thank my enablers of Awesome Andrew Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome