Front-end dev reacts to mind-blowing Codepens

People say I'm the king, but like... yeah this stuff is insane 😅. Make sure you check out the codepens below so you can see them all in more detail, all so amazing!
The codepen that inspired this video: codepen.io/amit_sheen/full/ab...
Make sure to check out Amit Sheen's CodePen profile, I could do an entire video like that just looking at his stuff: codepen.io/amit_sheen (he's a good follow on Twitter as well: / amit_sheen )
🔗 The codepens I looked at:
CSS 3D Bending Effect - Page flip by Fabrizio Bianchi: codepen.io/_fbrz/pen/whxbF
CSS Only iPhone 6 Fabrizio Bianch: codepen.io/_fbrz/pen/vlrnd
Attempt #1 CSS3 Clickable Slider by John Motyl Jr: codepen.io/johnmotyljr/pen/cDpEH
CSS-only directionally aware hover by Giana: codepen.io/giana/pen/YZWjQy
Clip Clop Clippity Clop [CSS Only] (the horse) by Steve Gardner: codepen.io/ste-vg/pen/oKYjKV
STAR WARS AT-AT Walker: codepen.io/r4ms3s/details/gajVBG
CSS-only Calendar App Concept by David Khourshid: codepen.io/davidkpiano/pen/wB...
CSS only 3d Macbook Air: codepen.io/neoberg/details/istyp
Solar System Explorer in CSS only by Jamie Coulter: codepen.io/jcoulterdesign/pen...
CSS-Only Cube Pack by David Khourshid: codepen.io/davidkpiano/pen/aq...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

It's the first time I try something like this, so I'd love to know what you thought of the video. Do more like this? never again? A little bit of a different twist on it? Let me know!

[@mai-ngoc-linhnguyen6817]

4

[@phpBasics]

Please don't fall into the 3rd person react video title cliché. We know who you are. :)

[@KevinPowell]

Haha, I wouldn't do it to all the time, but once every 2-3 months if people enjoy it 😊

[@KevinPowell]

Oh, the 3rd person thing, just realized what you meant, lol. We do it cause these reach a bigger audience than normal videos 😊

[@oldschoolmuzicfan]

i would love to see your take on the cube thingy by David

[@yassineel-jide6222]

And here i am trying to center a div :) life is great

[@sukantsh11]

true

[@MaximTsyba]

@@5upl1an what about left:0; right:0 ?

[@5upl1an]

@@MaximTsyba but then your container can't have width: auto. with left: 0; right: 0 it stretches it to 100% and not the content width.

[@MaximTsyba]

@@5upl1an yeah, I guess it will work only for divs with fixed width

[@dannyboy3413]

@@DerickMasai justify content:center: Align-items:center;

[@Elliot7676]

Came for Motivation , left with depression

[@KevinPowell]

😂😂 - Don't worry, I can relate! haha.

[@shafi123]

i was about to comment the same thing... PS: Just started learning CSS and this makes me to leave

[@charafmarghin2965]

I learned a lot ( as i thought ) .. and even decided to create a KZbin channel xD, but after watching this i think i'll sell my laptop right now :(

[@thelonercoder5816]

@@shafi123 lol even experienced developers find this amazing. I'm 1 month in my journey and think this is pretty cool.

[@cerealrakist7360]

Worse case, just copy control and paste

[@chokoon21]

For people who don't code. This is probably the equivalent of using Microsoft Word to edit photos instead of using photoshop.

[@likithjay]

Thanks dude😂

[@maevwat]

Lol😂

[@hispantrapmusic301]

@@ashaguin95 there is a guy who can do that

[@alexgear959]

More like using Paint to make Super Mario.

[@infiniti2011]

@@ashaguin95 No, it's more like using Scratch to do that. Unity is built to handle games and development on a large scale. Scratch is built for kids to create Flappy Bird clones, and not much else. It's effectively like creating your own game engine, but you're running on Windows 95, capped at 30 FPS, can't edit graphics at runtime, and don't even have functions to use.

[@joshua_dlima]

These are the kind of people who can hack NASA with pure HTML

[@IBITZEE]

CSS only dude,,, CSS only...

[@sidheshwartiwari9834]

@@IBITZEE 😂😂

[@mrsudarshan6249]

This comment is made with CSS only

