I've been challenged to a CSS Battle!

[@fnd4086]

Thanks again Kevin for the battle! Rematch sometime?

[@KevinPowell]

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

[@geoorge1000]

Awesome battle!

[@blockwest2379]

congrats Sir, nice approaches!!!

[@alkhemist6631]

I enjoyed the different approaches. This was awesome

[@tinmancode]

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

[@DanielBrownsan]

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]

probably cuz this one is useful

[@heliusuniverse7460]

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

[@multiarray2320]

@@heliusuniverse7460 its educational

[@LordmkKING67]

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

[@abhijeets]

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

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]

same 😨

[@jgm113]

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]

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

[@hyperanxe4957]

Yeah dude

[@OnlineTutorialsYT]

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

[@mhdfr]

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

[@benjamintettehnartey7937]

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]

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

[@benjamintettehnartey7937]

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

[@tinmancode]

@@benjamintettehnartey7937 yours too chairman

[@diegomarzo4001]

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

[@madara_uchiha_WB]

Same I learned bro now.. 😊😊👍

[@programmingwithraahim]

@@madara_uchiha_WB Yeah I learned the same thing in the second minute. This is Crazy.

[@madara_uchiha_WB]

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

[@quickcodingtuts]

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

[@alexradu1921]

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

[@miles611]

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

[@davidfonseca698]

That made my day! 😂.😂.😂.

[@jamjam3448]

Yess I love the shape!

[@-sevda]

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

[@TheSP337]

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

[@trigun2411]

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

[@yahyasalimi3254]

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

[@savinagetsova8429]

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

[@MerthanMerter]

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]

Samething

[@cssbattle]

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]

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

[@tinmancode]

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

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

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]

@@_moore lookout for the open targets

[@nitsanbh]

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

[@lel0uchfr199]

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]

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

[@amsprich]

I was sitting here thinking the same thing. :)

[@niner8275]

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]

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

[@lel0uchfr199]

@@niner8275 ? it takes less characters :)

[@marcod.643]

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

[@KevinPowell]

👍 - did you beat me?

[@madara_uchiha_WB]

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

[@nehajain1]

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.

[@diegomarzo4001]

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

[@kiranovatheofficial]

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

[@Joel-B]

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]

Was searching for this comment lmao

[@ronaldtempel]

My thoughts exactly.

[@miles611]

Man, this was a blast to watch!

[@marcofrancisco4259]

u too

[@Chapali9a]

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.

[@schwetang]

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

[@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!

[@fersahahmet9597]

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

[@chretien2580]

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

[@reecevaughan4225]

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

[@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.

[@layaboutlout]

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!

[@michaelfaith]

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

[@Ryangosden]

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

[@realharami]

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

[@edwardbrosens]

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

[@DevMarco-]

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

[@JoseRodriguez-xu1jz]

The other guy sounds like a robot sinking in the ocean

[@barijade]

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

[@mahadevovnl]

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]

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.

[@Beastintheomlet]

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

[@ricardosandoval3848]

Battle #1 -100% match body { display: grid; place-items: center; background: #E38F66; } div { width: 200px; height: 200px; background: #AA445F; border-radius: 50%; display: grid; place-items: center; } span { height: 80px; width: 80px; border-radius: 50%; border: 30px solid #F7EC7D; border-right-color: #AA445F; border-left-color: #AA445F; transform: rotate(45deg) }

[@jakewood5475]

👍🏻 better

[@mihairusu7941]

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

[@mahmoudmheisen8031]

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]

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]

@@tinmancode bruh

[@LuisReyes-zs4uk]

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

[@rishabapriyan7138]

Cool battle.Learnt some things 😃.

[@Chickenskout]

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

[@k-yo]

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.

[@maelstrom57]

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

[@edwardbrosens]

This is so much fun, thank you Kevin.

[@salmaabousaid6905]

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.

[@davideglass]

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

[@eh78787]

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]

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

[@VictoriousVipin]

Superb ...kevin and Frank.👍

[@theUnsungWarriorr]

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

