CSS Grid Changes EVERYTHING - Amazing Presentation

Подписаться 731 тыс.

Просмотров 1,1 млн

50% 1

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
EVENT: WordCamp Europe, Paris, France, June 2017
SPEAKER: Morten Rand-Hendriksen, / mortenrandhendriksen
SLIDES: www.slideshare.net/mor10/css-...
PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed).
ORIGINAL SOURCE: • Morten Rand-Hendriksen...
Additional material for CSS learners:
amzn.to/2Tk6kBZ CSS: The Definitive Guide: Visual Presentation for the Web amzn.to/2FgQcMI A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer
amzn.to/2Ffp1ll CSS in Depth
amzn.to/2FlKV6N CSS Secrets: Better Solutions to Everyday Web Design Problems

Опубликовано:

15 июл 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1 тыс.

@Holobrine 6 лет назад

I'm watching this half asleep in bed and it makes perfect sense to me

@IgnoreSolutions 5 лет назад

Holobrine i’m high as fuck and it makes sense to me

@PaulSebastianM 5 лет назад

Idk, it kind of woke me up.

@infoharvester 4 года назад

Me too

@shaunbeh8293 4 года назад

wow I was still half asleep and your comment shock me wide awake

@sergiosierra2422 3 года назад

Me too

@Melvin420x12 6 лет назад

"Everything just works" that's something I've never heard before..

@Danjovisagat 7 лет назад

probably the best youtube recommendation of 2017.

@bigbets5915 6 лет назад

Agree!

@Paretozen 6 лет назад

Sometimes you gotta be lucky.

@JorgeAlbertoBenavidesOjinaga 6 лет назад

i've come from the future, no.

@vladlanov 6 лет назад

2018 also, just inspired out my melancholy about current pedjudees in web design)))

@wanyinwu5586 5 лет назад

Danjovi .sagat totally agree！

@silentshadow867 3 года назад

I am glad there are people like Morten who stop and ask, "Wait, even though this is the way we do things, does it really make sense?" I am a novice web developer who just created a page using bootstrap, but when I did a nested table I questioned if I was doing it right because the markup looked so sloppy. This is how I feel css should work. That markup makes so much more sense.

@logicalfundy 7 лет назад

So we've gone from tables, to DIVs, to grids. Almost full circle - except with grids we can now make them responsive in the CSS :). Time to rewrite my website again.

@martianunlimited 5 лет назад

You forgot frames :) Tables has always been a hack-y solution to arrange our elements in a grid... Tables should only be used to present tabular data. not to layout our elements in our webpage

@undercrackers56 5 лет назад

Don't worry. When the next batch of graduates emerge from College/University they will "invent" everything new again and the circle will start again. Heaven forbid that each generation should maintain the standards that have been developed over the past decades.

@martianunlimited 4 года назад

@@acajoom all i can say is ...don't assume boy... I was old enough to remember BBS... heck.. i was old enough to have used BBS ... we come from an era of information over presentation... (simply because our browsers weren't standardized, and it rendered the tags the hell they wanted)

@jwvw23 6 лет назад

I'm 7 minutes in and really believe that I understand everything better now, than after reading all the HTML/CSS books /articles/bootstrap/tutorials/(yet another) framework stuff for a few months. Thank you Morten! You are a true educator :-)

@Meverynoob 6 лет назад

Such a great speaker he commanded the audience to give him a standing ovation

@erosnolasco4553 2 года назад

It’s day four of coding bootcamp and this man just saved my life. I see clearly now

@CarloRizzante 7 лет назад

Cool, all the study made on those grids for magazines and books and print in general becomes once again relevant. How awesome.

@noelwalterso2 7 лет назад

It's about bloody time!

@viniciusdemorais7327 5 лет назад

In this presentation I could see my entire relationship with CSS in 32 min and I never have laughed too much. This crowd is tough!

@chapchic 6 лет назад

This changed my life! Thanks! I will probably watch the video over, and over, and over.

@Mrsatnur 5 лет назад

Really one of the shortest but best css grid eye opener. Thanks for saving my time 👌

@ben-abbott 7 лет назад

tough crowd

@HumanoidTyphoon91 5 лет назад

Sometimes microphones do not pick up noises from the crowd. And again, sometimes, tough crowd

@pablorodriguez6318 5 лет назад

And it´s a conference in Paris with subtitles in french at a side...

@oldboot 5 лет назад

They gave him a standing ovation!

@Iwitrag 5 лет назад

@@oldboot Cuz were forced

@oldboot 5 лет назад

