I Must Redeem Myself

[@ChavezIntPictures]

Please make more of these!! I need to get better with css and just watching you talk it through was incredibly helpful!!!

[@elvinasss2767]

Please try to create something yourself you will improve also, listening and watching is good, but you need to challenge your knowledge always to improve man :)

[@a17waysJackinn]

17:28 gonna love that -1980 tho still perfectly aligned

[@nottydread]

"Friendly rivalry" ... I WILL CRUSH HIM!!!

[@tigana]

😂

[@sometimes1]

These videos are so great to study CSS, please continue doing these!

[@KeeBeeTz]

In design 3, u could use border radius to make leaf, without circle and rectangle.

[@nikilragav]

For #2: div .line-container line-1 div .line .line-container width: radius-of-circle height: thickness-of-line position: absolute left: center of circle top: (center of circle - height) display: flex flex-direction: reverse .line height: 100% width: length-of-line background-color: white border-radius: thickness-of-line/2 .line-2 transform: rotate(-30 deg) transform-origin(left center)

[@BaukeC]

.leaf { width: 100px; height: 100px; border-radius: 50% 50% 0 50%; background-color: red; }

[@Raaampage]

I succeeded the design 2 #110 with the transform-origin property you showed, I just used arbitrary (and incrementaly rotated 30deg each line) values to achieve what I wanted :) (like transform-origin: 120% 5px;) Let's see what you ended up with :p

[@kenbee85]

Love you guys.

[@coffeedawg822]

If you're patient, you can make the dots using repeating radial-gradient and clipping

[@ts3798]

This reminded me of how much I hate writing vanilla CSS.

[@faizanahmed9304]

Great video kyle!!

[@risitas5874]

I'll come back to this when I figure out how to center a . This is coming from developer with 5 years experience - 4 in front-end

[@neilmerchant2796]

It's so much simpler than it used to be now thanks to Flexbox!

[@risitas5874]

@@neilmerchant2796 That's what they all say

[@i0x37]

@@risitas5874 he's right

[@groovebird812]

For the dots you only need one single div if you use box shadow. But it is more CSS

[@WebDevUsman]

Love you bro

[@wissendev5490]

I did the second design with transform: translate, it was so easier and I also find a pattern in that way Nice job btw

[@dave6012]

I’ve done these challenges. The character count of the leaderboards is insane. I stripped every possible character while maintaining 100% accuracy and still had twice the characters of the leaders.

[@tinmancode]

You'll need html entities and some extreme hackery to catch up to them

[@dave6012]

@@tinmancode I would love to see their solutions, just to learn, but CSS Battles hides them so nobody can copy them.

[@TsoiIzAlive]

Headphone turned really nice !👌🏼

[@RiHezBestSmiteMontages]

awesome I didnt know transform-origin was a thing

[@rutchjohnson]

Love these types of videos!

[@toby6389]

I think with the headphone band you just needed to remove the border radius from the bottom left and bottom right then you could set the bottom border to none. You may also need to set a 50% top left and right radius rather than the 10000px ( dunno though about that as I’m not in a position to test )

[@sudo576]

I'm not the kind of people who comment a lot but boy this video was so FUN please make another video I would like to see it. keep it up❤

[@ioncojocaru630]

Awesome content 👏

[@miledaoun8856]

You were very much on the right track doing the second battle, you could have set a transform-origin of 125px center and your problems would have been solved automatically, no need for padding or anything else! just a container with empty children, no pseudo elements needed

[@peterschmid7507]

hey Kyle, if you are reading this, please make a "junior vs senior code" but with typescript. people will love it, including me

[@BolaHariini250]

Border bottom left right radius Border bottom 0

[@milanm4772]

Maybe in the second challenge you can use transform-origin: 120% 100%; and just change angular of rotation. To create leaf use border-radius: 0 50% 50% 50%;

[@Nodsaibot]

For the longest time I thought you were the guy behind fireship channel lol

[@vinothidayaraj]

I've completed spacing in cssbattle

[@MitchMoccia]

SAVAGE MODE

[@Alan_the_Red]

Wow, I didn't know CSS was so useful for creating shapes

[@theloveopium]

Is this the good place to train CSS skills? What is a perfect place to train JS skills?

[@hypernylium9782]

the war between kevin starts today 😂

[@VKD007]

you could just round the leaf squares a bit for match

[@quickmaths4762]

Put css battle in the title/thumbnail and you‘ll get more views

[@DeepakSingh-ln9ee]

I would have just created the 3 left rods than mirrored them to the right

[@10YardCricket]

I don't think you lag any skillset instead when you face kevin, you become more nervous 😅

[@7heMech]

After the last battle I went on this website and tried exactly design 2, but I got stuck after I made one line, and I couldn't figure out the rotation...

[@tinmancode]

You can use transform rotate but you need to offset your x axis

[@indiging8330]

I always end up looking at your hair instead of your eyes when you speak

[@vampirejs758]

The "before" in thumbnail is more difficult to make

[@abdihakim391]

Kyel king of simplifier VS Kevin king of CSS........:P

[@Quickb3n]

Literally can't think of anything I'd rather do less

[@alwysrite]

how do you do that sliding across the screen to see the original css battle you are trying to create?

[@tinmancode]

Just move your mouse over the target

[@phlatearther]

Hey Kyle! How many programming languages can you code in, can you list em, I am trying to figure out what programming language to focus on

[@neilmerchant2796]

Javascript!

[@jettthecoder1185]

Hello

[@aktherambler1808]

Hey can we do one battle. I want to challenge you.my global rank is 49 and current battle rank is 25

[@iJuce]

4th! (Ok im done)

[@slowprogrammer]

I would like to say, what if Kyle make tutorial about data structures and algorithms??🤔🤔

[@shaikjakeer7552]

Hi Kyle, can you make video on react-to-pdf in tab components implementation ❤️

[@eamytb]

Just move the origin point already 🤬

[@shashankpandey8346]

Your css battle are kinda weird. The rule is that you have to complete this is fewest words possible. But you are taking an easy route.

[@HowManyShrimps-g7z]

Same

[@butwhy4579]

.

[@js-dw6do]

9th نهمی منم

[@artyomshegeda]

Seems, mathematics is not your hard skill.

[@iJuce]

Jk second

[@itsyourronit]

2nd comment

[@iJuce]

Nah third

[@b4rb13der]

Hey, Nice video, check out my solution for #110 body { background: #D25B70; margin: 0; position: relative; } div { width: 100px; height: 10px; background: #F2E09F; border-radius: 100px; position: absolute; bottom: 95px; left: 80px; transform: rotate(calc(30deg * var(--angle))); transform-origin: calc(100% + 20px) calc(100% - 5px); }

[@a_h_hamdani6944]

First here

[@iJuce]

First