As much as I love doing stuff "just in CSS", for more complex shapes it just makes way more sense to even hand-code them as svg instead of going the css route.
As someone who's very low-level at CSS, it was VERY reassuring to see you struggle on the third and fourth challenge. It helps me remember everyone gets stumped.
Hey Kevin! I have been doing CSS for a while and your channel was absolutely amazing for me because I wanted to be familiar with modern CSS. I have recently also completed learning sass, love the tutorials and all the videos, keep them coming!
That was a lot of fun! I struggled hard on the first one since I decided to go with a complex grid layout and I'm still learning about grid. The second one was kinda boring, I ended up just manually placing a bunch of absolute positioned elements, which almost feels like cheating. The third one I was really proud of, I used ::after pseudo-elements for the dots in the bells around the edge of the tambourine, and fancy transformation math to place them around the circumference of the circle. (It's actually really simple once learn how to do it, "fancy" is an exaggeration.) And for the fourth challenge, I was happy to see that you took a very similar approach to me, just with flex instead of grid. (I'll get around to learning flex once I've mastered grid!)
To evenly distribute elements over a circular line, you can nest elements and rotate them all by the same amount adjusting the transform origin. Since the elements are nested the rotation accumulates and you get a perfect circle of N points, easily tweaking the distribution and spacing on a single rule.
Damn those 99.9% are annoying. I got 6:10 vs 8:05 (100%), 14:00 vs 11:40 (99.9% with some kind of half-pixels messing it up somewhere...), 16:45 vs 14:22 (99.9% as well, without even anything visibly different...) and 4:27 vs 10:12 (100%). That last one I'm particularly happy with. Seeing the target, it was an instant "ok, 3 , 1 for the piano, 2 with box-shadows to duplicate the white & black keys", went like a charm. I love it when a plan comes together.
Been watching for a very long time and love your content. I learned a lot watching your videos and my confidence has grown over the period. Thanks for posting such amazing videos. Really appretiate all the efforts you put in to bring these amazing videos to us. Thanks!
I'm also called Kevin 😁😁, A CSS addict from Rwanda. I've tried the 🎹 and 🎶and got 100% on my own, Seeing how you make your CSS fast really motivates me 💪💪💪
My times! Battle 1 - 14:00 Battle 2 - 15:13 Battle 3 - 13:20 Battle 4 - 7:33 That means we were 2-2 in terms of the fastest victor! Battle 1 - I just let grid do most of the aligning then used transform: translate to do the rest of the work. The tricky bit here was getting all the necessary magic numbers to get the exact match. Battle 2 - This one I could have done better in, but because of the box-shadow not giving perfect circles issue (apparently it's a chrome bug, works fine on Firefox) I ended up wasting a couple minutes here just trying to translate between browsers, as the positioning I'd done was different to firefox meaning I had to re-position everything. A little annoying but got there in the end. Battle 3 - This one I did what I thought was quite a clever thing. I just used a clip-path: circle() to get the bottom circle to correctly cut off. Everything else was pretty easy just using absolute positioning for the small circles. Battle 4 - Really happy with my performance on this one. Used grid on the body for a quick center, quickly used flex, gap and relative positioning to get the keys in the right place, and then just made 5 black boxes for the black keys and used absolute positioning to get them in place. This was fun, would love to do it again!
hey quick question hope you dont mind, can you explain a bit more how you did the clip path circle? wouldnt that just do nothing since its already a circle? also how did you move the clip path to the bottom? thanks
@@Giant_Swing Essentially what I did was create the background circle as a div on it's own, and then create the bottom circle that would give the arc. Then I just moved the bottom circle into place using absolute positioning, and finally gave the big circle the clip path of `circle(85px)` as that was just the magic number for my layout. it cut around the entire main circle, whilst just perfectly cutting off the rest of the small circle.
I promised myself I wouldn't do CSSBattles because it's addictive. And here I am, several hours later, toying with the piano, shaving off single characters (down to 353 right now) with tricks that make me feel filthy. Damn you, Kevin, damn you to HTML ;)
I managed to do the first two in around 20 minutes each, and each getting around 98% score. Not nearly as good as you, but I'm proud of it ^^. Great video!
I got 100% on the first one... but it took me 2h 😂😭 Still great learning experience even if I pulled a tortoise🐢 Edit: part of that was condensing it down to 695 chars lol
Did not know about background inherit! I'm learning CSS and building a website i've always wanted to make using my new skills and its so helpful seeing content like this which gives me new ideas.
Funny how some comments mention the use of negative as "negative" (no pun intended) and even implying that it was something they shouldn't use? Also Kevin before using it has refered to it as "let's get dirty"... In reality a negative margin really it's just an axis navigator, -up -down -left -right... this is one of those things that if the designer/coder understands from the get go their CSS journey will be smoother... Like everything, never overuse haha. anyways big fan Kevin amazing video (I'm not even half way through it) best css channel in the tube
Good morning Master Kevin. Another good lesson today. Although I have been following your lessons for a while, and most of what was shown here was already in there. Good to see it all applied. The box-shadow thing was weird. I could see immediately what was going on. (Taking the rounded corners as they are and connecting them with straight lines...) But I would never have implemented it that way. (That's now how a shadow works!) Enjoyed this time a lot, as a different take on existing knowledge. I may have a go at these battle-things as well. Also not going for time. But probably putting some more restrictions in place. (Like relate all position and size to the size of the container. I have been having a lot of real life cases for that.)
Here's the key to getting 100% on the tambourine: instead of having a border on the big circle, make it 20px bigger and make an inside border using "box-shadow inset".
Spended 1 hour 42 minutes on all of them. ------------------------------------------ Why not using pseudos? 9:04 left: 100%; 23:52 I've tried rotating them... But they are not rotated in the target, so removed that... 28:32 Had the same problem... Seems like enlarging small shape is not a good idea, so used radial-gradient and border instead. 31:02 Cool trick with outline! 32:20 Can use cross-setting left and top: b,c{left} d,e{left} b,d{top} c,e{top} 38:03 I had 99.9% too but because of another reason. Fixed it by clip-path. But in your case you should've change size of the overlap-top circle. 41:20 All 4 tasks are centered. 44:18 .white-keys { height: 100% } ? 45:52 No doctype. There was no border-radius in the times of quirks mode ;) ------------------------------------------ I used clip-path with piano.
@@KevinPowell I don't think they are usefull for high score. Pseuso selector is long and requires content property, so normal tag will be shorter, won't it?
Just a thought, as for the first challenge you started. Wouldn't it be easier to use rectangular boxes with appropriate borders & then adding those round things via position absolute? It occurrs to me that this should work, I haven't tested it though
Soo, for each battle I just paused at the start, I started my timer and started coding, when I got 100% I just paused, then I came to see each one here. I lost every battle xD, the last one was the closest: My time / Your time 1-17:09 / 8:05 2-15:42 / 11:40 3-16:03 / 14:22 (this one I got 99.9 too, the 100% was almost impossible for me :P) 4-10:29 / 10:12
I've started learning CSS in May. I've learned the basics but when it comes to actually doing it, I am lost. I loved this video and i just followed your steps trying to understand what was going on. It's amazing to see an experienced person do it. because you've come up with easy decisions. Battle 3 for example, I was thinking how you would do the lines between the circles when you just created a big one and placed the small ones on top of it. Seems obvious but for me it was "wooow".
Even if you win the CSS battle I don't think it really proves if you are good at CSS or not. If using position absolute on everything for example may get the job done, but it may still not be good in the long run for a real project. A CSS battle measures quantity over quality, I think.
These battles learned me use negative margins more frequently than I did it the past. I dunno why I was scary to use them. Perhaps I assumed this is something in appropriate in modern web design.
Great vid as usual… how could container elements, for example, be styled to include dimension lines that go slightly past the boundaries of the object itself, like a layout sketch sort of thing? So we’d see the objects border as styled and in addition get fainter set of horizontal and vertical dimension lines enclosing the element and extending slightly passed it’s boundaries. Cheers and thanks
I'm not very good at CSS, but you could add a box-shadow maybe? There are generators online that will add that for you, but it's probably easier to do something else.
I got around 10:20 on the piano. I was a little slow to click the stop button on my timer. The timer was at 10:25 but i was around 5 seconds late LoL. But you still beat my score by a few secs :D
I love pseudo-elements but always avoid them in css battles because it takes extra lines of code, even though I'm not going for a high-score in these, lol.
As a hobbyist web dev, I recently developed a game UI in raw CSS before I had heard of CSS frameworks. It was “fun”. Used a lot of margins in bad ways. Negative margins, anyone?
I'd love to see a version of this where they give you the CSS, and you draw what you think it is with basic paint tools.
It makes me feel a bit better about my own CSS abilities seeing a CSS master like yourself struggle a little bit. 👍
It's all problem solving
what do you mean by struggling..idk what are you talking about
@@Mista-fa when he was trying to get the box shadow to work is the time I remember the most
Hahaha, i'm sure from my own too :).
Just take advantage from instructions like "use less code as possible" :)
@@Mista-fa then watch the video again, why are you asking him?
I love the fact that you do your Battle but also explain things at the same time. You sir earned a subscriber!
These are so much fun to watch. I'm only a few months into my web dev journey and thought my fascination with CSS was abnormal.
CSS is worth spending your life on... XD
As much as I love doing stuff "just in CSS", for more complex shapes it just makes way more sense to even hand-code them as svg instead of going the css route.
svg+css(+js) make thing so much easier
thinking the same thing. even the first challenge considering time, could be recreated in illustrator and run through an SVG cleaner in 1-2 minutes
As someone who's very low-level at CSS, it was VERY reassuring to see you struggle on the third and fourth challenge. It helps me remember everyone gets stumped.
Hey Kevin! I have been doing CSS for a while and your channel was absolutely amazing for me because I wanted to be familiar with modern CSS. I have recently also completed learning sass, love the tutorials and all the videos, keep them coming!
got 99.5 in the first one in 13 minutes, messed it up!
20 minutes to get 99.9 in the second one
21 minutes for 98.5% in third, this was hard, I messed up
That was a lot of fun! I struggled hard on the first one since I decided to go with a complex grid layout and I'm still learning about grid. The second one was kinda boring, I ended up just manually placing a bunch of absolute positioned elements, which almost feels like cheating. The third one I was really proud of, I used ::after pseudo-elements for the dots in the bells around the edge of the tambourine, and fancy transformation math to place them around the circumference of the circle. (It's actually really simple once learn how to do it, "fancy" is an exaggeration.) And for the fourth challenge, I was happy to see that you took a very similar approach to me, just with flex instead of grid. (I'll get around to learning flex once I've mastered grid!)
you both inspire AND motivate me to keep up with my studious perseverance, kevin. c:
Css battle is back 😝 you are a master in Css, Kevin 👏🏻
To evenly distribute elements over a circular line, you can nest elements and rotate them all by the same amount adjusting the transform origin. Since the elements are nested the rotation accumulates and you get a perfect circle of N points, easily tweaking the distribution and spacing on a single rule.
What's the css for this?
Your frustration on the piano at 4-6 minutes is pretty much how CSS goes for me all the time.
Great Work😍
29:40 -- that's me pretty much all the time.
Damn those 99.9% are annoying. I got 6:10 vs 8:05 (100%), 14:00 vs 11:40 (99.9% with some kind of half-pixels messing it up somewhere...), 16:45 vs 14:22 (99.9% as well, without even anything visibly different...) and 4:27 vs 10:12 (100%). That last one I'm particularly happy with. Seeing the target, it was an instant "ok, 3 , 1 for the piano, 2 with box-shadows to duplicate the white & black keys", went like a charm. I love it when a plan comes together.
Great video Kevin... Always a marvel to watch you teach and battle at the same time. Thank you.
Been watching for a very long time and love your content. I learned a lot watching your videos and my confidence has grown over the period. Thanks for posting such amazing videos. Really appretiate all the efforts you put in to bring these amazing videos to us. Thanks!
I'm also called Kevin 😁😁, A CSS addict from Rwanda. I've tried the 🎹 and 🎶and got 100% on my own, Seeing how you make your CSS fast really motivates me 💪💪💪
Habari
My times!
Battle 1 - 14:00
Battle 2 - 15:13
Battle 3 - 13:20
Battle 4 - 7:33
That means we were 2-2 in terms of the fastest victor!
Battle 1 - I just let grid do most of the aligning then used transform: translate to do the rest of the work. The tricky bit here was getting all the necessary magic numbers to get the exact match.
Battle 2 - This one I could have done better in, but because of the box-shadow not giving perfect circles issue (apparently it's a chrome bug, works fine on Firefox) I ended up wasting a couple minutes here just trying to translate between browsers, as the positioning I'd done was different to firefox meaning I had to re-position everything. A little annoying but got there in the end.
Battle 3 - This one I did what I thought was quite a clever thing. I just used a clip-path: circle() to get the bottom circle to correctly cut off. Everything else was pretty easy just using absolute positioning for the small circles.
Battle 4 - Really happy with my performance on this one. Used grid on the body for a quick center, quickly used flex, gap and relative positioning to get the keys in the right place, and then just made 5 black boxes for the black keys and used absolute positioning to get them in place. This was fun, would love to do it again!
hey quick question hope you dont mind, can you explain a bit more how you did the clip path circle? wouldnt that just do nothing since its already a circle? also how did you move the clip path to the bottom? thanks
@@Giant_Swing Essentially what I did was create the background circle as a div on it's own, and then create the bottom circle that would give the arc. Then I just moved the bottom circle into place using absolute positioning, and finally gave the big circle the clip path of `circle(85px)` as that was just the magic number for my layout. it cut around the entire main circle, whilst just perfectly cutting off the rest of the small circle.
I promised myself I wouldn't do CSSBattles because it's addictive. And here I am, several hours later, toying with the piano, shaving off single characters (down to 353 right now) with tricks that make me feel filthy. Damn you, Kevin, damn you to HTML ;)
Hahahaha man it's not so bad. A color here. A left there and on and on
I just love Kevin. You are the reason I learned and I recommend anyone to learn from you
Im not a programmer but i love watching content like this
I managed to do the first two in around 20 minutes each, and each getting around 98% score. Not nearly as good as you, but I'm proud of it ^^.
Great video!
I got 100% on the first one... but it took me 2h 😂😭
Still great learning experience even if I pulled a tortoise🐢
Edit: part of that was condensing it down to 695 chars lol
Amazing content, it was very cool to see how you think as your styling!
Kevin love your work dude, learnt alot from your videos and still learning alot, wish to work with you some time soon ;)
25:57 he has been smoking🔥
Please do more. There’s a severe lack of css battles on TH-cam
Hahahaha say no more
I have written like 30 min of CSS in my life but I really enjoy this video
Did not know about background inherit! I'm learning CSS and building a website i've always wanted to make using my new skills and its so helpful seeing content like this which gives me new ideas.
I loved it how you called yourself kevin in a stern voice like you're punishing yourself 😃 great work dude👍👍
I wanted to play along, but I was on my phone and you're too entertaining. So, I just ended up watching.
Yeeeeeeesssssssssssssssssss! Kevin that's what I wanted
The end of the neck on a guitar is called the headstock, sometimes just shortened to head so you weren't that far off 😁
29:15 that "kevin" sounded so parent-y
This is actually a really good way to learn
Funny how some comments mention the use of negative as "negative" (no pun intended) and even implying that it was something they shouldn't use? Also Kevin before using it has refered to it as "let's get dirty"... In reality a negative margin really it's just an axis navigator, -up -down -left -right... this is one of those things that if the designer/coder understands from the get go their CSS journey will be smoother... Like everything, never overuse haha. anyways big fan Kevin amazing video (I'm not even half way through it) best css channel in the tube
41:25 "Mine is way too small" 😂😂😂
i just started learning html/css and i got more motivated watching this
i don’t think anyone has said it, but i love your shirt
You are probably aware, but you can also fullscreen it by pressing F11. Great video as always. very entertaining!
Idk how you did it, but I love CSS now.
Already liked before watching because I know it’s gonna be some quality content. 🙌🏾
Good morning Master Kevin. Another good lesson today.
Although I have been following your lessons for a while, and most of what was shown here was already in there. Good to see it all applied.
The box-shadow thing was weird. I could see immediately what was going on. (Taking the rounded corners as they are and connecting them with straight lines...) But I would never have implemented it that way. (That's now how a shadow works!)
Enjoyed this time a lot, as a different take on existing knowledge.
I may have a go at these battle-things as well. Also not going for time. But probably putting some more restrictions in place. (Like relate all position and size to the size of the container. I have been having a lot of real life cases for that.)
Here's the key to getting 100% on the tambourine: instead of having a border on the big circle, make it 20px bigger and make an inside border using "box-shadow inset".
i struggle myself centering a div and here watch you creating a giutar out of god knows how many divs and placing them like you hand place them.
Nice! I would love to do some battle with you to show you some tricks i learned being in the top 20 🤩
Interested.
Intrigued.
You should use a stylebot or other CSS plugin so you can toggle the font size for these challenges.
Sir you are hands down the god of css....
That first shirt is awesome.
Man, you make it look so daam simple!!!!!!
Lol, didn’t even have the first note done yet 😂 … I’ve only done this once before though so not super surprised.
I had the same issue with that box -shadow property as well on CSS battles. Im not sure what I was doing wrong. It was so frustrating.
Love your content sir!! LOve from India......CSS KING⚔️👑
Spended 1 hour 42 minutes on all of them.
------------------------------------------
Why not using pseudos?
9:04 left: 100%;
23:52 I've tried rotating them... But they are not rotated in the target, so removed that...
28:32 Had the same problem... Seems like enlarging small shape is not a good idea, so used radial-gradient and border instead.
31:02 Cool trick with outline!
32:20 Can use cross-setting left and top: b,c{left} d,e{left} b,d{top} c,e{top}
38:03 I had 99.9% too but because of another reason. Fixed it by clip-path. But in your case you should've change size of the overlap-top circle.
41:20 All 4 tasks are centered.
44:18 .white-keys { height: 100% } ?
45:52 No doctype. There was no border-radius in the times of quirks mode ;)
------------------------------------------
I used clip-path with piano.
Clip-path on the piano would be interesting to see. Have a video of it to see?
@@tinmancode yep, uploaded to my channel.
No reason not to use pseudo elements, I just tend to never use them in these things. No reason not to unless you're after a high-score.
@@KevinPowell I don't think they are usefull for high score. Pseuso selector is long and requires content property, so normal tag will be shorter, won't it?
Do u have merch ?
A little bit, should be under the video :)
@@KevinPowell ok love your videos 💖
Just a thought, as for the first challenge you started. Wouldn't it be easier to use rectangular boxes with appropriate borders & then adding those round things via position absolute?
It occurrs to me that this should work, I haven't tested it though
You could. Why absolute. There are many ways to solve any of the battles
@@tinmancode What would be a way other than position absolute for circles?
@@bunnyboy7008 absolute works and fixed also works.
Oh, yeah that totally would have worked :D
great work, Kevin!
Why not use ::before? Would it mess things up or something?
You totally could!
@@KevinPowell Thanks for clearing this out for me.
Battlorithm
Thanks for keeping CSS fun!
I too struggled with the flex on the piano. What a pain to add the height of 100%. I got it done longer than you but in less characters.
I loved this. it's the first time I commented on your channel. i want to see more of these :)
This is amazing , i mostly spend my time on leet code . Today i learnt about CSS battle thing, would love to work on this too.
Soo, for each battle I just paused at the start, I started my timer and started coding, when I got 100% I just paused, then I came to see each one here. I lost every battle xD, the last one was the closest:
My time / Your time
1-17:09 / 8:05
2-15:42 / 11:40
3-16:03 / 14:22 (this one I got 99.9 too, the 100% was almost impossible for me :P)
4-10:29 / 10:12
I've started learning CSS in May. I've learned the basics but when it comes to actually doing it, I am lost. I loved this video and i just followed your steps trying to understand what was going on. It's amazing to see an experienced person do it. because you've come up with easy decisions. Battle 3 for example, I was thinking how you would do the lines between the circles when you just created a big one and placed the small ones on top of it. Seems obvious but for me it was "wooow".
trust the process baby steps count too!
yay! Kevin is back! 😍
Wow this is very good to learn and practice css.
Please use box-shadow to duplicate elements👏
At the ukulele you mentioned that you should’ve rather done a utilities class. I got curious, can you tell me more about how would that look like?
Excellent video. My only advice is to ALWAYS set a margin:0 and a height:100% to the CSS body, it will make your life so much easier ;)
The document element height is 0 by default , so set the body height at 100% will show nothing, unless you force it with vh or an absolute value
@@deutiafrank9395 My bad, I mean 100vh obviously ;)
@@stephanechataignie can you explain that a little more?
NEED ONE OF THOSE SHIRTS! 🔥
i want to learn... I kinda understand when it's written but i can't for the life of me find out how to write it from a picture like the battle
Another great video.
The last 5 minutes I thought u won't Make it but you were genius as always. I can say I really like it 😁😁 and learn alot.
11:27 in this timestamp the spell is "ukulele"
Even if you win the CSS battle I don't think it really proves if you are good at CSS or not.
If using position absolute on everything for example may get the job done, but it may still not be good in the long run for a real project.
A CSS battle measures quantity over quality, I think.
I can give it a try 👀✌️
i tryed the second one and cant get the circles to show. at 87.3% match.
Hey Kevin! I love your videos. You are so talented with CSS. On The first battle I got 100%! But I am a slow typer so it took a while. 🙂
These battles learned me use negative margins more frequently than I did it the past. I dunno why I was scary to use them. Perhaps I assumed this is something in appropriate in modern web design.
"Can you beat me at a CSS Battle?" Cmon man, we know the answer
Could you add a cam with the view of your keyboard?
Yay, CSS battle!
Those "up" are called STEMS; while the "side" is called a FLAG.
Amazing insight on problem solving in css. thank you so much! 🙏
Kevin :
Im too high
me :
same
That shirt is awesome
Great vid as usual… how could container elements, for example, be styled to include dimension lines that go slightly past the boundaries of the object itself, like a layout sketch sort of thing? So we’d see the objects border as styled and in addition get fainter set of horizontal and vertical dimension lines enclosing the element and extending slightly passed it’s boundaries. Cheers and thanks
I'm not very good at CSS, but you could add a box-shadow maybe? There are generators online that will add that for you, but it's probably easier to do something else.
Would love to see you challenge Colt Steele.
I got around 10:20 on the piano. I was a little slow to click the stop button on my timer. The timer was at 10:25 but i was around 5 seconds late LoL. But you still beat my score by a few secs :D
Is there a good reason for not using pseudo elements instead of divs? As an example, the holes in the headstock could have been ::before and ::after.
It's possible
I love pseudo-elements but always avoid them in css battles because it takes extra lines of code, even though I'm not going for a high-score in these, lol.
@@KevinPowell that makes sense, thanks for responding! Love your work!
i just started learning html, css and java script last monday and im quite enjoying it i might try this game too lol
What a magic show!
Why didn't you use the pseudo elements for the eighth notes for the first?
No reason not to, I just tend not to use them in CSS battles for no real reason.
What langue was that?
that's insaneeee🙈
The best thing I've ever seen😍😍
Why you doesn’t use ::before and ::after?
As a hobbyist web dev, I recently developed a game UI in raw CSS before I had heard of CSS frameworks.
It was “fun”. Used a lot of margins in bad ways. Negative margins, anyone?
That t-shirt is 👌
i can't even center a div but this was super cool