I've been challenged to a CSS BATTLE by Web Dev Simplified

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ย. 2024

ความคิดเห็น • 923

  • @grmancool
    @grmancool 3 ปีที่แล้ว +1820

    Kevin: so if I use the box-shadow recursively I can create the necessary effect by only using one div
    Kyle: LET'S STACK 19 DIVS ON TOP OF EACH OTHER

    • @samueltetteh5080
      @samueltetteh5080 3 ปีที่แล้ว +19

      haha love both

    • @AnthonyR007
      @AnthonyR007 3 ปีที่แล้ว +14

      I read box-shadow as shadow box the first 2 times I read this comment, I kept thinking of the movie Real Steal

    • @alcejaylos.4257
      @alcejaylos.4257 3 ปีที่แล้ว +1

      @@AnthonyR007 Loved that, had the scene where max did three consecutive right hooks embedded on my mind

    • @lapluong928
      @lapluong928 3 ปีที่แล้ว +1

      OK men th-cam.com/video/U_a2WPcukCs/w-d-xo.html

    • @procrastinator24
      @procrastinator24 2 ปีที่แล้ว +4

      That made me laugh quite hard :D

  • @SirXtC
    @SirXtC 3 ปีที่แล้ว +2667

    ima start using box-shadow for literally everything

    • @mitanche1
      @mitanche1 3 ปีที่แล้ว +108

      Totally! I had no idea I could use it like that, so thanks a lot to Kevin!

    • @senorzed6483
      @senorzed6483 3 ปีที่แล้ว +11

      Me too lmao; I didn't think you could use a mix of them like that; that's really great

    • @marksuuuu
      @marksuuuu 3 ปีที่แล้ว +11

      i like how kevin use box-shadow , i learn alot 😂🥰

    • @surajborade6741
      @surajborade6741 3 ปีที่แล้ว +2

      Timestamp?

    • @SirXtC
      @SirXtC 3 ปีที่แล้ว +5

      @@surajborade6741 try 6:00, he used it in all challenges I believe

  • @paracosm-cc
    @paracosm-cc 3 ปีที่แล้ว +2482

    Next video: "How to build a fully responsive website using nothing but the body element and 4000 box shadows"

  • @Steveeland
    @Steveeland 3 ปีที่แล้ว +160

    The best part about this battle is that you kept your mottos: the guy who wants to teach things simplified used a sort of 'simple' approach, while the other guy who wants to make the web look cool uses code that looks really cool. Thanks guys!

    • @gabrielavila3224
      @gabrielavila3224 3 ปีที่แล้ว +5

      couldn't agree moreee. thumb up

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @drakecoleman9364
    @drakecoleman9364 3 ปีที่แล้ว +511

    I love these challenges. Makes me feel great seeing pros having similar issues as me

    • @conniebarrick6483
      @conniebarrick6483 2 ปีที่แล้ว +1

      I do, too, and suppose to be studying my coding, but I can't help, this, I love these videos. lo y u Con

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

    • @licokr
      @licokr 2 ปีที่แล้ว

      me feel the same!

    • @ZLKYass
      @ZLKYass 2 ปีที่แล้ว +7

      in 10 minutes while I am struggling all the day long XD

    • @ggwp185
      @ggwp185 ปีที่แล้ว +1

      @chadIG159 someone's mad

  • @giambaJ
    @giambaJ 3 ปีที่แล้ว +252

    "box-shadow" should be the "hello world" equivalent of CSS

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @SwatiPatelnz
    @SwatiPatelnz 3 ปีที่แล้ว +101

    20:33 - I had to replay this a few times, it was so impressive the way he got that eye shape thing spot on, starting with a square!

    • @rajeevranjansrivastava2473
      @rajeevranjansrivastava2473 2 ปีที่แล้ว +9

      You should see his dance as well LOL 🤣

    • @schwetang
      @schwetang 2 ปีที่แล้ว +3

      The Designer in him was activated.

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

    • @wlockuz4467
      @wlockuz4467 2 ปีที่แล้ว +1

      Even Kevin himself was surprised haha

    • @BliitzPint
      @BliitzPint ปีที่แล้ว +1

      So did I, a square turned by 45 degrees and a border radius of 50% at the top and at the bottom.

  • @abhishek.rathore
    @abhishek.rathore 3 ปีที่แล้ว +127

    I love what you do. You actually understand CSS and thats what makes me wanna do that too. Thanks. Keep up the good work. 🔥

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @hanscesa5678
    @hanscesa5678 3 ปีที่แล้ว +271

    I literally learned something from this. I think you can guess it too - it's the box-shadow!

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @doktordaxter
    @doktordaxter 3 ปีที่แล้ว +245

    Watching Kevin is like: "What the heck is he doing?" and then: "Oooooh...! WOW!"

    • @AbdulRahman-er3dz
      @AbdulRahman-er3dz 3 ปีที่แล้ว +1

      True...

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

    • @itzyuzuruclips
      @itzyuzuruclips 2 ปีที่แล้ว

      Lmao

  • @SilviuBurceaDev
    @SilviuBurceaDev 3 ปีที่แล้ว +167

    box-shadow is virtually 80% of those challenges, ha ha. Kidding, but box-shadow is a neat trick, thanks Kevin for showing us its power. I also loved how you approached the 2nd challenge with border-radius and rotate, you nailed it right from the start :)

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

    • @lambmaster
      @lambmaster 2 ปีที่แล้ว +4

      When you have a hammer, everything looks like a box shadow :D

  • @usmansohail8907
    @usmansohail8907 3 ปีที่แล้ว +44

    web dev simplified: you would loose this challenge 100%.
    Kevin: Hold my box-shadow.

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @MegaArti2000
    @MegaArti2000 3 ปีที่แล้ว +620

    03:07 me whenever I try to understand CSS logic

    • @boggeshzahim3713
      @boggeshzahim3713 3 ปีที่แล้ว +71

      Me as a fullstack developer when I have to style something

    • @randomvideos5820
      @randomvideos5820 3 ปีที่แล้ว +1

      @@boggeshzahim3713 fact

    • @dualShockRK98
      @dualShockRK98 3 ปีที่แล้ว +1

      😂😂😂😂😂

    • @codewithdoge
      @codewithdoge 3 ปีที่แล้ว +6

      Till now i thought it happend with me only now I'm happy

    • @housemajaliwa
      @housemajaliwa 3 ปีที่แล้ว +35

      1000px does it for me always
      if nothing happens after that, then something is wrong

  • @ChickyMelly
    @ChickyMelly 3 ปีที่แล้ว +12

    I really love watching these ones! It would be really cool to have you guys talk about your approaches together either after each battle or at the end. Love to see it. Kevin you are the best!

  • @10YardCricket
    @10YardCricket 3 ปีที่แล้ว +37

    I have to admit the way Kevin used the box-shadow in the first challenge really makes him the CSS king. This technique already solved 20% of my issues.

  • @Morrile1
    @Morrile1 3 ปีที่แล้ว +57

    Very interesting to watch how other people write their code, and great methodology for those learning on achieving what looks as hard/impossible at first.

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @colindante5164
    @colindante5164 3 ปีที่แล้ว +5

    Regardless of who the winner is, it's a real treat to watch how they approach a given challenge and work their way around it. I've learnt a lot watching you'll perform. Thankyou much K&K ))

  • @Lopeziraburu
    @Lopeziraburu 3 ปีที่แล้ว +62

    That little "nailed" dance was precious

  • @mimoduocss
    @mimoduocss 3 ปีที่แล้ว +6

    I love how clear and concise the both of you are at describing your thought processes! And the transitions between battles was so sleek. Nice work all around both of you! If you ever want a challenge, I'll be waiting 😉

  • @mykalimba
    @mykalimba 3 ปีที่แล้ว +296

    0:54 Kyle calling a speaker a "microphone" -- not off to a very good start.

    • @PascalxSome
      @PascalxSome 3 ปีที่แล้ว +10

      A Speaker is a microphone, and vice-versa.

    • @UnifiedFriends
      @UnifiedFriends 3 ปีที่แล้ว +10

      @@PascalxSome Maybe in the past, but if you speak in a fairly modern speaker.
      No one will answer you, not even the level meter.
      Likewise, your microphone will not delight you with autotune music.
      When it's in the speaker jack.
      But I guess, you mean the general way it works. 😁

    • @modeal317
      @modeal317 3 ปีที่แล้ว +3

      @@PascalxSome one's an output and the other's an input device, tf you saying.

    • @PascalxSome
      @PascalxSome 3 ปีที่แล้ว +11

      @@modeal317 no. at the physical level, every speaker is a microphone and vice versa.

    • @Nick_Bc
      @Nick_Bc 3 ปีที่แล้ว +1

      @@PascalxSome mind explaining that a bit more? I'm really curious about what you mean

  • @waffleskeppy4498
    @waffleskeppy4498 3 ปีที่แล้ว +29

    Me: PLEASE JUST CREATE A DIV THEN USE BORDER RADIUS ON THE 2 CORNERS AND THEN ROTATE IT.
    Kevin: gotchu fam

    • @goat5249
      @goat5249 3 ปีที่แล้ว +1

      Me: How'd they get those triangles to line up so well with that circle?
      Kyle: I'm not sure, fam.

    • @lapluong928
      @lapluong928 3 ปีที่แล้ว

      OK men th-cam.com/video/U_a2WPcukCs/w-d-xo.html

  • @leolandotan1020
    @leolandotan1020 3 ปีที่แล้ว +50

    Kyle: "99.9% that's painful" LOL

    • @cilantrin4403
      @cilantrin4403 3 ปีที่แล้ว +1

      It is, because he's going against the king of css, so knowing that just because of a 0.1 he might get a loss or a tie he says it's painful

    • @lapluong928
      @lapluong928 3 ปีที่แล้ว

      OK men th-cam.com/video/kBZW7VRaDEY/w-d-xo.html

  • @ZahhibbDev
    @ZahhibbDev 3 ปีที่แล้ว +3

    What cool things I learned from this:
    - Attribute selectors (never used them before, but heard of it)
    - Place-items (never seen or heard of it, quite neat)
    - Box-shadow is too powerful!

  • @mirkosedda3196
    @mirkosedda3196 3 ปีที่แล้ว +40

    I would watch a thousand of theseeee!! Also pull up dev ed! Would be hilarious too!

    • @drakecoleman9364
      @drakecoleman9364 3 ปีที่แล้ว +2

      I totally want to see a Dev Ed in one of these. Maybe a all 3 at once

    • @lapluong928
      @lapluong928 3 ปีที่แล้ว

      OK men th-cam.com/video/_V8Rcv5MEL0/w-d-xo.html

  • @andrewdillard5961
    @andrewdillard5961 3 ปีที่แล้ว +30

    I just went through Kevin's 21 Day Responsive Layouts Challenge and I'm 2/3 of the way through Kyle's CSS course. They are both amazing teachers. Watching them go at it was making me geek out lol we are going to need a round 3 of course...

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

    • @abhishekfarande9672
      @abhishekfarande9672 ปีที่แล้ว +1

      21 day is it challenge on TH-cam playlist or something else ?

  • @soumyajitdey5720
    @soumyajitdey5720 3 ปีที่แล้ว +5

    Even though Kevin lost, those box-shadow tricks were sick! 🔥 I'll definitely start using box shadows more

  • @avananana
    @avananana 3 ปีที่แล้ว +105

    I can tell that the obvious difference is that Kyle's style is very beginner friendly whilst Kevin's style is much more elegant, neither is wrong, but I really do like Kevin's way of writing CSS here.

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @nitram_nosnibor
    @nitram_nosnibor 3 ปีที่แล้ว +4

    Oh my god I had to pause halfway for a break, this was intense ha ha ha. It's incredible to see two people who are such geniuses with CSS approach things differently. When Kevin nailed the background shape for the eye, I stopped biting my nails and shouted YESSSS! ha ha ha - Also I noticed that Kevin can't stop being a teacher, even when he is in a challenge. I learn so much from them!

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @sayChristIsKing
    @sayChristIsKing 3 ปีที่แล้ว +28

    "Why are they so far apart?!?" (-Kevin)
    every goddam time dude

  • @delulu6969
    @delulu6969 3 ปีที่แล้ว +2

    Mine within 10 mins but ran on minify of course:
    Target #65: 549 chars
    Target #16: 258 chars
    Target #44: 278 chars
    After I watched your past CSS Battle on last Tuesday, I was hooked! It feels good when you entered the top 100.XD

  • @chetranqui
    @chetranqui 3 ปีที่แล้ว +3

    Concedes the win! What a gentleman!
    Also: seeing your approach to cssbattle makes me want to learn box-shadow.

  • @JC-ig2vd
    @JC-ig2vd ปีที่แล้ว +1

    As a first-year CS student, this is very inspiring. I can learn while watching you guys into css battle. More battles to come po.

  • @MrQuickLine
    @MrQuickLine 3 ปีที่แล้ว +6

    Maybe it's just the pressure of the 10 minutes, but I groaned when you chose to use IDs to save time. Potential specificity issues as well not being able to remember which is which! I'd love to fight you guys in this sometime! Haha.

  • @BasicMike
    @BasicMike 3 ปีที่แล้ว +1

    ** Best HTML/CSS3 How-To Video Yet. ** Really enjoyed this video. Not only did I watch two masters employ their vast knowledge, but totally enjoyed watching you both tear out your hair trying to come up with the answer. I've been dipping into CSS3 over the last few years, not serious about it until I started watching you and Kyle. But, despite all the effort, your videos put into understanding various elements and how to control them, this video showed both the how and application of when to use what knowledge. Also, I found it fascinating - to borrow from Mr. Spock - to see the different approaches. You have an eye for the aesthetics and Kyle is more mechanically/structure oriented. It showed me the many approaches programmers can use and that there is no wrong way to find the right answer. BTW: after watching y'all replicate the speaker and soundwaves I decided to give it a try too. I came up with a slightly different answer ... after ten hours.

  • @anonymouscoder3557
    @anonymouscoder3557 3 ปีที่แล้ว +4

    More these kinds of content are needed, so we can learn different approaches to solve problems.

  • @licokr
    @licokr 2 ปีที่แล้ว +1

    It's really fun lol 20:33, I love that guy! that's hilarious! and it's really interesting to see how you guys are approaching the problems.(An element with box-shadow and separate elements with named class styles) Thank you for the good video!

  • @DmitryOlyenyov
    @DmitryOlyenyov 3 ปีที่แล้ว +22

    I can't get my head around positioning in CSS. Even in this video - everything is jumping around randomly until you get all the magic spell correct. "It's leviOsa, not levioSA!".

  • @LunaLovelyy
    @LunaLovelyy 3 ปีที่แล้ว +1

    the battle between King of CSS against the King Of Web Dev. I am fan of both. and these battles viewers are the winner who learn how to approach designing and how to plan them. great work both of you.

  • @jonlothar6126
    @jonlothar6126 3 ปีที่แล้ว +45

    One word: Awesome!
    Like for more Kevin & Kyle collabs in the Near Future!

  • @mrx-qi8th
    @mrx-qi8th 3 ปีที่แล้ว +1

    Nice,very nice and creative to see what u did with box-shadow. Super creative, can't say enough,and this matches are really fun and are worth watching,keep doing these. Kevin is very talented and very confident to convey css lessons

  • @steven5712
    @steven5712 3 ปีที่แล้ว +3

    I have no idea box-shadow could be used like that. That was brilliant. Different approach from two CSS masters. Nice

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @n0xter95
    @n0xter95 3 ปีที่แล้ว +2

    I feel like, after getting into responsive things I knew pretty much a lot of CSS, but the more I look the more I am impressed on how little I know
    amazed buy this vid

  • @ez-it-solutions9128
    @ez-it-solutions9128 3 ปีที่แล้ว +3

    I love watching these video's -> You guys are so talented and it inspires others to practice more!
    I completely understand the pressure of the timer... but the logic behind each of your coding skills is great!
    I love the approach that each of you takes and how each of you decide what is more important, for the sake of TIME!
    I think all-in-all, Kevin takes a better approach but that's debatable at times.
    Keep up the great work guys!!!

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @donaldabanoub6382
    @donaldabanoub6382 3 ปีที่แล้ว +1

    I like your way of approaching things, I've seen your video when tried css battle live and once i saw that speaker the shadow approach snapped into my head, you help me think in a better way in css :)

  • @jacksonchan9774
    @jacksonchan9774 3 ปีที่แล้ว +3

    I even didn't know you two guys knew each other, I am the fans of both of you.😊

  • @dannyr2976
    @dannyr2976 3 ปีที่แล้ว +1

    That was so geekily COOL! Loved every minute of it. So look forward to seeing much, much more.

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @profstat1970
    @profstat1970 3 ปีที่แล้ว +22

    Duude, why I doubt when KYle saying "IT was ton of FUN!"
    -- No emotion on his face, my boyy

    • @patrickcarter1820
      @patrickcarter1820 3 ปีที่แล้ว +6

      The only way he could make the web this simple is that he is a ROBOT?? KYLE ROBOT CONFIRMED!!!

    • @lapluong928
      @lapluong928 3 ปีที่แล้ว

      OK men th-cam.com/video/_V8Rcv5MEL0/w-d-xo.html

    • @advikaarya1010
      @advikaarya1010 3 ปีที่แล้ว

      @@lapluong928 no

  • @programmercouple
    @programmercouple 3 ปีที่แล้ว +1

    This video is almost addictive!
    You guys are competing with each other and I am like: "I'm learning so much".

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +2

      Really glad that you enjoyed it!

  • @isaac2986
    @isaac2986 3 ปีที่แล้ว +4

    i like how close they are in skill, maybe be rivals since you alternated in wins for each challenge and have now a 1-1 record in who won in each of your videos!!
    Also, have a final round that is the hardest out of all of them with maybe a confusing picture or have to code for a specific look without the colours given to you but have all of them available to make like the mona lisa or something with the time being 20-30 mins

  • @olumorsotnas
    @olumorsotnas ปีที่แล้ว +1

    It's amazing to see you guys in battle!

  • @SVGc1993
    @SVGc1993 3 ปีที่แล้ว +7

    I was the whole video predicting steps aloud, but the multiple box-shadow trick made me open my eyes widely! Beautiful!

    • @int0therain44
      @int0therain44 3 ปีที่แล้ว

      Hi Sergio. What " *>*" means here ? :
      Google that with : Solution of CSS Battle #11 - Overflow Target #53 - Pastel Logo

    • @SVGc1993
      @SVGc1993 3 ปีที่แล้ว

      @@int0therain44 what did I just read?

  • @saeedzargar4458
    @saeedzargar4458 3 ปีที่แล้ว +2

    I am learning so much from you guys! Thanks a lot!

  • @fleexie
    @fleexie 3 ปีที่แล้ว +20

    You both did insanely well on that last one.
    Kyle may have got it faster, but you still used an interesting approach to it. You are both winners.
    Both you and Kyle are great coders, and I have learned much from both of you.
    Keep up the fantastic work Kevin. Btw congrats on the 200k subs. You deserve it, or actually you deserve much more.

  • @Rocadamis
    @Rocadamis 3 ปีที่แล้ว +1

    Your CSS approach was more elegant and clever in regards to all the battles. Kyle's circles in the first battle weren't right at all (yours were perfect, just not placed right). In the second battle, your use of the transform was so smart. In the last battle, the box-shadow technique was brilliant. Great video!

  • @shift-happens
    @shift-happens 3 ปีที่แล้ว +21

    20:33 perfect display of this magical css moment :)

    • @thekwoka4707
      @thekwoka4707 3 ปีที่แล้ว +1

      It was the most obvious solution, but it's nice when they get there

    • @chunmaroo
      @chunmaroo 3 ปีที่แล้ว

      What's the difference using between deg and turn in the transform rotate? I often use like, rotate(50deg), what's the difference when 50turn?

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @pedroagma4417
    @pedroagma4417 3 ปีที่แล้ว

    I am so new to CSS and I am looking at the first challenge to draw a speaker in CSS, and I can't stop watching, nor can I stop asking myself: "Why, but why!?" haha. Thank you!

  • @matejfoltyn
    @matejfoltyn 3 ปีที่แล้ว +12

    The last one was NOT A TIE! That's why there's a score as well as the percentage. Kevin brought it home a bit closer!

    • @advikaarya1010
      @advikaarya1010 3 ปีที่แล้ว

      Yeah but kyle won ez

    • @sanjarproductions
      @sanjarproductions 2 ปีที่แล้ว

      Hey I want to make Programmers battle ( could you subscribe In order to don't leave video ) Thank You!

  • @e1lg537
    @e1lg537 3 ปีที่แล้ว +2

    Ngl this is really fun to watch if you have just the right background. xD

  • @mohammedkhushabalam7555
    @mohammedkhushabalam7555 3 ปีที่แล้ว +7

    People get to learn so much just by watching this 💯

  • @breadenthusiast
    @breadenthusiast 2 ปีที่แล้ว

    This was so cool! Since I've started my coding journey I've focused more on the back end side of things, and was looking for ways to improve my css skills. I didn't know about CSS battle up until now! Thank you, this was exactly what I was looking for!

  • @rodrigomunoz6978
    @rodrigomunoz6978 2 ปีที่แล้ว +116

    Hello, I'm new to Bitcoin trade and I've been making huge losses but recently I see a lot of people earning from it. please can someone tell me what I'm doing wrong?

    • @gratisgratis7275
      @gratisgratis7275 2 ปีที่แล้ว

      All you need now is a professional trader else you will continue making losses

    • @washingtonbilly2512
      @washingtonbilly2512 2 ปีที่แล้ว

      That is true, you need an expert broker and account manager to make good profit from Bitcoin trade

    • @heltonmargaret4934
      @heltonmargaret4934 2 ปีที่แล้ว

      As a beginner who don't understand how Bitcoin trade really works and you really want to make profit from it. I will advise you to first start working with a professional broker

    • @heltonmargaret4934
      @heltonmargaret4934 2 ปีที่แล้ว

      @Williams Michael I highly recommend Mrs Jennifer Allen, she is my current trader and her strategies are working perfectly

    • @charlottemia9362
      @charlottemia9362 2 ปีที่แล้ว

      @@heltonmargaret4934 Wow I'm amazed you mentioned Mrs Jennifer Allen, she is the best and her strategies works like magic. I've
      been making over 300% of my investment weekly since I started investing with $5000

  • @apacha2004
    @apacha2004 3 ปีที่แล้ว +1

    Kevin: i hope Kyle is doing better!
    kyle: i hope kevin somehow failed!

  • @inesborges4857
    @inesborges4857 3 ปีที่แล้ว +4

    I nailed it. That was genious Kevin

  • @ChrisMochinskiMusic
    @ChrisMochinskiMusic 2 ปีที่แล้ว +2

    I’m gonna have to give these a shot. I’m convinced I could rock them. I’m sure I can’t actually. Gotta get on y’all’s level!!

  • @Akumetsu02
    @Akumetsu02 3 ปีที่แล้ว +8

    I demand nerd olympics to be a thing.... and this needs to be there! Together with competitive Tetris. SOMEONE MAKE IT HAPPEN, NOW! :D

  • @skyletwings5711
    @skyletwings5711 3 ปีที่แล้ว

    So comfy, to just sit back and learn from the mistakes and success of others. Blessings to you, Kevin. And yes, I'll definitely use box-shadow wherever possible, now. :D

  • @rafatulalam8677
    @rafatulalam8677 3 ปีที่แล้ว +12

    Want CSS battle between Kevin and "Coder Coder"

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +6

      Planning some stuff with her, but she's a bit busy right now so it might be a bit ☺️

  • @krismatic_
    @krismatic_ 2 ปีที่แล้ว +1

    Thanks for making this video. As someone who is green to coding right now, I see these 'classes' as ''layers', and the adjustments you're making to the 'layers' as edits to their basic attributes, in the same way such would be done in a video or photo editor, albeit in a more bare-bones and technical way. So in a way, coding in CSS feels like an inefficient photo editor, albeit out of necessity I'm sure.

  • @HassanAli-gu6bs
    @HassanAli-gu6bs 3 ปีที่แล้ว +23

    i think you won the last battle, you've got a higher score than kayle,, he got 595.64 and you got 596.1, who else noticed that

  • @facundocorradini
    @facundocorradini 3 ปีที่แล้ว +1

    fair contest! It's great to see how other people would face the challenges. I would've totally went with stepped radial gradients for the first two. Loved the use of box-shadows in your third one.

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว

      Funny how my mind didn't even go to gradients at all, and now it'll probably be my go-to the next time I do one, lol.
      Always fun seeing different approaches to problems :D

    • @facundocorradini
      @facundocorradini 3 ปีที่แล้ว

      @@KevinPowell just tried it. Works, but I get jagged lines... not pretty

  • @SeanGoresht
    @SeanGoresht 3 ปีที่แล้ว +10

    4:58 I'm thinking why not use radial-gradient to do the rings in one fell swoop 🤔

    • @viro0os904
      @viro0os904 2 ปีที่แล้ว

      You’re a genius m8!

  • @adrianbogacki2127
    @adrianbogacki2127 3 ปีที่แล้ว

    This is nice seeing that there is no wrong way doing things. It’s just depends on a approach that someone takes. Nice video.

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว

      Glad you liked the video 😃

  • @prudhvichinnam1488
    @prudhvichinnam1488 3 ปีที่แล้ว +8

    We want bradtraversy,netninja

    • @kieran1990able
      @kieran1990able 3 ปีที่แล้ว +1

      @@internet4543 Probably you haven't checked his other videos. He does flex box and grid css as well.

  • @andycascade
    @andycascade 3 ปีที่แล้ว +1

    Love it! More battles! :) Or challenges no matter with or without opponent.

  • @lucario4399
    @lucario4399 3 ปีที่แล้ว +3

    we want a tye break , really learned alot from this video different approach for similar problem ,great

  • @wolverine9632
    @wolverine9632 3 ปีที่แล้ว

    Kevin: adds 7 attributes before seeing what's even happening
    Kyle: red

  • @ahmedosama7632
    @ahmedosama7632 3 ปีที่แล้ว +5

    Before watching, I think you beated him again :)

    • @squ34ky
      @squ34ky 3 ปีที่แล้ว

      If you had bet on it, you would have lost.

  • @paologera
    @paologera 3 ปีที่แล้ว

    I have enjoyed very much seeing you two battle. Very nice! Thanks!

  • @deidyomega
    @deidyomega 3 ปีที่แล้ว +3

    I think you should score it by percent avged:
    R1: 78.2 v 93.5
    R2: 100 v 92.3
    R3: 99.9 v 99.9
    ===========
    92.7 v 95.2
    He wins, and its more "fair" for future battles.

  • @kencroker6206
    @kencroker6206 3 ปีที่แล้ว

    This was so much fun to watch! Congrats to both of you for figuring out those challenging problems. I never knew how powerful the box-shadow property was until I watched this video.
    Also it'd be awesome if people started hosting a CSS World Championship the way they host the FIFA World Cup for football. I would definitely watch that!

  • @AbdoulAEBE
    @AbdoulAEBE 2 ปีที่แล้ว

    That battler was amazing , I follow both of you hehe you make me love css

  • @feng6062
    @feng6062 3 ปีที่แล้ว

    I’m new to css and this battle video is very inspiring and fun to watch!! The explanation of the thinking process is so helpful!

  • @Y09ii
    @Y09ii 3 ปีที่แล้ว

    I like your approach, the DOM elements are very few, mostly css, use most of the units that many of us do not know. And that box shadow idea is terrific. Too good. ❤️

  • @gocgaming1974
    @gocgaming1974 3 ปีที่แล้ว

    Just discover this channel, literally a gold mine. Learned so much from this, thank you very much!

  • @ononaokisama
    @ononaokisama 2 ปีที่แล้ว

    This was very interesting to see the different thought processes in approaching CSS

  • @Aezur20
    @Aezur20 3 ปีที่แล้ว

    Haha this video format is great! It's good watching them think under time pressure.

  • @milanbuli
    @milanbuli 3 ปีที่แล้ว +1

    That box shadow trick was so smart.

  • @1akirasan1
    @1akirasan1 3 ปีที่แล้ว

    The target from round 3 looks impossible to me. I tried to draw bars as 5 separate s, as one with gradient background, as one yellow with four yellow shadows - I could only get 99.9% but not 100%.

  • @jdlowen
    @jdlowen 2 ปีที่แล้ว +1

    that should be a T-shirt, "All is fair in love and war...and CSS"

  • @kennnnnnnnnnnnnnnnnn
    @kennnnnnnnnnnnnnnnnn 3 ปีที่แล้ว

    Just today I was banging my head stacking divs to achieve what could have been easily done with box-shadow. I'm glad I watched this.

  • @preetpatel292
    @preetpatel292 3 ปีที่แล้ว

    That box-shadow trick was fantastic, thanks Kevin I learnt something new 🤝

  • @wilsonisaac3806
    @wilsonisaac3806 ปีที่แล้ว +1

    Love you guys☺️
    Eyeball was spot on🥰

  • @mohammadabujaradeh6993
    @mohammadabujaradeh6993 3 ปีที่แล้ว

    Very enjoyable to watch . You both are amazing , the best part is the box shadow trick 👍👍

  • @liviubarburo
    @liviubarburo 3 ปีที่แล้ว

    I like very much this kinda of battle you guys are doing! I wait for another battle between you and Kyle. You don't need to change the opponent. You and Kyle have a good chemistry. ;)

  • @ArghyadebBandyopadhyay
    @ArghyadebBandyopadhyay 3 ปีที่แล้ว

    I unearthed your channel while looking for CSS animation tricks a month ago, and I'm watching all your videos one by one. The best thing you've taught me so far is this trick of drawing concentric circles with box-shadow.
    I also subscribed to Web Dev Simplified's channel while looking for infinite scroll implementations in React recently.
    Both of you are awesome. More collabs please.

  • @DreadKyller
    @DreadKyller 3 ปีที่แล้ว

    Kevin: Box Shadow EVERYWHERE
    Kyle: Divs EVERYWHERE

  • @khaledlebiar1530
    @khaledlebiar1530 3 ปีที่แล้ว

    Kevin, you nailed in box-shadow solution. you are truely the KING of CSS

  • @angelcross6050
    @angelcross6050 2 ปีที่แล้ว

    Its very comforting to know Im not the only one who just tries a bunch of random stuff when I get stuck lol.

  • @marcod.643
    @marcod.643 3 ปีที่แล้ว

    I was screaming at the monitor: "the left border!!!" 😁😂🤣.
    Meanwhile I did the challenges too while watching the video, but on vs-code (because of emmet).
    As always great video and great inspiration.

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +1

      So annoyed I didn't figure it out, lol

  • @galberts
    @galberts 3 ปีที่แล้ว

    Enjoyed! Please do more battles, it's fun to watch and we learn from you meanwhile