|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/master-css3-and-reactjs-by-developing-3-projects/
课程评论：没有评论
**课程名称：** 通过开发3个项目掌握CSS3和ReactJs **课程概述：** 本课程旨在教授您CSS3和ReactJs的所有核心概念，使您能够构建真实的Web项目，并具备设计和开发响应式、生产级前端的能力。您将从React组件开发的基础知识学起，逐步深入到诸如静态和动态路由等复杂主题。 **课程内容亮点：** * **项目驱动学习：** 通过完成三个实际项目来巩固所学知识。 * **项目一：响应式作品集网站** - 涵盖项目布局设置、菜单导航、主体内容以及响应式设计。 * **项目二：时尚的“我们的服务”区块** - 专注于骨架搭建、标记与布局，以及样式和响应式设计。 * **项目三：房源列表交易市场网站** - 这是一个更全面的项目，涵盖从GitHub仓库设置、React项目创建、代码清理、字体集成、组件开发（如TopBar, Hero Section, Sidebar）、JSX理解、CSS变量使用，到列表项、列表概览、列表详情页面的各个方面的样式和布局，以及创建新房源页面的开发。 * **ReactJs深入学习：** * React工作原理及VS Code扩展的介绍。 * 组件化开发，包括TopBar、Hero Section、Sidebar等关键组件的构建与样式设计。 * JSX语法和其在React中的应用。 * CSS变量的使用，以提高样式管理的效率。 * 房源列表（Listing Item）的创建和样式化。 * 列表概览（Listing Overview）和列表详情（Listing Detail）页面的设计与实现，包括元数据、图片、标题、操作、作者、发布时间、描述等的样式。 * 创建房源（Create Listing）页面的布局和功能实现。 * **CSS3高级应用：** 课程将详细讲解如何通过CSS3实现各种视觉效果和布局，使您的项目具有专业的设计感和响应式能力。 * **前端路由：** 学习使用`react-router-dom`库实现组件间的导航和路由，包括菜单项的静态导航和房源详情的动态导航。 * **生产级开发实践：** 课程内容侧重于帮助您构建可用于生产环境的Web应用。 * **完整源代码：** 您将获得所有三个项目的完整源代码，作为学习过程中的参考。 **学习成果：** 完成本课程后，您将能够自信地使用CSS3和ReactJs开发现代、响应式的前端应用程序，并为您的前端开发职业生涯奠定坚实的基础。
In this course, you will learn all the concepts of CSS3 and ReactJs that will not only help you build real-world projects but also enable you to start thinking about how to design and develop a frontend that will be responsive and production-grade.You will be learning all the basics of developing components in React and moving on to learning complex topics like static and dynamic routing.We will be building 3 projects:Project One - Responsive Portfolio WebsiteProject Layout SetupWorking on the Menu OutlineStyling the Menu section Part - 1Styling the Menu section Part - 2Styling the Menu section Part - 3Styling the Body section Part - 1Styling the Body section Part - 2Making the website responsiveProject Two - Stylish Our Services SectionSetting up the skeletonWorking on the markup and layoutWorking on styling and responsivenessProject Three - Property Listing Marketplace websiteGithub-Repo-Local-SetupCreate-react-appCode-CleanupAdding-Google fontsReact-How-it-works-VSC-ExtensionCreating-TopBar-ComponentUnderstanding-JSXStyling-TopBar-Part-1Styling-TopBar-Part-2Adding-Fontawesome-Styling-TopBar-Part-3Styling-TopBar-Part-4Styling-TopBar-Part-5Styling-TopBar-Part-6Styling-Hero-Section-Part-1Styling-Hero-Section-Part-2Styling-Hero-Section-Part-3Styling-Hero-Section-Part-4Styling-Sidebar-Section-Part-1Styling-Sidebar-Section-Part-2Styling-Sidebar-Section-Part-3Styling-Sidebar-Section-Part-4Styling-Sidebar-Section-Part-5Styling-Sidebar-Section-Part-6Styling-Sidebar-Section-Part-7Working on Listing Item componentUsing CSS variablesWorking on Listing Overview screenStyling Listing Item category and time sectionStyling Listing Item description sectionWorking on layout of Listing Detail componentAdding sidebar on Listing Detail pageStyling the Listing Detail pageWorking on Listing Detail page meta data sectionStyling the image section of Listing Detail pageStyling Title and Action section of Listing PageStyling the Author and Post time section of Listing Detail pageStyling the Description section of Listing Detail pageStyling the first letter of Description on Listing Detail pageSetting up Layout for Create Listing pageWorking on Create Listing pageWorking on upload Icon on Create Listing pageStyling the Create Listing pageInstalling React Router Dom library for routing between componentsAdding Navigation and Routing for menu itemsDynamic navigation for showing property detailYou will also get the complete source code of all three projects that will help you take a reference whenever you want.
