This is the hardest CSS Battle I've tried

I decided to take on what I thought was going to be a pretty easy CSS Battle, and it turns out that I had no idea what I was doing for half of them 😅

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:51 - Challenge 1
04:06 - Challenge 2
17:24 - Challenge 3
30:48 - Challenge 4
44:36 - Challenge 5
52:04 - Challenge 6
57:45 - Challenge 7

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[iamavegetable]

It's useless to scream at my screen to helps you :) Thanks you to share this with us. I have fun with CSSBattle today ! BORDER-BOTTOM:NONE!!!

[chrisbolson]

I must admit that I quite enjoy watching you struggle through these cssbattle challenges - I'm sure the stress of doing them "live" makes them a lot harder than they actually are.

[simonjohn]

Challenge 4 - The leaf shapes are actually just squares with border radius on opposite corners. Just rotate them.

[zaidyt]

cool content man😎 keep the css battle series alive. can learn a lot of things from this🤯

[clevermissfox]

It is encouraging to see in these battles all the guys also make silly errors like mispelling classes, missing spaces, commas, and turning semicolons into colons or vice versa. It makes me feel like less of a dingbat 😂

[CodeCraftStudio]

man I enjoyed a lot watching you struggle. Just made me a bit sane though, if you are struggling, then its ok for me to struggle. 😂

[mellowmarvin]

What a great Video! As always :) Thank you!

[cristianzwierzynski]

Thats the definition of resilient job. I watch every video that You made. Love to learn how You aproach to the task from different views and that is awesome Excuse My English, it's not my language. Cheers from argentina.

[dime]

For a 5 year fireworks/photoshop to html slicer in my youth, i really enjoyed the last one, it made me talk with the screen, screaming and giving you the correct instruction as you do it(like a senior telling the answer of a question in a show)😊last one could be a separate video! Thank you and keep it up!

[nbot]

The last spiral puzzle best solution takes 160 symbols, and im interested in viewing that code (im free user at the moment, so i cant). For me its not a problem to get 100% identity for any puzzle, the most value is code shortness. I have 600-720 points avg, but top solutions scored by 800+ and at the same time the avg puzzle score is 500-550.

I learn some top solutions and i found they very hacky. High score solutions are NO using divs, position, etc.. they using scss, style attributes inside html nodes and so much more very interested combinations.

Its nice place to learn or improve skills. Thank you to discover that space for me.

[NenadoDyadya]

Kevin the last one was really amazing i really love your work. Man you are legend of CSS

[CristianKirk]

The #137 (Elbow) only needs a single div and a pseudoelement. You got really tangled up with that one! It's just a box on top of another.

[stbausms]

Wow... I'm learning so much with every video. It's entertaining and informative at the same time! I'm watching more and more videos of you and discovered cssbattle for me to learn it the hard way. I guess I learnt more the last two weeks since I started watching it than the 5 years before.

Great great work!!

[oruaromukoro]

Couldn’t you have done border: black transparent transparent black; for the second challenge

[MichaelJones-usty]

I am very new but my first thought on the spiral was to make a million dots and just position them all around, but i learned a lot watching you. Love watching these you help me a lot. I like how you teach as you are doing these as well. thank you

[elmalleable]

target 22 just a cheeky tip, use .outer .inner and styly inner to get one leg, refect it once to get 2 legs, then reflect outer to get all 4 legs

[jfftck]

The spiral can be made using box-shadow and a lot of them, that would allow for a single div to draw it.

[JulianColeman]

I will never not hear "Hello my friend and friend". This challenge was nuts! Lots of good learnings

[adamuk]

You know it's a toughie when KP has frazzled hair at the end.

[Queue]

Challenge 4: two TIL doing this challenge: box-reflect can be a neat tool for things that are in any way mirrored, like the two brown ones. What I did was: width: 100px, height: 100px; border-radius: 0 100px; -webkit-box-reflect: right 0; then position it right for the browns. For the white one i did the same, but without reflection and rotated around 45deg. Still this would never be possible without everything i learned from you. <3