[@maik5825]

still couldn’t figure out why vertical-align:middle is not working

[@joshua_dlima]

@Shuky Badeer i know broh😂 i intended it as a joke... coz their css skills are too good.. and they've done stuff i didn't expect css could do.. thus i said hacking nasa with pure html (which is again markup language and we 100% dont expect hacking to be done using it). I didn't think I'd have to explain this joke lol

[@mintran]

I've been writing css for 17 years. I feel like a toddler after watching these.

[@eyokfla]

wow

[@comoyun]

@Hand Grabbing Fruits haha

[@lycan2494]

U havent been anything impressive for 17 years then

[@artemisfowl9002]

you’re probably not that intelligent, 2 years learning css and the horse animation is a walk in the park along with a bunch of 3d renders i can do in css

[@mintran]

@@artemisfowl9002 I won't deny that fact ;)

[@timbittins]

If CSS is a sport, this would be the olympics. Crazy and inspiring stuff!

[@ikechukwui2561]

You meant to say the Intergalactic Olympics.

[@circulartext]

no circulartext will be the olympics

[@Wingnut353]

You shouldn't be inspired by this ;-) its definitely the wrong way to do any of this.

[@realdeen81]

Not only css all the programming languages are amazing

[@IkharoMuhammed]

Seriously 😂❤

[@duangp993]

The horse one made my already small "knowledge of css", feel so insignificant 😭😭😭.

[@KevinPowell]

Haha, yeah it's really impressive

[@bigibos]

Its not hard to understand, it's just har to do and have patiency for it.

[@Take-the-Ticket]

That one was basically easy. You just have to be able to watch a single blade of grass grow through its entire span. Then a hundred others after that, and boom! you're done. Don't get discouraged! Also, I would never do that. Props for doing it.

[@Remington510]

The horse animation is also worth mentioning because of the horse moving anatomy-wise. There are blockbuster animations and AAA games which completely screwed animating horses in move, and here we get this one CSS boi doing it at least right :D

[@___xyz___]

The animation is basically directly traced from a real motion tracked profile video of a horse. Impressive nonetheless; or at least insightful to see how the geometric pieces are put together to facilitate the movement.

[@artibansal7406]

animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc

[@sebmandal]

Entered thinking I was a full-stack Exited knowing I'm just a backend dev

[@juangalton999]

LMAO makes me feel that way too and I'm stronger front-end haha

[@Akumetsu02]

Seems like the people who used to paint photorealistic pictures in MSPaint have stepped up their game again.

[@vincentschulz9355]

Or the guy who paints in excel

[@genroynoisis6980]

​@@vincentschulz9355 the guy from Great Big Story!

[@sidsharma6002]

​@@vincentschulz9355 😂😂

[@hyperzid]

glad im a backend dev 😂

[@sidheshwartiwari9834]

😂😂

[@0v3rwh3lm3d]

same, mate. give me my Django back and please don't ever, ever ask me to even centre a div

[@mahmudurrashid9035]

@@0v3rwh3lm3d lol

[@pendek3255]

@@0v3rwh3lm3d give it a class

[@blasttrash]

now we need a codepen like website but for backend. that way we backend devs can be depressed at how amazing other genius backend devs and their backed-codepens are. 🤣

[@dragonarch0]

When you feel you are really suck at design and then you come across these designs that totally confirm your feeling. The level of creativity and effort is over 9000

[@sharishth]

There are plenty of fish in the sea and I realized I am not even the average one after watching this.

[@KevinPowell]

This is like the top 0.01%, don't feel bad, lol

[@jaspreetmaan121]

It's made using css so advanced that it looks like sorcery.

[@subhajitnandi_yt]

boom! ZSJL reference ....

[@kyanleong8014]

CSSS. Cascading Stylesheet Sorcery

[@hellorangerkeith]

I think they also used SCSS for refinery

[@artibansal7406]

animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc

[@lalithyagnavalkya9900]

Dislikes are from bootstrap users 😂

[@dewdop]

Lol

[@nickkotejares2755]

nyahahaha.. there's only about 61 of them rn

[@jess4you13]

I use flex layout but im still offended lool

[@evgeni-nabokov]

Nothing wrong with bootstrap.

[@sabyasachichoudhury2920]

