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.
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... 😅
@@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
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); }
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)
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.
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? 🙂
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
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?
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.
They are not very good at this, huh… Kyle is comically bad at visualizing the shapes (dude, the second one was just a "D" shape with a right triangle, no rotations required apart from the individual flips), and the guest is better at that, but very limited in his css.
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.
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
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... 😅
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
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;
}
It's nice to take a little break and watch these fun challenges. Thanks guys!
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..
Thanks Kyle for this challenge video once again!
I agree!!!
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);
}
Yeahahhhh another CSS battle . I was waiting for this
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
}
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)
The second one:
- 4 rounded boxes in a pill like shape with grid/gap
- two 45deg boxes left and right with background color
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.
41:57 just noticed how bad his veins are poppin out his forehead .
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? 🙂
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
"Not quite". Sounds like me talking to the juniors when the layout is completely broken.
Great. This way you teach and prepare others for real code-solving solutions. 🎉thank you both. Stay cool coders forever.
You and developedbyed are amazing, love watching your videos, guys!
I like the Kevin way of writing css most.
Make a docker course
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)
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.
A good challenge would be one person using CSS and the other person using tailwind ;)
I believe Tailwind makes writing css faster
Why both guys not tried clip-path
@20:55 Ed shouldn't have removed the width. he was so close until this point.
Please challenge Fireship next 😇🙏
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
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 literally got anxious when you spoke your intro differently
Nicely done! Can you please battle Brad Traversy from Traversy Media next?
that was fun and awesome to watch thank you both :)
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
Kyle, I've learnt a lot from you and Kevin lately. I wanna challenge you to a CSS battle as well
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
Watch Kevin powell doing the same chalange
awesome eddev vs webdev
Happy to see these geniuses together ❤❤❤
I will forever love web dev simplified
We want fireship next
clip paths baby! :D
Thanks Kyle your videos have helped me tremendously and i very much appreciate it🔥💯
wow, this video is crazy! I didn't anticipate.... 😃
Kyle Cook vs Kevin Powell next
Love your videos
The funniest thing is when Kyle says. The Gorgeous friend on the Internet,, It makes me laugh 😂😂🤣🤣😂😂
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;
}
Great battle! would it be possible to use transform: scaleX(-1); instead of having two different items styles?
For 2nd and 3rd one why no one was using clip path
2 Goats in 1 video this is awesome!
Love it! So much fun!!!
Ohh kyle you rocked! You just blowed up my mind
Thats was a fair play, Good vid!
kyle nd devEd please explain why not use clipart property for creating cone shape ??
common ed
i didn't use css or touch programming for months and i did the first one in 5min with 100% accuracy
Why didnt you use clip-path
Bro please do one more with Kevin. He’s gonna crush you again🙏
What about ThePrimeagen
really enjoyed the video
many thanks
Same battle try for easy tutorial chennal
This is a crazy combo🔥
Now its a really nice tagline, Not web complicate for you.
The battle is at our doorstep.
We are going to witness two legends going to battle.❤❤❤
The second one can be easily done with 4 divs and 2 div triangles😂
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 😎
good job both of you!
Both are stars ❤
2 legends in one video
Watching pros fight is fun
i saw you were watching another screen for code :p
I think position absolute should be disallowed. Feels like cheating 😅😅
If it was Kevin Powell, he would have challenged the creator of css and defeated him
Fan of you Both Guys 🤩🥰
I did the 1st challenge in exactly 1 minute 48 seconds
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.
Please do react challenges
destroyed...lol i was with Kyle's train of thought all the way. on # one.
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
Who thought the other dude in the thumbnail was mr best😂
I want to learn data science do you have any suggetion about any paid course?
Hello my gorgeous friends on the Internet
Hey Kyle .. i got accidentally unsubscribed from your mailing list .. I can't find the link again.. plz share the link here
Kyle’s the man
that forehead vein🥵
i need 2 hour for all targets so why you quit with 10 min xD
WOW
Ed is awesome, i learn a lot with his videos
Your hair *is* a little too perfect to have enough time to be good at CSS.😂
TBH, kevin is better then both, but your not bad. 😜
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
i enjoyed that guys nice video
I like to over complicate the web hahahah :D
Good malades bollar
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.
They are not very good at this, huh… Kyle is comically bad at visualizing the shapes (dude, the second one was just a "D" shape with a right triangle, no rotations required apart from the individual flips), and the guest is better at that, but very limited in his css.