Can I Beat The King Of CSS Again? - CSS Battle

Sdílet
Vložit
  • čas přidán 22. 05. 2024
  • This is for all the marbles. Kevin and I are going head to head in a CSS Battle to determine who is truly the King of CSS.
    📚 Materials/References:
    The CSS Battle: cssbattle.dev/play/80
    Kevin’s Video: • Can you beat me at a C...
    🌎 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
    #CSSBattle #WDS #KevinPowell

Komentáře • 241

  • @ferroherre9906
    @ferroherre9906 Před rokem +35

    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!👏👏

  • @anthonypetruzzi158
    @anthonypetruzzi158 Před rokem +179

    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 🤣🤣🤣🤣🤣

    • @shoot2000
      @shoot2000 Před rokem +7

      🤣hilarious

    • @ashishshukla-pk4xi
      @ashishshukla-pk4xi Před 4 měsíci +1

      hahahah ....i was shy commenting this but u said it anyway 🤣🤣🤣🤣

  • @7heMech
    @7heMech Před rokem +378

    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 👍

    • @mujibulhaquetanim
      @mujibulhaquetanim Před rokem +3

      it's 100 likes, congrats man. 😀

    • @amans6504
      @amans6504 Před rokem +1

      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

    • @funkahontas
      @funkahontas Před rokem +1

      That's why he's the king!

  • @rahulxdd
    @rahulxdd Před rokem +56

    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.

  • @cssbattle
    @cssbattle Před rokem +16

    yay!! One more amazing CSSBattle! So amazing to see you code those everytime 🙌🏼

  • @shogo6
    @shogo6 Před rokem +15

    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!

  • @mikeonthebox
    @mikeonthebox Před rokem +23

    You should remember that in CSS battles you need to reset globally margin and padding and the everything works. You always fall for the same and then go into using those weird percentage values for whatever reason.

  • @yaslaan
    @yaslaan Před rokem +23

    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

    • @gmkb4361
      @gmkb4361 Před rokem +1

      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...

  • @esclaveduchristpunchline6972

    I remember Kevin didn’t wanna be called the css king in the last battle😁 You guys really know how to spread the passion

  • @game-op8up
    @game-op8up Před rokem +3

    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. ✌

  • @infinitudedc
    @infinitudedc Před rokem +7

    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!

  • @fatihdemirkan4906
    @fatihdemirkan4906 Před rokem +3

    Perfect match! When you battle with each other, we both learn more css and get fun times. Thanks man!

  • @TheCocoaDaddy
    @TheCocoaDaddy Před 6 měsíci

    Love it! I'm impressed with your "on-demand" CSS skills! Thanks for posting!

  • @BenniK88
    @BenniK88 Před rokem

    These challenges are really great props to both of you. It’s about the good spirit and joy! 👏🏾

  • @AdamGaffney96
    @AdamGaffney96 Před rokem +2

    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.

  • @anush8
    @anush8 Před rokem +5

    Hey Kyle! Long time fan.
    Was yelling "Background color Kyle, the background color" at the end. Loved the video and the awesome thumbnail.

  • @jackcollazo
    @jackcollazo Před rokem

    These intelligent and civil battles are great to watch. Thank you!

  • @PedroNogueiranunes
    @PedroNogueiranunes Před rokem

    I'm loving these, bring them more!

  • @Gamer-gw6nj
    @Gamer-gw6nj Před rokem

    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.

  • @gislo
    @gislo Před rokem +7

    This was very fun to watch, now do 10 more :)

  • @theisoj
    @theisoj Před rokem +1

    Best video ever! Thanks Kyle!

  • @MehediHasan-zg6li
    @MehediHasan-zg6li Před rokem

    You two are amazing. I enjoyed it very much

  • @MusicEffekt
    @MusicEffekt Před rokem +1

    you guys both rock. Thanks.

  • @KylePrinsloo
    @KylePrinsloo Před rokem +3

    Haha I love these videos man 🙂😂 nice one KK!

  • @miteshharmalkar3089
    @miteshharmalkar3089 Před rokem

    Damn! Worked like a charm! Thank you soooo much!

  • @ankita1420
    @ankita1420 Před rokem +11

    Thanks to this channel for making my web dev journey interesting! I really got bored learning it in my college.

  • @jimmyj.6792
    @jimmyj.6792 Před rokem

    Really nice battle 👏 congrats both of you 👍

  • @gothparadigm
    @gothparadigm Před rokem

    yess. another rematch between you two!! i perked up seeing this upload. omg. by the way, the thumbnail looks rad.

  • @PondersTech
    @PondersTech Před 9 měsíci

    This looked like so much fun!

  • @widespectrumcreators4691
    @widespectrumcreators4691 Před 4 měsíci

    Both of you rockssss!!👍👍👍👍👍

  • @c0mplicated
    @c0mplicated Před rokem +1

    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

  • @faysal1991
    @faysal1991 Před rokem

    great video dude

  • @antonioroxas3462
    @antonioroxas3462 Před rokem

    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 .

  • @jennifershen4273
    @jennifershen4273 Před rokem

    This is so fun! Thanks to you both!

  • @TheMetalMag
    @TheMetalMag Před rokem

    u guys are funny n so good! nice to see you doing this

  • @zarghamaijaz5933
    @zarghamaijaz5933 Před rokem

    I learned a lot seeing you guys battle

  • @keencake_
    @keencake_ Před rokem

    BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!

  • @mykalimba
    @mykalimba Před rokem +53

    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.

    • @mvrius2924
      @mvrius2924 Před rokem +9

      Yes. When I'm doing a challenge, if I need to "hard code" the value, I know that something's not right

  • @yesm4n
    @yesm4n Před rokem

    My goodness, that was a close one. Can't wait to see the next ones!

  • @spaceghost7807
    @spaceghost7807 Před rokem

    This was still an amazing vid to watch. And the Liar Liar clip is perfectly utilized.

  • @renegade5942
    @renegade5942 Před rokem

    i just watched an hour ago your first battle and now you released the second, this was destined for me xD

  • @beepst
    @beepst Před rokem +1

    I'd love this to be a regular series.

  • @mevanscodes
    @mevanscodes Před rokem

    This was super dope !

  • @slemansafiah8588
    @slemansafiah8588 Před rokem

    best series ever brooo we need more challenges

  • @adrianpop6521
    @adrianpop6521 Před rokem

    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

  • @shivamsahil3660
    @shivamsahil3660 Před rokem

    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!

  • @aman_singh__
    @aman_singh__ Před rokem

    I always love these css battles

  • @sebastianwolfgang8189

    The thumbnail is just amazing

  • @faizanahmed9304
    @faizanahmed9304 Před rokem +29

    Congratulations to both of you! I learned a lot.

  • @kushagragour
    @kushagragour Před rokem

    Love that thumbnail!!!! 🔥🔥🙌🏼⚔

  • @zugdsbtngizudsgbnudsdsoiu

    If you want to do XY-centering the simplest solution is to just display:grid; place-items: center; on the wrapper.

  • @oncetherewasausernamesolon9234

    thumbnail is goated

  • @george003
    @george003 Před rokem

    this was exciting i would like to see more battles i really like cssbattles both are great

  • @johnkupa8885
    @johnkupa8885 Před rokem

    Thank you so much!!! It did work and took less than 5 minutes!

  • @khighabisi6605
    @khighabisi6605 Před rokem

    These are my favourites! 😁unlucky bro. 2 - 1 to Kevin. Can't wait to see you close that deficit.

  • @ukaszpospiech3817
    @ukaszpospiech3817 Před rokem

    Wow I've just discovered CSS Battle - thanks it's cool! I can practice CSS hands-on, similarly like I practice JS on Codewars.

  • @vinayKumar-ot3ic
    @vinayKumar-ot3ic Před rokem

    i wish u created a playlist for angular or next js or some block chain development..Love ur channel

  • @penguinxed
    @penguinxed Před rokem +1

    if I were to code that, It will surely take me hours lol, great and fun battle as usual mates! :)

  • @TheXuism
    @TheXuism Před rokem

    good job, dude!

  • @jiniteam3390
    @jiniteam3390 Před rokem

    very nice to have you seen working

  • @naveenshankar745
    @naveenshankar745 Před rokem

    Really Nice video

  • @weirdmath119
    @weirdmath119 Před rokem

    You are simply awesome..

  • @Clasped003
    @Clasped003 Před rokem

    Lmao the thumbnails you guys make for these, fantastic . . .

  • @elliotheath9408
    @elliotheath9408 Před rokem

    I love seeing human Kyle, your other videos are too perfect 🤣

  • @unpatitoRU
    @unpatitoRU Před rokem

    At first glance Kevin looks like is making the T position 😂😂 that brought me 'Shrek's Odyssey' vibes.

  • @antonioharris125
    @antonioharris125 Před rokem

    that was dope!

  • @rajgopal2513
    @rajgopal2513 Před rokem

    Wow i was just thinking about it like 2 days ago and now here is the 3rd round...

  • @neo_lowfade3618
    @neo_lowfade3618 Před rokem

    These Css battles rock 🎸

  • @knight_kazul
    @knight_kazul Před rokem

    I LOVE the thumbnail.

  • @user-sy7lm6lw8i
    @user-sy7lm6lw8i Před rokem +1

    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

  • @putude
    @putude Před rokem

    whatever win or lose, You and Kevin are my best teacher in the world! 🙂🤗

  • @FreeSkypeGenerator1
    @FreeSkypeGenerator1 Před rokem +9

    Woah
    You both are winners and so we are watching you n learning 😅
    Thanks need these more

  • @abdulsalphan
    @abdulsalphan Před rokem

    I love this. 😂❤️

  • @teprox7690
    @teprox7690 Před 8 měsíci

    You wanted to do it perfectly. Sometimes that's not the best way. You are not alone with this.

  • @elitas8545
    @elitas8545 Před rokem

    Should have displayed the box as block and used a margin Auto to centre the box, but other wise solid 👌👌

  • @westernpigeon
    @westernpigeon Před rokem

    haha its always the most simplest things that we dont think of that stumps and frustrates us developers. great vid!

  • @DarianBenam
    @DarianBenam Před rokem

    LOL at the transition at 0:26. 🤣

  • @estebandiaz1698
    @estebandiaz1698 Před rokem

    Great!

  • @antonarbus
    @antonarbus Před rokem

    Wow. Amazingly fast. I would need several days for this task with heavy googling.

  • @snansahmarov1524
    @snansahmarov1524 Před rokem

    You are king for me. Not only in Css. Also in JS, React, Node.js...

  • @hemilbharkhada3119
    @hemilbharkhada3119 Před rokem +1

    Nice bro

  • @riteshkumar0408
    @riteshkumar0408 Před rokem

    that is very exciting.

  • @dxdiag9675
    @dxdiag9675 Před rokem

    more content about css battle i liked it as frontend dev

  • @xycho6380
    @xycho6380 Před rokem

    Make this a weekly challenge its so interesting

  • @WaddupBoi
    @WaddupBoi Před rokem

    I love this

  • @ZachMcCordProg
    @ZachMcCordProg Před rokem

    As a guitar player and web developer, I appreciate the Jackson in the background lol

  • @abheetsinghisher217
    @abheetsinghisher217 Před rokem +2

    All hail "Kyle" the king of WebDev

  • @deutiafrank9395
    @deutiafrank9395 Před rokem

    That was funny 🤣🤣🤣🤣. You was a little bit stressed

  • @omarsaad361
    @omarsaad361 Před rokem

    I enjoyed this

  • @sameertuladhar9370
    @sameertuladhar9370 Před rokem

    That's some ballsy move to submit with white bg 10:02

  • @omodiagbejoshua9167
    @omodiagbejoshua9167 Před rokem

    This was fun.

  • @alkhemist6631
    @alkhemist6631 Před rokem

    Good to know I did this challenge some months back. I got a 100% match

  • @jorgegamboa5408
    @jorgegamboa5408 Před 10 měsíci

    I mean , nobody beats these dudes 🤣 great job!!!!

  • @hammerbg5816
    @hammerbg5816 Před rokem

    funny how i was thinking of your last battle just today

  • @guntejghuman3464
    @guntejghuman3464 Před rokem

    I wish you would’ve tried more battles today

  • @QwDragon
    @QwDragon Před rokem

    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.

  • @metinkoca1421
    @metinkoca1421 Před rokem

    if you press shift you can also look from the bottom up.

  • @dilanbesong1877
    @dilanbesong1877 Před rokem

    This was wonderful, please sir can you make a video on how to auto delete documents in mongodb using express.

  • @Prokudak
    @Prokudak Před rokem

    My two favourite CSS youtubers.

  • @rugvedraikwar2082
    @rugvedraikwar2082 Před rokem

    very close great job