@@colbyboucher6391 does it really matter tho? If you’re trying to whip up a 20 page website in 2 hours, trust me, bootstrap is an absolute lifesaver

[@milosleng1175]

that horse was the craziest CSS thing I have seen in my life. If you understand a bit of css you know that this is almost impossible to get done. To time the animations and all of those divs...totally sick

[@mikemack7933]

It's relaxing to watch too.

[@blank001]

I get stuck at "how to center a div" and this just left me at awww

[@arialdev]

The one about the Solar System blew my mind! Fantastic video!

[@KevinPowell]

Glad you liked it!

[@YunisRajab]

Even with JS all of these are super impressive

[@faustovii1085]

yeah actually. Doing this stuff with JS can't be easy at all. Easier doesn't mean easy.

[@o156GTA]

Meanwhile I can't even get a carousel working with bootstrap.

[@MrQhuin]

Someone can actually render the whole Avengers trilogy with just pure CSS

[@adimardev1550]

i really cant think how any thing like that is possible with just css. really mind blowing!

[@styromaniac6967]

Them: Gods of CSS Me: Has a wildcard selector for the height at 100%.

[@Narc0YT]

Me: Doesn't know what this even means...

[@JRK_RIDES]

Okay, now I need to meet a Psychiatrist 🤯

[@Anubis10110]

Lol 😂 yes

[@racker9999]

Thanks, Kevin, for your homage. These brilliant demos illustrate mind-bending patience and creativity wrapped in infinite layers of ability. They speak to the sublime potential for humanity.

[@thetrends5670]

"We have lots of other talented candidate that we think are more eligible for this job, thanks for applying" Now I understand that there are too much talent out there and that's why people like me are still jobless.

[@filiplescan4402]

The work showcased in this video is just insane. I run a digital solutions company and I've never seen anything like this.

[@nieczerwony]

It's funny how they all talk about these talented folks on interviews, and then you finally get a job with some of these companies and find that majority of peoeple you work with are just useless bastards. Some of them got job titles just to get rise as they know a guy who is menager or director and they used to work together in lower grade.

[@toastybatch565]

Don't be fooled, most people are just as clueless as you, they just fake it better. Happy hunting :)

[@Zurik_Global]

I can relate 😂

[@silversolver7809]

Incredible creations! Not just next-level^2 techniques, but exceptionally polished quality. Thank you Kevin!

[@easyluckable]

That directional hover effect just blow my mind, it’s so clever.

[@Stoney_Eagle]

You should definitely heart those you where amazed by. Just like I'm giving this video a thumbs up, it let's the creator know how many like their work 😁😉

[@orange-vlcybpd2]

Heartwarming to see that even seasoned developers may say :"How do you do that ?!?" 😃

[@artibansal7406]

animated Box With CSS kzbin.info/www/bejne/nXPQqWaIormbeqc

[@erykkryszewski5803]

Man i remember you having 20k subs, I was watching brewery website tutorials. Now I have dev job from 2 years, also thank to you and your tuts (was having portfolio done from one of your vids). Keep doing it, great job and nice to see how the channel grew up!

[@AbstractCatsMedia]

I've been so focused on C#, the past year, I've forgot how amazing an interesting CSS and front-end design and development is! Great video!

[@benediktschluter7313]

Very interesting video and I love how you show respect for their works. The horse is my favourite, its absolutely beautiful! Thinking of the countless combinations the author must have gone through...

[@SecretEyeSpot]

Thank you for being encouraging of creativity with CSS. Its really inspiring!

[@drakecoleman9364]

I absolutely love watching you go through these.

[@TheDoubleD]

5:52 One way to do the slider without having the problem with the history is to use radio buttons and then show a certain slide based on which radio button is selected.

[@Po4to]

Got that very idea just last week :D Radio inputs indeed make it very simple and elegant.

[@dmdbrv]

If you have selectors for each page (e.g. small placeholders under the carousel) then that makes sense. But with arrows - how would you do that? It's the same element and when you click it it would have to select a different radio button, so it won't be a simple label.

[@codedusting]

This is depressing. But still motivating.

[@archiem6323]

Thank you for covering codepen. I use it a lot. I enjoyed all your videos. The best to you.🤠

[@rafatansari112]

How can somebody have this level of patience! Absolutely stunning.

