I really liked this... seeing how you both approached the problem differently to get to the same result is really cool. personally I think that would have been at 60 minutes with 4 stackoverflow tabs opened 🤣🤣🤣🤣🤣
So close man, I got frustrated, the main difference is that Kevin looked at the colors first and the first thing he did is to set background color, if you had done that you would've beaten him, but the time you wasted on colors slowed you down enough for him to win, anyways good job 👍
I think kyle did it the brute force way from starting, this was bad, it wasnt the best practice but anyway. Even kevin was stuck when his keys were disappearing on display flex
I took an important lesson from this video. When approaching a problem, some people solve the easier problems first so when they got into bigger problems there isn't much things to disturb them while others approaching those easy problems like "its a piece of cake, i'll deal with that later first i gotta focus on these bigger problems". Im definetely part of a second group just like Kyle and there was lesson for us to learn from
This is entertaining and also educative af, at the first "episode" I hadn't event touched CSS, but I could understand what CSS was able to do while having fun watching the video. This collab is amazing, please do a lot more with Kevin!
I really really enjoy these videos from you and Kevin. I wish there were more css battles available. I hope you continue doing these on a monthly basis! Definitely an improvement showing the side by side view and the timer. Great video!
I like these videos, because you are the two youtubers I watch, when I want to learn something new about CSS. I learned so much, thank you. Keep up the fantastic work. ✌
Interesting way of doing it! I did some parts similarly, although I just used display: grid; and place-items: center; on the body to get it to automatically be centred. I would also advise that in these CSS Battles the best way to do any measurements is simply using px values, they're usually meant to be round-ish numbers, but if not they at least give you the best control over it. Using percentages can make it really difficult to fine tune and just makes life harder for no benefit.
One thing I've noticed about the CSS Battle challenges is that the positioning and sizing values are _usually_ in *pixel* values with "normal looking" values (like 75 or 100, not 56 or 98). I never (if ever) use percentage (or rem or em or anything else) values for positioning and sizing things.
quick tip: keep your mouse hovered over the slide & compare window while doing fine 1px s tuning. this will work and will show the live update of what you're changing
Amazing Work!!!!!!!! Loved the tension while setting all the property values. Would really like some JavaScript battles. I am ready to pay for watching JS Battles.
Me in May 2022, I am just fond of foreign languages. Me now in August 2022, ooooh CSS battle. Interesting. Welcome to Web-development =) I also loved your video on recurssion
You and Kevin are both great haha i`d like to see more battles between two of you hahaha it`s fun and amazing to watch expert doing battles like this .
Hey Kyle... Just if that background and color would have done I guess you would have won... But this was so much fun... Looking forward to more such videos... Like live ones you had earlier and great work Kevin!
3:30 It *is* actually exactly centered. You just forgot to remove the default padding on the body. That would have saved you a LOT of fiddling around with the position.
This made me die inside a bit tbh. Wasn't expecting someone with so much CSS aptitude to not make sure html/body was fully reset. Then the centering with pixel values... come on! position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) ... this is CSS positioning 101 ;_;
I have my solve of the piano using clip-path on my channel. By the way, it should be centered. I think you had an issue because of nonzero margin of body.
Respect to all of you web developers out there.... front-end or back-end. I cannot imagine how much time and energy you guys invest into your craft!👏👏
Thanks Iron Ore
I really liked this... seeing how you both approached the problem differently to get to the same result is really cool. personally I think that would have been at 60 minutes with 4 stackoverflow tabs opened 🤣🤣🤣🤣🤣
🤣hilarious
hahahah ....i was shy commenting this but u said it anyway 🤣🤣🤣🤣
Do this at least once every 3 months. I really like cssbattle and started on it last year after seeing you and kevin do the challenge.
So close man, I got frustrated, the main difference is that Kevin looked at the colors first and the first thing he did is to set background color, if you had done that you would've beaten him, but the time you wasted on colors slowed you down enough for him to win, anyways good job 👍
it's 100 likes, congrats man. 😀
I think kyle did it the brute force way from starting, this was bad, it wasnt the best practice but anyway. Even kevin was stuck when his keys were disappearing on display flex
That's why he's the king!
I took an important lesson from this video. When approaching a problem, some people solve the easier problems first so when they got into bigger problems there isn't much things to disturb them while others approaching those easy problems like "its a piece of cake, i'll deal with that later first i gotta focus on these bigger problems".
Im definetely part of a second group just like Kyle and there was lesson for us to learn from
Yazılımcıysan bir nokta veya virgül bile herşeyi değiştiriyor. gözden kaçtığı büyük sorunlara gebe. vakit kaybı işin en hafif maliyeti...
yay!! One more amazing CSSBattle! So amazing to see you code those everytime 🙌🏼
This is entertaining and also educative af, at the first "episode" I hadn't event touched CSS, but I could understand what CSS was able to do while having fun watching the video. This collab is amazing, please do a lot more with Kevin!
I remember Kevin didn’t wanna be called the css king in the last battle😁 You guys really know how to spread the passion
I really really enjoy these videos from you and Kevin. I wish there were more css battles available. I hope you continue doing these on a monthly basis! Definitely an improvement showing the side by side view and the timer. Great video!
Me too man, it's real interesting to watch how it all comes together.
Hey Kyle! Long time fan.
Was yelling "Background color Kyle, the background color" at the end. Loved the video and the awesome thumbnail.
I like these videos, because you are the two youtubers I watch, when I want to learn something new about CSS.
I learned so much, thank you.
Keep up the fantastic work. ✌
Love it! I'm impressed with your "on-demand" CSS skills! Thanks for posting!
Interesting way of doing it! I did some parts similarly, although I just used display: grid; and place-items: center; on the body to get it to automatically be centred. I would also advise that in these CSS Battles the best way to do any measurements is simply using px values, they're usually meant to be round-ish numbers, but if not they at least give you the best control over it. Using percentages can make it really difficult to fine tune and just makes life harder for no benefit.
Perfect match! When you battle with each other, we both learn more css and get fun times. Thanks man!
If you want to do XY-centering the simplest solution is to just display:grid; place-items: center; on the wrapper.
This was very fun to watch, now do 10 more :)
wow !! two of my favorite youtubers on the topic in a battle??? didn't even see the first two
Congratulations to both of you! I learned a lot.
yeh same,
kyle used 1% of his brain in this video 🤣🤣🤣🤣🤣🤣🤣🤣
where are you from brother?
@@peroboy99 India brother
@@faizanahmed9304 india main kaha se
@@peroboy99 Hyderabad
One thing I've noticed about the CSS Battle challenges is that the positioning and sizing values are _usually_ in *pixel* values with "normal looking" values (like 75 or 100, not 56 or 98). I never (if ever) use percentage (or rem or em or anything else) values for positioning and sizing things.
Yes. When I'm doing a challenge, if I need to "hard code" the value, I know that something's not right
thumbnail is goated
quick tip: keep your mouse hovered over the slide & compare window while doing fine 1px s tuning. this will work and will show the live update of what you're changing
Haha I love these videos man 🙂😂 nice one KK!
Thanks to this channel for making my web dev journey interesting! I really got bored learning it in my college.
These intelligent and civil battles are great to watch. Thank you!
The thumbnail is just amazing
Best video ever! Thanks Kyle!
you guys both rock. Thanks.
Damn! Worked like a charm! Thank you soooo much!
yess. another rematch between you two!! i perked up seeing this upload. omg. by the way, the thumbnail looks rad.
This looked like so much fun!
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
I'm loving these, bring them more!
on the top next to slide & compare there is diff, if you enable it, it will help you to alight items to the exact pixel easily
Both of you rockssss!!👍👍👍👍👍
These challenges are really great props to both of you. It’s about the good spirit and joy! 👏🏾
Love that thumbnail!!!! 🔥🔥🙌🏼⚔
Thank you so much!!! It did work and took less than 5 minutes!
Amazing Work!!!!!!!! Loved the tension while setting all the property values. Would really like some JavaScript battles. I am ready to pay for watching JS Battles.
At first glance Kevin looks like is making the T position 😂😂 that brought me 'Shrek's Odyssey' vibes.
My goodness, that was a close one. Can't wait to see the next ones!
u guys are funny n so good! nice to see you doing this
best series ever brooo we need more challenges
You two are amazing. I enjoyed it very much
I LOVE the thumbnail.
This was still an amazing vid to watch. And the Liar Liar clip is perfectly utilized.
i just watched an hour ago your first battle and now you released the second, this was destined for me xD
Me in May 2022, I am just fond of foreign languages. Me now in August 2022, ooooh CSS battle. Interesting. Welcome to Web-development =)
I also loved your video on recurssion
Lmao the thumbnails you guys make for these, fantastic . . .
This is so fun! Thanks to you both!
You wanted to do it perfectly. Sometimes that's not the best way. You are not alone with this.
You and Kevin are both great haha i`d like to see more battles between two of you hahaha it`s fun and amazing to watch expert doing battles like this .
Really nice battle 👏 congrats both of you 👍
I love seeing human Kyle, your other videos are too perfect 🤣
As a guitar player and web developer, I appreciate the Jackson in the background lol
That's some ballsy move to submit with white bg 10:02
I'd love this to be a regular series.
great video dude
I learned a lot seeing you guys battle
OK, Kevin is definitely the css King, no doubt. Can you guys create that piano with css and tables? no divs at all.
whatever win or lose, You and Kevin are my best teacher in the world! 🙂🤗
Hey Kyle... Just if that background and color would have done I guess you would have won... But this was so much fun... Looking forward to more such videos... Like live ones you had earlier and great work Kevin!
These Css battles rock 🎸
Should have displayed the box as block and used a margin Auto to centre the box, but other wise solid 👌👌
Wow I've just discovered CSS Battle - thanks it's cool! I can practice CSS hands-on, similarly like I practice JS on Codewars.
That was funny 🤣🤣🤣🤣. You was a little bit stressed
Wow i was just thinking about it like 2 days ago and now here is the 3rd round...
if I were to code that, It will surely take me hours lol, great and fun battle as usual mates! :)
i wish u created a playlist for angular or next js or some block chain development..Love ur channel
All hail "Kyle" the king of WebDev
very nice to have you seen working
Wow. Amazingly fast. I would need several days for this task with heavy googling.
These are my favourites! 😁unlucky bro. 2 - 1 to Kevin. Can't wait to see you close that deficit.
You are simply awesome..
3:30 It *is* actually exactly centered. You just forgot to remove the default padding on the body. That would have saved you a LOT of fiddling around with the position.
This made me die inside a bit tbh. Wasn't expecting someone with so much CSS aptitude to not make sure html/body was fully reset.
Then the centering with pixel values... come on! position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) ... this is CSS positioning 101 ;_;
0:29 When you said 'You're going down', my PC crashed....
if you press shift you can also look from the bottom up.
i prefer doing only one white key and just use box shadow with 0 blur and offset on x axis, the same idea for black keys
You are king for me. Not only in Css. Also in JS, React, Node.js...
haha its always the most simplest things that we dont think of that stumps and frustrates us developers. great vid!
I always love these css battles
Good to know I did this challenge some months back. I got a 100% match
this was exciting i would like to see more battles i really like cssbattles both are great
I mean Jesus, boomer thumbnail for CSS. What a time to be alive!
I wish you would’ve tried more battles today
good job, dude!
You are the king now. If I was the judge, you would have heard me saying "Lemme get you the crown". ✌
funny how i was thinking of your last battle just today
My two favourite CSS youtubers.
I mean , nobody beats these dudes 🤣 great job!!!!
Make this a weekly challenge its so interesting
more content about css battle i liked it as frontend dev
CSS is one of many skills of kyle. Never compare flex box and grid.
LOL at the transition at 0:26. 🤣
Me: Yes Kevin No Kevin Yes Kevin!, Oh, Kyle is screwed...
This was wonderful, please sir can you make a video on how to auto delete documents in mongodb using express.
I have my solve of the piano using clip-path on my channel.
By the way, it should be centered. I think you had an issue because of nonzero margin of body.
You could improve that by using box-shadow:; for all these white and black keys ;)
This was fun.
that was dope!
why did you use absolute position to center items 🤦♂️