Coder Coder challenged me to CSSBattle

[@TheCoderCoder]

Thanks so much for doing this collab! It was a ton of fun and I think made for an interesting video for others! 😁

[@raphaelcardosos]

Jessica, I realized that I thought of solutions that are the same / similar to yours... I think I watch a lot of your videos 😝💗

[@ZaidIrfanKhan]

Wow, you were extraordinary.

[@pbateman6775]

Your approach was very enjoyable to view. I am relearning to code and would love to be as fluent coming up with minimal solutions like you do👌

[@sumitsave8799]

Can we use background-clip property 😉

[@tyrellwreleck4226]

round 1, why are you using position:absolute ? its not stable when the viewport changes. Anyone's with me?

[@halberliterpils]

"I think this should work." Most common phrase used while writing css.

[@cipherxen2]

Or while writing any program.

[@josephmbimbi]

@@cipherxen2 until you do tdd

[@cipherxen2]

@@josephmbimbi it applies in TDD too!

[@josephmbimbi]

@@cipherxen2 to some extent yeah. I meant, you have more than an eyeball test and don't just push your code finger crossed ^^

[@cipherxen2]

@@josephmbimbi so, what's your point then?

[@severussin]

this is beautiful to see the difference in thought process and code structure. love it. more like this pls.

[@nobytes2]

William: I haven't done proper css in two years, proceeds to crush every challenge with css sorcery.

[@artmosphereID]

yea react native style sheet mostly like vanilla CSS in general

[@AshutoshMishra]

It is always a better practice to give border-radius:50%

[@Joksky8]

Ofcourse it can try this -> borderRadius: '50%'

[@thesodapoppanda8778]

@@Joksky8 I can confirm this doesn't work in my version of react-native either using px is the only way.

[@alexsivro9110]

@@thesodapoppanda8778 Dang react sucks lol

[@samuelkundael3503]

lol, border like shapes should be the basic of css, almost like kindergarten.

[@fatihcandev]

Fun to watch! I didn't know about this website. I'll certainly dive in.

[@dukeeehhh2386]

I actually googled the last round, how to deal with the color at the circle's intersection, and I think it would have actually worked with propperty "mix-blend-mode: #(color-hex);". I was quite surprised it can be done wtih only one line of code :D

[@yassirmadad9329]

i did it by using circles one in the other with the overflow:hidden and z-index:1

[@zinedinhadzajlija6225]

Css really is sometimes like that. One line of code can do wonders

[@velara314]

could maybe have done it with blend mode: difference or exclusion

[@JohanLindskogen]

Really fun to watch you guys solve the problems in your own way! I missed having some kind of follow up at the end where you went through each others’ solutions or maybe just commented quickly on each others’ performance.

[@jpisello]

I was hoping for that too. At least a comparison of their scores.

[@SMMGOGO]

@@jpisello i think he actually kicked her ass so badly that it was embarrasing to show the final score were a non familiar css code dude beats the hell up of a css youtube guru.

[@i.t.starters2019]

I love this especially to see you guys struggling a little bit like I always do. I think you boosted my confidence.

[@DMoots]

There's an easy way to do the last challenge. It's just an illusion of having a centre section. 1. Make three circle divs all the same size, one peach, one red and one the same colour as the background. 2. Position the peach and red circles normally so they overlap. 3. Position the background coloured circle inside one of the other circles with overflow hidden and position it so it appears like it's just "peeking" into the other circle.

[@rajeevranjansrivastava2473]

I have use almost same approach and within 5 min I have finish the last challenge with 100% and used 565 characters. 🙂

[@ParrhesiaJoe]

body{ margin: 0; background: #09042A; } .circle { position: absolute; border-radius: 50%; aspect-ratio: 1; width: 150; } .c1 { background: #7B3F61; top: 75; left: 75; overflow: clip; } .c2 { background: #E78481; top: 75; left: 175 } .slice { background: #09042A; left: 100 }

[@waleG_]

For a quick second, I wondered what Sean Evans knows about CSS and why he was being challenged.

[@diwakardayal954]

Lol

[@thydevdom]

William took an interesting approach. Mine was almost exactly as Jessica’s. Great job guys!

[@sandinosaso]

The clip-path trick makes my day :). It is great to see how 2 people resolve the same problem, it is amazing how different ways of thinking can both solve the same problem. I think in the first round you both did similar, in the second round I liked more Jessica approach, in the last round I liked more William, so that is a Tie for me !!! hahahah. You must another video to define the winner :)

