I Challenged The CSS King To A CSS Battle

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

ความคิดเห็น • 1.6K

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

    Was a ton of fun, and looking forward to a rematch!

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

      How is this comment 3 days ago, but the vid came out today the 19th

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

      3 days ago ? 😳

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

      I think the video was private and Kevin was granted a permission to comment it

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

      @@ahmaat19 makes sense.

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

      Poor Kevin typing semicolons after "display" when you wanted to use grid! The pressure! Haha

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

    Professors In College: Name your classes properly
    King of CSS: uhmmm.... inner-inner-inner

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

      I am in comment-comment-comment,,

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

      @@Rhidayah I reply-reply-reply

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

      aah-aah-aah

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

      ha-ha-ha

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

      lol-lol-lol

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

    To see two professionals struggle like that makes you think: maybe this whole developing-thing IS possible.

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

      Idk about everyone, but realizing this is crucial for some novice developers who keep beating themselves over nothing. It's okay to screw up and not have a clue about what to do. It's important not to lose confidence. The solution will be figured out eventually.

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

      @@vaguebrownfox You are right. It's also important to understand that you'll never quit learning. In the beginning I thought: "First I gonna learn CSS and when that's finished, I'll start with Javascript." That epiphany quickly came to an end as I realized the dimensions of each language. So cross-platform-learning became a thing.

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

      @@vaguebrownfox i wasted 6hours on making a navigationbar with "under-categories"
      Ended up not doing it cuz the tutorials i had were bad or not mobile-compitable
      AND IM STILL MOTIVATED

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

      @@vaguebrownfox thanks buddy needed that..i was fed up just because i was unable to fix some prob

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

      Impostor syndrome is real guys. You're all good, keep learning!

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

    Me trying to watch other people battle with code
    TH-cam ad : "So you wanna be a software engineer at Google"

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

      AlgoExpert io!

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

      🤣🤣🤣

    • @VishalGupta-nk4bw
      @VishalGupta-nk4bw 3 ปีที่แล้ว

      That's Googol tho.😂😂😂

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

      Google showed me a McCormick spice ad: “Back to the kitchen with you! Why are you thinking of coding?”😭🤣

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

      @@HeatherAlarcon no way 😂😂

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

    Kyle: "let's use a section to be more semantic"
    Kevin: "haha inner inner go brrll"

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

      So u watch Dani his jokes be poppij off lol 0_0

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

      @@upsurge5541 people - u cant just make stupid jokes
      dani-haha brr go brrrrr

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️..

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

      I am dying 🤣🤣

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

    Kevin: "I really enjoy CSS"
    Me: Still traumatized by it

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

      saaaaame ! had a css problem that messed me up , i solved it in a whole week lol
      had images that needed to be symmetrically displayed and equal in width and height and space between
      solved it finally with display grid-template-column(4,1fr)

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️..

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

    Definetly one of the best ways to learn is to watch people solving problems in realtime. Awesome content!

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

      True but the meaning of cssbattle is to write so close to nothing, so the fixes they show might not be optimal

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

      @@CodeZhifty have you seen some of the cssbattle answers? that shit is ridiculous and usually only applies to that exact image.

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

      I hate frontend

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

      @@supernova82 keeps getting recommended

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

      I agree 100%, while thinking about my own solution, I enjoyed this content

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

    27:31: Kevin put ";" instead of ":" after "place-items" that's why it didn't centered

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

      On the last element it shouldn't matter, I always thought

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

      @@tweschke3 It is about the syntax and yeah it did matter

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

      Oh yeah of course, i thought He Put a ":" at the end instead of a ";"

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

      my god I saw that and I was so uncomfortable... I was literally screaming "DUDE, you wrote a ; instead of a :

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

      @@emiljano1733 and he calls himself the CSS KING #jk

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

    Watching this totally clueless 👁👄👁

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

      Dev ed, Kevin Powell and Web dev simplified fans !!!!!!!!!!!!!!!

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

      All my favourite creators watching this 😊

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

      @@anuragsinghbam How cool is that, bro?

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

      I love dev ed...

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

      @@sodiumsulfur2779 That was really cool bro.

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

    I love seeing other devs go through the thought process in real time...thinking your on the right track and then the "Oh wait...this wont work, lets think about this..". The more scripted tutorials are always great but these videos are the inspiration to show that anyone can learn to dev with practice and many iterations. Great content!!

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

    yay! This was real fun to watch! Thanks for doing this you two! ^_^ Looking forward to seeing more CSS battles :D

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

      It was a ton of fun. I look forward to doing more and hopefully sucking less :P

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

      @@WebDevSimplified I wouldn't be so hard on yourself you did awesome!

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

      It is the real cssbattle devs? Why only 11 subs tho?

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

      @@awekeningbro1207 Yes, its the official one. We started our channel recently and there is not much content. So building up slowly. Please do subscribe us for awesome stuff incoming :)

    • @hassanali-yi4bu
      @hassanali-yi4bu 3 ปีที่แล้ว

      Lovely website pal

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

    Just got into css battles because of these videos. Watching you guys sometimes was painful, when both of you were overcomplicating things because you did not see what I did. So naturally I had to try it myself. And now i'm hooked...

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

    Tip:
    body {
    margin: 0;
    }

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

      I have a snippet I call CSS Reset that I always import at the start of each project's CSS files. It resets things like these all the way to some other personal annoyances like text-decoration: underline.

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

      tip:
      *{
      margin: 0;
      padding: 0;
      }

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

      bro amazing channel you have

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

      @@mansoorroeen5209 personally I feel it can change somerthing I dont want to if you'd use it in web development

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

      i know right is box-sizing: border-box; illegal here?

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

    You can see the moment Kevin loses confidence and starts to doubt himself. The pressure of competition isn't for everyone! Good job to both.

    • @Tenchi707
      @Tenchi707 ปีที่แล้ว

      I for one really hate it, like doing it my way

  • @THEBEST-lh6pq
    @THEBEST-lh6pq 3 ปีที่แล้ว +104

    27:40 - that one damned semi-column, can relate to it rather well lol

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

    border-radius: 0 50% 50% 50%;
    That was driving my crazy watching the last match

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

      Same but... border-radius:0 50% 50%; 😉

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

      @@reggielj Some prefer having non shorthand version as it is faster to orient in it, but nothing wrong with both versions.

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

      @@Saver174HowTo True, I was thinking more of what's faster to write in CSS Battle race. ;D

    • @owenrossi-keen2594
      @owenrossi-keen2594 3 ปีที่แล้ว +2

      It was driving me crazy too!

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

      I was thinking the same.

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

    What I like best about these battles is that-unlike scripted, pre-planned content-they show you that even the most seasoned developers don't just regurgitate code onto a screen having it come out perfectly the first time.

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

      It's funny when you are able to do the work EASILY and then you see how the "professionals" struggle with it and just brute force it with specific pixel placements... Bruh.
      I tried the blue letter "b" thing. They could just use:
      body>div.outer-circle>div.inner-circle>div.inner-line
      body {
      //flex and center children with justify-content and align-items
      }
      .outer-circle {
      border-radius: 50%;
      border-top-left-radius: 0;
      display: flex;
      //justify and align on center
      }
      .circle-inner {
      //width and height to 50% (it's exactly half of the outer circle)
      position: relative;
      }
      .inner-line {
      transform-origin: bottom right;
      bottom: 50%;
      position: absolute;
      width: 50% //it's exactly half of the inner circle, hence it's its child
      height: 100%; //it has to cover exactly the height of the inner circle to cover the outer circle as well, and not go beyond necessary boundaries.
      I came up with this solution in my head in 10 seconds, coded it working in probably 5 minutes. And as a bonus it's adaptive for all screen resolutions. Kinda cringed at these "CSS King" nicknames. CSS is too easy to be a king on it, it has a very low skill ceiling, and even if you can't solve something on your own there are hundreds of ready solutions in the web waiting for your Google search. It's just matter of time and quality. And seeing his class naming conventions, his "workaround patch fix" solutions and so much time spent I don't see a king there.
      Anyway that's just my criticism of their skill and ONLY because of the "King of CSS" title which imo doesn't show in THIS particular battle.

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

      Also the stripes in the green/yellow circles job could've been done with linear gradient in like 5 seconds.
      It's fair if you say I'm a b1t©h for saying all this but on my defence there is the fact that they can't center a block vertically

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

      ​@@theseangle "You Come At the King,You Best Not Miss"

    • @Tenchi707
      @Tenchi707 ปีที่แล้ว

      @@theseangle there's just no way to believe you, if you make a video of yourself doing a challenge you've never done before while competiting against another person and still do it in 10 seconds then that's believable, not when you're not competiting against anyone and have all the time you need and there's no video filming

    • @theseangle
      @theseangle ปีที่แล้ว

      @@Tenchi707 well don't believe me, I don't care. Since then I have been working as a Frontend Developer and these challenges are pretty difficult, except for the ones that they chose for this video. Kevin Powell is indeed a TH-cam CSS king, just not as much in this specific video.
      There's also the factor of being able to touch type and do it fast, which will obviously increase your speed. Well I've got 90 WPM typing speed. Combine it with the first possible solution that came to my head and it takes less than 5 minutes in total for a challenge like the letter b.
      Just gotta think in markup

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

    Me: He's CSS king, he must be crazy good at naming convention and writes a clean and organized understandable code.
    CSS kimg: 🌚 inner-inner-inner. Understandable have a good day.

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

      What would be the correct professional naming convention

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

    it's so reassuring to watch other devs going through trial and error

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

    5:33 you made me feel better about the times I write lines of code, it doesn't work how I expect it to, then I scrap the lot and start again. Glad to see it's not just me.

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

    We need more content like this! It shows we are all humans and sometimes we don’t know how to do things

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

    Not sure if anyone already said this in the comments, but thanks for being vulnerable by opening up like this! Time pressure makes a difference always. :)

  • @erics.k.cheung2237
    @erics.k.cheung2237 3 ปีที่แล้ว +20

    Wow Kevin Powell is all instinct. So crazy he seemingly stumbles into the right solution but it's all his learned instinct. He definitely could've had the second one but was definitely flustered knowing he would be watched.

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

    "I wonder why it didn't work last time" story of all my code

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

    This was great watching how the two of you tackled achieving the same result using different techniques. So much value in this video. Thank you and please do more.

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

    I thought I was the only one who struggle. After watching CSS king struggle, I feel like we are not too far from being on the same boat 😂. Thanks for the video guys.

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

    "i spelled square wrong", i felt that.

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

      🤦🤦🤦

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️..

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

    This needs a clock overlay, some music and you two grilling each other on your fails afterwards

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

      Yes!

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

    Wow.
    Thanks for reminding me of my deep hatred towards CSS.

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

      It's actually interesting

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

      Best comment ever.

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

      I think you haven't tried javascript

    • @max-tp1xv
      @max-tp1xv 3 ปีที่แล้ว +4

      @@nandansojitra8803 i like css better than js. js language is so complicated while in css you could just type it like placing block over and over

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

      @@max-tp1xv css is shit it takes a day to position something properly

  • @vela-6
    @vela-6 3 ปีที่แล้ว +9

    Neither of them using "border-radius: 0 50% 50% 50%;" was just maddening.
    Alternatively they could've added "border-radius-top-left: 0;"

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

    Before this I knew I wasn't that good at CSS, but after watching this video I realize I suck at CSS.

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

      Ikr 🤣 i thought i was fullstack but now i kinda feel much more backend without the help of CSS frameworks or libraries

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

      LOL me too! Too funny! I feel that!

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

      @@goldengiorno6890 But i don't actually see a practical use of such hard types of css.

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

      I mean yeah that's true you don't get hired by drawing shapes with pure CSS but i think it's still really important to know those kind of things. Let's say you want to build a full website and you're styling with some CSS framework. You don't want your website to appear like some other default one but something unique and that's what CSS frameworks or libraries actually provide. They give you a foundation of styles and you are the one who needs to customise them. It's here where pure CSS actually help ans it's here where there is problems. You can ofc find a solution by bringing some other JS library and thus making your code not just horrible but also bloating your project with extra libraries and data which can result of a really bad user experience. But you may in this case use those CSS properties that you found useless to style the same way as another guy who bloated his website with useless libraries and trust me this makes a huge difference. Quite a long answer but just to tell you that pure CSS actually matters a lot and even those little CSS properties can make a difference.

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

      Shoot that's a long answer i didn't knew i wrote that much 😶

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

    holy cow watching you guys speed through the first part and talk through the thoughts was insanely eye opening for me, and I'm sure many others.

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

    ahaha I was dying at the class="sqaure" troubleshooting

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

      No it was when the "CSS King" scrapped place items centre because it was place-items; centre;
      He didnt notice the colon is a semicolon lol

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

      The place item and the typo on square bothered me so much. It’s insane how such things mess coders up so badly

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

      @@weirdernow but he makes meme the "sqaure" make it cracks 🤣

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

      @@kgenextreme the every programmer nightmare. Bug of typo

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

      @@Rhidayah ok. Btw the last challenge is sooooo ez that 9 year old me can do it in less thab 2 minutes

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

    Loved this! Also glad I’m not the only one who is like ‘why isn’t it working’ only to find it’s a typo.

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

    Do battle with Dev Ed. We love watching that

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

      Why you do this

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

      @@sarcasticdna why u du dis !! 💯🙏🏻

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

      There would be too much laughing lol!

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

      Dev Ed. will be busy showing his magic tricks

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

    I think you can use another way of doing this.
    You can include all of those divs in one div classed container. Then, if we make the body flex and do justify content to center, all of the elements would center. Then we can class all of the triangle divs and give them a z-index. Then, we can move the first and the last triangles up and down respectively. Then, we can add colours to them. This may sound too much but it takes around 6 minutes only.

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

    Things I find very reassuring in this video: CSS experts looking confused and saying, "That should work!"

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

    My neighbour literally knocked on my door to see why I was laughing so loud. Thank you guys for the great laugh, was hilarious :D

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

    So pros too make speculations 🤗
    This should work, tried, it didn't work.
    This may not work, tried, it worked. 😂

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

      Gives me hope

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

    27:30 - place-items should have had a colon instead of a semi-colon and it would've worked! I was screaming at the screen when I saw it as if I was the one competing, shows you even the best can succumb to these things under pressure :)

    • @irvinmuziwenkosi
      @irvinmuziwenkosi ปีที่แล้ว

      I thought i was the only one who saw it 😆

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

    i've never writtern in CSS but hoooly this battles are so interesting

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

    These are great to watch, and educational. I'm an ex-coder now project manager, and learning css just for fun is great. Tearing my hair out on the circle one - just use a border on the circle one, transparent one side and rotate!

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

    Using box-shadow property and before, after pseudo elements in these type of css challenges saves a lot of divs

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

    My solution to Round 2:
    You create that small egg-yellow colored circle.
    Then you create a rectangle and put it above that small circle.
    Then you give that rectangle a repeating linear gradient with light yellow and dark green colors.
    Then you create another big circle.
    You give that big circle a thick dark green border, and a transparent fill and position it in the center so it covers the sides of rectangle making it look curvy.

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

    22:21: ~ almost losing, manages to draw the Eye of Sauron. He truly is the CSS King

  • @nataliachies8623
    @nataliachies8623 ปีที่แล้ว

    20:26 yellow circle: use an outer div with centered items, a fixed height (small enough to cut off both Y ends of circle) and overflow hidden. darker yellow stays the same. just add the lines on top and youre fine

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

    For the second round, I would have chosen a div (display: flex; and flex-direction: column) with 7 children, each odd child to have a different color (and flex: 1 to make them equal). To cut it into a circle I would have used clip-path: circle (); on the parent container. It would have been short and efficient.
    For the third round, it is worth using border-radius: 0 50% 50% 50%. The upper left corner would have remained unchanged and the others would have been rounded.
    However, the fact that you posted a video in which you did not do everything perfectly makes me glad that I have been watching you both for so long! Congratulations!

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

      Hind sight is always 20-20 tho ;-)

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

      i havent use clip path before but i was thinking of same but would have make a transparent outer circle with overflow hidden ! thats what i think will work ! havent tried yet though

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

      @@back4stab this is how it looks like with clip-path:
      .parent-rectangle {
      height: 200px;

      width: 400px;
      clip-path: circle(60%);
      display: flex;
      flex-direction: column;
      }
      .child-line {
      flex: 1;
      background-color: white;
      }
      .child-line:nth-child(even) {
      background-color: orange;
      }

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

    Linear-gradient backgrounds would have saved you a lot of time and extra divs on both the circle & lines exercise and the funky circle/line. I always struggle with triangles so thanks for the refresher. This is a fun challenge! I am going to have to go do some on my own. Keep killing it!

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

    Watching you guys struggle was so hilarious. Guys you made my day!

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

    Kevin is one of my heroes. I haven't been able to code since losing my laptop but his lessons and the things he helped me learn when I was taking his courses are completely unmatched...look forward to learning from both of y'all again when I get my stuff back after about 4 months of no code

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

      Use your phone to code and reduce that to one month

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

    I didn't knew that making the Bixby button would result in such a 10 minute struggle.
    Awesome battle, it was very entertaining and fun to watch.

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

    Very great video and thanks Kyle, for introducing me to Kevin, didn't know about him, subbed!

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

    haha "I'm a little bit nervous...hopefully I crush him."

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

    This and the rematch are my favorite videos of the year

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

    nobody:
    literally no soul on planet earth:
    kevin: i rEallY enJoY cSS

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

    For round maybe it is possible to use "tape" divs in-on the circles. They could have the background color, relative to the circle height, always full width.
    yellow one : three tapes in middle.
    green one : one top one bottom.
    They would get clipped to the circle's boundary with overflow:hidden too.

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

    "I spelled square wrong" I lost it there 😂😂 Great content, Kyle!

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

    I just loved that!!! It was great seeing how the "pro's" struggle with decisions of how to approach something. I hope we have many more of these !!

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

      I plan to make more of these videos since they are really fun to make.

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

    why didn't you had a voice call in the end. would have been interesting

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

    It was fun to see you struggle.
    You gave me confidence to keep learning💀

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

    Seeing these guys struggle with the first challenge gave me so much hope for myself. See ya in the workforce, boooooyyyys.

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

      all of the challenges werent that... I dont get how they messed up the second one.

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

    2nd Challenge tip :
    Create a small circle green
    Create a second circle bigger than first with transparent background add 7 lines inside circle and overflow hidden , thats it 👍

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

    14:08 - why does the "Last Score" say 100% Match?

    • @hassanali-yi4bu
      @hassanali-yi4bu 3 ปีที่แล้ว +24

      He is a sneaky bitch who had solved this problem beforehand

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

    This one video was better than some courses that are completed in hours. Please make more like these

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

    Actually... round 2 at 14:15 you literally just need two more dark green div. Put it between the bigger and smaller circle z-index, so it only cover the bigger circle.

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

      but the bigger circle should draw over the smaller one

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

    I love that show the mistakes and how you have solved them

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

    Kevin: So you have chosen death!

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

    this video is AMAZING! it helps so much to see two different minds trying to each solve the challenge, for me it's just as educational to watch than it is fun. Thank You Guys!

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

    I was struggling today with css and web dev simplied got a platform for me to practice ♥

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

    i know nothing about css and i cant stop watching this.

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

    20:41 , here's solution :
    1. make a circle exactly same as yellow and same position.
    2. make border same as size of lines. and adjust circle position.
    3. make border top and bottom same as background color. other two will transparent.
    4. make circle background transparent.
    5. make those middle lines above them all ( z-index : 500; )
    _________________________
    Thanks for reading.
    😇 Hva Great Day .

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

      My take is using rgba gradient

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

      @@delulu6969 👍👍

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

    This was really educational. I cant believe people actually do this on the internet. This is mind blowing!

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

    Can't we just screenshot it and then use background-image lmao

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

    I can see that its not about your knowledge but about your creativity and skills. different routes, same destination although different comfort.

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

    Moral of the story: Everything can be fixed with liberal appliance of divs.

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

    Nice video. Very fun to watch! It makes me want to do this challenge with my friends.
    for the last challenge, I will use the relative + absolute with percentage of the parent div to solve the problem. It can be used in every parts.
    circle outer - body relative circle absolute top-left-transform 50/50
    circle inner - absolute on outer cricle top-left-transform 50/50 and 50% width of the outer
    square - absolute top-left 0 width 50% height 50% bg dark blue, the other half is :after absolute with square top-0 right-0 width 50% height 50% with more z-index light blue bg

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

    More like this please.

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

    Started CSS yesterday, and my approach to the third challenge was three squares of each 50% smaller than the last one, the first two give a border radius of 0% 50% 50% 50% and then offset the smallest to align with the edge created in the second smallest

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

    Dude, this one I pressed like before I watch!! Cool!

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

    Holy hell man. I didn't know this was gonna be this much fun. Superb video.

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

    In the second one we can use
    border-top-left-radius: 0;
    And it'll be done.

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

      It's harder to think when we're in hurry 😂

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

      I was thinking that they are gonna use it immediately.

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

      I'm guessing you mean the 3rd one (with blue background). Second was with yellow stripes

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

    For the Sunset challenge i found neat trick. I used just two circles, and lines. Green circle then has to have background with linear gradient where middle is transparent. Like this:
    background: linear-gradient(#998235 50px, transparent 50px, transparent 150px ,#998235 151px );
    That assures, that middle of the circle is tranparent. You have to just set z-index for your lines and you are good to go.

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

    Watching the CSS king struggle with round three which for me was pretty easy to recreate is sooooooooo satisfying. 😊
    And I just learned CSS this week from his introductory Course on Scrimba.

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

    Thanks guys, That was a lot of fun. I played along with you (with a lot of pauses), and learned some nice tricks. I had emmet to help out, mind you.

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

    For the three CSS creators, I would launch them the challenge to create a solid tutorial about **flex-shrink** which is not well explained nor in (simplest) W3Schools, not in (the advanced) MDN neither in expert world of StackOverflow. I consider it a very important thing for responsive design since smartphones were created except for grid and media queries maybe. If they cannot do it at highest level I would put myself to work to make it ;) Btw tell me if you find useful this small one here: font-size: minmax(calc(0.5em + 1vw), 16px)
    Cheers to all coders out there !

  • @BigSmoke-r9w
    @BigSmoke-r9w 11 หลายเดือนก่อน +1

    OMG both of these people are my hero! The CSS Gods !!

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

    At round 3 I was like:
    border-radius: 0% 50% 50% 50%;

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

      Only one div with a border

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

      Yeah can also be
      border-radius: 50%;
      border-top-right-radius: 0;

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

      you were right, it was so simple(took me 2min 10sec), although not under-pressure
      /* HTML */
      /* CSS */
      body {
      display: grid;
      place-items: center;
      height: 100vh;

      }
      .outer {
      border-radius: 0% 50% 50% 50%;
      background: lightcoral;
      width: 150px;
      height: 150px;
      display: grid;
      place-items: center;
      }
      .inner {
      background: #fff;
      width: 50%;
      height: 50%;
      border-radius: 50%;
      position: relative;
      }
      .inner::before {
      content: '';
      width: 50%;
      height: 100%;
      position: absolute;
      left: 0;
      top: -50%;
      background: #fff;
      }

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

      @@sidharthsid3429
      * {
      margin: 0;
      }
      body {
      display: grid;
      place-items: center;
      height: 100vh;
      background: #6592CF;
      }
      body > div {
      width: 100px;
      height: 100px;
      border: 50px solid #243D83;
      border-radius: 0% 50% 50% 50%;
      position: relative;
      }
      div div {
      background: #6592CF;
      width: 50px;
      height: 50px;
      position: absolute;
      top: -50px;
      }
      or so :)

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

      Same man. Dunno why do they did it?

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

    This was so fun to watch. Awesome content! Look forward to more on these.
    The moment he was not able to find the square on the design was really funnyy.

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

    So, I'm not the only one that struggles with CSS 🤔

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

      No, I hate CSS, bcoz of CSS i avoid frontend development, now I'm a backend developer.

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

    Wow, *Great* CSS battle, very entertaining and it helped me alot in my current website redesign - thanks again and you rock!

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

    Neither just set the top-left to border-radius: 0 for the “Letter B” challenge?

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

      Exactly what I was thinking too 😅
      border-radius: 0 50% 50% 50%;

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

      obvious stuff is sometimes hidden if you are under pressure ;)

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

      @@Des0war0ich0netAgentNoMiss bruh you should totally check this out 😂
      th-cam.com/video/ub6FIPpojoI/w-d-xo.html

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

      @@Des0war0ich0netAgentNoMiss Very true!

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

    Fun to watch, but learned a little and love seeing others making multiple small changes/corrections to values to get right look.

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

    17:51 When it says: "Last Score: 600.01 (100% match)", does it mean he has already done this particular task before the challenge?

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

      hmm, if he had done, would have some highscore...

    • @ovanhoa4c-185
      @ovanhoa4c-185 3 ปีที่แล้ว

      Yes, I noticed that. I think he gradually had improved his score at the challenge by submitting many times before. However, he forgot how to do it 100% right when accepting the competition =))

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

    Loving this! Unique addition to your channel! Keep them coming!

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

    Pseudo-elements: have we been forgotten?

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

      was thinking the same, round 2 was really easy... and both didnt get it 😅 calling that guy the CSS King is a bit to much

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

      What would be a strategy for refactoring with pseudo elements?

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

      I guess these guys are looking at them as an :after thought

  • @iJuulia
    @iJuulia 2 หลายเดือนก่อน

    "this looks super easy and that depresses me because I have no idea what to do"
    relatable, kevin. relatable.

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

    when he says kevin is like a css king :
    the css battle website developer be like:-am i joke to you?

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

      lol so true didnt think of that

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

      I think a team made it not only one person but idk

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

      @@yvng4697 It's just a joke dont take it seriously

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

      @@dynpallomah lol oh ok I thought he was serious

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

      kevins the king that guy's the god ezpz

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

    Enjoyed watching and seeing each of you taking a different approach to the same challenge. Awesome!

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

    I was looking at the last challenge and thinking why didn't they use "border-radius: 0 150px 150px 150px;"

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

      Exactly what I was thinking! Would have saved a good minute.

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

      I was yelling this at the TV.

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

      100% same

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

      Man I S U F F E R E D

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

    You were so close on that Sunset. Another circle with transparent background and background color box shadow would make it 100%! Great video!