|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/practical-css3-flexbox-media-queries-reactjs-mastery/
课程评论：没有评论
本课程涵盖ReactJS、CSS3 Flexbox和媒体查询的全面知识，并提供四个实战项目。 **核心技能：** * **Flexbox：** 深入理解Flexbox的各种属性，包括 `display: flex`、`flex-direction`、`flex-grow`、`flex-shrink`、`justify-content`（`flex-start`, `flex-end`, `center`, `space-around`, `space-between`）和 `align-items`（`flex-end`, `flex-start`, `center`）。学习如何使用Flexbox构建灵活的布局，并避免使用Float属性。 * **媒体查询：** 掌握响应式设计的关键——媒体查询。学习如何为不同设备断点（如768px、468px、1024px及769px-1023px之间）创建响应式布局，确保网站在各种屏幕尺寸上都能良好展示。 * **ReactJS基础与进阶：** 从React组件开发基础到静态和动态路由等复杂主题，您将学会构建React应用程序。 * **Git和GitHub：** 学习如何安装Git Bash，创建GitHub令牌，并将本地代码推送到GitHub仓库，掌握版本控制的基本流程。 **实战项目：** 1. **响应式作品集网站：** 从项目设置、菜单大纲、主体部分到整体响应式设计，全面学习构建一个作品集网站。 2. **“我们的服务”部分：** 学习如何设置结构（skeleton），编写标记（markup）和布局，并应用样式和响应式设计。 3. **房产列表市场网站：** * **React基础：** 创建React应用 (`create-react-app`)，清理代码，添加Google字体，理解React工作原理和VS Code扩展。 * **组件化开发：** 构建 `TopBar`、`ListingItem`、`Listing Overview` 等组件，学习JSX用法，并进行详细的样式设计（包括CSS变量）。 * **页面布局与样式：** 设计 `Hero Section`、`Sidebar Section`、`Listing Detail`、`Create Listing` 等页面，包括元数据、图片、标题、作者信息等细节。 * **路由：** 使用`React Router Dom`库实现组件之间的导航和路由，包括动态路由来展示房产详情。 **课程亮点：** * **全面的代码示例：** 所有概念都通过代码示例进行讲解。 * **完整的源代码：** 提供所有三个项目的完整源代码，方便参考和学习。 * **实战导向：** 课程注重实际项目开发，帮助您构建真实世界的应用程序。 * **生产级设计：** 学习如何设计和开发具有生产级质量的响应式前端。 通过本课程，您将不仅能够掌握CSS3和ReactJS的核心技术，还能提升您的前端开发能力，能够独立构建出精美且响应式的网页。
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 codeIn 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.