[@Robdbank]

We never got to see the final scores. I'd like to see more of this collabo in the future

[@mishuhishu94]

yeah! he got 600 but how much did she get?! who won?

[@math-s]

I'm a C programmer and my mind can't get this, sorry haha

[@varri0nschannel840]

me too , It kind of hurts to see people playing with shapes and calling it programming while we suffer in pitch darkness....

[@LilMartyFarty]

@@varri0nschannel840 Well, CSS is not a programming language (nor is HTML) so it shouldn't be considered "programming". I guess you can consider it a part of programming, but in itself I wouldn't be able to say so.

[@LuZ-vg6fy]

Same with Javascript, lord saved me from doing CSS.

[@elwinjyothis5388]

@@varri0nschannel840 CSS is not a programming language and calling css programming would be pretty stupid cause the name itself says that it is a cascade style sheet

[@badrkarrachai1189]

the same here 😢

[@AjaySingh-xd4nz]

css indeed demands not just your knowledge but creativity too! well done both of you!

[@nitram_nosnibor]

Wow that last one was hard!!! I'm going to look into "clip-path" much more now. I love watching these as I have discovered you William, nice one and I have subscribed now - cheers

[@k-yo]

The trick for staying top 10 in these challenges are usually using lots of gradient backgrounds, box-shadows, styling the default available html and body elements (usually with * and * * selectors), all while minifying the code and exploiting some code omissions that still renders the CSS/HTML in a valid way. I've managed to get some very few top 10 spots, but damn the top 3 is hard af. Also, always the same wizards in those positions in all challenges. I remember that there is one person that is consistently on the top that is actually a maintainer of SVGO, so I guess that's where his magic comes from lol. For anyone interested, check the tips section on the site, it's super cool cssbattle.dev/tips/

[@goldengiorno6890]

the next one MUST be The Net Ninja, the lord of web development

[@yannicknana]

Yes please !

[@limitlesskode]

Shaun is 💥 @The Net Ninja

[@sainarasimha2451]

Yes 🙏

[@lakshyadhariwal5482]

kzbin.info/www/bejne/j6bNqp6IaJZofrs

[@othmanebejja3236]

Shaun would make a replica of the CSSBATTLE website as a mistake

[@stevensbrito7188]

That was really fun, I liked it. The latest exercise could be easier creating a class to create 3 div circles at once, and use one of them into a relative space of the pink circle (child) to create that middle space between the others two. And of course, the pink circle will have an overflow: hidden property to move the third (dark blue) to the left inside of it. :D

[@resvevo]

Exactly my thought. Just clone one circle, add a child circle with the background color and move it to the side while clipping the parent circle.

[@JamesQQuick]

One of the coolest developer videos I've ever seen!!

[@fomentarelaxation139]

Wow, thanks for these CSSbattles, now as a total beginner I understand that there is no one way how make website. Everyone is a unique writer for its own website 👌 Thanks 🙏

[@kevinkkirimii]

I am not a web developer but I really appreciate how each of you had different thought processes and showing the power CSS.

[@frontendgrowth4572]

Really fun to watch this battle. It is interesting to see how people think differently and solve the same problems differently.

[@awekeningbro1207]

here is my short way of doing the last challenge(venn-diagramm): body { --color1: rgb(21, 70, 110); display: flex; justify-content: center; height: 100vh; background: var(--color1); margin: 0; place-items: center; } div { --radius: 140px; height: var(--radius); width: var(--radius); background-color: var(--color1); box-shadow: calc(var(--radius) * -.50) 0 0 0 black, calc(var(--radius) * -.50) 0 0 0 black inset; border-radius: 50%; transform: translateX(calc(var(--radius) * .25)); }

[@DevelopingDadCodes]

This was an awesome challenge!! I love to watch how other developers figure out problems.

[@wajidkhan2980]

i guess i am to noob to understand what is happening saving this to my playlist and once have enough experience i will what watch it again. peace

