I've been challenged to a CSS Battle!

Подписаться 915 тыс.

Просмотров 203 тыс.

50% 1

One of my Patrons, Frank, has challenged me to a CSS Battle... can he defeat me?
Frank is a senior front-end engineer at www.undercovertourist.com, and of course, a Patron of mine at / kevinpowell
🔗 Links
✅ CSS Battle: cssbattle.dev/
✅ Support me on Patreon: / kevinpowell
⌚ Timestamps
00:00 - Introduction
00:58 - Battle #1
11:47 - Battle #2
22:37 - 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 RU-vid 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!

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 389

@fnd4086 2 года назад

Thanks again Kevin for the battle! Rematch sometime?

@KevinPowell 2 года назад

Thank you, it was a blast, and we will definitely need to have a rematch one of these days!

@geoorge1000 2 года назад

Awesome battle!

@blockwest2379 2 года назад

congrats Sir, nice approaches!!!

@alkhemist6631 2 года назад

I enjoyed the different approaches. This was awesome

@tinmancode 2 года назад

fun to watch, painful to live through your positioning struggles struggles. Kevin you do great work

@DanielBrownsan 2 года назад

Me: "I'll never understand people who sit around and watch other people play video games." Also me: (Watches 33 minutes of CSS battles.)

@MerthanMerter 2 года назад

probably cuz this one is useful

@heliusuniverse7460 2 года назад

@@MerthanMerter ah yes, drawing images using css is useful of course

@multiarray2320 2 года назад

@@heliusuniverse7460 its educational

@LordmkKING67 2 года назад

@@multiarray2320 indeed. Im taking notes of some new code parts n explanation of what it does as i watch

@abhijeets 2 года назад

@@heliusuniverse7460 off cource it is, you can do all sorts of stuffs in website by mastering CSS well, and these stuffs are one the best way to do it.

@agilmo 2 года назад

Kevin: let's see the z-index; Me: the pain is finally over; Kevin: *selects z-index; -1; still not a clue*; Me: *screams*; Best thriller movie of the year

@andreasnulein782 2 года назад

same 😨

@jgm113 2 года назад

Literally screaming at the guy and I couldn't even make a circle in the first place but I know that ; is fuckin wroooong

@ChandraKishore189 2 года назад

I was literally screaming too, 'KEVIN!!!! Z-INDEX!!!!!' OCD came to the play lol.

@hyperanxe4957 2 года назад

Yeah dude

@OnlineTutorialsYT 2 года назад

Great... i'll also try these three challenges.

@mhdfr 2 года назад

*oot* Ur vids helped me a lot man. Thanks

@benjamintettehnartey7937 2 года назад

Yeah I can't wait to see you do these challenges... Your css and Javascript videos is doing a magic for me outhere... I'm a better web developer cos of you. .. Thanks so much... Waiting for your css battle challenge tho

@OnlineTutorialsYT 2 года назад

Done, I completed all these three challenges, it was a lot of fun doing it

@benjamintettehnartey7937 2 года назад

You can do a Playlist for all the battles you've done.. Wll be so exciting to watch how you go about them

@tinmancode 2 года назад

@@benjamintettehnartey7937 yours too chairman

@diegomarzo4001 2 года назад

Minute 2: aspect-ratio: 1, I just learned the thing of the day Thank you Kevin :)

@winter-bear. 2 года назад

Same I learned bro now.. 😊😊👍

@programmingwithraahim1164 2 года назад

@@winter-bear. Yeah I learned the same thing in the second minute. This is Crazy.

@winter-bear. 2 года назад

@@programmingwithraahim1164 yeah be too, as you can see even the cssbatlle interface couldn't recognise it it wasnt colored normally....

@-sevda 2 года назад

the semi-colon part killed me when you finally noticed it. 😂 i recently experienced the same thing on a project.

@alexradu1921 2 года назад

7:12 I'm dying 😂😂😂. I don't think Kevin expected that either although that's a really cool shape he got

@miles611 2 года назад

Was about to comment the same thing haha His face was absolutely priceless $$

@davidfonseca698 2 года назад

That made my day! 😂.😂.😂.

