I Challenged An Expert Designer To A CSS Battle
Vložit
- čas přidán 1. 06. 2024
- 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
Bwahahaha absolutely destroyed. Well done Kyle, deffo the css master 👍
Hi sir big fan love you
was these quiz were scripted? it looks like 🫤
Fain! Poti sa faci un video si cu Kevin :D
No spoilers bro 💀
Spoiler 🥲
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.
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..
It's nice to take a little break and watch these fun challenges. Thanks guys!
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.
it was so painful to watch them not seeing that haha
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.
You and developedbyed are amazing, love watching your videos, guys!
When I was learning JS and React a couple of years ago, you two were my best teachers. Thanks :)
They are currently mine...tryna learn react
@@miraclenerdkidchiki6249 also check out: Pedrotech, Dave gray, Codevolution
@@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
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;
}
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... 😅
Yeahahhhh another CSS battle . I was waiting for this
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;
}
Great. This way you teach and prepare others for real code-solving solutions. 🎉thank you both. Stay cool coders forever.
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
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
}
Thanks Kyle for this challenge video once again!
I agree!!!
The claw Ed. Nice to see you around in WDS!! Make my day
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
Great battle! would it be possible to use transform: scaleX(-1); instead of having two different items styles?
Thanks Kyle your videos have helped me tremendously and i very much appreciate it🔥💯
"Not quite". Sounds like me talking to the juniors when the layout is completely broken.
Nicely done! Can you please battle Brad Traversy from Traversy Media next?
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);
}
Happy to see these geniuses together ❤❤❤
that was fun and awesome to watch thank you both :)
awesome eddev vs webdev
Love your videos
really enjoyed the video
many thanks
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)
clip paths baby! :D
This is a crazy combo🔥
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
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?
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;
}
like that
Love it! So much fun!!!
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? 🙂
Make a docker course
The second one:
- 4 rounded boxes in a pill like shape with grid/gap
- two 45deg boxes left and right with background color
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)
I will forever love web dev simplified
Please challenge Fireship next 😇🙏
kyle nd devEd please explain why not use clipart property for creating cone shape ??
Why both guys not tried clip-path
wow, this video is crazy! I didn't anticipate.... 😃
Fan of you Both Guys 🤩🥰
Kyle, I've learnt a lot from you and Kevin lately. I wanna challenge you to a CSS battle as well
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.
I literally got anxious when you spoke your intro differently
We want fireship next
Why didnt you use clip-path
good job both of you!
Ohh kyle you rocked! You just blowed up my mind
For 2nd and 3rd one why no one was using clip path
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.
We can Use Clip-path css property in round 1
2 Goats in 1 video this is awesome!
Watch Kevin powell doing the same chalange
The funniest thing is when Kyle says. The Gorgeous friend on the Internet,, It makes me laugh 😂😂🤣🤣😂😂
I want to learn data science do you have any suggetion about any paid course?
The battle is at our doorstep.
We are going to witness two legends going to battle.❤❤❤
@20:55 Ed shouldn't have removed the width. he was so close until this point.
2 legends in one video
Both are stars ❤
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
}
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 😎
Thats was a fair play, Good vid!
Kyle Cook vs Kevin Powell next
What about ThePrimeagen
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
Hey Kyle .. i got accidentally unsubscribed from your mailing list .. I can't find the link again.. plz share the link here
i enjoyed that guys nice video
41:57 just noticed how bad his veins are poppin out his forehead .
Please do react challenges
Watching pros fight is fun
Now its a really nice tagline, Not web complicate for you.
common ed
i didn't use css or touch programming for months and i did the first one in 5min with 100% accuracy
The second one can be easily done with 4 divs and 2 div triangles😂
If it was Kevin Powell, he would have challenged the creator of css and defeated him
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;
}
Who thought the other dude in the thumbnail was mr best😂
Bro please do one more with Kevin. He’s gonna crush you again🙏
Kyle’s the man
destroyed...lol i was with Kyle's train of thought all the way. on # one.
Same battle try for easy tutorial chennal
I did the 1st challenge in exactly 1 minute 48 seconds
i need 2 hour for all targets so why you quit with 10 min xD
Hello my gorgeous friends on the Internet
u did css battle with best youtuber but i want u to challenge Kevin Powell too
he is done it with kevin a few times
You're two years late bud
@@muhammadk23 i know but i want more
@@cafelutsa_ lol i want more with kevin powell
Ed is awesome, i learn a lot with his videos
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.
I think position absolute should be disallowed. Feels like cheating 😅😅
Good malades bollar
Your hair *is* a little too perfect to have enough time to be good at CSS.😂
I surprisingly enjoyed this a lot! Sometimes backend devs dont appreciate what front end guys have to deal with haha
that forehead vein🥵
WOW
I like to over complicate the web hahahah :D
TBH, kevin is better then both, but your not bad. 😜
Oh for real? I love you both guys!
No homo though
❤❤❤l like your bought you to are my favourite ❤
o pierwszy :)
dev ed started better but finished worse.