|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/css-grid-layout-4/
课程评论：没有评论
课程名称：CSS Grid Layout 课程概述：本课程旨在在短短2小时的视频演示中快速教授CSS3 Grid布局模块。你将学习如何创建一个Grid容器，从而掌握所有Grid布局属性。课程将深入探讨容器的定位属性及其子元素，Grid项目。你将能够快速创建自己的布局，并全面了解Grid容器和Grid项目的所有属性。CSS Grid相较于Flexbox，是一个二维系统，可以同时进行水平和垂直的布局设计，帮助你创建列和行来设计网站。Grid专注于创建页面和网站布局，能够简便地实现各种布局形式，只要形状保持矩形即可。不同于Flexbox，后者主要用于在可用空间中对一系列元素进行单向对齐。 先修知识：本课程要求学员具备HTML和CSS的基本知识。如果你没有相关基础，可以先参加我的HTML或CSS课程。本课程是四门系列课程中的第四门，学习路径为：HTML -> CSS -> CSS Flexbox -> CSS Grid。通过掌握这两个新的CSS3模块，你将能创建任何类型的布局，摆脱几年前网页设计的种种限制。同时，本课程也可以单独学习，构成一个完整的知识体系。 实践内容：除了展示CSS Grid工作原理的课堂教学外，还有多个实践视频向你展示如何快速创建特定布局。例如，我们将构建一个包含一列和两个列的布局，以及一个使用12列系统的布局，这个系统能够让你快速创建各种布局，适用于HTML页面。最后，我们还将展示如何在20分钟内将基于表格的布局转换为CSS Grid布局，利用“auto-flow”功能，CSS Grid将自动优化元素的位置，非常适合制作马赛克布局，其中各种不同长度和宽度的卡片可以并排或垂直排列。
Leer snel CSS3 Grid Layout Module in 2 uur video demonstraties. Je leert hoe je een Grid container maakt, zodat alle Grid layout eigenschappen tot je beschikking komen. Daarna duiken we in de eigenschappen van de container voor het positioneren van de container en haar kinderen, de grid items. Al heel snel maak je zelf een layout. We gaan alle eigenschappen van Grid containers en grid items bekijken. Grid heeft verschillende manieren waarop je ermee kunt werken, wat het heel flexibel maakt. CSS Grid is in tegenstelling tot Flexbox een twee-dimensioneel systeem, je kunt dus tegelijkertijd horizontaal en vertikaal werken om daarmee kolommen en rijen te maken om je website vorm te geven. Grid is echt bedoeld om pagina cq website layouts te maken, je kunt vrij eenvoudig elk soort layout maken, zolang de vlakken maar rechthoekig blijven. Het verschil met Flexbox is, dat deze laatste vooral is bedoeld om een aantal elementen in een richting uit te lijnen over de beschikbare ruimte. Voorkennis Voor deze cursus is het noodzakelijk dat je kennis hebt van HTML en CSS. Indien je dat niet hebt, kun je mijn cursussen HTML en/of CSS eerst volgen. Deze cursus CSS is de vierde in een reeks van vier waarin je van absolute beginner tot expert gaat. Je begint met HTML, dan CSS, en daarna CSS Flexbox en CSS Grid. Met deze laatste twee nieuwe CSS3 modules kun je elke soort lay-out maken, en behoren de beperkingen die webdesign tot een paar jaar geleden had, definitief tot het verleden.Echter, deze cursus vormt een afgerond geheel en kan ook afzonderlijk worden gevolgd.PraktijkNaast de lessen waar je kunt zien hoe CSS Grid werkt, zijn er een aantal praktijkvideo's die je laten zien hoe je bepaalde zaken snel kunt maken. Zo maken we een layout met een kolom en een layout met twee kolommen, en bouwen we een systeem met 12 kolommen waarmee je elk soort layout snel kunt maken. Dit is een herbruikbaar systeem dat je op HTML pagina's kunt toepassen. Tenslotte zien we nog hoe je in 20 minuten een op tabellen gebaseerde layout omzet in CSS Grid. Dit gebeurt door middel van de functie "auto-flow", waarbij CSS Grid zelf de elementen op d emeest passende plaats gaat zetten. Ideaal voor mosaic layouts, waarin allerlei cards met verschillende lengtes en breedtes naast en onder elkaar staan.
