适合初学者的 HTML 和 CSS：构建真实项目（版）

你将学到什么

• 从头开始使用 HTML5 和 CSS3 构建真实网站并设计其样式
• 了解网页的结构以及如何有效地使用语义 HTML
• 使用 Flexbox 和现代 CSS 技术创建响应式布局
• 利用 CSS 样式和布局技巧设计简洁、用户友好的网页
• 使用浏览器中的开发者工具检查和调试网站
• 应用最佳实践来编写有组织、可维护的 HTML 和 CSS 代码
• 了解 CSS 中的盒模型、定位和间距技术
• 使用 CSS 创建现代导航栏、按钮和交互元素
• 使用媒体查询和响应式设计原则构建适合移动设备的设计
• 获得进入 JavaScript 或全栈开发所需的基础技能

要求

不需要任何编码经验 – 本课程适合初学者
具有互联网连接的计算机（Windows、Mac 或 Linux）
逐步学习和构建真实网站的动机

描述

想要学习如何从头开始构建真正的网站 – 即使您以前从未编写过一行代码？本课程将全面介绍 HTML 和 CSS（网络的基础语言）。无论您是完全的初学者还是厌倦了无用的枯燥教程的人，您都将从一开始就构建现实世界的项目并获得实践经验。您将学习：如何使用干净、语义的 HTML5 构建任何网页如何使用 CSS3 精美地设计页面如何使用 Flexbox 和媒体查询创建响应式设计如何构建现代布局、按钮、表单和导航栏如何使用浏览器开发工具检查和改进代码CSS 预处理器，如 SassCSS 框架，如 Tailwind 和Bootstrap您还将了解如何组织文件、遵循 Web 标准以及编写易于阅读和维护的代码。我们将讨论现实世界的工作流程，并为您提供专业开发人员在为客户或公司构建网站时使用的技巧。在本课程结束时，您将有信心和技能来创建自己的网站，为实际项目做出贡献，或继续学习 JavaScript 和全栈开发等更高级的主题。这不仅仅是理论 – 您将逐步构建真正的项目，并在实践中学习。无需经验。只需带上您的好奇心和一台计算机，让我们一起构建网络。

概述

第 1 部分：欢迎和基础

第 1 讲介绍和课程概述

讲座 2 HTML 和 HTML CSS 要点

讲座 3 Figma Web 开发

第 2 部分：构建投资组合网站

讲座 4 创建导航栏

第五讲构建主要内容

讲座 6 社交链接与社交媒体报价部分

讲座 7 项目部分（网格布局）

第8讲技能与技巧关于部分

讲座 9 联系人和信息页脚

讲座 10 部分回顾

第 3 部分：响应式设计

第11讲响应式设计简介

讲座 12 使用媒体查询和媒体查询断点

讲座 13 使我们的投资组合具有响应能力

讲座 14 平板电脑的响应式设计

讲座 15 部分回顾

第 4 节：CSS 预处理器

第 16 讲 CSS 预处理器简介

讲座 17 Sass 入门

讲座 18 Sass 高级功能

讲座 19 部分回顾

第 5 节：CSS 框架

第 20 讲 CSS 框架简介

讲座 21 Tailwind 入门

讲座 22 使用 Tailwind 构建结账页面

讲座 23 Bootstrap

想要学习如何从头开始构建网站的初学者、有抱负的 Web 开发人员迈出前端开发的第一步、陷入“教程地狱”并想要一条清晰的基于项目的路径的学生、希望添加 HTML 和 HTML 的自由职业者或设计师。 CSS 适合他们的技能，任何对网站如何工作感到好奇并想要开始技术职业生涯的人