Jessica Chan challenged me to CSSBattle

[Music] hey will how are you doing hey i'm good jessica congrats on your youtube channel i think it's a well-deserved success your videos are incredible the quality of production is mind-blowing and you are really helping a lot of web developers out there thanks man yeah i love your channel i really like how you have such in-depth tutorials on you know a really niche topic with um just amazing ui as a fellow in the hacker i was a noji fan of your content even before you were on youtube and as you know already probably i love to invite some of my favorite youtubers to a game of clash of code and so i would love to challenge you to such a game are you in uh i don't know william i mean i've seen your clash of code video with ben as well as kyle and was it a little awkward for you yeah i guess maybe but jess what are you saying i mean i think your audience they want to see beautiful things being built they don't necessarily want to see you struggle with you know filter map and reduce so i might have just a thing for you oh yeah what is it it's called css battle so it's a code challenge where you replicate an existing image using html and css and you try to use the minimum amount of code okay that sounds super fun but i have to warn you i haven't wrote proper css in years come on will i know you got it please don't start us up okay this is the next challenge we're doing it's a uh i guess it's a picture of the coronavirus which is very timely so we'll start from the beginning the background color body background okay doing good so far so we'll make this first div i guess the circle okay and then i guess i'll just center it trying to figure out if i want to center it using flexbox or not let's try it just for the sake of doing something different and then i need to make the height 100 so it's centered vertically that's not bad okay doing good let's do it so we have the main body and then shadow one shadow two shadow three and then we have one two three uh array so already one ray 2 all right three and so let's do our layer thingy here so apps are good old absolute position feel i feel like i'm gonna learn a different way to to do these things from jessica but we'll see justify content center allied items center and now let's yeah let's do the body so background here it is sorry and the size i don't know 200 height 200 border radius 100 it's too big it's not 100 is it it is okay so let's see how do i want to do the sort of darker circles in there i think i will make them all children of this first div so class we'll just do i'll call it cell or maybe center middle yeah really can really uh create it with my class names um so we'll do middle and then maybe we'll do another class for the colors um and i'll just do this background thing then i can add the yellow helper class to there and i guess we'll make one for the darker yellow we'll just call this dot dark hello dot one oops and then we'll do it it's getting a little faster actually let's change this to dot because then i can do border radius they can share it so it'll be a little bit more minimal so let's do let's do this here under okay dot one dot two dot three that one will be maybe the the top left one that looks pretty small okay needs to be a lot bigger it's not a really good judge of measuring things okay that's not quite there but i think it's close enough so it's in this middle thing so i might just need to position absolute it so set the middle which is the parent to position relative then for the dot elements we'll do position absolute all right i think i'm starting to get the hang of it a little bit left maybe 20 pixels and then top let's try 20 pixels too okay that's oh my gosh did i like dude i like whole hole in one of that thing now let's do the uh these little shadows so we have s one and i don't know 40 40 20 position relative top minus then i'm just putting some random values and left minus 10 also no 10 no minus 10 so it's too big so let's try 20 20 10. it's too small 30 30 15 might be good so top minus 15 minus 15 a cool now we'll add some dips for the actually maybe for the lines i can do oh there's three lines um yeah i'll just make more more divs why not um line line one so we'll kind of do the same thing and there's three lines all right i'm trying to get into the groove okay so for the first one let's do the vertical one since that might be a little bit easier transform rotate um i guess for uh 90 degrees i guess i could have made the height 150 in the width 10 but whatever oh nice okay so the height just needs to be taller or rather the width oh no i have to reposition it this is going to be really painful i can tell already you know what i'm going to switch this because otherwise it's going to be really painful so we'll just there we go okay that's good needs to be a little less so 180 there we go so i can adjust the height without it sort of screwing other stuff up not bad now i think now the hard part comes so i have absolutely no idea what transforms working in css so rotate transform rotate let's say 60. this i'm gonna struggle to to get it remove yes so it's 60 degrees and now i need to translate but i need to i have a transformation of origin right and in css i'm not sure how you can do this so so what if i do here translate translate why okay i think it's close enough moving on line two time to ramp it up um so actually let's do the transform first okay start with 60 top negative 30 left 50. i'm actually i think i'm actually getting a little better at eyeballing some of these things seems to be up quite a bit okay that was too much maybe left a little bit less oh my gosh this is like driving me nuts okay i think i got the left thing correct let's go up a little bit i wouldn't know i wouldn't know how to do it in react native and i would not i should check how to map the concepts in in css and here is it's minus 60. we've no yeah it's not pixel perfect [Music] but close enough no it is fun it's just like yeah it's like trying to position hey that was sort of close you know what needs to go down a little bit i'm gonna submit because that's way too long 99.5 all right not bad round two maybe go so i guess i need to learn how to do a mask in css i have no id but here we have i guess two rotated rectangles or two triangles plus a rectangle i know you can do triangles on in css hmm let's see i picked this one we're just kind of going back and forth picking which challenge to do but this one seemed kind of cool because it uses overflow hidden with the circle so let's give it a shot all right let me draw a big square and let me see if i i can i can clip it as a as a circle and then we should be fine uh display is that some margin we have or some padding yeah okay i mean yeah it doesn't matter i guess display flex service default you know when you're not used to it when you do react native uh just the f5 content center align items center so can i clip this into a circle oh wow okay so 200 no yeah of course if i do one 100 okay i'll take it this is actually kind of fun um border radius 50 to make it a circle and then you know what i'm just gonna do this i'm gonna use flexbox again to um actually let's change it up display grid i think this works oh my gosh it worked all right i feel good 180 um needs to be a little bit bigger maybe 190. okay maybe it really was 200. i think that's good enough let's just do our two rectangles and position them and i'm gonna do again i'm sorry guys i apologize but i'm gonna do the layer thingy these layers so m1 for the small mountain and m2 for the big one maybe it doesn't work as i think it does but let's see we're gonna find out so absolute position fill and again display flex justify content center let's do a mountain let's do m1 and so we've let's say i don't know 50 let's add the background color and transform rotate 45 degrees okay now position relative top i mean already left minus 80 top 50 something like this huh 60 and left 70 close it's not pixel perfect but close enough right now for the mountains we'll just make them um squares or oh no are they slightly triangular let's use uh pseudo-elements again so let's try that big one first with of i have no idea height i have no idea and then background will be this red color and uh why is it not showing up do i need to position relative we'll probably do absolute again absolute okay good thank goodness so this will be on that bottom and i guess right zero and then we need to transform rotate maybe 10 degrees okay hey i'm getting there i'm getting there this is hard okay that looks really close and then we want to set overflow hidden so the corners don't stick out now we can do m2 the big one and how big is it 100 200 i guess it doesn't matter right it's just something like this huh so so the apex comes later so maybe 40. looks good already but it's not no it's hard to see the differences but clearly there's clearly a difference so there is probably a better way to to get an accurate result here but i've learned how to do clipping in css so i'm i'm happy with it let's try 50 pixels um i'll do this again down a little bit a little bit to the right okay that's sort of close like the perfectionist in me wants to get 100 closeness so it's like kind of bugging me that it's just slightly off but you know i think it's a good um i guess it's a good metaphor for life right 99.7 is that good enough i don't know that was actually a fun one it's really pretty this would make a good t-shirt design i think this is the last round okay so this might be the last challenge that we're gonna do this is number 15. this one i thought was going to be easy but now looking at it this venn diagram is a little trickier than maybe i thought let me think about this so if i get those two circles jeez i actually don't know you know what let's just start i'll just make um circle one make the circles first and then try to figure figure out the center part a bit later i'm sure there's a way to make that sort of like center part by itself but i actually don't know how to do that i'm sure some commenters will be able to uh point me in the right direction um okay so circle i'll just start with this one circle one okay going good so far take a note yeah you know oh what if i make a circle that's in the same position as the purple one but have it be the background color of the body and i put that into like a rectangle that will have overflow hidden okay let's try that i thought of something so we'll say what should that be called center and then in the center part so the center is gonna be the rectangle thing and then i don't know if this needs a class actually but we'll just give it a class um [Music] center container all right let's just do center and then shape maybe not the best naming but what are you gonna do okay so center and shape so i think this actually might work i'm kind of excited hopefully so the shape is going to have the background color of the body and it will be the same size as these circles so i'll do it i'll just absolute everything there we go okay so we can see that already um that it's kind of there and then the center is going to be also position absolute let's just add a quarter um i think might need to be height will be the same as the circles actually it shouldn't be the same it should be less let's just try 120. okay so um and i think actually the center needs to be the color the purple color oh man if this works i'm gonna be like really excited okay and now let's do situ [Music] so situ so here we're gonna have our clipping container weavers situacy fresh and so let's do come container or should i add maybe i'd just add the clipping here i don't know okay [Music] so let's do c2 quickly yes let's do c3 which is background color blue and then clip clip the whole thing something like that but that's ish okay now left oh c3 sorry yes perfect so not perfect so we just have to clip in container just have maybe it's harder to clip what was it clip path circle 100 pixels at center no circle okay very confused right now okay so we put these guys into a box container the weave is 150 the height is 150 and let's do overflow hidden yes no that looks good and so the left minus 50 i put it here position relative here yes now let's clip let's clip it clip path circle 75 at center isn't that cool so let me submit perfect so i guess yeah 100 match okay so let's position the center thing first so top i guess we'll do the 50 let's copy it from what we had up here there we go so now i'll do left okay um so i'll go a little bit into oh wait this will only work for the oh i know it'll be half so i'll need to make another one for the pink circle okay okay i'm getting there i'm getting there yes i'll be kind of like this and then i kind of like i need it to just hit where those yeah kind of like that i'm actually like really excited i figured something out i think that's okay then i will do i want to position it let's see how we want to do this [Music] we write 0 and then top 50 and we'll do the same thing oh it didn't work um there we go i honestly oh it needs to go the i need to move this shape yeah there we go hey i think i actually kind of got it [Music] okay um i think the width needs to be just a tad bit more oh my gosh this is really close so now we'll make another one and we'll just call it center two shape two i seriously can't believe i got it i'm gonna be lazy and just like copy the whole thing but i guess i'm glad i figured it out definitely not winning any awards for uh minimal code but it's all good okay so now we want to move that around okay that looks pretty good oh nice oh my gosh this is so close and then make that background color i think i did it dude i'm like so happy let's try to polish this up a little bit okay that's a little bit better let's get the pink circle too okay good i think the pink thing needs to move a little bit [Music] dude this is really close with this 27. and move it a little bit more okay i think that's about as good as it's gonna get oh man 99.9 woo oh man that was uh that was pretty hard but uh it was pretty fun um yeah i'm very curious to see how well will did in his side of the challenge but yeah maybe we should do something like this again well that was fun jess is one of my favorite youtubers so i'm so happy that we get to do this collab these css battles are definitely less stressful than clash of clan i hope you guys enjoyed it i'm not sure how much css techniques we covered in these challenges i'm definitely going to watch the footage to try to learn from jess because i've been doing things the react native way and i'm eager to learn actually how these challenges can be done in using a css but you see also how the uh if you think if you use the subset of react native how powerful as well it can be because you only work with a few primitives but which are extremely powerful i hope you guys enjoyed this video i am looking forward to see you in the next one and until next time happy hacking [Music] you

Channel: William Candillon

Views: 390,060

Rating: 4.9322219 out of 5

Keywords: React, React Native, Can it be done in React Native?, JavaScript, TypeScript, gestures, animations, reanimated, Native Apps, Apps, Mobile development, CSS Battle

Id: XA5m-iiTru0

Length: 36min 17sec (2177 seconds)

Published: Sat Dec 19 2020