I Challenged An Expert Designer To A CSS Battle

[@AdrianTwarog]

Thanks Kyle and every one, this was heaps of fun, and a great pleasure to be on here! One day I will improve my CSS and hairstyle and be back for a rematch!

[@rakeshkumar-zr8du]

I have no hair *on my head*

[@jotasenator]

no one can defeat Kyle hair style jajaja...but what about a next match...make them a common more competitive thing? will be fun...kyle vs adrian css match of every month?

[@JimiSimpson]

Spoiler Alert! 😃

[@vettiebinyjar3788]

Adrian and Kyle both are done so good.we love your sportive

[@Learner0009]

You have good hairstyle buddy.

[@cssbattle]

So good to see these battles! 🔥 Thank you for doing these guys :D

[@sid-ej6kq]

Epic moment

[@suncrafterspielt9479]

Bruh your percentage system is scuffed

[@suncrafterspielt9479]

pls fix it

[@nishantgupta1854]

@@suncrafterspielt9479 can you stop complaining

[@suncrafterspielt9479]

@@nishantgupta1854 can you stop complaining about my complaint?

[@sidben7048]

1:03 That Was Savage

[@danidani-cy4ex]

so funny to watch. Maybe i will start doing some webdev myself.

[@modeal317]

yeah, it would be if it weren't for how unsimplified his css and html was lmao

[@Fachuro]

Useful tip: Border-radius gives different results if you use absolute values like px and if you use calculated values like %, so to achieve the correct border-radius you could do a high px value in this case

[@abulkonkeez]

Just watched it and found it weird no one else in the comments seems to have mentioned that tip as well.

[@TheGex]

Educational and entertaining at the same time. Really like this kind of videos!

[@lesnaSvalka]

We need more of these videos. 🤩

[@samarmohan9891]

Adrian's first one should have been 100%

[@iprogeny4877]

Lmao no he freaking made two different element for the background while you only needed to make one

[@inkedcoder]

@@iprogeny4877 that's where characters come into play, but the percentage is based how pixel perfect is appears in the viewport.. it looked perfect to me. your point about both of them making this more complicated then it had to be does hold water, though.

[@craigburton4447]

If he'd made one rectangle of correct size it would have been, those little px nudges cost him

[@iprogeny4877]

@@inkedcoder There was only 1 needed element for the background of the icon soo that's why he didn't get 100% lol

[@iprogeny4877]

@@inkedcoder Remember that 100% mean perfect

[@ismoil3075]

challenge Dev Ed, it'll be fun

[@omarrahman505]

Hahaha 😂 Adrian is on point about Kyle's hair. I get jealous everytime.

[@nataliegrayhandle]

Yeah kyle does have great hair

[@philwatts]

If you apply percentage border radius on a rectangular element the radius will be elliptical.

[@hetpatel958]

One mistake kyle often do is not get rid of default margin and padding of body. I tried all challenges along and got 99.9% in first two and 100% in last. Also border-radius on css battle are more likely to follow px instead of %.

[@iJuce]

I stopped with html and css like 2 years ago but this is still interesting to see idk why... make more of these Kyle 😄

[@jotasenator]

I've been following these programmers separately for a long time. and now i see them together in a css challenge. This shows us not only good mastery of the content but also empathy and desire to do. Kyle, there is no limit to what you're trying to do. I wish you many good things and that you never stop

[@tisoydostv5574]

Me: learning css want to give up with small designs But when i see these pros who are not having it easy, i have no more reason to give up. Thanks for these videos! 👍we need more of these. Not only we learn but we also get motivated.

[@shaswatsingh]

Kyle : no emotions Adrain : so much emotions that he has to use hands

[@AdrianTwarog]

Hahaha! I’m like a waterfall and Kyle us like a damn, damn he beat me!

[@DrcMind]

We need also The Net Ninja vs Brad Traversy or Dev ED for a CSS battle

[@matsukazetenma4558]

We need Kyle Vs Brad CSS battle or Kyle Vs dev ed...this battle will be epic

[@cjwebdev]

He did play Dev Ed in case you wanted to see it.

[@matsukazetenma4558]

@@cjwebdev did he really played CSS battle with dev ed?? I don't think he did CSS battle with Dev ed

[@cjwebdev]

@@matsukazetenma4558 I apologize the video was a Javascript trivia game. No one listen to me please, lol. Here is the link: kzbin.info/www/bejne/iKW5pWBjoNlpd6s

[@Learn_with_cosmos]

This is a lot of fun. You two are doing great.

[@mirkosedda3196]

Love these css battle!! Keep doing'em guys!!!

[@kang-dohsik4693]

