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

[@grmancool]

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]

haha love both

[@AnthonyR007]

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]

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

[@lapluong928]

OK men kzbin.info/www/bejne/i5DEY4qGmNqeedU

[@procrastinator24]

That made me laugh quite hard :D

[@paracosm-cc]

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

[@jamaluddin9158]

hahhaah 😂😂😂

[@georgearciaga2260]

@@jamaluddin9158 0

[@georgearciaga2260]

@@jamaluddin9158 0

[@georgearciaga2260]

@@jamaluddin9158 0

[@georgearciaga2260]

@@jamaluddin9158 00

[@drakecoleman9364]

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

[@conniebarrick6483]

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]

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

[@licokr]

me feel the same!

[@ZLKYass]

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

[@ggwp185]

@chadIG159 someone's mad

[@doktordaxter]

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

[@AbdulRahman-er3dz]

True...

[@sanjarproductions]

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

[@itzyuzuruclips]

Lmao

[@abhishek.rathore]

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]

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

[@10YardCricket]

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.

[@rodrigomunoz6978]

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]

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

[@washingtonbilly2512]

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

[@heltonmargaret4934]

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]

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

[@charlottemia9362]

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

[@Morrile1]

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]

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

[@avananana]

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]

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

[@Lopeziraburu]

That little "nailed" dance was precious

[@DmitryOlyenyov]

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

[@soumyajitdey5720]

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

[@nitram_nosnibor]

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]

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

[@isaac2986]

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

[@BasicMike]

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

[@krismatic_]

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.

[@steven5712]

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

[@sanjarproductions]

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

[@mrCetus]

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 :)

[@sayChristIsKing]

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

[@chetranqui]

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

[@JC-ig2vd]

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.

[@programmercouple]

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

[@KevinPowell]

Really glad that you enjoyed it!

[@matejfoltyn]

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]

Yeah but kyle won ez

[@sanjarproductions]

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

[@DenisTrebushnikov]

Methinks (and numeric score proved that), round #3 for Kevin. Just because 10XX chars code better than 12XX, also pixel shading calculation for one div faster than for Kyle's bunch of dived (in this case, render requires to calculate every 4 dot positions for every div, and pixel shading calculates for the full stack of div layers), so box-shadow method to create stripes is faster (not so well as well, but faster because of using only 4 starting dots as precalculated for every next step)... and absolutely cool for circles in round #1.

[@BERTDELASPEED]

I love this, thanks for making me discover cssbattle

[@facundocorradini]

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]

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]

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

[@mohammedkhushabalam7555]

People get to learn so much just by watching this 💯

[@pavelstastny7892]

