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.
@@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
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... 😅
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; }
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
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); }
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.
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)
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? 🙂
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?
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'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
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 😎
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.
And today I'll waste my time and yours, showing you how to write an arrow function in java script but first I must get insanely drunk lol¹😂 I'd rock f I started a ewww tube channel I think.
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.
It's nice to take a little break and watch these fun challenges. Thanks 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... 😅
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
Yeah, or even one big div with only left and right borders
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..
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;
}
Yeahahhhh another CSS battle . I was waiting for this
Thanks Kyle for this challenge video once again!
I agree!!!
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
}
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
41:57 just noticed how bad his veins are poppin out his forehead .
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);
}
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.
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)
"Not quite". Sounds like me talking to the juniors when the layout is completely broken.
@20:55 Ed shouldn't have removed the width. he was so close until this point.
The claw Ed. Nice to see you around in WDS!! Make my day
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? 🙂
Great. This way you teach and prepare others for real code-solving solutions. 🎉thank you both. Stay cool coders forever.
I like the Kevin way of writing css most.
You and developedbyed are amazing, love watching your videos, guys!
Happy to see these geniuses together ❤❤❤
Kyle, I've learnt a lot from you and Kevin lately. I wanna challenge you to a CSS battle as well
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
Why both guys not tried clip-path
that was fun and awesome to watch thank you both :)
A good challenge would be one person using CSS and the other person using tailwind ;)
I believe Tailwind makes writing css faster
awesome eddev vs webdev
Nicely done! Can you please battle Brad Traversy from Traversy Media next?
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 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?
Love it! So much fun!!!
I will forever love web dev simplified
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'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
The funniest thing is when Kyle says. The Gorgeous friend on the Internet,, It makes me laugh 😂😂🤣🤣😂😂
Please challenge Fireship next 😇🙏
Love your videos
clip paths baby! :D
Thats was a fair play, Good vid!
wow, this video is crazy! I didn't anticipate.... 😃
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)
Watch Kevin powell doing the same chalange
I literally got anxious when you spoke your intro differently
Thanks Kyle your videos have helped me tremendously and i very much appreciate it🔥💯
Kyle Cook vs Kevin Powell next
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
We want fireship next
Why didnt you use clip-path
kyle nd devEd please explain why not use clipart property for creating cone shape ??
This is a crazy combo🔥
Ohh kyle you rocked! You just blowed up my mind
good job both of you!
really enjoyed the video
many thanks
2 Goats in 1 video this is awesome!
For 2nd and 3rd one why no one was using clip path
Both are stars ❤
Fan of you Both Guys 🤩🥰
2 legends in one video
The battle is at our doorstep.
We are going to witness two legends going to battle.❤❤❤
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 😎
What about ThePrimeagen
If it was Kevin Powell, he would have challenged the creator of css and defeated him
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.
Bro please do one more with Kevin. He’s gonna crush you again🙏
I want to learn data science do you have any suggetion about any paid course?
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
Hello my gorgeous friends on the Internet
Watching pros fight is fun
Hey Kyle .. i got accidentally unsubscribed from your mailing list .. I can't find the link again.. plz share the link here
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;
}
Please do react challenges
The second one can be easily done with 4 divs and 2 div triangles😂
Kyle’s the man
Who thought the other dude in the thumbnail was mr best😂
destroyed...lol i was with Kyle's train of thought all the way. on # one.
WOW
Your hair *is* a little too perfect to have enough time to be good at CSS.😂
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
Same battle try for easy tutorial chennal
I did the 1st challenge in exactly 1 minute 48 seconds
i enjoyed that guys nice video
i saw you were watching another screen for code :p
that forehead vein🥵
I think position absolute should be disallowed. Feels like cheating 😅😅
I surprisingly enjoyed this a lot! Sometimes backend devs dont appreciate what front end guys have to deal with haha
Oh for real? I love you both guys!
No homo though
TBH, kevin is better then both, but your not bad. 😜
I like to over complicate the web hahahah :D
Ed is awesome, i learn a lot with his videos
i need 2 hour for all targets so why you quit with 10 min xD
Good malades bollar
❤❤❤l like your bought you to are my favourite ❤
And today I'll waste my time and yours, showing you how to write an arrow function in java script but first I must get insanely drunk lol¹😂
I'd rock f I started a ewww tube channel I think.
dev ed started better but finished worse.