I always get sleepy when i watch your videos youve got such comforting voice and presence its honestly astonishing, I'll try what i learned after i wake up lol😂

[@sinanyaman2007]

Really liking these css battles keep'em coming

[@rebelmachine88]

These are fun and I end up learning a lot about CSS!

[@eliasvor]

this makes me feel alot better about my css skills

[@JohnDoe-rj2kf]

Kyle you are so brave and have huge balls to battle people. SO much respect.

[@developerhabits]

Looool! That intro :D! Awesome to see you guys battling!

[@Rocadamis]

He definitely should have won the first round. However your clever use of the single line of code for the Border-radius put you way ahead in the last round. Congratulations!

[@WavyLive]

this is awesome. love the different approaches!

[@asmaarefaatVO]

these are so much fun, just 10 min passed, and already learned a lot!

[@Voidstroyer]

S**t got real when he said "This time i'll simplify the web for you"!!!!!

[@ankitshukla8640]

Kyle what I would be simple I put the image in the body background, and put the opacity 50% on it's content and basically trace the css properties of the elements over the image, could save you a lot of time.

[@vampirejs758]

Please do a css battle with Designcourse Gary Simon........ btw loved this video!

[@AdrianTwarog]

He is good!

[@kavyaagrawal2013]

I 100% expected there to be a hair commercial in the intro. You got me. I'm laughing dead.

[@adamoceallaigh2267]

Intrigued to know why both of ye when centering the content in the body just didn't use display: grid and place-items:center. Is there a specific reason to go against use of this or just personal preference ?

[@HenriqueErzinger]

The first one can be a single div, with the circles as radial gradients.

[@akshatw7866]

39:28 border-radius: 75 75 10 10 would have been way faster

[@hamidmohamadi2943]

Kyle you are great bro. Please start a tutorial for react pro during a high level project

[@vinodsaggam2157]

It was fun watching you guys 🙂

[@aravinvenkatramg1263]

Actually the first image did by kyle was the best way ,he used only one container while adrian used two containers to get the shape.Maybe it causes the percentage drop.

[@TheStefanos939]

Hey Kyle! Css battles videos are awesome! Keep content like this flow in your channel!

[@ank4099]

I am third year student of CS and have been watching like millions of programming videos, just discovered your channel and you are so handsome that it's a real pleasure to learn from you :P

[@nataliegrayhandle]

I am also a computer science degree pursuer and it is very pleasing to enjoy learning from Kyle

[@mnvk83]

Batmicky is indeed tricky. I try to solve it before I see Kyle vs. Adrian battle. It last way more than 10 minutes to figure out right sizes for wings cutouts.

[@seait6603]

2:12 black and orange kinda SUS

[@abdoualpha_dz3860]

why are you soo calme bro??? continue!

[@TiimedArts]

the problem at 2:55 is that the rectangle is streched, but the corners aren't supposed to be stretched like that

[@gangamsakethram3788]

Something about these videos make it so satisfying

[@nateargaw6955]

Awesome battle 👍 I just found css battle. It’s my new favorite place to spend on the internet.

[@shraddhapandey9357]

Mine too

[@megamindsetsolutions7569]

I want Kyle vs Tech Lead CSS battle😂😂😂

[@devhypercoder6772]

How i became more successful than a ex *

[@hajji384]

Hhhhh copy past techlead millionaire

[@alexgalicia5551]

This was a Hair Style epic battle 😂. Keep doing this type of videos Kyle. Cheers from El Salvador 😎.

[@gmail9098]

You can also use shift+ for compare in y axis

[@vedantthombare1028]

I tried that first one. It was perfectly done!

[@jamesritchie2785]

Love watching the content. Round one Kyle did have a better solution and ended up achieving the result in less lines of code. Looks like scoring is based on EOF. Always good watching how people approach things differently to get the same result. A good way to learn from :D

[@Arbupa]

I really love these CSS battles. I didn't know that were too fun!!

[@coreymoen]

Would love to see a challenge like this with one person scratch coding and the other working from scratch in Webflow!

[@73dines]

It would be great to see the battle Kyle vs some random CMS-expert - Who will be faster and make better front end content.

[@iconsworld9]

This is so great, I'm learning every moment.

[@pedllz]

.. border-radius percentages are based on the sides...so on a rectangle % it's not gonna give you a quarter-circle... 75px (1/2 length of the top) Would give you that....I learned this on one of your tutorials!!!

[@mtranchi]

k, now what about the js battle? CSS? Fancy pants. JS? Workhorse

[@srglmr]

I think mask or clip-path is perfect for this

[@simplegametutorials1341]

Use a grid variable for faster and accurate positioning

[@arslanahmadkhan]

Love you man. Love to see php or any programing chalngs

