|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/master-responsive-web-dev-with-css3-flexbox-media-queries/
课程评论：没有评论
**课程名称：** 实用 CSS3 Flexbox、Media Queries 与 CSS Grid 精通 **课程概述：** 本课程将深入学习 Flexbox 和 Media Queries 的所有核心概念，并通过丰富的代码示例进行实践。《实用 CSS3 Flexbox、Media Queries 与 CSS Grid 精通》课程将涵盖以下主题： **Flexbox 基础与布局：** * **开发环境搭建：** 安装 VS Code 及 Server extensions。 * **Flexbox 概念入门：** 学习 Flexbox 的基本原理。 * **文件结构：** 设置 `index.html` 和 `style.css` 文件。 * **CSS 重置：** 为通用选择器应用 `margin`, `padding`, `box-sizing` 重置。 * **盒子模型 styling：** 对元素进行基础样式设置。 * **Flexbox 容器：** 应用 `display: flex` 到父级元素。 * **主轴方向：** 掌握 `flex-direction` 的 `row`, `row-reverse`, `column`, `column-reverse`。 * **项目缩放：** 理解 `flex-grow` 和 `flex-shrink`。 * **交叉轴对齐 (justify-content)：** 学习 `flex-start`, `flex-end`, `center`, `space-around`, `space-between`。 * **交叉轴对齐 (align-items)：** 学习 `flex-end`, `flex-start`, `center`。 * **Flex Item 尺寸：** 了解 `flex-basis` 的用法，及其与 `width` 的关联。 * **放弃 Float：** 了解为何不应使用 `float` 属性。 **响应式设计与 Media Queries：** * **响应式设计入门：** 理解什么是响应式设计。 * **非响应式网站示例：** 分析非响应式网站的不足。 * **构建响应式骨架：** 为非响应式页面创建 HTML 结构。 * **响应式页面 styling：** 对页面进行样式设计。 * **Media Queries 的应用：** 学习如何使用 Media Queries 实现响应式布局。 * **Flexbox 换行：** 掌握 `flex-wrap` 的用法，实现灵活的布局创建。 * **Flex 布局 styling：** 为 Flex 布局添加样式。 * **Flex Wrap 响应式布局：** 利用 `flex-wrap` 创建屏幕响应式布局。 * **增强响应式能力：** 进一步提升页面的响应式效果。 * **设备断点：** 了解不同设备的常用断点。 * **针对不同屏幕尺寸的响应式设计：** * 适配 768px 及以下设备。 * 适配 468px 及以下设备。 * 适配 1024px 及以上设备。 * 适配 769px 到 1023px 之间的设备。 **版本控制与协作 (Git)：** * **GitHub 账户创建：** 学习如何创建 GitHub 账户。 * **Git Bash 安装：** 安装 Git Bash 工具。 * **GitHub Token：** 创建 GitHub Token 并实现本地连接。 * **Git 命令实践：** 使用 Git 命令进行代码的提交 (commit) 和推送 (push)。 **课程资源：** * 课程提供完整的源代码。
In the course, you will learn all the concepts of flexbox and media queries.We will learn all the concepts with the help of code examples.Following are the topics we will cover:1.1-Installing VS Code and Server extension1.2-Introduction to Flexbox1.3-Setup index.html and style.css files1.4- Reset margin padding box-sizing on universal operator1.5-Styling the Boxes1.6-Apply display flex on parent1.7-Flex Direction row row-reverse column column-reverse1.8-Flex grow shrink2.1-Justify Content Flex Start2.2-Justify Content Flex End2.3-Justify Content Center2.4-Justify Content Space-Around2.5-Justify Content Space-Between3.1-Why you should not use Float property3.2-Align Item Flex End3.3-Align Item Flex Start3.4-Align Item Center3.5-Flex Basis same as Width on Flex Item4.1-Responsivesness with Media Query4.2-Flex Wrap Layout Creation4.3-Styling the Flex layout4.4-Making Screen Responsive with Flex Wrap4.5-Enhancing the responsiveness1.1-What is meant by Responsiveness1.2-Example Non_responsive website1.3-Creating HTML Skeleton for non-responsive website1.4-Styling the non responsive page2.1-Different Device break points2.2-Make Responsive in device upto 768px2.3-Make Responsive for device width upto 468px2.4-Make Responsive for device width above 1024px2.5-Making Responsive between 769px and 1023pxCreating account on GithubInstalling Git bashCreating github token and connecting from localUsing git commands to commit and push our local codeYou will get the complete source code
