Can you beat me at a CSS Battle?
ฝัง
- เผยแพร่เมื่อ 9 ก.ค. 2024
- 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 TH-cam 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!
![[안방1열 직캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FanCam) @SBS Inkigayo 2404707](http://i.ytimg.com/vi/Tn3bGHiBWkg/mqdefault.jpg)
![[TH] Esports World Cup : Knockout Stage Day 1](http://i.ytimg.com/vi/ES-vr-FarFg/mqdefault.jpg)
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?
Your content is always top notch and I loved the problem solving, stupendous work.
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!
you both inspire AND motivate me to keep up with my studious perseverance, kevin. c:
Great video Kevin... Always a marvel to watch you teach and battle at the same time. Thank you.
I love the fact that you do your Battle but also explain things at the same time. You sir earned a subscriber!
Kevin love your work dude, learnt alot from your videos and still learning alot, wish to work with you some time soon ;)
Css battle is back 😝 you are a master in Css, Kevin 👏🏻
I just love Kevin. You are the reason I learned and I recommend anyone to learn from you
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
Already liked before watching because I know it’s gonna be some quality content. 🙌🏾
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
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
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.
Great Work😍
Amazing insight on problem solving in css. thank you so much! 🙏
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!)
Amazing content, it was very cool to see how you think as your styling!
I loved this. it's the first time I commented on your channel. i want to see more of these :)
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.)
great work, Kevin!
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.
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👍👍
Another great video.
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. 🙂
Your frustration on the piano at 4-6 minutes is pretty much how CSS goes for me all the time.
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?
I wanted to play along, but I was on my phone and you're too entertaining. So, I just ended up watching.
Battlorithm
Thanks for keeping CSS fun!
29:15 that "kevin" sounded so parent-y
This is actually a really good way to learn
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
41:25 "Mine is way too small" 😂😂😂
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
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.
The end of the neck on a guitar is called the headstock, sometimes just shortened to head so you weren't that far off 😁
Pretty cool! :D
Man, you make it look so daam simple!!!!!!
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.
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!
Wow this is very good to learn and practice css.
Yay, CSS battle!
that's insaneeee🙈
Im not a programmer but i love watching content like this
Love your content sir!! LOve from India......CSS KING⚔️👑
i just started learning html/css and i got more motivated watching this
Please do more. There’s a severe lack of css battles on TH-cam
Hahahaha say no more
yay! Kevin is back! 😍
Yeeeeeeesssssssssssssssssss! Kevin that's what I wanted
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?
Love it
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.
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
That first shirt is awesome.
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
Kevin :
Im too high
me :
same
The best thing I've ever seen😍😍
Nice! I would love to do some battle with you to show you some tricks i learned being in the top 20 🤩
Interested.
Intrigued.
I have written like 30 min of CSS in my life but I really enjoy this video
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.
You should use a stylebot or other CSS plugin so you can toggle the font size for these challenges.
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?
What a magic show!
Lol, didn’t even have the first note done yet 😂 … I’ve only done this once before though so not super surprised.
Idk how you did it, but I love CSS now.
i just started learning html, css and java script last monday and im quite enjoying it i might try this game too lol
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.
You are probably aware, but you can also fullscreen it by pressing F11. Great video as always. very entertaining!
Thanks for sharing this awesome website..
Usefull video👍👍
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ę! 🐛🦆👍🏽🌻🌾🌳🚀
i tryed the second one and cant get the circles to show. at 87.3% match.
NEED ONE OF THOSE SHIRTS! 🔥
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.
i don’t think anyone has said it, but i love your shirt
Sir you are hands down the god of css....
That shirt is awesome
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.
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 can give it a try 👀✌️
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.
Could you add a cam with the view of your keyboard?
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".
Please use box-shadow to duplicate elements👏
Would love to see you challenge Colt Steele.
25:57 he has been smoking🔥
Those "up" are called STEMS; while the "side" is called a FLAG.
"let me know if you're beating me..."
yeah ok lol
Awesome site! Not the best for learning about readability though! 😂
Thanks for the vid! 🙌
King ❤️
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.
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
what is the best plan to learn html css fast
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?
Never heard of flex-flow. Is it newer?
@@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.
❤️🔥
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
@@giantswing3175 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.
29:40 -- that's me pretty much all the time.
King css