@jamjam3448 Год назад

Yess I love the shape!

@quickcodingtuts 2 года назад

It's really great to see that even the pros make mistakes from time to time. It shows us that nobody knows everything there is to CSS at all times and the learning never really stops

@trigun2411 2 года назад

22:24 when semicolon haunts you even on the front-end

@yahyasalimi3254 2 года назад

Task: name a button, that if you click a nuclear war starts Everybody else: ultraimportant-btn Kevin: a

@savinagetsova8429 2 года назад

hi, I'm still a noob :D, but I think I came up with an interesting way to cut the border without using additional boxes: border-top: 30px solid #F7EC7D; border-bottom: 30px solid #F7EC7D; border-left: 30px solid transparent; border-right: 30px solid transparent; transform: rotate(45deg);

@Jordan_fm Год назад

Actually you can set the border-color instead for a minimal clean-up like in the way how you could do it with border-radius! border:30px solid; border-color: #F7EC7D transparent; transform: rotate(45deg);

@diegomarzo4001 2 года назад

The face of Kevin when it went to 7x% to 100% using Flex is a poem, like a really sad poem, Edgar Allan Poe level of sadness poem.

@abdulramonjemil Месяц назад

It's weird tho. I thought they would be painting a canvas of the design and compare colors to a canvas of the original pixel by pixel to arrive at a score

@lel0uchfr199 2 года назад

you know that you could use border-bottom-color: transparent; border-top-color: trasparent; and make it transform: rotate(45deg); , it's some logic

@tinmancode 2 года назад

totally spot on. everyone tackles the problems from a different angle

@amsprich 2 года назад

I was sitting here thinking the same thing. :)

@niner8275 2 года назад

And you could do it with just one div :-) this is the shortest I came up with: .thing, .thing::after { position: absolute; border-radius: 50%; } .thing { background: #aa445f; width: 190px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); } .thing::after { content: ""; inset: 30px; border: 30px solid; border-color: #f7ec7d transparent; }

@tinmancode 2 года назад

@@niner8275 I'm positive you can use px values for left and top and remove the translation

@lel0uchfr199 2 года назад

@@niner8275 ? it takes less characters :)

@Joel-B 2 года назад

Didn't expect you to make such hard work of the first challenge. Initial thought was to go from the inner/smaller circle and go outwards using a border (two sides transparent and rotated 45deg) and then a box-shadow to complete the shape.

@mostafagouda1526 2 года назад

Was searching for this comment lmao

@ronaldtempel 11 месяцев назад

My thoughts exactly.

@nitsanbh 2 года назад

You confused face @ 7:13 is so good ♥️

@tonyseben Год назад

For the first challenge, we could just use a SINGLE div. Set background to maroon color, border-left border-right to yellow, outline again to maroon. Then rotate 45 degree.

@chretien2580 2 года назад

This is a great watch! I love thinking along and seeing what solutions you guys come up with.

@kiranovatheofficial 2 года назад

Love the content, and its really helping me. Good energy and super chill vibe ☺️

@cssbattle 2 года назад

This was again a really fun challenge to watch, Kevin! Thanks for doing this! And the amazing designs you generated while experimenting with border-radius in the 3rd round - Priceless! 😊🙌🏼

@inkedcoder 2 года назад

Any comment on why place items: center gave a different score than using flex?

@tinmancode 2 года назад

@@inkedcoder it could be an edge case behaviour thing and the evaluation engine could be using a different rendering engine that generates something different from what you see in the browser.

@cssbattle 2 года назад

@@inkedcoder THis video was probably shot long back...our scoring engine at that time might not be the latest one supporting these new universal properties. It should work as of today.

@_moore 2 года назад

Great site, really fun, thanks. I really want to see how people got the top scores on the latest battles though. Their code has 50% less characters than mine and I don't see how that's possible!? 🤯

@tinmancode 2 года назад

@@_moore lookout for the open targets

@schwetang 2 года назад

That was good. Frank's last one was impressive. I raged when I saw your z-index typo, Kevin.

@marcod.643 2 года назад

I paused the video and started the battle with you too, so much fun... thanks Kevin! 😀

@KevinPowell 2 года назад