@@Iwitrag yeah, that was the joke

@namstel9225 5 лет назад

I've heard of grid before and seen some example, but this video really got me thinking in grids. You really make some excellent points that I haven't thought of before. It makes so much sense to have a defined layout, and then have the content just adhere to that layout. I'm 2 years late, but I guess it's better late than never. Thanks for this excellent presentation, Morten!

@shahbokhari 7 лет назад

The most amazing all in one "CSS Grid" presentation ever. This really changes everything about the web layout 2017. Thanks and a lot of love to Rand Hendriksen

@codecobber1107 6 лет назад

wow, simply wow. Feels like I'm starting from scratch again. Really good presentation.

@Nik.ff. 5 лет назад

2 years later I don't see much grid being used. Been learning css, hopefully I remember to give grid a try one day.

@ZyronZA 5 лет назад

It takes a long time to overturn decades of accepted practice!

@bf-xi3om 4 года назад

Main reason I think , its because its not supported by internet explorer 9. Alot of people still use it

@TechnicolorMammoth 4 года назад

@@bf-xi3om they get the mobile responsive layout. Did you not watch the presentation?

@TechnicolorMammoth 4 года назад

Or maybe do it right now. You're learning CSS. This is the exact time you give it a try and never go back to divs, nests and floats. Grid IS in actual real life design and unlike web code has not changed at all because it is natural. You're web Designing. Why fill your head with this that and the other when you have the pure simplicity of a grid.

@beepst 4 года назад

I prefer Flexbox.

@phanphuoclam1365 6 лет назад

Thank you so much!!! I used flex for long time ago. And now, I have just watched this video. I want to come back to 9 months ago and watch this video. And it already saved my life at least until now. Thank you.

@charlesbovalis6591 6 лет назад

WOW ... I know Morten from several online WordPress tutorials I have taken and I am very pleased to see him do a presentation on CSS grid. Thumbs up Morten !!!!

@yuriymatso 7 лет назад

Thanks for sharing Coding Tech! Super excited for the new CSS grid layout! 2018 will see a lot of new cool projects!

@sainaths.r2084 5 лет назад

One of the most engaging and informative front end presentation I've ever seen , listening to this guy talk sounded like hearing the Steve jobs of layouts : P

@ninjaduck3534 6 лет назад

That was not like chasing a hose at all! So well structured and spoken, thank you Morten Rand-Hendriksen!!!

@andrirafna 7 лет назад

I like the live text transcribing and translation going on in the top left and right corners. Awesome talk.

@zakcodes3507 7 лет назад

"The way we have been doing web layout from the beginning is broken" Thank god someone said it

@4.0.4 7 лет назад

It annoys me that he's talking about what's on the slide and the camera focuses on him instead.

@Zealotux 7 лет назад

The slides are available in the video's description: www.slideshare.net/mor10/css-grid-changes-everything-about-web-layouts-wordcamp-europe-2017

@neithanm 7 лет назад

Not that it's easy to present something, but when verbal content == written content, it's going to be painful.

@joelalain 5 лет назад

yea video and "plain old logic" are still nacent technologies. We must get used to them before using them in ways that make ANY sense.... sigh

@huckleberryfinn8795 2 года назад

I just started studying web dev about a week ago and it was difficult to get the layout I wanted. I tried flexbox, etc., and eventually tried CSS grid and it worked like a charm. Actually it was last night lol. Then this video pops up on my feed.

@guillermodanielmazzarigiov1768 2 года назад

I started my organizing party a couple of months ago and I have had a very hard time with media queries, now that I se this is like 🤯, I can't even imagine how it impacted people who had all their live coding and fit presented to this 4 years ago

@rickyanthony 5 лет назад

Great presentation. CSS overlords should pay him. I felt he voiced all my layout frustrations for the last 8 years the rest of the world called normal. Something in me is set free.

@PristinePerceptions 6 лет назад

I have often wondered why web layouts weren't always like this. This is not innovation. No, it is not. This is the natural way to do it. It is a shame that we didn't do this earlier.

@gilsonviana4936 6 лет назад

After couple of years (👂) out there going through several web development tutorials, I felt the urge to learn CSS grid, so I found this guy and his whole presentation taught me (in a fun way) what a boring tutorial would do in 1-2 hours. Thanks a lot dude.

@zakcodes3507 7 лет назад

I have been hoping for this exact thing for months and now it's true. That's amazing

@videodose2612 6 лет назад

This is definitely the best video on CSS Grid Layout! Thank you! RU-vid thank you for your recommendation!

