|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/10-days-of-css-grid/
课程评论：没有评论
课程名称：10天掌握CSS Grid 课程概述：想要精通CSS Grid吗？这门全面的课程“10天掌握CSS Grid”专为您提供在不同设计场景中自信地应用CSS Grid所需的技能而设计。课程结构逐步深入，从应用CSS Grid布局模型于基础设计开始，逐步过渡到更复杂的设计项目。课程侧重于各种CSS Grid属性的实际运用，而非理论讲解，帮助学员在多个项目中掌握应用。以下是课程中的项目概述： 第1天：表单CSS Grid设计。在这一天，您将学习如何使用grid-template-columns属性声明两个等宽的列。 第2天：多彩居中盒子CSS Grid设计。您将了解如何运用grid-template-columns、justify-content、align-content和grid-gap属性，配合auto-fit值，达到集中盒子设计的效果。 第3天：时间线CSS Grid设计。您将学习如何使用grid-template-columns、grid-column-gap和justify-self属性实现时间线布局。 第4天：嵌套CSS Grid设计。您将掌握使用grid-template-columns、justify-items和align-items属性创建嵌套网格设计的技巧。 第5天：移动端CSS Grid设计。您将了解如何借助grid-template-columns、grid-template-rows、grid-auto-rows、grid-row、align-self、justify-items和align-items等属性，以及subgrid和auto-fit值，构建通用的移动设计。 第6天：键盘CSS Grid设计。您将学习如何运用grid-template-columns、grid-gap、grid-column、justify-items和align-items属性构建典型的键盘设计。 第7天：菱形网格CSS Grid设计。掌握如何使用grid-template-columns、grid-gap和grid-column属性创建菱形网格设计。 第8天：分割图像CSS Grid设计。您将学习如何使用grid-template-columns、grid-template-rows、grid-gap和grid-column属性创建分割图像的网格布局。 第9天：响应式网页CSS Grid设计。在此部分，您将学习如何利用grid-template-columns、grid-template-rows、grid-column-gap等属性创建响应式网页网格设计。 第10天：响应式下拉导航菜单CSS Grid设计。您将学习如何使用grid-template-columns、grid-template-rows、justify-items、align-items等属性构建响应式导航下拉菜单。 通过这门课程，您将对如何将CSS Grid布局模型融入自己的网页设计有一个扎实的理解。现在就报名，让我们一起掌握CSS Grid吧！
Do you want to master CSS Grid? Well look no further, in this comprehensive course "10 Days Of CSS Grid" specifically designed to provide you with full confidence in applying CSS Grid given different design scenarios. The course is structured in a way so that we can start by applying the CSS Grid layout model to some basic designs before gradually moving to more complex designs. In terms of the CSS Grid properties that will be explored this course will not necessarily explain the theory behind them but instead show how they can be used across different projects. Below is an overview of the projects we will cover in this course:Day 1: Form CSS Grid DesignOn Day 1, you will explore how the grid-template-columns property can be used so that we can declare two columns of equal widths.Day 2: Multi Colored Centered Boxes CSS Grid DesignOn Day 2, you will learn how we can use the grid-template-columns, justify content, align-content and grid-gap properties along with the auto-fit value to achieve a centralized box design layout with different colors.Day 3: Timeline CSS Grid DesignOn Day 3, you will learn how we can use the grid-template-columns, grid-column-gap, justify-self properties to achieve a timeline based layout.Day 4: Nested CSS Grid DesignOn Day 4, you will learn how we can use properties like grid-template-columns, justify-items and align-items to achieve a nested grid design.Day 5: Mobile CSS Grid DesignOn Day 5, you will learn how we can use properties like grid-template-columns, grid-template-rows, grid-auto-rows, grid-row, align-self, justify-items and align-items along with applying the subgrid and auto-fit value to construct a generic mobile design.Day 6: Keyboard CSS Grid DesignOn Day 6, you will learn how we can use properties like grid-template-columns, grid-gap, grid-column, justify-items and align-items to construct a generic keyboard design.Day 7: Diamond Grid CSS Grid DesignOn Day 7, you will learn how to use properties like grid-template-columns, grid-gap and grid-column to create a diamond grid design.Day 8: Split Image CSS Grid DesignOn Day 8, you will learn how to create a split image grid layout using properties such as grid-template-columns, grid-template-rows, grid-gap and grid-column.Day 9: Responsive Webpage CSS Grid DesignOn Day 9, you will learn how to use properties like grid-template-columns, grid-template-rows, grid-column-gap, grid-template-areas, grid-auto-flow, grid-auto-rows, justify-content, align-self, justify-self, justify-items, align-content, and align-items to create a responsive webpage grid design.Day 10: Responsive Dropdown Navigation Menu CSS Grid DesignOn Day 10, you will learn how to build a responsive navigation dropdown menu using properties like grid-template-columns, grid-template-rows, justify-items, align-items, justify-content and justify-self.By the end of the course, you should have a solid understanding in how you can incorporate the CSS Grid layout model into your own website designs. Enroll now and lets master CSS Grid together.
