Can you beat me at a CSS Battle?

The CSS Battle: cssbattle.dev/battle/14
🔗 Links
✅ My other CSS Battle videos: • CSS Battles
⌚ Timestamps
00:00 - Introduction
00:29 - The ground rules
02:14 - Battle 1
11:00 - Battle 2
23:20 - Battle 3
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@hippopotamus86]

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.

[@tigrafale4610]

It makes me feel a bit better about my own CSS abilities seeing a CSS master like yourself struggle a little bit. 👍

[@tinmancode]

It's all problem solving

[@Mista-fa]

what do you mean by struggling..idk what are you talking about

[@tigrafale4610]

@@Mista-fa when he was trying to get the box shadow to work is the time I remember the most

[@RandomCodeLines]

Hahaha, i'm sure from my own too :). Just take advantage from instructions like "use less code as possible" :)

[@agent000000008]

@@Mista-fa then watch the video again, why are you asking him?

[@-bandit-]

Your content is always top notch and I loved the problem solving, stupendous work.

[@fahimbhamla]

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!

[@gothparadigm]

you both inspire AND motivate me to keep up with my studious perseverance, kevin. c:

[@kgotlaetsilemodieginyane7491]

Great video Kevin... Always a marvel to watch you teach and battle at the same time. Thank you.

[@bid0u12345]

I love the fact that you do your Battle but also explain things at the same time. You sir earned a subscriber!

[@ShaneHpixels]

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.

[@terrap0b_ps995]

CSS is worth spending your life on... XD

[@AdvicefromWise]

Kevin love your work dude, learnt alot from your videos and still learning alot, wish to work with you some time soon ;)

[@Chelleychelle710]

I just love Kevin. You are the reason I learned and I recommend anyone to learn from you

[@skmgaming3124]

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!

[@skmgaming3124]

got 99.5 in the first one in 13 minutes, messed it up!

[@skmgaming3124]

20 minutes to get 99.9 in the second one

[@skmgaming3124]

21 minutes for 98.5% in third, this was hard, I messed up

[@frankroos1167]

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

[@universecode1101]

Css battle is back 😝 you are a master in Css, Kevin 👏🏻

[@AminalCreacher]

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

[@theaninova]

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.

[@MultiPoiu]

svg+css(+js) make thing so much easier

[@nation5478]

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

[@superpantman]

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.

[@charliebanales5287]

Amazing insight on problem solving in css. thank you so much! 🙏

[@thatdarlo]

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.

[@BenniK88]

Already liked before watching because I know it’s gonna be some quality content. 🙌🏾

[@marcotorres899]

Amazing content, it was very cool to see how you think as your styling!

[@animeclub1500]

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.

[@nephi4485]

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. 🙂

[@tudortotolici]

I loved this. it's the first time I commented on your channel. i want to see more of these :)

[@StefanVosloo]

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!

[@PossumMedic]

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

[@apolo6909]

I loved it how you called yourself kevin in a stern voice like you're punishing yourself 😃 great work dude👍👍

[@user-sy7lm6lw8i]

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".

[@nigelmuguyo1513]

trust the process baby steps count too!

[@YOTHISISYO]

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.

[@gabrielfelipe6736]

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.

[@ManoToor]

What's the css for this?

[@kiralatysheva6794]

great work, Kevin!

[@unyuzimfuraishimwejoykevin4812]

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 💪💪💪

[@tinmancode]

Habari

[@moghariyarahul5723]

Love your content sir!! LOve from India......CSS KING⚔️👑

[@bardsamok9221]

Battlorithm Thanks for keeping CSS fun!

[@jonmayer]

I wanted to play along, but I was on my phone and you're too entertaining. So, I just ended up watching.

[@reefhound9902]

Your frustration on the piano at 4-6 minutes is pretty much how CSS goes for me all the time.

[@Maniakatus]

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.

[@spacex6997]

This is actually a really good way to learn

[@m12652]

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

[@undefined06855]

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.

[@DankinDolphin]

The end of the neck on a guitar is called the headstock, sometimes just shortened to head so you weren't that far off 😁

[@matansanbira6852]

Nice! I would love to do some battle with you to show you some tricks i learned being in the top 20 🤩

[@tinmancode]

Interested.

[@giladgur9000]

Intrigued.

[@iambads18]

i just started learning html/css and i got more motivated watching this

[@codehal]

Great Work😍

[@jonmayer]

You should use a stylebot or other CSS plugin so you can toggle the font size for these challenges.

[@stephanechataignie]

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

[@deutiafrank9395]

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

[@stephanechataignie]

@@deutiafrank9395 My bad, I mean 100vh obviously ;)

[@danielshpil9558]

@@stephanechataignie can you explain that a little more?

[@Hurtwolf]

You are probably aware, but you can also fullscreen it by pressing F11. Great video as always. very entertaining!

[@harshsugandhi07]

Man, you make it look so daam simple!!!!!!

[@meh3484]

Im not a programmer but i love watching content like this

[@mochou-p]

29:15 that "kevin" sounded so parent-y

[@nonstopper]

Please do more. There’s a severe lack of css battles on KZbin

[@tinmancode]

Hahahaha say no more

[@mvn3949]

Wow this is very good to learn and practice css.

[@cheesekeso1069]