Nice use of box-shadow. I used background with repeating-linear-gradient (180deg, #F3AC3C 0px, #F3AC3C 20px, #1A4341 20px, #1A4341 40px).

[@jacksonchan9774]

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

[@wolverine9632]

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

[@breadenthusiast]

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!

[@wilsonisaac3806]

Love you guys☺️ Eyeball was spot on🥰

[@ArghyadebBandyopadhyay]

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.

[@inesborges4857]

I nailed it. That was genious Kevin

[@Y09ii]

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

[@angelcross6050]

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

[@BlameItOnGreg]

I find it interesting how much both of you used percentages and flex. In the context of these challenges where you have a fixed resolution canvas (in the general use of the word), I would personally be using pixel values for almost everything. The context here is essentially raster graphics, so using responsive units and features so much seems like an invitation for things to go wrong. It would be interesting if there was a version of these battles where the result had to be responsive. I would expect that would be harder to have a grading algorithm for though. Maybe the same one could be used across a few different sizes?

[@apacha2004]

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

[@kencroker6206]

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!

[@khaledlebiar1530]

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

[@iagod6660]

round 1 felt something like someone who studied a bit of css against someone who knew only html trying css for the first time

[@tedcyted9994]

I love both your channel and the only two channels i subscribe to, with all news alert.

[@tedcyted9994]

VERY interesting to see an video both have you guys when i saw this clips in the recommended list.

[@SebastianMares]

That box-shadow trick was nice, I keep forgetting what cool things you can do with it. Could you have achieved a similar result by using a gradient as background with hard stops in #3? Also, funny that none of you used before/after for the circles.

[@kennnnnnnnnnnnnnnnnn]

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.

[@thechappist]

I've just started learning CSS... and its really nice to see that I can understand some of this. Had no idea this was a battleable thing... made me think of the 'Countdown street battle'.

[@sanjarproductions]

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

[@ehizeneboh6299]

The box shadow trick was totally amazing

[@poweredbygeeko]

wow, that multiple box-shadows is super useful! nice!

[@saeedzargar4458]

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

[@ianski9898]

Damn .. 😮 you guys are godly! Itsso entertaining to watch!

[@jemjem8902]

That box-shadow trick blew my mind

[@occo5877]

This was super nice to watch! Please make more battles you r awesome! For me it will definitely work better if I watch first one participant then the other it’s confusing to change constantly and try to re,ember where each one was left

[@coliwong6018]

really enjoy the way you are doing with css

[@Amar11115]

It was really fun! Learned a lot too. Thanks foe the video!

[@jusyF]

Thanks guys, I had a lot of fun 😁🥳😉

[@timepasschannel3163]

That border right colour blow my mind.

[@myke6972]

This is entertaining! I'm having fun and learning some new stuffs while watching!

[@SneakyNinja345]

20:32 Kevin's little dance made me feel like I accomplished something too 😆

[@thebartendingtrader9887]

This is so cool, I just did my first challenge and got 100%, I'm completely new to css and it boosted my confidence a lot. Can't wait to have it chopped back down by the next challenge.

[@RahulKumar-qu1if]

That box shadow things are really cool

[@felixkiesewetter]

I've never heard of these CSSBattles before and now all I wanna do is throw away all my Sudoku puzzles and master all CSSBattles instead 🤘🏼 I'll start tomorrow

[@liu-river]

Really love watching Kevin approach the problem, it is super creative and unconventional

[@mukhammadrizoabduganiev7106]

Salutes for both of them, but this is kinda like a CS student who learned how to finish tasks somehow, is competing with Sr. Developer who can do it with some tricks🚀

[@paologera]

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

[@555pontifex]

@23:00 "I think the easiest way would be to create some rectangles and rotate them..." Man, that was so funny. Kevin Powell be like, "border-radius: 50% 0;"

[@code-blue-coding]

Kevin is missing a semicolon on the height in 16:22 when he is super frustrated and not finding the error😣 So stressful and yet so common mistake in real life as well! div: not ([id]) { position: relative; overflow: hidden; width: 100px; height: 200px

[@closertothecosmos3519]

Kyle is my fav web developer teacher, but dang you are so amazing as well. the round 2 was insane

[@psychee_gd]

The next thing I want to watch from Kyle is him playing Guitar. We are good with CSS. (Literally, he has covered up almost anything, basically)

[@checkmatenate]

The only reason I used to learn HTML and CSS was to make custom myspace profile, and then one day make my own website lol. I still remember how to make divs and rollovers but this looks like some art stuff

[@JamieAlban]

the box shadow trick is very cool

[@JohanArenas]

I like more your approaches, they were more CSS-oriented than a fill of divs, for the last one, it would have been amazing watching you using a rule for div and the div+div to reuse the dimensions and just change the sides. Thanks a lot for this super video!

[@bibeshbasnet2568]

I didnt know box shadow was this clutch

[@Albi91vl]

I cannot believe how I don't have yet a channel with 540k subscribers seeing the amatorial level of these guys.

[@skyletwings5711]

If Kyle was quicker, then we should definitely not look at the time, but rather at the style and making the repetitive lines with shadows is shorter and far more elegant than iterating divs, because it is done solely with css, not html. In both cases, I'd really have loved to see that either of you had used common classes to do the generic common attributes, like the width and top of the circles in #3, which also would have made the manual adaptation quicker and easier.

[@vailene3441]

Awesome job on all Rounds. Can't help but laugh at your DIV comment. I'm definitely the DIV King. It's a bit sloppy, but its' easy to manage and it works. lol

[@dzinnu5047]

box-shadow coming in clutch!

[@renscrab]

Dude I'm pixel perfect on Round 3 and only got 93.7%, and I'm using repeating-linear-gradient with is IMO a better method than using box-shadow. Using 9 divs with nth-child(odd) & nth-child(even) gives 99.9%... Anyway, tips of the day: when you compare the output, holding SHIFT swap between vertical and horizontal comparison.

[@hazemyoussef5531]

I remember watching this and I was like what the hell is going on , what are those guys doing , then when I learned CSS I came back to see if I will understand now or it will still be as hard but now I can understand and oh man this is so good and you are so creative guys

[@jamiebeith1875]

Kyle's css seems so much more hacky - like a kid cutting small pieces of paper to make their picture while Kevin's seems like he's sculpting clay

[@HabibullaSonet]

they both are great but I really impressed how Kevin did this so easily using box-shadow. just WOW 👏👏

[@monkeydluffy8829]

Great content!!! I watch this with my kids in order to make css even enjoyable for them as well, and they really like to watch it 👍👍👍

[@sanjarproductions]

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

[@Werleyd]

Watching this just makes me realized that I know nothing about CSS, keep up the good work

[@GerritforBazeja]

it's nice and fun to see two pro's playing with CSS. Nice to see that both of you toke another approche to fix it. As not pro it's nice to see that there are different way's! Try a battle with Follow Andrew. I love him also on CSS!!

[@RishavPlayz2007]

Amazing! Loved it Kevin and Kyle.. Both names start with a 'K' .. 😉

[@KemoHay]

I don't even like css, but this is so cool to watch :) Both of you guys are awesome :)

[@up2tech]

Next battle: CSS animation with PURE CSS... - I'm waiting :)

[@randompotato258]

this is some of the best high quality nerd content on the web please do more of these, i hope other software dev content creators make things like this too.

[@deanshaked]

38:13 "99.9 , That's painful" LOL

[@naczelnypsycholog6296]

lamo watching how you guys make a speaker, made more confident about my css skills

[@lana__4157]

I think the algorithm for grading the last challenge(Stripes) must be off in some way. I used divs as he said at 40:23 and it was still 99.9% for me

[@sahildas.]

Kevin : Is lucky opponent ran out of time Opponent : 🗿🗿🗿

[@trunghei6672]

Thank you so much!!! It did work and took less t

[@DamianWalczak]

from now on imma use box shadow on everything

[@cjwebdev]

That was awesome, what was determined for the 99.9% score instead of 100%? lol

[@belugajr838]

Multiple borders using box-shadow... New mission: use box-shadow all day long!

[@calvitocalvon1711]

Painting the mona lisa with 5 divs and a bunch of box shadows

[@codepraycode]

You guys battle....and I learn, feels Good😊

[@itiszach8687]

I am pretty much a noob when it comes to CSS but having the same idea as them gives me that feeling of accomplishment. Now I just need to learn how to actually do it myself when I am coding ;p

It was fun and instructive at the same time! I really enjoyed this battle! :)

[@scottklink2047]

You guys are great. thanks!

[@lorenzmaghirang816]

Somehow seeing them having trouble like why something isn't showing gives me relief.