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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

i really learned a lot from this battle! Thanks!

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

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

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

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

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

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

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

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

After watching this I joined CSS battle just for fun. I was totally unaware of this really cool platform! Make more videos like this please! It's fun watching people compete over stuff xd

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

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

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

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 :)

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

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

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

This was awesome! Please do more.

I love love love this! Very fun to watch!

Super fun! Good job with challenge #3.

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

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

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.

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

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

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

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 🙏

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.

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.

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

So happy and excited seeing the video 😍

Such a freaking creative and productive way to improve your skills

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!

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

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

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

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.

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

This was really fun to watch niceeee!!!

This is quality content. Learned a lot.

That was so fun i just love it i want to see more videos like that

What a great video, congrats to you both.

These battles are awesome!

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/

This was fun. LOVED EVERY PART OF IT 😍😍

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

love these css battles. so cool

Awesome guys! Tks for share!

Thanks. I learnt a whole lot from this.

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

Awesome video, i just signed up CSS battle seeing you guys !

Love this challenges!

So pretty, thanks a lot both of you guys.

Waw guys this is absolutely amazing

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 😁

Super fun to watch ☺️

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

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

I love this so much.

Pretty good job guys, well done.

That is awesome! Please keep it up

Loved it... It was amazing 💜💜💜

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

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

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

I love her voice...so soothing..

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

I like her videos .I follow her videos and learn everyday.

So fun to watch.

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; }

This is so fun to watch ⌚ 😄

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

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)); }

You all are so cool for this. Want to be this good. Programming neophyte

Jessica did it in a beautiful manner

jessica's first spot was like just on the spot don't move anywhere

amazing brother loved it❤️🔥

I really enjoy it ❤️

You got my sub. Great content!

nice video.. thanks guys for the css lesson

This is some great content.

Thanks so much for this

Pls Part 2🙏👍👍🙏 Awesome vid

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

Serious quality content

Challenge 3 is so hard.he left speechless