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 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 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
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 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 :)
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
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.
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
@@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.
@@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
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
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 🙏
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/
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 😁
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
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.
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!
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...
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
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'.
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.
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.
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.
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
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 ??
I've watched a few CSS battle videos now and I can't figure out why people don't do nesting? Maybe it dosnt work? But in the first challange for example there are 4 circles that all could have radius 50% and there are 3 sticks that look identical besides their rotation. Or am I'm missing something here?
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.
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.
Hey, William. You have a example of this sections with indicator bar of UA-cam? 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
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.
@@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.
J'aurai adoré avoir votre debrief des épreuves et que vous partagiez les méthodes que vous avez employé. Pesant pourquoi pas les pours les les contres en débouchant sur une option "plus viable selon vous"
am i the only when when watching the css challenges i see that its clearly not centered but they’re like damn that’s perfect, am i the only one seeing that its not???
Thanks so much for doing this collab! It was a ton of fun and I think made for an interesting video for others! 😁
Jessica, I realized that I thought of solutions that are the same / similar to yours... I think I watch a lot of your videos 😝💗
Wow, you were extraordinary.
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👌
Can we use background-clip property 😉
round 1, why are you using position:absolute ? its not stable when the viewport changes. Anyone's with me?
"I think this should work." Most common phrase used while writing css.
Or while writing any program.
@@cipherxen2 until you do tdd
@@josephmbimbi it applies in TDD too!
@@cipherxen2 to some extent yeah. I meant, you have more than an eyeball test and don't just push your code finger crossed ^^
@@josephmbimbi so, what's your point then?
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.
yea react native style sheet mostly like vanilla CSS in general
It is always a better practice to give border-radius:50%
Ofcourse it can try this -> borderRadius: '50%'
@@Joksky8 I can confirm this doesn't work in my version of react-native either using px is the only way.
@@thesodapoppanda8778 Dang react sucks lol
lol, border like shapes should be the basic of css, almost like kindergarten.
I love this especially to see you guys struggling a little bit like I always do. I think you boosted my confidence.
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 was hoping for that too. At least a comparison of their scores.
@@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.
Fun to watch! I didn't know about this website. I'll certainly dive in.
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 did it by using circles one in the other
with the overflow:hidden and z-index:1
Css really is sometimes like that. One line of code can do wonders
could maybe have done it with blend mode: difference or exclusion
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.
I have use almost same approach and within 5 min I have finish the last challenge with 100% and used 565 characters. 🙂
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
}
One of the coolest developer videos I've ever seen!!
For a quick second, I wondered what Sean Evans knows about CSS and why he was being challenged.
Lol
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 :)
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
William took an interesting approach. Mine was almost exactly as Jessica’s. Great job guys!
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.
We never got to see the final scores. I'd like to see more of this collabo in the future
yeah! he got 600 but how much did she get?! who won?
I am not a web developer but I really appreciate how each of you had different thought processes and showing the power CSS.
Really fun to watch this battle. It is interesting to see how people think differently and solve the same problems differently.
css indeed demands not just your knowledge but creativity too! well done both of you!
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
we can copy/paste them sorry it was visible on screen.
I'm a C programmer and my mind can't get this, sorry haha
me too , It kind of hurts to see people playing with shapes and calling it programming while we suffer in pitch darkness....
@@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.
Same with Javascript, lord saved me from doing CSS.
@@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
the same here 😢
The production value in these videos is top notch. Really good work.
This was an awesome challenge!! I love to watch how other developers figure out problems.
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
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.
the next one MUST be The Net Ninja, the lord of web development
Yes please !
Shaun is 💥 @The Net Ninja
Yes 🙏
ua-cam.com/video/YujykR315HY/v-deo.html
Shaun would make a replica of the CSSBATTLE website as a mistake
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 🙏
i really learned a lot from this battle! Thanks!
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/
My first thought on the final was to use filter. Maybe I'll have to test it out
Ok. filter doesn't have what I was looking for. But mix-blend-mode might.
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 😁
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
Use instead of a div to reduce the code's character count.
What music is this please?
shes a genius at css, but when she rotated the red mountain she did it by trial and error😂
Anyone can see that is 45 degrees. Why would you even try 10?? She can’t eyeball pixel values at all either.
She probably still kick your ass at css 😆
@@brendan9039 who cares? That's like kicking my ass at putting stamps on mail.
@@resonatingsilence savage comeback
I went to the comment section for this exact reason.
And there i was feeling proud for copy/pasting css to change the sidebar font size... 😅
Audio missing in challenge 3 for willian
Great video, hope you do these battles more in the future!
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));
}
This is an excellent competition, we saw different approaches from both of them, which is really cool.
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.
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!
so how's the web development going? or you find a new excuse?
@@johndorian4078 I change gears too often and end up looking into other things. Always been a problem with me. Are you still a dick?
can anyone tell me the song playing in the background at 05:14?????
found it. "Run it Up" by Nbhd Nick
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...
This video was so interesting
I even did the first challenge and it was so fun
Please make more content like this!
CSS: that moment when you try hanging a painting on the wall and you nail your hand up instead.
CSS: When you try to hang up the painting, but instead you set fire to the sofa.
That's the danger of using negative margins. Use translate instead
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
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
Really cool! Thank you for doing this Jessica & William!
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; }
For the last task i would have just had a 3rd equal-sized dark circle and put it inside
of the overlapping circle div
I think the last one can be done with mix-blend-mode css property
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.
Though i don't know html or css but it feels so good to watch two people thinking differently
25:06 what are those spoopies sounds in the background?
An airplane
I love how William opened a new tab in round 2 “Clipping and Masking in CSS” 😂
🤣 nice catch
For challenge 3 you can make another circle inside 2nd one of same size and overflow hidden then just position it..
Hi William, I like your french accent. glad to see a french UA-camr who creates content in English. Happily subscribed.
why did nobody think of just using inset box-shadows for the last one?
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.
But we did NOT see his first & second challenge results 😅
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.
Yes
Jessica, Jessica, I have learned a lot from you. Thanks!!
They submitted without deleting the comments 🤦♂️ His mic muted 22:31 🤦♂️
They did not take it seriously at all. They just thought about getting things done. It was fun.
First two were pretty easy to figure out but that last one, I've never seen before.
love these code battles!!! so entertaining and informative :)
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
I completely agree 💯
I learned something. That's all that matters. I actually learned something.
I never listened a french guy speaking english it's awesome!
New sub, liked the video
Can someone pls tell me how she went up and down the lines of code without ever going to the end of the line? What keyboard shortcut is that?
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
Hi William can you create popup menu(like dropdown menu in css) for react native?
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 ??
I wonder, why does William use "px" for creating circles? border-radius: 50%; is a perfect solution. Maybe im missing something?
I used only 3 div on challenge 3 kkk and the accuracy was 100%. should i open a youtube channel for css kkk :)
Go for it. Post the link here so we can learn from you too.
Voice Error at 22:30
2:16............ If anyone wondering how to center things in CSS fastest way...
try,
div {
display : grid ;
Place - items : center ;
}
Which Vs code color theme u use please name
Song at 9:27?
I've watched a few CSS battle videos now and I can't figure out why people don't do nesting? Maybe it dosnt work? But in the first challange for example there are 4 circles that all could have radius 50% and there are 3 sticks that look identical besides their rotation. Or am I'm missing something here?
why did she insert two names in the class when creating the dot
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.
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.
Such a freaking creative and productive way to improve your skills
Hey, William. You have a example of this sections with indicator bar of UA-cam? 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
note to self: never use grid to center things, because its not pixel perfect
Now I've come to know how to use clip-path in CSS. Thanks William ❤️❤️
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%;
}
This was awesome! Please do more.
How they know the background color immediately, did they really remember all the color codes?
they have option dude
There is options of colors, but their cam is in front of it
I liked the King of Fighters "Round ... Ready ... Go !". I'm guessing that was KOF 97 or 96. hehe
Best technique, just body and Three div for three circle. The third (same place as the first) in the second with hidden overflow.
Same thoughts here.
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.
I like jessica's solution very simple and sweet jhon's solution is lil bit advance that motivate to do more hardwork
Why does William close some of his divs with just only /> and not
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.
That's excactly what I thought, but it's really interesting seeing how different it could be done with same outcome
how?can u pls elaborate?
@@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.
@@kinstar but how? won't the circles completely overlap each other?
@@harshitaa7167 they will but that's why you position the other circle to the right then hide the over flow
J'aurai adoré avoir votre debrief des épreuves et que vous partagiez les méthodes que vous avez employé. Pesant pourquoi pas les pours les les contres en débouchant sur une option "plus viable selon vous"
I've not heard Skype sound for a looong time : ))))
Pls Part 2🙏👍👍🙏 Awesome vid
am i the only when when watching the css challenges i see that its clearly not centered but they’re like damn that’s perfect, am i the only one seeing that its not???