👍 - did you beat me?

@winter-bear. 2 года назад

@@KevinPowell I am not sure that I can beat you but I did the whole in about 10 minutes.. :)

@Chapali9a 2 года назад

I really loved this challenge. The z-index typo had me in stitches lol was funny to watch as this happens to the best of us all the time.

@nehajain1 2 года назад

Watching Frank get 100% then Kevin moving the slider frantically to see the difference was hilarious, lol. I knew you would get it right soon enough.

@michaelfaith 2 года назад

Man, i'm in so much of awe of how fast you go through these. Incredible.

@MerthanMerter 2 года назад

I used to watch these and had no clue what you guys were doing at all. now I am actually understanding and even finding different (sometimes better) approaches myself. This happened only by watching and following you Kevin, so thank you so much for this.

@tinmancode 2 года назад

Samething

@TheSP337 2 года назад

no matter what you do, no matter how much css gets easier, this at 17:07 happens to everyone. Even to Kevin. The moment when your happy smile fades away and you wonder, what is happening :D :D

@reecevaughan4225 2 года назад

Finally, something that I understand! CSS may be my calling!

@Ryangosden 2 года назад

Thanks for exposing me to CSS battles! Will definitely keep me busy

@gouldmears2071 Год назад

SE here. I did some full stack before, but seeing you knock out these challenges and some of your other videos makes me want to brush off my CSS again. Good stuff!

@Beastintheomlet 2 года назад

17:39 This is how I always end up when working with CSS 😂 22:20 the semicolon reveal, is being a developer to a T, I feel so seen

@layaboutlout 2 года назад

As somebody who is just starting out with TOP, I understand alot of what happened through the episode (of course not all the definitions) but seeing it come to life was like a lesson in itself, and actually really fun to watch, thanks!

@LuisReyes-zs4uk 2 года назад

great watch, guys... more of this, Kevin, please! thank you sir.

@DevMarco- 2 года назад

Good to see that even fully fledged front end devs sometimes wonder about weird behaviours

@Chickenskout 2 года назад

Need more battle content keep it up! Hella fun to watch

@itsplus5396 2 года назад

The semicolon after freakin z index dude...

@realharami 2 года назад

Thank you both of you for participation and sharing that with us!

@rohan1765 2 года назад

Nothing against Frank but for me Kevin is always the best.

@VictoriousVipin 2 года назад

Superb ...kevin and Frank.👍

@maelstrom57 2 года назад

These are great. I like pausing the video and trying to solve the challenges myself (with unlimited time hehe).

@rishabapriyan7138 2 года назад

Cool battle.Learnt some things 😃.

@miles611 2 года назад

Man, this was a blast to watch!

@marcofrancisco4259 2 года назад

u too

@JoseRodriguez-xu1jz 2 года назад

The other guy sounds like a robot sinking in the ocean

@edwardbrosens 2 года назад

That look on your face after the second challenge, priceless. I know the feeling when messing up with a typo.

@mykalimba 2 года назад

22:18 That site should have a CSS linter for situations like this. 🤦‍♂

@KevinPowell 2 года назад

Just some better syntax highlighting would make me so happy 😂

@tinmancode 2 года назад

Totally. I think that's a feature when you have a paid account

@edwardbrosens 2 года назад

This is so much fun, thank you Kevin.

@davideglass 2 года назад

This was great fun to watch, even though I was screaming at my monitor about the z-index semicolon!

@mahmoudmheisen8031 2 года назад