@BlueRidgeParkway 7 лет назад

I was skeptical of the "Amazing" tag but have to say it's spot-on! Great post :-)

@andrewmagill 5 лет назад

Brilliant stuff Morton! Really got me all excited inside! :)

@darshanv1748 2 года назад

Literally the best presentation on grids you will ever find

@vonkruel 7 лет назад

Great presentation! I'm completely sold on this. One of the most satisfying things you can do as a programmer is to replace evil, painful hacks with a nice clean solution that makes life easier every day you work on the project. This is CSS finally doing its job, so we don't have to compensate for its failings elsewhere.

@fooboobear 6 лет назад

one of the best speaker that i have ever listened

@trader5199 6 лет назад

OMG - This is the most terrific news in the world of CSS and front-end development!!! Definitely the news of the year!!! Thank you for the upload!

@V__RR 6 лет назад

I'm literally about to learn css this week. Thank goodness I saw this video before I started learning it, this is going to change the future.

@ArisAlamanos 6 лет назад

one of the best talks I've seen on web development in a LONG time

@SoloDoloTube 7 лет назад

This talk taught me why we're calling "Bootstrap", "Bootstrap" ... Never though about an actual strap on a boot !! Mind: blown !

@Zamicol 5 лет назад

Amazing talk. This was the mother of all demos for CSS grid.

@FlashKenTutorials 6 лет назад

This is amazing! concise explanations with great examples. Excellent pacing and case studies. And the cowpath thing is inspirational!

@RAYl71 7 лет назад

holy CSS

@RAYl71 6 лет назад

hey thanks for attantion . nice talk . god bless grids

@SirusStarTV 5 лет назад

cascading style shit

@phat80 3 года назад

Gerydome do you have a better replacement?

@justyna6134 6 лет назад

The best presentation since I started to dive in website's word !!! Thank you Morten !!!

@SaintTheDreamer 5 лет назад

Morten your a great teacher, thanks for all the wordpress tutorials

@milkdrom3da 2 года назад

This has been a great learning experience. Love to this guy!

@quintinmaseyk6975 6 лет назад

Excellent talk, pace, flow and examples! Keep it up mate!

@institutionalmoney111 6 лет назад

SUPER AMAZING TALK!!! THIS VIDEO ROCKS!!!

@iMPRE7ed 6 лет назад

This presenter is soo awesome. Great stuff

@BjrnErikSandbakk 6 лет назад

Thanks from Tromsø in Northern Norway. I learned what i need to start to explore CSS Grid, and make it in to a redesign of one of my clients site. Thanks!!!

@sororbudwiser 6 лет назад

This was a quick, simple, and informative speech on the CSS Grid layout. Loved it, thank you!

@WaseemYusuf 4 года назад

HOLY CRAAAP!!! THIS IS FREAKING AWESOME!!!!!!!!!!!

@tsuyoshi4226 6 лет назад

Thank you for the great video! It's really useful

@filip3148 5 лет назад

and here we sit in 2019 and still look at the presentation in awe

@jalbr74 5 лет назад

This is exactly the kind of overview I was looking for. Thanks!

@stonedaurelius6496 7 лет назад

Awesome video!

@bitonchen 7 лет назад

Im speechless!! Amazing

@bennettwaisbren 6 лет назад

One of the most clever presentations on web dev I've ever seen, damn bravo

@gateCodeKC 9 месяцев назад

As someone who is just 2 weeks-in learning to code, this was what confused me. The tutorials teach you semantics but never see them in like i think 99% on websites you inspect. All you see is div div div lol. Thanks for a thoughtful presentation!

@peterharang2893 7 лет назад

Great speech. I'm convinced.

@anthonyreynolds1725 7 лет назад

rip bootstrap

@w999d 7 лет назад

never used grids from bootstrap

@alexmachin1785 7 лет назад

not really 😂

@wolo 7 лет назад

bootstrap is not only grids FYI

@kenthefley2226 7 лет назад

XDRosenheim IMO no real coder should rely on frameworks. You aren't really designing when you use them.

@wolo 7 лет назад

@Kent Hefley %D are you serious... real coders should not reinvent the whell and face the same problems again and again on every new project. this is exactly what the frameworks are for.

@shreyaesha001 6 месяцев назад

this is the GOAT tutorial on css grids ever! thank you so much.🖖👑

@sainaths.r2084 6 лет назад

Fantastic video . Was putting off css grid thinking about support .Helped clarify all that :)

@lets-evolve 6 лет назад