[@archiem6323]

Jessica, Jessica, I have learned a lot from you. Thanks!!

[@B42536]

The last one: two divs, with ::after or ::before pseudo code is possible. When you give overflow:hidden to divs and create same width, height, border-radius property based two circles and their pseudo as well.

[@zakariachahboun]

i really learned a lot from this battle! Thanks!

[@qwertzuiopqwertzuiop2107]

shes a genius at css, but when she rotated the red mountain she did it by trial and error😂

[@resonatingsilence]

Anyone can see that is 45 degrees. Why would you even try 10?? She can’t eyeball pixel values at all either.

[@brendan9039]

She probably still kick your ass at css 😆

[@resonatingsilence]

@@brendan9039 who cares? That's like kicking my ass at putting stamps on mail.

[@randomguy3000]

@@resonatingsilence savage comeback

[@LegendOfTheRee]

I went to the comment section for this exact reason.

[@parakidd]

I’ve been struggling to learn web development for a few years now because I would rather be on an interactive environment versus just watching tutorials on the web that I tend to fall asleep to. This was much more entertaining and engaging as well as an awesome display of friendly competition that shows CSS in action as its being written with real time results. Definitely going to be watching more videos!

[@johndorian4078]

so how's the web development going? or you find a new excuse?

[@parakidd]

@@johndorian4078 I change gears too often and end up looking into other things. Always been a problem with me. Are you still a dick?

[@seancpp]

The production value in these videos is top notch. Really good work.

[@KingDrekon]

Use instead of a div to reduce the code's character count.

[@kushagragour]

Really cool! Thank you for doing this Jessica & William!

[@savieecodes]

This is an excellent competition, we saw different approaches from both of them, which is really cool.

[@scriptkeeper8243]

CSS: that moment when you try hanging a painting on the wall and you nail your hand up instead.

[@buenvia]

CSS: When you try to hang up the painting, but instead you set fire to the sofa.

[@AntiAtheismIsUnstoppable]

That's the danger of using negative margins. Use translate instead

[@theg315]

if you are lazy like me. when making circle divs, I just make the width and height to 1em and make the border-radius to .5em or 50% ( whichever makes you feel good ) and then you make the font size to whatever the size of the circle you want it to be. so you don’t have have to keep on changing the width and height everytime you have to adjust the circle’s size 😁

[@furbearmn]

