I Challenged An Expert Designer To A CSS Battle

Ed’s Channel: / @developedbyed
FREE CSS Specificity Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
React Simplified Course: reactsimplified.com
Ed is an incredible designer and developer, but is he an expert CSS developer as well? In this video I challenge Dev Ed to an incredibly fun CSS battle to decide once and for all who is the most gorgeous friend on the internet.
📚 Materials/References:
CSS Battle: cssbattle.dev/battle/22
Ed’s Channel: / @developedbyed
FREE CSS Specificity Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
React Simplified Course: reactsimplified.com
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:50 - Round 1
10:17 - Round 2
28:30 - Round 3
#CSSBattle #WDS #DevEd

[@developedbyed]

Bwahahaha absolutely destroyed. Well done Kyle, deffo the css master 👍

[@anshulanand02]

Hi sir big fan love you

[@labhamjain3915]

was these quiz were scripted? it looks like 🫤

[@carceasergiu]

Fain! Poti sa faci un video si cu Kevin :D

[@abishek07]

No spoilers bro 💀

[@atanumojumdar]

Spoiler 🥲

[@jadexartsacademy]

It's not everyday you see a CSS battle with one of the developers who is an expert. More than that it was FUN FUN FUN!!! Thanks Kyle for this challenge video.

[@Kirk-LS]

It's nice to take a little break and watch these fun challenges. Thanks guys!

[@leomacdon7858]

Thank you Kyle for bringing this up . I think this is the second css battle I watched.. I appreciate both of you, the Content Creators..

[@137dylan]

When I was learning JS and React a couple of years ago, you two were my best teachers. Thanks :)

[@miraclenerdkidchiki6249]

They are currently mine...tryna learn react

[@137dylan]

@@miraclenerdkidchiki6249 also check out: Pedrotech, Dave gray, Codevolution

[@miraclenerdkidchiki6249]

@@137dylan i love dave gray...he gives so much value to upcoming React developers...his videos has been so helpful to me......i will check out pedrotech and codeevolution

[@imukai]

for that icecream one, its apparently 4 boxes with corner radius, and then two bigger squares set to bg color and rotated 45 degrees on top.

[@sercangundogdu340]

it was so painful to watch them not seeing that haha

[@vice-108]

Yeahahhhh another CSS battle . I was waiting for this

[@kclubb]

BTW, I just wanted to say thank you for all of your CSS content. It has helped me out a ton and a lot of my work is inspired off of what I have seen in your CSS videos. Thanks a ton.

[@ParrhesiaJoe]