for first one: .inner { width: 78px; height: 78px; border-radius: 50%; border: 31px solid #F7EC7D; border-left-color: transparent; border-right-color: transparent; transform: rotate(45deg); } better than adding other classes/divs/overflows, got 99.9% from first try

@tinmancode 2 года назад

You could totally solve it without even adding any html element. Just use Css. The output window is an with an html and body element in it by default.

@aayush_karna 2 года назад

@@tinmancode bruh

@mihairusu7941 2 года назад

Woooow...Kevin is a monster. How he used those pseodo-elements in 3rd challenge in order to cut those circles. He is very talented in my opinion. Thx for the great battle! Had a lot of fun. 😅

@BadGirl-pn3qu 2 года назад

That was great! Different approach the same result!

@Random_Mallu 2 года назад

26:04 Lol that oww hit hard

@lucasrokam 2 года назад

Those half circles can be archived with gradient background. I think it's a more elegant solution.

@keremardicli4013 2 года назад

17:04 the semicolon :D

@alinawaz4034 2 года назад

17:32 O no you put a semicolon instead on colon in line 27 that is why it is now working.

@hjge1012 Год назад

That z-index issue you had there; I have that all the time as well.

@fersahahmet9597 2 года назад

This is really fun to watch apart from the mic issue of Frank. I love battles especially when Kevin does typoes and pissed off :p --ps:You are the King Kevin. There is nothing convince me otherwise

@mahadevovnl 2 года назад

I found all of these to be really easy if you take a second to look them over at the start. The last task was a centered square with 4 squares inside, each square then has a :before inserted in them (as you did) that displays half a circle, and then using the :nth-child selector you'd turn them around as needed... most often, any CSS problem is fixed by that kind of initial thinking and not figuring it out as you go, because if you get stuck you either/often fall into the sunk cost fallacy, or have to redo it all anyway...

@tinmancode 2 года назад

positioning is the biggiest issue followed by the shapes for all the battles, centered images occur the most and you the normal centering tricks to get those positions then work on the shapes.

@TomasMisura 2 года назад

thank you very much for this video, I have a learned a lot. it seems to be flex is going to be preferable technology for the web layouts :)

@MrSupdup 2 года назад

Man that z-index; -1; typo sent me wild. Never yelled at a screen before.

@FatRogSlim 2 года назад

border radius 100% no border left and right, rotation 45deg

@ayushbisht7363 Год назад

Thanks Kevin, I had also tried the lock up challenge, and would love to share my approach... I do this stuff, by keeping only the top and bottom border as yellow color and rotating it to - 135deg... This will save some extra line of code in our css..

@barijade 2 года назад

Purely HECKED by a semi-colon; the real struggle LOL

@dinesh.m7341 8 месяцев назад

For the 1st object in the Inner Circle you could have used border top bottom radius as transparent and then use rotate property.....

@sir_afk 2 года назад

This was awesome, great tool.

@user-lh3te1we9p Год назад

Interesting fact, if you using border-radius and need to get only two of visible borders like in the first battle you just can make other two transparent and it will work

@eh78787 2 года назад

Fwiw, y'all should have tried using `border-left-color: transparent`, `border-right-color: transparent`, & `transform: rotate(45deg)` on the inner circle, with a chunky border.

@derxen 2 года назад

Exactly what I thought. This works like a charm. I got a score of 607 for this solution, which is pretty decent I guess.

@sudarrshang8922 2 года назад

Pls pls make more challenges of like this , they are really awesome 😎

@k-yo 2 года назад

For the first one an element of the size of the circle with appropriate border-width and border-radius along with border-left-color and border-right-color: transparent would give the desired effect. Then just rotate -45deg with transform.

@AminalCreacher Год назад

I played along and was surprised at how well I did. Maybe there's a css showdown in our future, should I ever become a patron >:)

@grovkillen1 2 года назад

Best battle ever, love it!

@fernandobaroni1497 2 года назад

This was so nice!

@oggatog3698 2 года назад

15:16 I think you could also just provide multiple entries for box-shadow, but I think you'd need a bunch of them to avoid having a kind of "caterpillar" effect. The div is probably the way to go.

@SvetaSveta-ms4hi 2 года назад

Oh my! That was so dope! 😍

@salmaabousaid6905 2 года назад

To solve the issue of the first problem, the one they solved by overflow hidden, I put a circle above that region , and used a box shadow. I made the circle color transparent, and the box shadow was yellowish like the background. This helped hide the bit of the box that was getting out of the circle.

@ruskasielu6261 6 месяцев назад

For the first challenge I feel like maybe you could use a yellow border on the center circle, but only on the bottom and top side, then rotate it 45°. I haven't tried it personally though

@jin_9707 2 года назад

It’s my Fav series!

@rnt45t1 2 года назад