Wow, they both made that last Venn diagram challenge 10x harder than it needed to be! The gap is just a nested circle clipped instead the other circle with 'overflow: hidden'. body { display: flex; justify-content: center; align-items: center; background-color: #09042A; } .circle { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; } .c1 { left: 30px; background-color: #7B3F61; } .c2 { left: -30px; background-color: #E78481; } .c3 { left: -90px; background-color: #09042A; }

[@-SumaiyaSiddika]

Though i don't know html or css but it feels so good to watch two people thinking differently

[@ankit55ful]

I love how William opened a new tab in round 2 “Clipping and Masking in CSS” 😂

[@Danko_HS]

🤣 nice catch

[@josejohnhalindogo8336]

I learned something. That's all that matters. I actually learned something.

[@flobiish]

Very fun to watch. You guys had a harder time with these than I did, but that doesn't mean I didn't learn anything watching. With the last one, you could have used the top of the two overlapping circles as the clipping box for the inner portion.

[@ravense8337]

Great video, hope you do these battles more in the future!

[@IceMetalPunk]

Fun fact: self-closing non-void tags are invalid in HTML, so all your lines are just opening divs without closing them. React habits hurt you there :P

[@simonfarrugia26]

You both definitely over complicated the last one 😅. You only had to put another same size circle inside one of the circles (with overflow hidden) and position it.

[@kinstar]

That's excactly what I thought, but it's really interesting seeing how different it could be done with same outcome

[@harshitaa7167]

how?can u pls elaborate?

[@kinstar]

@@harshitaa7167 you see the second challenge they did where they used square boxes inside the circle to make the mountains, its excactly the same thing just with another circle.

[@harshitaa7167]

@@kinstar but how? won't the circles completely overlap each other?

[@kinstar]

@@harshitaa7167 they will but that's why you position the other circle to the right then hide the over flow

[@imaginadan7334]

Can someone tell how do they call a color so accurate since we have thousand of possibilities. Im messing up a lot in color and have to google it everytime I want to pick one

[@wcandillon]

we can copy/paste them sorry it was visible on screen.

[@eufraniodiogo50]

I never listened a french guy speaking english it's awesome! New sub, liked the video

[@bubbleteaichooseyou]

I always learn from coder coder but I don't know exactly why. Now after seeing her side by side with other people I fully understand her code is very clean and noobs friendly you can just look at it and have a general understanding of what she's going to do

[@wcandillon]

I completely agree 💯

[@dejandjukic305]

So I'm learning front-end plus design in the last two years, self-learner...I got finally a contract for the position of technical designer but the focus will be on front-end development. I was a bit scared but after I watch this video I'm fully secure. If I did all of that in 10 minutes with 100% someone with a few years experience should make it a bit faster I guess :D

[@TwanvB]

I would approach these designs almost the same way Jessica did. The way William did it was really interesting to me. Love these video's it really shows there are more ways to do things.

[@giorgimerabishvili8194]

I've not heard Skype sound for a looong time : ))))

[@ugurugutugu]

Task: you have to recreate image exactly right with least amount of code. Both proceed to make it close but not same and doesn't care how much code they've used...

[@romulofg]

Audio missing in challenge 3 for willian

[@jaywye]

First two were pretty easy to figure out but that last one, I've never seen before.

[@Ninja-cn6kj]

I like jessica's solution very simple and sweet jhon's solution is lil bit advance that motivate to do more hardwork

[@becayebalde3820]

This video was so interesting I even did the first challenge and it was so fun Please make more content like this!

[@tenc6491]

Hi William, I like your french accent. glad to see a french KZbinr who creates content in English. Happily subscribed.

[@0mer870]

Didn't think I'd like watching this but I actually love it

[@SeanGoresht]

10:00 my first thought on this was to use the ❄ emoji behind the circle, but alas, it doesn't map 1:1. Neither does ❊ (too many lines). Could css clip and shape be used to mask away the additional striations 🤔? I wonder

[@chrismanning5232]

You guys crazy overcomplicated the last problem. You make a clone of the left circle as a child of the right with the background color, then have the right circle with overflow hidden.

[@brainz80]

My first thought on the final was to use filter. Maybe I'll have to test it out

[@brainz80]

Ok. filter doesn't have what I was looking for. But mix-blend-mode might.

[@peter9style]

And there i was feeling proud for copy/pasting css to change the sidebar font size... 😅

[@tanmayhire3092]

For a second I thought she is Indian Cricketer Smriti Mandhana 😂

[@syedismail9758]

Same here.. 😂😂🤣🤣

[@rein7840]

Hey, William. You have a example of this sections with indicator bar of KZbin? Like in your profile (home, videos, community, etc). Have a indicator bar that change with and translate to new indexes on click or swipe. I have no Idea how to start that, if anyone know a way. Thx for the attention :D

[@badrkarrachai1189]

All of that without using google just ones this is Amazing 😳

[@asdzxcz1360]

Is there a website similar to cssbattle, but more practical ?? Like fixing html/css layout, quizzes or challenges that would be more practical and would help with solving problems that may occur during real development ??

[@sahilpahuja1674]

For challenge 3 you can make another circle inside 2nd one of same size and overflow hidden then just position it..

[@tegaudbeline5401]

Well done! I've learm so much. For the third one, i'd create 4 circles and clip 2 of them respectivly in each of the big circle

[@copycarvers]

Such a freaking creative and productive way to improve your skills

[@study3954]

But we did NOT see his first & second challenge results 😅

[@Ealdorman_of_Mercia]

mhmm so coding is all about trial and error, looking up the answer and understanding the principle? Seems so much more interesting than my boring field.

[@chiragsingla.]

Yes

[@youtub4444]

Hi there! Wich of you are from Zurich, Switzerland?

[@swannpolydor1226]

You mean Beautiful Zurich, Switzerland right?

[@sanjum9434]

Is it "johny sin's" i love your work bro keep up with videos.....

[@NOCTUMSEMPRA]

Codebrazzers (?

[@o_poky9359]

lmaoooo

[@lars-ragnarhaugen577]

For the last task i would have just had a 3rd equal-sized dark circle and put it inside of the overlapping circle div

[@lisbey759]

this is how I solve the lastone .. the colors and dimentions are not the same but ... ------------------------------------- html{ height: 100%; } body{ display: flex; height: 100%; align-items: center; justify-content: center; } .container{ width: 400px; height: 400px; position: relative; } .circle-intersect { background-color: transparent; width: 100%; height: 100%; border-radius: 50%; position: absolute; overflow: hidden; z-index: 2; } .circle-intersect::after { content: ''; background-color: black; width: 100%; height: 100%; border-radius: 50%; position: absolute; overflow: hidden; left: 80%; } .circle { background-color: yellow; width: 100%; height: 100%; border-radius: 50%; position: absolute; z-index: 1; } .circle::after { content: ''; background-color: red; width: 100%; height: 100%; border-radius: 50%; position: absolute; overflow: hidden; left: 80%; }

[@marufmarzuq]

Now I've come to know how to use clip-path in CSS. Thanks William ❤️❤️

[@fabianvallejos]

Great video guys! Looks like a lot of fun. I didn't know about this website but I think I'm gonna spend some time digging into it.

[@dfgfdgdfgfdg2902]

love these code battles!!! so entertaining and informative :)

[@nelsonjavier9005]

Wow, it's amazing how you guys use css, I learn a lot thank to you.

[@ericfox6812]

I think the last one can be done with mix-blend-mode css property

[@HansNiemann762]

didn't know cssbattle existed , I struggle with frontend a lot , suggest some more websites like these for react if there's any , learning through competing is always fun

[@DangerNG56]

Frontendmentor.com

[@rukhsarkhan4506]

Third stage was quite easy make 3rd circle at same position as left one same size background color black then give z index to all three.. left ine would be first to shown then center then right

[@alkeshpatil3946]

last one was so much easy we had to d nothing special in that 1. Draw to circles 2. One of them should have z index of 1 or more 3. After one circle will over lap other we have to make another circle inside of circle which contains zindex of one 4. after drawing circle we have to set overflow to hidden and shift it towards the send circle with position property thats it

[@sonikhiphop]

This was really cool. Stumbled upon this with my 6 year old daughter who really likes it too 👍

[@madanhamuchineuta3157]

I used only 3 div on challenge 3 kkk and the accuracy was 100%. should i open a youtube channel for css kkk :)

