Thanks so much for doing this collab! It was a ton of fun and I think made for an interesting video for others! 😁
@raphaelcardosos
3 жыл бұрын
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
3 жыл бұрын
Wow, you were extraordinary.
@pbateman6775
3 жыл бұрын
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
3 жыл бұрын
Can we use background-clip property 😉
@tyrellwreleck4226
3 жыл бұрын
round 1, why are you using position:absolute ? its not stable when the viewport changes. Anyone's with me?
@halberliterpils
3 жыл бұрын
"I think this should work." Most common phrase used while writing css.
@cipherxen2
3 жыл бұрын
Or while writing any program.
@josephmbimbi
3 жыл бұрын
@@cipherxen2 until you do tdd
@cipherxen2
3 жыл бұрын
@@josephmbimbi it applies in TDD too!
@josephmbimbi
3 жыл бұрын
@@cipherxen2 to some extent yeah. I meant, you have more than an eyeball test and don't just push your code finger crossed ^^
@cipherxen2
3 жыл бұрын
@@josephmbimbi so, what's your point then?
@severussin
3 жыл бұрын
this is beautiful to see the difference in thought process and code structure. love it. more like this pls.
@nobytes2
3 жыл бұрын
William: I haven't done proper css in two years, proceeds to crush every challenge with css sorcery.
@artmosphereID
3 жыл бұрын
yea react native style sheet mostly like vanilla CSS in general
@AshutoshMishra
3 жыл бұрын
It is always a better practice to give border-radius:50%
@Joksky8
3 жыл бұрын
Ofcourse it can try this -> borderRadius: '50%'
@thesodapoppanda8778
3 жыл бұрын
@@Joksky8 I can confirm this doesn't work in my version of react-native either using px is the only way.
@alexsivro9110
3 жыл бұрын
@@thesodapoppanda8778 Dang react sucks lol
@samuelkundael3503
3 жыл бұрын
lol, border like shapes should be the basic of css, almost like kindergarten.
@JohanLindskogen
3 жыл бұрын
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
3 жыл бұрын
I was hoping for that too. At least a comparison of their scores.
@SMMGOGO
3 жыл бұрын
@@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.
@DMoots
3 жыл бұрын
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
2 жыл бұрын
I have use almost same approach and within 5 min I have finish the last challenge with 100% and used 565 characters. 🙂
Fun to watch! I didn't know about this website. I'll certainly dive in.
@i.t.starters2019
3 жыл бұрын
I love this especially to see you guys struggling a little bit like I always do. I think you boosted my confidence.
@dukeeehhh2386
3 жыл бұрын
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
3 жыл бұрын
i did it by using circles one in the other with the overflow:hidden and z-index:1
@zinedinhadzajlija6225
3 жыл бұрын
Css really is sometimes like that. One line of code can do wonders
@velara314
3 жыл бұрын
could maybe have done it with blend mode: difference or exclusion
@waleG_
3 жыл бұрын
For a quick second, I wondered what Sean Evans knows about CSS and why he was being challenged.
@diwakardayal954
3 жыл бұрын
Lol
@thydevdom
3 жыл бұрын
William took an interesting approach. Mine was almost exactly as Jessica’s. Great job guys!
@goldengiorno6890
3 жыл бұрын
the next one MUST be The Net Ninja, the lord of web development
@yannicknana
3 жыл бұрын
Yes please !
@limitlesskode
3 жыл бұрын
Shaun is 💥 @The Net Ninja
@sainarasimha2451
3 жыл бұрын
Yes 🙏
@lakshyadhariwal5482
3 жыл бұрын
kzitem.info/news/bejne/uqug35-IbGNme44
@othmanebejja3236
3 жыл бұрын
Shaun would make a replica of the CSSBATTLE website as a mistake
@JamesQQuick
3 жыл бұрын
One of the coolest developer videos I've ever seen!!
@sandinosaso
3 жыл бұрын
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
3 жыл бұрын
We never got to see the final scores. I'd like to see more of this collabo in the future
@mishuhishu94
3 жыл бұрын
yeah! he got 600 but how much did she get?! who won?
@ankit55ful
3 жыл бұрын
I love how William opened a new tab in round 2 “Clipping and Masking in CSS” 😂
@Danko_HS
3 жыл бұрын
🤣 nice catch
@stevensbrito7188
3 жыл бұрын
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
2 жыл бұрын
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.
@fomentarelaxation139
3 жыл бұрын
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
3 жыл бұрын
I am not a web developer but I really appreciate how each of you had different thought processes and showing the power CSS.
@AjaySingh-xd4nz
3 жыл бұрын
css indeed demands not just your knowledge but creativity too! well done both of you!
@zakariachahboun
3 жыл бұрын
i really learned a lot from this battle! Thanks!
@DevelopingDadCodes
3 жыл бұрын
This was an awesome challenge!! I love to watch how other developers figure out problems.
@tastes-like-straberries
3 жыл бұрын
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
@frontendgrowth4572
3 жыл бұрын
Really fun to watch this battle. It is interesting to see how people think differently and solve the same problems differently.
@scriptkeeper8243
3 жыл бұрын
CSS: that moment when you try hanging a painting on the wall and you nail your hand up instead.
@js_dev_uk
3 жыл бұрын
CSS: When you try to hang up the painting, but instead you set fire to the sofa.
@AntiAtheismIsUnstoppable
3 жыл бұрын
That's the danger of using negative margins. Use translate instead
@nitram_nosnibor
3 жыл бұрын
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
@parakidd
3 жыл бұрын
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?
@k-yo
3 жыл бұрын
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/
@archiem6323
3 жыл бұрын
Jessica, Jessica, I have learned a lot from you. Thanks!!
@wajidkhan2980
3 жыл бұрын
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
@seancpp
3 жыл бұрын
The production value in these videos is top notch. Really good work.
@josejohnhalindogo8336
3 жыл бұрын
I learned something. That's all that matters. I actually learned something.
@kushagragour
3 жыл бұрын
Really cool! Thank you for doing this Jessica & William!
@-SumaiyaSiddika
3 жыл бұрын
Though i don't know html or css but it feels so good to watch two people thinking differently
@qwertzuiopqwertzuiop2107
3 жыл бұрын
shes a genius at css, but when she rotated the red mountain she did it by trial and error😂
@resonatingsilence
3 жыл бұрын
Anyone can see that is 45 degrees. Why would you even try 10?? She can’t eyeball pixel values at all either.
@brendan9039
3 жыл бұрын
She probably still kick your ass at css 😆
@resonatingsilence
3 жыл бұрын
@@brendan9039 who cares? That's like kicking my ass at putting stamps on mail.
@randomguy3000
3 жыл бұрын
@@resonatingsilence savage comeback
@LegendOfTheRee
3 жыл бұрын
I went to the comment section for this exact reason.
@math-s
3 жыл бұрын
I'm a C programmer and my mind can't get this, sorry haha
@varri0nschannel840
3 жыл бұрын
me too , It kind of hurts to see people playing with shapes and calling it programming while we suffer in pitch darkness....
@LilMartyFarty
3 жыл бұрын
@@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
3 жыл бұрын
Same with Javascript, lord saved me from doing CSS.
@elwinjyothis5388
3 жыл бұрын
@@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
3 жыл бұрын
the same here 😢
@savieecodes
3 жыл бұрын
This is an excellent competition, we saw different approaches from both of them, which is really cool.
@awekeningbro1207
3 жыл бұрын
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)); }
@bubbleteaichooseyou
3 жыл бұрын
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
3 жыл бұрын
I completely agree 💯
@B42536
3 жыл бұрын
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.
@TwanvB
3 жыл бұрын
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.
@furbearmn
3 жыл бұрын
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; }
@flobiish
2 жыл бұрын
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.
@eufraniodiogo50
3 жыл бұрын
I never listened a french guy speaking english it's awesome! New sub, liked the video
@tenc6491
Жыл бұрын
Hi William, I like your french accent. glad to see a french KZitemr who creates content in English. Happily subscribed.
@ravense8337
3 жыл бұрын
Great video, hope you do these battles more in the future!
@theg315
3 жыл бұрын
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 😁
@0mer870
3 жыл бұрын
Didn't think I'd like watching this but I actually love it
@becayebalde3820
3 жыл бұрын
This video was so interesting I even did the first challenge and it was so fun Please make more content like this!
@Ninja-cn6kj
3 жыл бұрын
I like jessica's solution very simple and sweet jhon's solution is lil bit advance that motivate to do more hardwork
@badrkarrachai1189
3 жыл бұрын
All of that without using google just ones this is Amazing 😳
@jaywye
3 жыл бұрын
First two were pretty easy to figure out but that last one, I've never seen before.
@IceMetalPunk
3 жыл бұрын
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
@nelsonjavier9005
3 жыл бұрын
Wow, it's amazing how you guys use css, I learn a lot thank to you.
@preciousnwaoha3123
3 жыл бұрын
Pls Part 2🙏👍👍🙏 Awesome vid
@marufmarzuq
3 жыл бұрын
Now I've come to know how to use clip-path in CSS. Thanks William ❤️❤️
@dfgfdgdfgfdg2902
3 жыл бұрын
love these code battles!!! so entertaining and informative :)
@copycarvers
3 жыл бұрын
Such a freaking creative and productive way to improve your skills
@KingDrekon
3 жыл бұрын
Use instead of a div to reduce the code's character count.
@charlesch3ng
3 жыл бұрын
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.
@tanmayhire3092
3 жыл бұрын
For a second I thought she is Indian Cricketer Smriti Mandhana 😂
@syedismail9758
3 жыл бұрын
Same here.. 😂😂🤣🤣
@dejandjukic305
2 жыл бұрын
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
@patrique.taletoria
2 жыл бұрын
Haha, they were fronting " I'm so nice and all" but can't hide game-on mode on their faces. So cute.
@wadafaqblyat
2 жыл бұрын
jessica's first spot was like just on the spot don't move anywhere
@tegaudbeline5401
3 жыл бұрын
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
@giorgimerabishvili8194
3 жыл бұрын
I've not heard Skype sound for a looong time : ))))
@brainz80
3 жыл бұрын
My first thought on the final was to use filter. Maybe I'll have to test it out
@brainz80
3 жыл бұрын
Ok. filter doesn't have what I was looking for. But mix-blend-mode might.
@lisbey759
3 жыл бұрын
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%; }
@m1kr0kosmos
3 жыл бұрын
You all are so cool for this. Want to be this good. Programming neophyte
@anamulhaque589
3 жыл бұрын
So pretty, thanks a lot both of you guys.
@jiniri
3 жыл бұрын
William haven't discovered the 50% border-radius yet
@wcandillon
3 жыл бұрын
exactly 😂
@jiniri
3 жыл бұрын
btw interesting content and I'm sure I'm not the only one who learnt new css tricks from this video 😁
@peter9style
3 жыл бұрын
And there i was feeling proud for copy/pasting css to change the sidebar font size... 😅
@mutazkanaan6796
2 жыл бұрын
Jessica did it in a beautiful manner
@sanjum9434
3 жыл бұрын
Is it "johny sin's" i love your work bro keep up with videos.....
@NOCTUMSEMPRA
3 жыл бұрын
Codebrazzers (?
@o_poky9359
3 жыл бұрын
lmaoooo
@madanhamuchineuta3157
3 жыл бұрын
I used only 3 div on challenge 3 kkk and the accuracy was 100%. should i open a youtube channel for css kkk :)
@rafamilenium2
3 жыл бұрын
Go for it. Post the link here so we can learn from you too.
@Chikowski101
Жыл бұрын
he's french !! his accent says it all , great content dude !!
@chrismanning5232
3 жыл бұрын
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.
@ugurugutugu
2 жыл бұрын
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...
@plor1261
3 жыл бұрын
This was awesome! Please do more.
@sonikhiphop
3 жыл бұрын
This was really cool. Stumbled upon this with my 6 year old daughter who really likes it too 👍
@ProgrammingWithPax
3 жыл бұрын
Super fun! Good job with challenge #3.
@simonfarrugia26
3 жыл бұрын
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
3 жыл бұрын
That's excactly what I thought, but it's really interesting seeing how different it could be done with same outcome
@harshitaa7167
3 жыл бұрын
how?can u pls elaborate?
@kinstar
3 жыл бұрын
@@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
3 жыл бұрын
@@kinstar but how? won't the circles completely overlap each other?
@kinstar
3 жыл бұрын
@@harshitaa7167 they will but that's why you position the other circle to the right then hide the over flow
@rukhsarkhan4506
2 жыл бұрын
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
@fabianvallejos
3 жыл бұрын
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.
@sahilpahuja1674
3 жыл бұрын
For challenge 3 you can make another circle inside 2nd one of same size and overflow hidden then just position it..
@reshad5694
3 жыл бұрын
More of these challenges please
@wcandillon
3 жыл бұрын
there is a new one coming this Tuesday :)
@LErghan
3 жыл бұрын
Best technique, just body and Three div for three circle. The third (same place as the first) in the second with hidden overflow.
@oserefemhenativie6681
3 жыл бұрын
Same thoughts here.
@mdrafikulislam8949
3 жыл бұрын
That was so fun i just love it i want to see more videos like that
@lars-ragnarhaugen577
3 жыл бұрын
For the last task i would have just had a 3rd equal-sized dark circle and put it inside of the overlapping circle div
@sathishkumarr7106
3 жыл бұрын
So happy and excited seeing the video 😍
@Silver-vc3ll
2 жыл бұрын
for me, this is about no-hair vs full-hair battles
@zoltancaputo9562
2 жыл бұрын
Awesome guys! Tks for share!
@RaterisimoCBA
2 жыл бұрын
I liked the King of Fighters "Round ... Ready ... Go !". I'm guessing that was KOF 97 or 96. hehe
@jamieguthrie1760
3 жыл бұрын
Hey Will, would be cool if you both spent 5 mins after discussing and comparing your techniques!
@wcandillon
3 жыл бұрын
Bruh, what are you doing here?!
@jamieguthrie1760
3 жыл бұрын
@@wcandillon you came up on my recommendations bruh! Your flat looks amazing btw. That view over Zurich is 👌 Next time I come to Zurich I'm definitely visiting!!
@wcandillon
3 жыл бұрын
@@jamieguthrie1760 You should definitely visit sometimes :)
@alkeshpatil3946
3 жыл бұрын
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
@thinkerman
3 жыл бұрын
I love love love this! Very fun to watch!
@CharlesSmall
3 жыл бұрын
I like her videos .I follow her videos and learn everyday.
@HansNiemann762
3 жыл бұрын
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
Пікірлер: 581