I've been coding emails too long..... this looks much more fun!

@changoviejo9575 2 года назад

Oh my goth, random stranger, I really feel for you.

@MentorMode 2 года назад

1st one was very easy all we needed was a div which is purple located in the center and we needed border with different colors for 4 sides as well as border-radius after all we needed box-shadow with purple it would take like 3 minutes max but great video thank you.

@sharafmakahleh4125 2 года назад

In the third challenge, what I think would be a better approach is to make two halfs of the circle on one color, and positioning it, then duplicating it and applying rotation to make them go the other way & chang the color

@upsator 2 года назад

yeah the semicolon on the z-index is funny :D

@DannyHille 2 года назад

It's actually nice to see the experts fumble a bit 😃

@shadownickstar577 2 года назад

Yo dude is so fast and I am impressed.

@KonesThe 2 года назад

I don't even know css... but this was really fun! Going to try to create a website with CSS and JS once I finish my Flutter project

@SitSkw 2 года назад

Battle #2 took me 11min :) It's so fun to challenge myself with you :)

@thatcoul 2 года назад

Kevin always picks the hardest solutions

@singularity1130 2 года назад

First one I had to pause and try myself. Ended up using clip-path: polygon() to individually shape the boxes within the outer circle. Def should've just made my square's smaller and align them more towards the center of the circle instead of keeping them big and over engineering the problem.

@KennTollens 2 года назад

Round one where everything works and look perfect, but the program deducts points for your choice of code. That is how my teachers would grade me. I learn a lot watching someone else code, mostly because I know barely anything about css. It is super nice to see how someone else thinks through the problem.

@auser1374 2 года назад

yep, i stayed through the whole video like i totally understood everything.

@luksalb Год назад

THIS WAS SO AWESOME!

@ahmedkamel3291 2 года назад

that was awesome!

@csy897 2 года назад

the second I saw z-index; -1 I was like, damn, I'm gonna be screaming at my screen for a while

@badral-balushi5911 10 месяцев назад

The first challenge, your coding skills was above the algorithms 😂

@mody-pq8kd 2 года назад

5:00 It’s simple, man)) body{ background:#000; } .outer{ display:flex; align-items:center; justify-content:center; width:100px; height:100px; background:#f2f2f2; border-radius:50%; } .inner{ width:30px; height:30px; background:#f2f2f2; border-top:15px solid black; border-bottom:15px solid black; border-left:15px solid #f2f2f2; border-right:15px solid #f2f2f2; border-radius:50%; transform:rotate(45deg); }

@funnyanimalworld7579 2 года назад

Kevin is to smart and is using not ordinary ways thus getting punished :D. And pro tip always use 100% browser scale

@hrantelmayan 2 года назад

I swear i had been looking at that semicolon and just waiting for you to find out 😭

@adamkherbek586 2 года назад

Battle 1 : Couldn't you use a dashed border for the small circle ?

@dannyr2976 2 года назад

I duuno whether I'm over simplifying things, but for the last challenge why not just have four boxes ('outer' as two rows of two) positioned 'absolute' and an overflow of 'hidden', within each place another nested box inside each ('inner', also positioned as 'absolute') and apply a border-radius, then position 50% either left, right, top or bottom (depending on the direction and the inner shape) so half the div will be filled and the other hidden. Either way brilliant to watch!

@callofdutymobile1074 2 года назад

Didnt know this was a thing vary interesting what editor you using?

@gaverealjohn Год назад

that z-index error was so painful

@smakysharma289 2 года назад

11:36 Flex vs Grid 😂😂

@ericxu4324 Год назад

Hey Kevin, I really like your content because they're pretty helpful and more efficient. I'm currently watching building a responsive website from scratch which I believe you still haven't finished yet. I've been learning for 2 months and it's been a struggle. I've been trying to watch other youtubers build websites from scratch and it's frustrating to replicate such as when I'm unable to make a navigation bar with JS. I want to understand HTML and CSS faster and better and be able to build websites effectively. Overall, I really want to be good at coding and at least get a job as a programmer or software engineer. Can you suggest other videos that might be helpful to watch on your channel or give me some guidance so I can learn efficiently?