Front-end dev reacts to mind-blowing Codepens

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

[@MaxTsyba]

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

[@5upl1an]

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

[@MaxTsyba]

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

[@summertime_sadness456]

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

[@fritzeyok]

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 😂❤

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

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

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

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

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

[@hyperzid]

glad im a backend dev 😂

[@summertime_sadness456]

😂😂

[@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. 🤣

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

[@arialdev]

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

[@KevinPowell]

Glad you liked it!

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

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

[@blank001]

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

[@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 😁😉

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

[@MrQhuin]

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

[@silversolver7809]

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

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

[@styromaniac6967]

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

[@Narc0YT]

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

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

[@adimardev1550]

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

[@JRK_RIDES]

Okay, now I need to meet a Psychiatrist 🤯

[@Anubis10110]

Lol 😂 yes

[@easyluckable]

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

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

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

[@DevMadeEasy]

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

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

[@codedusting]

This is depressing. But still motivating.

[@jihunlee5537]

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

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

[@aravinddev8708]

the stuff created by jamie Coulter was mind blowing

[@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. ;)

[@archiem6323]

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

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

[@Anony03]

Hey Kevin! I'm an italian subscriber who loves your video, so thank you for all you do and you did, that's really useful and you're really good in teaching and explaining P.s. stupid thing, "Fabrizio Bianchi" is an italian name, and "chi" in the word "Bianchi" has the same pronunciation of "key" in english

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

[@Alex_Eicher]

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

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

[@SecretEyeSpot]

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

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

[@callmeEmvy]

In a few years: remaking Avengers Endgame with CSS ONLY

[@shinobi77]

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

[@nro337]

People are insanely talented at CSS

[@edisvelicanin8854]

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

[@drakecoleman9364]

I absolutely love watching you go through these.

[@TheLollercaster]

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

[@ozehlaw]

I love how genuine you are.

[@NOST0PLOSS]

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

[@CarlosReveles]

Excellent! Bring us more! :)

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

[@keflat23]

08:50 EPIC MOMENT, just amazing

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

[@agussatria7138]

back-end : well.. i'm okay, good job buddy :')

[@danielli3288]

css-only is the biggest flex

[@rafatansari112]

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

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

[@TheMetalMag]

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

[@anirudhjaiswal1280]

And here I struggle to make website responsive 😂

[@Anubis10110]

Thank you

[@captaing7709]

Codepen should just be Frontend Got Talent at this point

[@JBuchmann]

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

[@ReViv4L]

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

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

[@yohanperera1663]

thanks for reviewing my css code.

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

[@excelsior83]

Every time you say, "how is this possible?", I get enlightened a bit. To ask(thy self) is the only way forward.

[@fastestmanalive1549]

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

[@trinidad17]

"They told me HTML wasn't a programming language so I built a solar system with 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.

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

[@alamosdark4517]

Kevin: *worries about the pronunciation of Coulter* Also Kevin: *pronounces Can as 🥫 without second thought* 😂

[@ahonokotoba]

The only reaction video that I liked on the entire internet

[@maluksd6537]

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

[@larrysunshine]

Doing this in CSS is like eating soup with a fork.

[@codingwithkenny6492]

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

[@basicnpcc]

Team Lead: Why did you PR a 10k line css file that looks like hieroglyphics? Me (a backend dev): Trust me, I'm a professional.

[@XbattlepopeX]

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

[@yevgenia7785]

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

[@boxfreshpidge]

Kevin please tell us your secret for happiness... it's radiating!

[@boxfreshpidge]

and great vid!

[@KevinPowell]

Haha, thanks. I just don't pay attention to the haters and the negative energy out there. So many people get hung up on that stuff. Focus on the positive and the stuff that you enjoy :)

[@steviewonder580]

"Any sufficiently advanced CSS is indistinguishable from sorcery" ~Somebody probably

[@stadybangla2706]

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

[@maciejglinski6564]

Today we saw books, iphones horses all brought to life with css. And still the directional awareness was the ne to get the most attention it was so cool, simple elegant yet amazing. Cool stuff

[@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! 😵🥴🤦‍♂️

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

[@zywiat361]

And I was proud of myself when I figured out how "display:flex" works... XD

[@deej3916]

no, But seriously, How does display:flex really work?

[@johnoyson]

The fact that Kevin ask how you do that shows how impressive these are

[@ricko13]

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

[@sourabhkhandelwal1568]

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

[@AndCarvajal]

Me: how to align a div stack overflow?

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