[@DevMadeEasy]

Another Great Content as always, thanks for sharing it with us Kevin!

[@lachlan3630]

I didn’t think you could do much more than create rectangles in CSS…

[@destroreact5706]

Man, I thought round bordered rectangles where pinnacle of CSS shapes..... these people were amazing with CSS stuff

[@guillermoandradaFSD]

I am impressed!! I loved this vid... Keep on doing more like this. I really kind of like when you humbly say that the are smart...

[@ozehlaw]

I love how genuine you are.

[@elvinasss2767]

Thank you for this video, it kinda makes me feel more normal, like I'm normal, for the most part, I am fairly confident with my CSS knowledge, and still I see some gurus, experts and such get amazed by someone else work just like I do. I also feel there is nothing wrong in not knowing everything even in your specific field.

[@neongrid3807]

Put aside the (CSS) knowledge, where do people find the time and patience to code such things?

[@KevinPowell]

Yeah, some of these are pretty big commitments for sure!

[@magicmulder]

Many developers come home from work and spend hours deep into the night coding something cool. Even the most talented ones. ;)

[@CarlosReveles]

Excellent! Bring us more! :)

[@yevgenia7785]

The idea is great! Would like to see more like this one

[@Po4to]

I've been obsessed with 3D CSS graphics ever since that old FPP shooter demo by Keith Clark from a few years back. It was insanely brilliant for the time. Now, with blend modes and filters, it could be expanded even further. Also, you're not limited to rectangles/cubes either. You can create triangles/trapeziuses with either CSS (add a thick border to narrow enough div, and make all but one side solid transparent; use different border widths for each side to manipulate angles) or SVG - and from there expand into pyramids, tetrahedrons, after relearning some of the trigonometry that you happily erased from your mind after highschool, spheres and toruses. There is a point, though, where you run into limitations of processing power. Basically, you won't be able to achiever anything more complex than mid-90's pre-3Dfx graphics. But there's still plenty of fun to be had if you stick to low poly.

[@abhipsamishra8548]

And here I am.. finding some crash course to sail my CSS boat, while there are Sharks who are just playing in an ocean!!

[@ChiragSoni9352]

I came here for just a quick look after seeing the thumbnail and definitely thought there is no way I'm going to see a 21 minute long video. I can't believe I watched the whole thing. Your presentation was really good in addition to the codepens which is why I guess users stay watching the whole thing.

[@KevinPowell]

So glad that you enjoyed it!

[@Alex_Eicher]

Horse part (08:00) : Code: ** How funny was this 😁 !!

[@edisvelicanin8854]

They are all great and mindblowing. Would live to create a portfolio that looks like the planet demo 😊

[@balls08]

we now need the cursed image of a bending effect on the iphone 6

[@mind_of_a_darkhorse]

I love seeing the possibilities that I never even contemplated!

[@imjody]

This is awesome. I've always loved working with CSS. :)

[@astrit]

I would like to invite my 2012 self to see this and just tell him it is going to be good for CSS 😆:😂

[@KevinPowell]

Haha, 2012-self would definitely think you were lying :P

[@shinobi77]

I just wanna know "How Long" did it take for those guys to create the Cube or the Horse Animation

[@ahonokotoba]

The only reaction video that I liked on the entire internet

[@jihunlee5537]

Professional CSS Instructor: "Wow, how do you do that".

[@rproctor83]

The 3d page flip is done by taking dividing the graphic up into strips (or polygons) and repositioning the image in the background accordingly. The animation itself is fairly simple.

[@NOST0PLOSS]

Not sure what css is or why this was in my recommended but good luck to the bois who are trying to improve

[@TheMetalMag]

code pen is a crazy place to see amazing artist mind blowing talents

[@keflatspiral4633]

08:50 EPIC MOMENT, just amazing

[@danielli3288]

css-only is the biggest flex

[@woarey8800]

Its sad to realise how most (non-webdesign related) people wouldnt think anything fancy about these animations if they would be used... These things are absolutely stunning

[@rajesht9702]

Thank you Kevin Powell for making this video. I am creating and experimenting similar kind of stuff in CSS Only. After watching this video, I am confident of my work. Thanks for your time. And Excellent work done by those CSS Developers that you mentioned in the video. It takes a whole lot of time and effort to create such creative work.