Finally, I left web design because it was absolutely nuts how responsive design was being done. Now it's finally come full circle and done the right way. Haven't tried this yet, but sounds promising. I thought bootstrap was on the right path but not quite there.

@clankill3r 5 лет назад

I left web for the same reason :D

@Swaffelking007 6 лет назад

I am new to webdesign, but this looks exactly like wpf grid in XAML and I love it. Great time to be a webdeveloper i guess!

@thenewcoder5592 6 лет назад

This is my WOW moment. Thanks Morten :)

@maxtrax3258 5 лет назад

Did it. Works like a charm. Thanks again

@edwardssnowden8986 7 лет назад

Wait.. did he just say that grid count starts at 1? IDK how to feel

@jeffdickey 7 лет назад

CSS already works that way - e.g., `:nth-child(1)`

@cssmonkey6193 6 лет назад

+Jeff Dickey nop, it starts at ZERO = `:nth-child() LOL

@sebastianmalton5967 6 лет назад

But that selects nothing

@thfreakinacage 6 лет назад

CSS is not programming, so I accept it :P haha

@falahati 6 лет назад

Heart breaking :(

@rldash 6 лет назад

so glad I'm getting deep into CSS as this Grid method is adopted....what a time!

@StefanHolodnickDailyinvention 6 лет назад

This is really the best thing in a while that I've seen with CSS.

@Glow0110 4 года назад

This is absolutely incredible!!! Thanks so much 🙏

@stianchrister 6 лет назад

I just started learning HTML/CSS and was overwhelmed by all the div garbage. So happy now lol

@saket37 7 лет назад

Where the hell can I find this guy and give him a hug!! P.S.: Thank you Coding Tech for this video!

@maxiherczegh4419 6 лет назад

In Canada (Burnaby)

@jonghunpark1403 5 лет назад

It blew my mind... Thanks for the awesome presentation.

@YouAdrianziom 6 лет назад

I'm so glad that I'v found this when I'm just starting with css/html and all that stuff

@lawrencefitzgerald4744 6 лет назад

I can't believe it's taken this long to get this point!

@boradmay 7 лет назад

great talk, thanks

@LucasGuillemette 6 лет назад

Thank you Morten. I'm just starting up and this is encouraging.

@mitosymicrochips 6 лет назад

I was looking for an explanation like this. Thanks!

@EldeNova 6 лет назад

Amazing. This guy just forced his own standing ovation!

@adriangabardo 5 лет назад

This guy just figured out how to make everyone give you a standing ovation at the end of your lectures

@TomHermans 5 лет назад

Great presentation Morten. Immediately clear what, why and how. Example for a lot of talks (including my own ;) )

@chrisp7414 5 лет назад

Clear thinking was just a matter of time, goodbye clutter. Thanks grid and Morten! Awesome talk, love the end motivational chunk :).

@szczypiorofixable 7 лет назад

This guy is amazing :)

@clarencewarner3979 4 года назад

He's one of the amazing Instructor on Lynda ..

@ethandowler4669 6 лет назад

Thank you so much for this. This is amazing!

@timmcneill5299 5 лет назад

Im about to embark on re-designing a new website for a massive charity, and i'm so glad i watched this before starting - thank you!

@ezequielgarrido3987 7 лет назад

Great talk. Wish I could've been there.

@phpBasics 7 лет назад

Frames and tables for LIFE!!! j/k

@Sheikh_Sakibul_Islam 3 года назад

Probably the best RU-vid recommendation of 2021 !

@sayasreeni 6 лет назад

It is an excellent talk on CSS Grids. Indeed a captivating presentation!

@PabloBejaranoPabhoz 7 лет назад

Awesome, 😱🎉

@kelbiekelbie909 7 лет назад

This sounds promising.

@YoloMonstaaa 4 года назад

Wow this was a awesome talk! Learned a lot and had fun doing it, this guy is a great teacher!

@danielmadison4451 3 года назад

Very Cool. Couldn't agree more. Love Morten's presentation.

@aschmitt89 6 лет назад

I'm going to do a full rewrite of my website as soon as I get home this afternoon...

@General_Aladeen 6 лет назад

Andrew Schmitt progess?

@General_Aladeen 6 лет назад

progress

@thekidsacademy3820 6 лет назад

CSS REVOLUTION

@davidrice7655 5 лет назад

I love this talk on CSS Grid. I was a Computer Science student who dropped out once I discovered web development. CSS Grid was taking hold when I switched to web dev. This is such a great explanation. I was still making it complicated until you showed me the simplicity