For the second one, I made 4 pill shapes and then I overlayed a double arrow border: .flex { grid-area: 1/1/1/1; // I use grid instead of position: absolute. background: transparent; border-left: 100px solid #E3516E; border-right: 100px solid #E3516E; border-top: 100px solid transparent; border-bottom: 100px solid transparent; width: 80px; height: 20px; }

[@cyberprompt]

the second one was driving me nuts, so I did it myself. just create 4 pill shapes absolutely positioned, then two rotated squares overlapping them.... guys! just would need some px tweaks but this is the concept: #main{ position: relative; margin: auto; width: 400px; height: 300px; background: #e3516e; } .pill{ position: absolute; width: 80px; height: 30px; background: #d9d9d9; border-radius: 15px; } .topleft{ left: 110px; top: 110px; } .topright{ right: 110px; top: 110px; } .botleft{ left: 110px; bottom: 110px; } .botright{ right: 110px; bottom: 110px; } .square{ position: absolute; width: 120px; height: 120px; background: #e3516e; transform: rotate(45deg); top: 90px; } .left{ left: 30px; } .right{ right: 30px; }

[@sahajatantra]

clip-path for the diagonal and border-radius for the rounded part make it much much easier, then position the items with grid - you only need 4 items and no messing around with overlapping et. I actually completed that one in less than 8 minutes - but I must admit I was thinking about how to do it for minimum of 5 minutes before that... 😅

[@WebDevMania1]

You and developedbyed are amazing, love watching your videos, guys!

[@rishavpapaji5349]

My version of third Solution body{ background:#E38F66; } .center{ width: 160px; height: 120px; background: #FFFBDA; position:absolute; left:120px; top: 90px } .left{ width: 50px; height: 200px; background: #E38F66; position:absolute; left:110px; top: 20px; rotate: 15deg } .right{ width: 50px; height: 200px; background: #E38F66; position:absolute; left:240px; top: 20px; rotate: -15deg } .stick{ width: 10px; height: 90px; background: #62306D; position:absolute; left:195; top:210 }

[@jotasenator]

The claw Ed. Nice to see you around in WDS!! Make my day

[@theisoj]

Thanks Kyle for this challenge video once again!

[@jadexartsacademy]

I agree!!!

[@CalebHesse01]

8:45 BRO SAME. I am a adamant ctrl+s user, I use it WAY more often than I like, so when I finish writing just about anything, it's just muscle memory to use it... lol... I could write a single line of code.... CTRL+S. Any time I write a code snippet online I do the same damn thing lol

[@Johan_tube]

Great. This way you teach and prepare others for real code-solving solutions. 🎉thank you both. Stay cool coders forever.

[@praveenvinopv9929]

Happy to see these geniuses together ❤❤❤

[@AlThePal78]

that was fun and awesome to watch thank you both :)

[@cyberprompt]

for the lampshade, use perspective transform. takes some tweaking but this is the concept: .lampshade { position: absolute; left: 160px; top: 80px; width: 80px; height: 110px; background-color: #fffbda; transform: perspective(80px) rotateX(30deg); }

[@mrdeus1]

"Not quite". Sounds like me talking to the juniors when the layout is completely broken.

[@8-P]

The second one: - 4 rounded boxes in a pill like shape with grid/gap - two 45deg boxes left and right with background color

[@sahajatantra]

Clip-path and border-radius would have been the easy win for challenge 2 - no messing around with overlapping items or transforms... Am I the only one who immediately saw the clip-path? 🙂

[@localscope6454]

Great battle! would it be possible to use transform: scaleX(-1); instead of having two different items styles?

[@Joe-SoftwareEngineer]

Love it! So much fun!!!

[@pouriyanourouznejad7090]

I love to see u guys in the same video together Pls make more videos together U guys (and Kevin Powell) r my favorite teachers

[@prakhartripathi3247]

awesome eddev vs webdev

[@osman3404]

A good challenge would be one person using CSS and the other person using tailwind ;) I believe Tailwind makes writing css faster

[@miraclemark6120]

This is a crazy combo🔥

[@sknEK_code_chef]

clip paths baby! :D

[@Stevoayala]

Nicely done! Can you please battle Brad Traversy from Traversy Media next?

[@IlyesCodes]

I will forever love web dev simplified

[@TheCodeholic]

Hi Kyle, I really love these type of challenges. I have 11+ years of experience in web development. My channel is not as big as yours or Ed's but I would love to challenge you in this type of CSS challenges of course if you are OK with that.

[@benjiking251]

Thanks Kyle your videos have helped me tremendously and i very much appreciate it🔥💯

[@ericaimhigh]

Kyle, I've learnt a lot from you and Kevin lately. I wanna challenge you to a CSS battle as well

[@codenerd7823]

The battle is at our doorstep. We are going to witness two legends going to battle.❤❤❤

[@yajirushik2871]

Most of them were able to finish with just border values and last one with two containers, one with clip path (havent tried just quick idea)

[@Andrew-Tsegaye]

wow, this video is crazy! I didn't anticipate.... 😃

[@vinayakm4202]

Love your videos

[@lukaszwawrzyszczuk6591]

Wed dev all the way - thanx for the excellent Javascript course on your website, much much better than many I had seen so far. Greetings from Poland

[@GallantryX]

Thats was a fair play, Good vid!

[@TheTenderking]

@20:55 Ed shouldn't have removed the width. he was so close until this point.

[@rohitkrtiwari5662]

always loved your efforts & enjoy your teaching. body{ background-color:#62306D; } div { position:absolute; left:120px;top:70px; width: 80px;height: 160px; background: #F7EC7D; border-radius:80px 0 40px 0; -webkit-box-reflect:right; } (i think webkit tool will be more easy here)

[@Way_Of_The_Light]

Please challenge Fireship next 😇🙏

[@JEK5190]

2 Goats in 1 video this is awesome!

[@gregdavisdev]

good job both of you!

[@manuchehrraupov2581]

Make a docker course

[@samerjameel95]

really enjoyed the video many thanks

[@catalinbanici3357]

The second one is very fun to watch 😂 could it worked with 4 divs in grid display and each div having border radius modified towards the center of the whole thing and at the sides 2 square divs rotated 45 deg?

[@rishavpapaji5349]

body{ background:#E3516E; } .one{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 90px; top: 100px; border-radius:100px } .two{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 210px; top: 100px; border-radius:100px } .three{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 90px; top: 160px; border-radius:100px } .four{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 210px; top: 160px; border-radius:100px } .apple{ width: 90px; height: 90px; background: #E3516E; rotate: 45deg; position:absolute; left: 250px; top: 105px; } .ball{ width: 90px; height: 90px; background: #E3516E; rotate: 45deg; position:absolute; left: 60px; top: 105px; }

[@rishavpapaji5349]

like that

[@rajanverma8457]

kyle nd devEd please explain why not use clipart property for creating cone shape ??

[@FabriceCoder-iw6sx]

We want fireship next

[@utkarshsiddhpura2401]

Ohh kyle you rocked! You just blowed up my mind

[@StrikerFeed]

I literally got anxious when you spoke your intro differently

[@ariyanunknown]

The funniest thing is when Kyle says. The Gorgeous friend on the Internet,, It makes me laugh 😂😂🤣🤣😂😂

[@amanrawat2177]

2 legends in one video

[@WebDevelopmentWithSS]

We can Use Clip-path css property in round 1

[@reactjs1900]

For 2nd and 3rd one why no one was using clip path

[@oricohen2626]

Why didnt you use clip-path

[@aakash2333]

Fan of you Both Guys 🤩🥰

[@webtamil98]

Why both guys not tried clip-path

[@GauravKumar-qe7iu]

Watch Kevin powell doing the same chalange

[@idrisdawari1386]

Both are stars ❤

[@chzmo]

I feel like I might slay you all 😂😂. It's really fun, next time involve everyone, let's see if their servers can handle the traffic. We need more battles 😎

[@rishavpapaji5349]

I've Completed the Second Challenge In less than Five Minutes I created four rounded cylinders and then place two square of same background color at 45-degree angle to cut them off, it's simple as that

[@ankitamaru9712]

Hello Sir, Good Morning I have been learning css for the last few years. But still not an expertise level. Is there any tips to make it to good in css.

[@tusharadhikari1507]

I want to learn data science do you have any suggetion about any paid course?

[@rabinacharya8429]

Kyle Cook vs Kevin Powell next

[@zakidz6716]

common ed i didn't use css or touch programming for months and i did the first one in 5min with 100% accuracy

[@divyanshu_chaurasiya]

41:57 just noticed how bad his veins are poppin out his forehead .

[@dmitriyk.2462]

my solution for second body { margin:0; padding:0; background:#E3516E; position:relative; } .wrapper{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; row-gap:0; column-gap:20px; width:180px; height:120px; flex-wrap:wrap; } .item { width:70px; height:40px; background:#D9D9D9; border-radius:20px; position:relative; overflow:hidden; } .item.first:after{ content:''; position:absolute; height:100%; width:50px; background:#E3516E; transform:skew(45deg); left:-31px; } .item.sec:after{ content:''; position:absolute; height:100%; width:50px; background:#E3516E; transform:skew(-45deg); right:-31px; } .item.third:after{ content:''; position:absolute; height:100%; width:50px; background:#E3516E; transform:skew(-45deg); left:-31px; } .item.fourth:after{ content:''; position:absolute; height:100%; width:50px; background:#E3516E; transform:skew(45deg); left:51px; } .item.fourth{ border-radius:20px 20px 0px 20px } .item.third{ border-radius:20px 20px 20px 0px } .item.sec{ border-radius:20px 0px 20px 20px } .item.first{ border-radius:0px 20px 20px 20px }

[@singh.aadarsh]

Now its a really nice tagline, Not web complicate for you.

[@DunckingTest]

What about ThePrimeagen

[@aseemanand1]

Bro please do one more with Kevin. He’s gonna crush you again🙏

[@psy-code6635]

Please do react challenges

[@coldguy]

The second one can be easily done with 4 divs and 2 div triangles😂

[@SagarKumar-db2xy]

If it was Kevin Powell, he would have challenged the creator of css and defeated him

[@dixitvara]

i enjoyed that guys nice video

[@webtamil98]

Same battle try for easy tutorial chennal

[@johnsanthosh9540]

Hey Kyle .. i got accidentally unsubscribed from your mailing list .. I can't find the link again.. plz share the link here

[@NiceChange]

destroyed...lol i was with Kyle's train of thought all the way. on # one.

[@mikeonthebox]

I always wonder how come people doing this CSS battles can't do simple math and actually use the correct numbers for thing like border radius.

[@samimustafa7284]

u did css battle with best youtuber but i want u to challenge Kevin Powell too

[@muhammadk23]

he is done it with kevin a few times

[@cafelutsa_]

You're two years late bud

[@samimustafa7284]

@@muhammadk23 i know but i want more

[@samimustafa7284]

@@cafelutsa_ lol i want more with kevin powell

[@chhavimanichoubey9437]

Watching pros fight is fun

[@BaSsGaZ]

I think position absolute should be disallowed. Feels like cheating 😅😅

[@programmingjobesch7291]

Your hair *is* a little too perfect to have enough time to be good at CSS.😂

[@Igor-ge1py]

I surprisingly enjoyed this a lot! Sometimes backend devs dont appreciate what front end guys have to deal with haha

[@melekRebai]

Who thought the other dude in the thumbnail was mr best😂

[@User-404]

WOW

[@rishavpapaji5349]

My version of Code body{ background:#E3516E; } .one{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 90px; top: 100px; border-radius:100px } .two{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 210px; top: 100px; border-radius:100px } .three{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 90px; top: 160px; border-radius:100px } .four{ background: #D9D9D9; width: 100px; height: 40px; position:absolute; left: 210px; top: 160px; border-radius:100px } .apple{ width: 90px; height: 90px; background: #E3516E; rotate: 45deg; position:absolute; left: 250px; top: 105px; } .ball{ width: 90px; height: 90px; background: #E3516E; rotate: 45deg; position:absolute; left: 60px; top: 105px; }

[@the_nth]

I did the 1st challenge in exactly 1 minute 48 seconds

[@TheMetalMag]

Kyle’s the man

[@danielsousa1991]

Ed is awesome, i learn a lot with his videos

[@Semion7777]

Oh for real? I love you both guys! No homo though

[@aloblanko]

i need 2 hour for all targets so why you quit with 10 min xD

[@narzullayev_developer]

Good malades bollar

[@darkbluebossa]

Hello my gorgeous friends on the Internet

TBH, kevin is better then both, but your not bad. 😜

[@c0mplicated]

that forehead vein🥵

[@user-oi4wt9gc3v]

I like to over complicate the web hahahah :D

[@guli670]

❤❤❤l like your bought you to are my favourite ❤

[@bogumilnowak]

o pierwszy :)