[@JoshuaCodes]

Great video, would love to see more videos like this.

[@JoshuaCodes]

@Kevin Powell Not falling for your fake account 🤪

[@Shuyinz]

This is crazy! Are there any great courses out there on how to learn this pure CSS 3D animation?

[@KevinPowell]

If there are, I don't know about them. I'm actually planning to do a collab in the future with Amit, so I'll have an intro to this witchcraft on my channel in a few weeks 😊

[@Shuyinz]

@@KevinPowell YES!!! PLEASE DO!!! ❤️❤️❤️

[@AryaVicky]

@@KevinPowell I saw ur collab with Amit sheen... He is an amazing guy... he explained 3d perspective, lightings in css and other stuff so easily and in very simple terms... Same like you... You both are amazing Guru's.

[@graealex]

Horse would have been a good example for SVG animations actually. I mean it looks impressive, but it's basically a vector key frame animation, which used to be done in Flash.

[@GaryBarclay]

Mind blown! Kevin...new KZbin genre ... CSS work reactions

[@devserendipity3063]

Didn't know these amazing things could be done in js let alone css my mind is BLOWN AWAY

[@anirudhjaiswal1280]

And here I struggle to make website responsive 😂

[@Anubis10110]

Thank you

[@TheLollercaster]

Probably the best reason why I don't have a look at others' work on Codepen (totally destroys my ego - Impostor syndrome)

[@justingolden21]

This is my first time watching one of your vids, you remind me of Eric Rosen (chess youtuber) in your voice / demeanor, you're very calm, analytical, thoughtful, and casual.

[@callmeEmvy]

In a few years: remaking Avengers Endgame with CSS ONLY

[@destroyonload3444]

I'm curious how these CSS animations perform against an embedded blender animation. Naturally, I'm inclined to think CSS-only has to be much smaller but possibly a tiny bit harder on the GPU in order to render.

[@dannyboy3413]

To all the people, who say html css is childs play, even a kid can do it, see this and try to design anything like this

[@CapsLock33]

dude you have some great vides. Im subscribed to you channel. Thanks for teaching the world

[@captaing7709]

Codepen should just be Frontend Got Talent at this point

[@PeterSedesse]

Doing this without javascript reminds me of back 10 years ago when people would level up a character to 60 in World of Warcraft without using a weapon.... just to see if they could do it...

[@RameenFallschirmjager]

These things look phenomenal. I wonder why when someone make such a miraculous thing would share the source code with others?! People could steal your craft without even mentioning the creators name.

[@ReViv4L]

David Khourshid is amazing. He's doing an incredible job on the xstate library !

[@spaceghost7807]

Thanks for these Kevin :)

[@JBuchmann]

Makes me feel better that even Kevin is blown away and has no idea how most of these are done.

[@fastestmanalive1549]

I feel reassured that even the king of CSS doesn't know how some of these animations are made

[@sourabhkhandelwal1568]

How do these people do it. Effing Genius, totally speechless. I struggle with even basic CSS. These people are fucking legends.

[@christophpirringer4518]

An hour and a half while looking at two of them? Let's go for it! :D

[@stadybangla2706]

When css king said"how this is possible?" Me.....l

[@animeforever8508]

Everyone of these looks so fun I am gonna definitely try them someday.

[@mnk895]

Amazing, I wanna achieve this level of creativity

[@maluksd6537]

Guys it's official, I'm just so stupid🤣🤣🤣

[@shams_shimul]

Man, I was having a great day today, this video ruined it mercilessly! Let me move to the back end with some dignity and peace! 😵🥴🤦‍♂️

[@rolytnz]

Those are astounding. Give people tools and they will make amazing things.

[@jasonleelawlight]

Geez! I wonder how much time they spent on each of these masterpieces. Even the simpler ones will take me at least 40 hours, the others are just beyond my level.

[@codingwithkenny6492]

WOW who ever built that ball bouncing off of those tiles is extremely skilled with CSS. I'm only 14.

[@XbattlepopeX]

When a pro has no idea how to do something i feel a little bit better

[@nro337]

People are insanely talented at CSS

[@karolpelc3956]

These are insane CSS skills!!

[@ricko13]

This actually makes me sad, I just realized that I know nothing about CSS