[@rafamilenium2]

Go for it. Post the link here so we can learn from you too.

[@ZardashtKaya]

note to self: never use grid to center things, because its not pixel perfect

[@faust2134]

I wonder, why does William use "px" for creating circles? border-radius: 50%; is a perfect solution. Maybe im missing something?

[@Ta5.]

I thought that this is a counter strike: source video -,-

[@autumndev]

imagine playing cs source

[@AshwinMothilal]

May be you guys can do a podcast on the approach you both followed.

[@rafilalars6347]

Hi William could you please create a video which show us how to Built React Native App with Reanimated 2 for the Web and figure out the performance impact when the app works on the web with reanimated 2.

[@workgsm542]

Wouldn't mix-blend-mode: multiply; work for the last one?

[@EvaLasta]

25:06 what are those spoopies sounds in the background?

[@squ34ky]

An airplane

[@umaralfaruq1304]

Hi William can you create popup menu(like dropdown menu in css) for react native?

[@sharhanalhassan7352]

Why does William close some of his divs with just only /> and not

[@tranquang2330]

How they know the background color immediately, did they really remember all the color codes?

[@xamantiwari]

they have option dude

[@phellaty]

There is options of colors, but their cam is in front of it

[@fotios4902]

Maybe it would be better to show the whole thing from one developer and then the other one

[@m4rch3n1ng]

why did nobody think of just using inset box-shadows for the last one?

[@charlesch3ng]

Another solution for getting the lens shape from overlapping two circles 21:58 : Take a square, use border-bottom-left-radius and border-top-right-radius to round off the opposite corners, then rotate 45 degrees. This solution won't work though unless the circles are intersecting exactly the right amount, which they appear to be.

[@ProgrammingWithPax]

Super fun! Good job with challenge #3.