i just started learning html, css and java script last monday and im quite enjoying it i might try this game too lol

[@NathanHedglin]

Another great video.

[@ericsalvi]

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.

[@annaskowronek-jaskua6495]

I was ~1minute faster with the piano and guitar 😊. But i failed on drawing the overlaing circle on the tambourine....! Great adventure, waiting for morę! 🐛🦆👍🏽🌻🌾🌳🚀

[@Po4to]

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

[@tinmancode]

Hahahaha man it's not so bad. A color here. A left there and on and on

[@lewisone]

That first shirt is awesome.

[@Fragler01]

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?

[@pi286]

Idk how you did it, but I love CSS now.

[@cattomeow883]

41:25 "Mine is way too small" 😂😂😂

[@skillzorskillsson8228]

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

[@praveengautam4689]

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.

[@butwhy4579]

Yeeeeeeesssssssssssssssssss! Kevin that's what I wanted

[@inigofernandezgarcia]

Hi Kevin, Thanks so much for your videos. Love them. I am a noob and everything is hard for me and I wanted to ask you. I have a Calendar in my website and I am trying to make it look good in the Phone version of my website and is been a bit challenge. Do you have any link that can help me a bit with that? Thanks in advance.

[@alexus6237]

I have written like 30 min of CSS in my life but I really enjoy this video

[@hologram4118]

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.

[@ddalejandroo]

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

[@swimmyJones]

Lol, didn’t even have the first note done yet 😂 … I’ve only done this once before though so not super surprised.

[@byronchamorro8826]

NEED ONE OF THOSE SHIRTS! 🔥

[@scum3112]

i don’t think anyone has said it, but i love your shirt

[@josephlivengood4508]

Would love to see you challenge Colt Steele.

[@andycascade]

Yay, CSS battle!

[@cssbattle]

yay! Kevin is back! 😍

[@uddeshyasingh7245]

Sir you are hands down the god of css....

[@PossumMedic]

Awesome site! Not the best for learning about readability though! 😂 Thanks for the vid! 🙌‍

[@abdelsalamshahlol]

Thanks for sharing this awesome website..

[@user-ey5xw2nx9s]

Pretty cool! :D

[@didodey6418]

Please use box-shadow to duplicate elements👏

[@TomasMisura]

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.

[@VacaAlpha]

is there any specific reason why you don't use "box sizing: border-box" for the padding increasing width/height problem? I'm guessing it's cause of the score, as it's another line of code

[@bunnyboy7008]

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

[@tinmancode]

You could. Why absolute. There are many ways to solve any of the battles

[@bunnyboy7008]

@@tinmancode What would be a way other than position absolute for circles?

[@tinmancode]

@@bunnyboy7008 absolute works and fixed also works.

[@KevinPowell]

Oh, yeah that totally would have worked :D

[@AknKocoval]

The best thing I've ever seen😍😍

[@dongphuongtran]

that's insaneeee🙈

[@TheBlvision]

What a magic show!

[@KrutikRaut]

I can give it a try 👀✌️

[@St3r251]

That shirt is awesome

[@42asease]

first chalenge maybe u can use :after for .up classes div

[@d_programming188]

25:57 he has been smoking🔥

[@purple7788]

Kevin : Im too high me : same

[@polar5631]

Quick CSS question: I notice you used flex-direction instead of flex-flow. flex-flow is a lot easier and faster to write as flex-flow: column. is this just for demonstrative purposes, so that newer programmers won't get as lost? Or is there a good reason (in production programmer) that makes flex-flow a bad option?

[@ManoToor]

Never heard of flex-flow. Is it newer?

[@polar5631]

@@ManoToor I don't believe it is too new. I found out about it by reading other users' code on Khan Academy. Syntax is as follows flex-flow: ; so we can write it as flex-flow: column; the same as flex-direction: column; I personally use it since it is shorter to write than flex-direction.

[@555pontifex]

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".

[@bennybersier5067]

Why no pseudo classes this time ? 😀 As for the flex issue on the last one, isn’t it because you had no defined height and you were using 80% height on the dives ?

[@phiraphats]

Love it

[@QwDragon]

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.

[@tinmancode]

Clip-path on the piano would be interesting to see. Have a video of it to see?

[@QwDragon]

@@tinmancode yep, uploaded to my channel.

[@KevinPowell]

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.

[@QwDragon]

@@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?

[@omsomol.j2501]

Usefull video👍👍

[@hjge1012]

29:40 -- that's me pretty much all the time.

[@wolfliegaming7848]

i learned to code in dream weaver and this looks way harder no premade templets lol even tho this isn't coding a website it looks harder

[@dr_jacko]

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.

[@tinmancode]

It's possible

[@KevinPowell]

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.

[@dr_jacko]

@@KevinPowell that makes sense, thanks for responding! Love your work!

[@FanWrenEvans20nam]

omg i love channel like this , not related here but does anyone know who else does c++ or python content in a fun and intriguing way like him so that i can learn pls , thanks a lot :3

[@francocrovo8394]

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

[@Acaykath]

It's the transforms that ruin your perfect scores. It adds antialiasing.

[@vitalino1981]

Dear Kevin, I noticed You are using windows for these tutorials. Do You recommend windows over mac for web development? Thank You in advance for your reply.