CSS Grid Changes EVERYTHING (About Web Layouts) – Amazing Presentation by Morten Rand-Hendriksen

By Prosyscom
In March 6, 2018
144 Views

[ad_1]

How to create website layouts using CSS grid | Learn HTML and CSS | HTML tutorial. CSS grid layouts will change how we create website layouts. Today you will learn about CSS grids, which is a new method we can use to create website layouts. CSS grid layouts are the future of webdesign layouts only using css, and in this lesson I will give you a guide to using CSS grid.
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
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.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.

For those interested, here are some random experiments with CSS Grid layouts: http://bit.ly/2Fo3CVK

Event Details –
Place = WordCamp Europe, Paris, France, June 2017
SPEAKER:
Morten Rand-Hendriksen
LinkedIn Profile – http://bit.ly/2DQr29b
Youtube Channel – http://bit.ly/2nh3O2b
Slides – http://bit.ly/2FoU0d4

PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed).

ORIGINAL SOURCE: http://bit.ly/2DQrWm5

[ad_2]

قالب وردپرس