|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/css-grid-with-react/
课程评论：没有评论
## Coursera 课程总结：React Instagram 克隆 - CSS Grid 精通 本课程专为希望精通 CSS Grid 布局并将其应用于 React 项目的学习者设计。课程分为两个主要部分，通过实践项目深入讲解 CSS Grid 的核心概念和高级用法。 **第一部分：Gridfolio App - CSS Grid 基础与精通** * **目标：** 全面掌握 CSS Grid 的每一个父元素和子元素属性。 * **内容：** * 探索超过 100 种 CSS Grid 布局示例，涵盖所有父子属性。 * 通过大量实例展示不同属性值如何影响布局，以及如何组合使用多个属性。 * 深入解析 CSS Grid 中较难理解的属性，如 `grid-auto-flow`、`grid-template-areas` 和 `grid` 属性。 * 每节课都建立在先前知识的基础上，为后续的学习和项目打下坚实基础。 * **产出：** 学习者将获得 Gridfolio 项目的完整源代码。 **第二部分：GridGallery App - React 图片画廊项目** * **目标：** 使用 React、React Router 和 Styled-components 构建一个专业的图片画廊应用。 * **内容：** * 从 `create-react-app` 开始，学习构建一个功能齐全的图片画廊。 * 实践 React Router 的使用，实现页面导航和组件间的路由。 * 学习如何使用 Styled-components 为 React 组件进行样式设计，无需创建额外的 CSS 文件。 * 构建并测试一个响应式图片网格（PhotoGrid），确保在任何设备上都能良好显示。 * 演示如何寻找和使用自定义的图库素材（照片和字体），实现个性化设计。 * 实现图片 modal（弹窗）功能。 * **学习亮点：** * **实战经验：** 构建一个真实、专业的 React 项目，提升职业竞争力。 * **技术栈：** 掌握 React、React Router 和 Styled-components 的实际应用。 * **响应式设计：** 学习如何创建跨设备的优秀用户体验。 * **社群支持：** 通过 Q&A 部分加入学习者社区，与他人协作，获取即时反馈和问题解答。 * **产出：** 学习者将获得 GridGallery App 项目的完整源代码，可作为参考和学习资料。 **课程优势：** * **最新技术：** 课程内容已更新至最新版本的 React 和 Styled-components。 * **深入浅出：** 通过直观的示例解释复杂的概念，循序渐进地引导学习。 * **全栈实践：** 将 CSS Grid 的理论知识与实际的 React 项目开发相结合。 * **资源丰富：** 提供两个项目的完整源代码。 * **社区互助：** 完善的问答环节，帮助学习者克服困难。 本课程旨在帮助您建立坚实的 CSS Grid 基础，并将其成功应用于具有专业水准的 React 项目开发中。
Now updated for the latest version of React and Styled-components!First learn CSS Grid with the Gridfolio App, exploring each parent and child property of CSS Grid. Then build the GridGallery app, an Image Gallery app built with React, React Router and Styled-components. With the Gridfolio app, you'll access over 100 Grids, with grids for each parent and child property of CSS Grid. We explain through example, so you'll see how each Grid property changes with new and different values, and how you can combine multiple Grid properties together.We'll discuss the more confusing properties of CSS Grid, like grid-auto-flow, grid-template-areas, and the elusive grid property. Each lecture expands on the previous, giving you knowledge that you can build on and use in the GridGallery app, a professional React project worthy of any React career developer. You'll also get the full source code to the Gridfolio project. With the GridGallery app, you'll build a real Image Gallery app. Starting from the create-react-app boilerplate, you'll learn through examples from React Router, style an Image modal, build and test a responsive PhotoGrid that works on any device. You'll learn how to find your own stock photos and fonts to personalize your image gallery. You'll use styled-components to easily style React components without new CSS files. You'll gain full access to the source code of the GridGallery app project, so you can reference the completed project at any time. We're here to answer your questions and we want you to succeed! With the Q & A section, you'll join a community of developers building the same project, so you can collaborate and get instant feedback to your issues. Thanks, and best of luck!-Developers at react.school
