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.
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
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.
@@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)
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.
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 :-)
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.
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
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.
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.
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
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!
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.
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.
I am learning how to create web pages so that when I grow up, I do have an opportunity for being a Web dev. I will definitely adopt this new tech as it's just way simpler than divs.
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 !!!!
Yup. Look up UIzard Technologies' Pix2Code. You give the program a flat 2D image of a GUI and using deep learning, it spits out a functional template for iOS, Android, and/or the web. The head of that company, Tony Beltramelli, released a research paper on the topic, and plans to release AI's source code later this year. I've also read about a couple AI projects that do stuff like generate unique site layouts based on arbitrary parameters. If you think about it, it's really not a very difficult problem for machine learning algorithms to figure out, even without CSS grids. You can mine training data from literally everywhere on the web.
This show's how extremely stupid web development can be xD when you need AI to describe a design that you can draw on a piece of paper in a matter of minutes.
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
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!!!
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.
@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.
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!
CSS Grid is so great. Yesterday, I've designed a responsive webpage in Indesign and I placed guides in the design that represent gridlines. Than I opened brackets, created the html and base CSS. With brackets and Indesign open I was able to write the grid CCS rules without even seeing a preview while I'm writing the code. It's so intuitive, so easy.
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.
wow what a launch pad for grid learners. i started on a slightly more advanced video tutorial from a different source and was baffled. this video has cleared up so much for me!
Just getting back into html/css after 7-8 years only doing backend coding. Learning Python and Django and I went well that’s fine but what’s the latest way to build clean concise html for my templates and I hear “bootstrap”. So I get it and play around a bit and I think we’ll it’s easier to do layouts and everyone’s using it so it must be th way to go. Then I see this video Sigh. . . Start over
I've been working in bootstrap for far too long now and hated the way nothing scales vertically. This actually works good and allows developers to stop fixing everything that should not be there in the first place (the float example with fixing the parent). Loved the video, already started experimenting. It feels weird to not have to think in 12 columns anymore :))
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
It is disgusting. The classes you have to implement and doublecheck is just meh. I am glad this video was recommended to me. I feel like coding html again!
This is amazing! Funny thing is though that I read the article in the smashing magazine before I watched this: "Wait this guy says the same thing as the one in the article" haha. But this presentation brung the point much better to me! So awesome!
Great talk. Still, there's no way the "fuck IE" argument is gonna work for teams managing even marginally complicated or saturated content layouts. Teams building desktop ecomm experiences are the first thing that comes to mind.
Yeah that's the sad part. Can't say to my boss "we should display mobile version for older browsers, they shouldn't look the same !", he's gonna respond "Yeah right, well I tell you they should look the same. That's it." It's definitely a very interesting technology though, feels very natural.
You got it man. I appreciate his sentiment, but it's absolutely not going to happen in real world situations with agencies and clients. And it's also not true that we, as he said "will be stuck in the past forever." I finally can use Flexbox all the time, whereas a year ago I was hesitant and used it very sparingly. It's all eventually going to get there and considering how long it's been, doing something as drastic as serving the mobile experience to a desktop user (god forbid that user has a 27" monitor) is simply never going to fly in work environments. This is awesome technology and we're SO close to being able to use it, but no reason to rush it at this point.
As a mostly back-end developer I've always hated CSS and never liked all the hacks to get basic layouts. Almost like using an HTML table with rowspan colspan again lol.
I'm watching this half asleep in bed and it makes perfect sense to me
Holobrine i’m high as fuck and it makes sense to me
Idk, it kind of woke me up.
Me too
wow I was still half asleep and your comment shock me wide awake
Me too
probably the best youtube recommendation of 2017.
Agree!
Sometimes you gotta be lucky.
i've come from the future, no.
2018 also, just inspired out my melancholy about current pedjudees in web design)))
Danjovi .sagat totally agree！
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.
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
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.
@@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)
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.
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 :-)
It annoys me that he's talking about what's on the slide and the camera focuses on him instead.
The slides are available in the video's description: www.slideshare.net/mor10/css-grid-changes-everything-about-web-layouts-wordcamp-europe-2017
Not that it's easy to present something, but when verbal content == written content, it's going to be painful.
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
Such a great speaker he commanded the audience to give him a standing ovation
Cool, all the study made on those grids for magazines and books and print in general becomes once again relevant. How awesome.
"Everything just works" that's something I've never heard before..
It’s day four of coding bootcamp and this man just saved my life. I see clearly now
2 years later I don't see much grid being used. Been learning css, hopefully I remember to give grid a try one day.
It takes a long time to overturn decades of accepted practice!
Main reason I think , its because its not supported by internet explorer 9. Alot of people still use it
@@bf-xi3om they get the mobile responsive layout. Did you not watch the presentation?
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.
I prefer Flexbox.
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!
It's about bloody time!
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
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.
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.
Wait.. did he just say that grid count starts at 1?
IDK how to feel
CSS already works that way - e.g., `:nth-child(1)`
+Jeff Dickey nop, it starts at ZERO = `:nth-child() LOL
But that selects nothing
CSS is not programming, so I accept it :P haha
Heart breaking :(
tough crowd
Sometimes microphones do not pick up noises from the crowd. And again, sometimes, tough crowd
And it´s a conference in Paris with subtitles in french at a side...
They gave him a standing ovation!
@@oldboot Cuz were forced
@@Iwitrag yeah, that was the joke
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
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!
Really one of the shortest but best css grid eye opener. Thanks for saving my time 👌
I like the live text transcribing and translation going on in the top left and right corners.
Awesome talk.
Thanks for sharing Coding Tech! Super excited for the new CSS grid layout! 2018 will see a lot of new cool projects!
Literally the best presentation on grids you will ever find
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.
I left web for the same reason :D
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.
wow, simply wow. Feels like I'm starting from scratch again. Really good presentation.
This changed my life! Thanks! I will probably watch the video over, and over, and over.
This talk taught me why we're calling "Bootstrap", "Bootstrap" ... Never though about an actual strap on a boot !! Mind: blown !
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.
one of the best speaker that i have ever listened
I am learning how to create web pages so that when I grow up, I do have an opportunity for being a Web dev. I will definitely adopt this new tech as it's just way simpler than divs.
I was skeptical of the "Amazing" tag but have to say it's spot-on! Great post :-)
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!
The best presentation since I started to dive in website's word !!! Thank you Morten !!!
Morten your a great teacher, thanks for all the wordpress tutorials
and here we sit in 2019 and still look at the presentation in awe
"The way we have been doing web layout from the beginning is broken" Thank god someone said it
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 !!!!
This presenter is soo awesome. Great stuff
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!
one of the best talks I've seen on web development in a LONG time
That was not like chasing a hose at all! So well structured and spoken, thank you Morten Rand-Hendriksen!!!
Incredible!
If deep learning neural networks weren't going to make manual HTML layout obsolete before, they definitely are going to now!
Any sources or links on the idea you're discussing here? Has deep learning or even machine learning been applied to web design and development yet?
Yup. Look up UIzard Technologies' Pix2Code. You give the program a flat 2D image of a GUI and using deep learning, it spits out a functional template for iOS, Android, and/or the web. The head of that company, Tony Beltramelli, released a research paper on the topic, and plans to release AI's source code later this year.
I've also read about a couple AI projects that do stuff like generate unique site layouts based on arbitrary parameters.
If you think about it, it's really not a very difficult problem for machine learning algorithms to figure out, even without CSS grids. You can mine training data from literally everywhere on the web.
This show's how extremely stupid web development can be xD when you need AI to describe a design that you can draw on a piece of paper in a matter of minutes.
jurchiks101 and what is HTML? Exactly, a description of the design
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
holy CSS
hey thanks for attantion . nice talk . god bless grids
cascading style shit
Gerydome do you have a better replacement?
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!!!
Where the hell can I find this guy and give him a hug!!
P.S.: Thank you Coding Tech for this video!
In Canada (Burnaby)
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.
so glad I'm getting deep into CSS as this Grid method is adopted....what a time!
Probably the best UA-cam recommendation of 2021 !
This is definitely the best video on CSS Grid Layout! Thank you! UA-cam thank you for your recommendation!
I'm so glad that I'v found this when I'm just starting with css/html and all that stuff
I just started learning HTML/CSS and was overwhelmed by all the div garbage. So happy now lol
This is really the best thing in a while that I've seen with CSS.
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!
We are witnessing the enlightenment period of web design/development . Thank goodness it is here.
rip bootstrap
never used grids from bootstrap
not really 😂
bootstrap is not only grids FYI
XDRosenheim IMO no real coder should rely on frameworks. You aren't really designing when you use them.
@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.
My goodness I've been stuck on an assignment forever flexbox was not doing what I wanted and I was determined to not use a float! Thank you!!
I'm going to do a full rewrite of my website as soon as I get home this afternoon...
Andrew Schmitt progess?
progress
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!
Awesome video!
CSS Grid is so great.
Yesterday, I've designed a responsive webpage in Indesign and I placed guides in the design that represent gridlines.
Than I opened brackets, created the html and base CSS. With brackets and Indesign open I was able to write the grid CCS rules without even seeing a preview while I'm writing the code. It's so intuitive, so easy.
He's one of the amazing Instructor on Lynda ..
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.
Great talk. Wish I could've been there.
This has been a great learning experience. Love to this guy!
SUPER AMAZING TALK!!! THIS VIDEO ROCKS!!!
CSS GRID can now do what has been doing since forever.
HOLY CRAAAP!!! THIS IS FREAKING AWESOME!!!!!!!!!!!
wow what a launch pad for grid learners. i started on a slightly more advanced video tutorial from a different source and was baffled. this video has cleared up so much for me!
All I've kept hearing about is this new CSS grid. This is the first I've seen of it.
me{
mind: blown;
}
Thank you for the comment!
Just getting back into html/css after 7-8 years only doing backend coding. Learning Python and Django and I went well that’s fine but what’s the latest way to build clean concise html for my templates and I hear “bootstrap”. So I get it and play around a bit and I think we’ll it’s easier to do layouts and everyone’s using it so it must be th way to go.
Then I see this video
Sigh. . .
Start over
I've been working in bootstrap for far too long now and hated the way nothing scales vertically. This actually works good and allows developers to stop fixing everything that should not be there in the first place (the float example with fixing the parent). Loved the video, already started experimenting. It feels weird to not have to think in 12 columns anymore :))
I can't believe it's taken this long to get this point!
It is an excellent talk on CSS Grids. Indeed a captivating presentation!
Amazing. This guy just forced his own standing ovation!
Thank you for sharing. Keep posting such IT updates. On youtube there is not much channels which brings newest news for IT community.
Great speech. I'm convinced.
Amazing talk. This was the mother of all demos for CSS grid.
Thank you for the great video! It's really useful
Holy hell, mad props to the transcribers, especially the live French translation
This guy just figured out how to make everyone give you a standing ovation at the end of your lectures
This guy just changed my life.
Morten: makes joke to make presentation less boring.
Audience: UnABle to LOcatE tHe FuNNy
they're *ROBOTS*
maybe because they're bootstrap users that's why they can't get the joke about CSS?
He is from Norway. They are focused and structured people. And very good in teaching. Nice work !,,,
Im speechless!! Amazing
At 18:37 and I just had to jump of my seat. Wow! CSS Grid is sweet. So much potential.
He even got a grid shirt!
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
Frames and tables for LIFE!!!
j/k
Bootstrap looks crazy, the amount of markup you have to do within a webpage is just simply insane
It is disgusting. The classes you have to implement and doublecheck is just meh. I am glad this video was recommended to me. I feel like coding html again!
great talk, thanks
Thank you Morten. I'm just starting up and this is encouraging.
This sounds promising.
I have been hoping for this exact thing for months and now it's true. That's amazing
CSS REVOLUTION
This is amazing! Funny thing is though that I read the article in the smashing magazine before I watched this: "Wait this guy says the same thing as the one in the article" haha. But this presentation brung the point much better to me! So awesome!
Great talk. Still, there's no way the "fuck IE" argument is gonna work for teams managing even marginally complicated or saturated content layouts. Teams building desktop ecomm experiences are the first thing that comes to mind.
Yeah that's the sad part. Can't say to my boss "we should display mobile version for older browsers, they shouldn't look the same !", he's gonna respond "Yeah right, well I tell you they should look the same. That's it."
It's definitely a very interesting technology though, feels very natural.
zHqqrdz couldn't agree more. I'm really excited to get this rolling, but obvs where I won't mess up the user experience.
You got it man. I appreciate his sentiment, but it's absolutely not going to happen in real world situations with agencies and clients. And it's also not true that we, as he said "will be stuck in the past forever." I finally can use Flexbox all the time, whereas a year ago I was hesitant and used it very sparingly. It's all eventually going to get there and considering how long it's been, doing something as drastic as serving the mobile experience to a desktop user (god forbid that user has a 27" monitor) is simply never going to fly in work environments. This is awesome technology and we're SO close to being able to use it, but no reason to rush it at this point.
Isn't there a CSS grid polyfill library for IE et al?
Lars Faye Who the hell uses an old browser and has a 27'' monitor?
this half hour did me better then 3 months in university.
As a mostly back-end developer I've always hated CSS and never liked all the hacks to get basic layouts. Almost like using an HTML table with rowspan colspan again lol.
My thoughts ! Front-end guy here, I thought, "hey, we're back to tables :D " .Not exactly this is much more flexible.