[@KennTollens]

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.

[@BadGirl-pn3qu]

That was great! Different approach the same result!

[@dannyr2976]

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!

[@sharafmakahleh4125]

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

[@oggatog3698]

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.

[@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..

[@mykalimba]

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

[@KevinPowell]

Just some better syntax highlighting would make me so happy 😂

[@tinmancode]

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

[@ИльясАппаков-и8у]

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

[@alinawaz4034]

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

[@funnyanimalworld7579]

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

[@rnt45t1]

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

[@changoviejo9575]

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

[@pranjalroy6396]

border radius of 100% 100% 0 0 makes a semi circle

[@lucasrokam]

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

[@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 >:)

[@SvetaSveta-ms4hi]

Oh my! That was so dope! 😍

[@itsplus5396]

The semicolon after freakin z index dude...

[@MrSupdup]

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

[@MentorMode]

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.

[@ruskasielu6261]

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

[@dinesh.m7341]

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

[@hidami3241]

for the inner circle cant we use something like border-left: none; border-right:none; and then transform:rotate(deg, any%);? it would work too, right?

[@mostafagouda1526]

none wouldn't work, you have to make it transparent and rotate 45 degrees

[@tinmancode]

@@mostafagouda1526 you are right

[@mody-pq8kd]

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

[@DannyHille]

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

[@SitSkw]

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

[@chinmayk8004]

frank's border radius idea was my first approach. I was horrified seeing Kevin choose another path.

[@KonesThe]

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

[@OsirisDRa]

I tried the first challenge by myself - you can do it with just 2 DIVs. Make the second one without background-color - use border only

[@hjge1012]

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

[@Random_Mallu]

26:04 Lol that oww hit hard

[@phpn99]

That's what one calls, "drawing with a Buick". Just attach a pen to the bumper.

[@DipayanRoyZed]

1st Battle is actually simpler than I thought, Linear gradient does the job very easily.

[@sir_afk]

This was awesome, great tool.

[@keremardicli4013]

17:04 the semicolon :D

[@mykalimba]

Imagine being Frank's coworker and having to listen to that clacky keyboard all day long.

[@bb_bb_]

i think it's just that his mic is super bad lol

[@csy897]

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

[@FatRogSlim]

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

[@TomasMisura]

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

[@fernandobaroni1497]

This was so nice!

[@simonknibbs5867]

26:00 The third battle would be easier with a container, 4 squares with a circle in each. The squares overflow hidden.

[@simonknibbs5867]

As part of the scoring, is the amount of HTML elements a factor? If we are going for CSS elegance, less HTML elements should provide a higher score.

[@electricimpulsetoprogramming]

@@simonknibbs5867 how you learned programming

[@simonknibbs5867]

@@electricimpulsetoprogramming I work as a web developer going into UI/UX. I do other things too though.

[@electricimpulsetoprogramming]

@@simonknibbs5867 but how you learned it

[@simonknibbs5867]

@@electricimpulsetoprogramming You really need to learn by doing. To be honest though I tend to keep things simple anyway. I was working on client website development projects for years. If you really want to be impressed check out the artwork created using CSS. That is next level stuff. I can't do that. It would take a fair amount of time to learn.

[@thatcoul]

Kevin always picks the hardest solutions

[@BirdlessFlight]

I'm here screaming at my screen "just use clip-path!"

[@grovkillen1]

Best battle ever, love it!

[@StellarWeb008]

Why didn't we use this code for styling the inner circle in first battle- "border: 35px solid transparent; border-top-color: col; border-bottom-color: col; transform: rotate(45deg);

[@SalientKnight]

exactly what I was about to type

[@shadownickstar577]

Yo dude is so fast and I am impressed.

[@upsator]

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

[@fuzzypumpkin7743]

I love it when you mess up on such an annoying thing as using a semi-colon instead of a colon after struggling with what is wrong, because that is basically my life.

[@tayloraldridge3063]

I was staring at that semi colon the entire new, wondering how long it would take 😂