[@hk_build]

Kyle Vs Dev ed 🔥🔥❤️❤️❤️❤️

[@kingstalker]

I was waiting for this

[@hometwig2397]

For the first challenge, the border radius for the top left and right of the "container" could have been 100vh, turning the container top into the "pill" shape, no?

[@bgv3191]

Adrain, you know that you can specify all border-radius's in one line right? Just put: border-radius: x x x x; x: the value you want the border-radius to be.

[@ramisubora8360]

Even though I bet they are a hell lot better than me but it annoyed me that they didn't do that 😂😂

[@erikshumkov4848]

Good game you guys, that batman symbol looked tricky

[@Joshua-tg6hj]

I'm Australian and this guy's accent is definitely mixed with something else!

[@kaleabalemayehu]

We want brad also, anyone who agree leave a like on this comment so he will see it.

[@st.kamnakis]

For the sunset you could use 9999px of border radius top. It makes it look more like a pill than ellipse

[@youtub4444]

Congratulation! You win!

[@TopGyearsago]

Lol I love how he just fixed his hair in the start

[@surajitdas6555]

Awesome video Kyle. I am really happy that my thinking process for solving this css problem match with yours... And your are my idol in coding world along with Wesbos... Challenge him as well.... 😁

[@scorpion32]

lol this is really fun. Adrian got screwed with the 91% should have been around 96% because of the width.

[@AdrianTwarog]

I agree!

[@alejandropachas6552]

Guys, why in 28:45 the circule went to the other side just by using "right"?

[@mimoduocss]

You guys both did an excellent job dictating what you're building (especially that crazy mudda fudda bat) and always fun to watch. Interesting mixture of coding habits too. Maybe they correlate with hairstyles haha. Anytime you want a challenge, I'll be waiting for ya ;)

[@black_platypus]

Heheh, in a later(?) video, you talk about the difference between relative and absolute values for _border-radius,_ pointing out that you get an ugly pill-shape for non-square blocks if you use relative values. If you in fact made that other video _before_ this one, shame on you for forgetting :P

[@freehubofficial8353]

1:04 😂😂🙌 Big Brain

[@TokyoXtreme]

Kyle’s got the hair, but Adrian’s got the furniture and lighting.

[@MrCuteguylol]

I miss the "Welcome to web dev simplified, my name is Kyle and my job is to simplify the web for you so you can start building your dream projects sooner"

[@VishnuandAvyukt1918]

Kyle, CSS Battle with Dev Ed also please.

[@boco6969]

can we see more against kevin plz

[@N1ghtR1der666]

using that flex box to center again XD

[@chiaramapelli4950]

They kept referring to the last one as a bell, but I just see a lollipop lol

[@jonmayer]

That first challenge. 99.9% seemed crazy because the curves on top were all wrong. The 91.5% may have been slightly clipped somewhere but was much closer. Odd algorithm man.

[@alimansourey2076]

All the challenges were super easy. css battle is good for memorizing css properties but the challenges are way easier than what you would do in real projects .

[@UnclaimedClock]

I feel like Kyle's solutions are much better in terms of code quality and maintainability.

[@jameswood3798]

Why not measure sizes and positions first and than put accurate values in CSS once (in stead of tails again and again)?

[@jameswood3798]

sorry for typos: then / instead / trials

[@urahara264]

it will be great to see another challenge like this with Jessica " coder coder". congrats Kyle on your victory

[@WebDevSimplified]

That is the next one I am doing :)

[@urahara264]

@@WebDevSimplified Awesome !!!

[@cezargheorghiu2606]

Masters at work :D Good job!

[@SugarcaneKalpavrukshGroup]

I have java exams in like 2 hours, why I'm watch this now!!!....see u after the exam!...btw love ur videos!.❤️

[@modeal317]

you realize this has literally nothing to do with java?

[@jibaromar2249]

These battles are so fun to watch 🤣

[@nithinkottary9578]

Nice job Kyle

[@christiannwodo2151]

Kyle I think I have what it takes to battle you !

[@soonpangyong4099]

Love it 😍

[@nateargaw6955]

I wanna see single div videos

[@codingphil4007]

Kyle vs Dev ed next please✊✊

[@IAMTHEMUSK]

Why don’t you do responsive css instead of coding pixels values?

[@tanvirashraf728]

Kyle would you consider put your react course on udemy??

[@philwatts]

Why did Adrian already have a high score registered on the first challenge? 🤔

[@vivekkaushik9508]

Give us your hair routine video goddamit.

[@Marasma101]

Dutasteride, minoxidil and everything else under the sun lol or just genetics

[@schumanncombo]

is svg elements allowed in this ?