使用HTML和CSS构建响应式现实世界网站

你将会学到的

• 成为现代且自信的HTML和CSS开发人员，无需任何先验知识！
• 从头开始为您的作品集设计并构建令人惊叹的现实项目
• 现代、语义化且易于访问的 HTML5
• 现代 CSS（以前的 CSS3），包括用于布局的 Flexbox 和 CSS 网格
• 重要的 CSS 概念，例如盒模型、定位方案、继承、解决选择器冲突等。
• 网页设计框架，具有易于使用的规则和指南，可设计引人注目的网站
• 如何规划、草图、设计、构建、测试和优化专业网站
• 如何使网站在所有可能的移动设备上运行（响应式设计）
• 如何使用常用组件和布局模式进行专业网站设计和开发
• 开发人员技能，例如阅读文档、调试和使用专业工具
• 如何查找和使用免费设计资源，例如图像、字体和图标
• 通过10多个挑战（包括解决方案）练习您的技能

课程内容

欢迎和第一步

• 课程结构和项目
• 开始之前请先阅读！
• v2迁移指南
• Web开发的高级概述
• 设置我们的代码编辑器
• 您的第一个网页！
• 下载课程资料
• 开始之前先观看！

HTML基础知识

• 章节介绍
• HTML简介
• HTML文档结构
• 文本元素
• 更多文本元素：列表
• 图像和属性
• 超链接
• 构建我们的页面
• 关于语义HTML的注释
• 安装附加VSCode扩展
• 挑战#1
• 挑战#2

CSS基础知识

• 章节介绍
• CSS简介
• 内联、内部和外部CSS
• 设置文本样式
• 组合选择器
• 类别和ID选择器
• 使用颜色
• 伪类
• 设置超链接样式
• 使用Chrome开发者工具
• CSS理论#1：选择器之间的冲突
• CSS理论#2：继承和通用选择器
• 挑战#1
• CSS理论#3：CSS盒子模型
• 使用边距和填充
• 添加尺寸
• 将我们的页面居中
• 挑战#2
• CSS理论#4：盒子的类型
• CSS理论#5：绝对定位
• 伪元素
• 开发人员技能#1：谷歌搜索和阅读文档
• 开发人员技能#2：调试和提出问题
• 挑战#3

布局：浮动、Flexbox和CSS网格基础知识

• 章节介绍
• 建筑布局的3种方法
• 使用浮动
• 清除浮动
• 构建简单的浮动布局
• 框大小：边框框
• 挑战#1
• 弹性盒简介
• Flexbox概述
• 间隔和对齐Flex项目
• 弹性属性
• 将Flexbox添加到我们的项目中
• 构建简单的Flexbox布局
• 挑战#2
• CSS网格简介
• CSS网格概述
• 调整网格列和行的大小
• 放置和跨越网格项目
• 对齐网格项目和轨道
• 构建简单的CSS网格布局
• 挑战#3

网页设计规则和框架

• 章节介绍
• 项目概况
• 网页设计和网站个性概述
• 网页设计规则#1：版式
• 实施版式
• 网页设计规则#2：颜色
• 实施颜色
• 网页设计规则#3：图像和插图
• 网页设计规则#4：图标
• 实施图标
• 网页设计规则#5：阴影
• 实施阴影
• 网页设计规则#6：边框半径
• 实施边界半径
• 网页设计规则#7：空白
• 网页设计规则#8：视觉层次结构
• 实现空白和视觉层次结构
• 网页设计规则#9：用户体验（UX）
• 网站个性框架
• 缺失的部分：像艺术家一样偷！

组件和布局模式

• 章节介绍
• 网页设计规则#10-第1部分：元素和组件
• 构建手风琴组件-第1部分
• 构建手风琴组件-第2部分
• 构建轮播组件－第1部分
• 构建轮播组件－第2部分
• 构建表格组件-第1部分
• 构建表组件-第2部分
• 挑战#1：构建分页组件
• 网页设计规则#10-第2部分：布局模式
• 构建英雄部分-第1部分
• 构建英雄部分-第2部分
• 构建Web应用程序布局-第1部分
• 构建Web应用程序布局-第2部分

Omnifood项目-安装版和桌面版

• 章节介绍
• 打造优秀网站的7个步骤
• 定义和规划项目（步骤1和2）
• 绘制初始布局想法（步骤3）
• 最初的设计和开发步骤（步骤4）
• 响应式设计原则
• rem和max-width如何工作
• 打造英雄-第1部分
• 打造英雄-第2部分
• 打造英雄-第3部分
• 构建标题
• 构建导航
• 设置可重复使用的网格
• 构建“工作原理部分-第1部分
• 构建“工作原理”部分-第2部分
• 建立精选部分
• 构建膳食部分-第1部分
• 构建膳食部分-第2部分
• 构建膳食部分-第3部分
• 构建推荐部分-第1部分
• 构建推荐部分-第2部分
• 构建定价部分-第1部分
• 构建定价部分-第2部分
• 构建功能部分
• 构建号召性用语部分-第1部分
• 构建号召性用语部分-第2部分
• 构建号召性用语部分-第3部分
• 构建页脚-第1部分
• 构建页脚-第2部分

Omnifood项目-响应式网页设计

• 章节介绍
• 媒体查询的工作原理
• 如何选择断点
• 应对小型笔记本电脑
• 响应横向平板电脑
• 响应平板电脑
• 构建移动导航
• 应对较小的平板电脑
• 回复电话

Omnifood项目－效果、优化和部署

• 章节介绍
• JavaScript简介
• 让移动导航发挥作用
• 实现平滑滚动
• 实现粘性导航栏
• Safari中的浏览器支持和修复Flexbox间隙
• 使用Lighthouse测试性能
• 添加网站图标和元描述
• 图像优化
• 部署到Netlify
• 让表单与NetlifyForms一起使用

结束！

• 从这往哪儿走
• 我的其他课程+更新

说明

• *** Udemy 上排名第一的最畅销 HTML 和 CSS 课程！***
• *** 于 2021 年 7 月从头开始完全重建（超过 35 小时的视频）***
• “在学习过其他平台上的相关课程后，我可以说这门课程是我所学过的最实用、最容易应用的网页设计和开发课程。” — 伯尼·帕西斯
• 打开一个新的浏览器选项卡，输入www.omnifood.dev，然后环顾四周。我会在这里等…
• …
• 太棒了，对吧？如果您完全知道如何从头开始设计和构建这样的网站会怎么样？那会有多奇妙呢？
• 好吧，我来这里是为了教您HTML、CSS 和网页设计，所有这些都是通过逐步构建您刚刚看到的令人惊叹的网站来实现的。
• 因此，完成本课程后，您将确切地知道如何通过遵循 7 个步骤来构建一个像 Omnifood 一样美观、专业且可随时启动的网站。它甚至在任何计算机、平板电脑和智能手机上看起来都很棒。
• 但是如果您想建立一个完全不同的网站怎么办？好吧，没问题！我设计课程的目的正是为了这个目标：让你能够设计和构建任何你能想到的网站，而不仅仅是复制课程项目。
• 因此，为了成为一名自信且独立的开发人员，将来能够构建自己的网站，您将学习：
• 在一个小型独立项目中了解现代语义 HTML、CSS 和构建布局的基础知识，这将为您为主课程项目 ( www.omnifood.dev ) 做好准备。这包括现代的 Flexbox 和 CSS 网格！
• 如何设计漂亮的网站，通过学习我为本课程创建的网页设计框架。它包含易于使用的设计方面指南，如排版、颜色、图像、间距等（这就像一个小型独立课程！）。
• 如何使用完善的网站组件和布局模式来做出专业外观的设计
• 如何使任何网站在任何移动设备上运行，无论设计和布局如何（响应式设计）
• 如何在实践中使用构建专业网站的 7 个步骤：规划、草图、设计、构建、测试、优化和上线
• 如何查找和使用免费设计资源，例如图像、字体和图标
• 重要的开发技能，例如阅读文档、自行修复代码错误以及使用专业的 Web 开发工具
• 这听起来很有趣吗？那么今天就加入我和 200,000 多名其他开发人员，开始构建网站吧！
• 或者您尚未出售并需要了解更多信息？没问题，继续阅读…
• [01] 为什么首先要学习 HTML 和 CSS？
  建立网站可以让您在世界任何地方从事有趣且富有创意的工作，而且回报丰厚。网络开发是世界上最面向未来、收入最高的行业之一。HTML 和 CSS 是这个世界的入口点！
  但您已经了解了这一切，这就是您也想学习 HTML 和 CSS 的原因。那么，你来对地方了！
  这是您在Udemy上找到的最好、最完整的 Web 开发之旅课程。它是一个一体化软件包，可帮助您从对 HTML 和 CSS 一无所知，到使用专业 Web 开发人员每天使用的工具和技术构建漂亮的网站。
• [02] 为什么这门课程如此独特和受欢迎？
  原因#1：该课程完全基于项目
  简单的演示很无聊，因此您将通过构建实际项目来学习一切！在最终项目（www.omnifood.dev ）中，我们一起为一家虚构的公司手工编写了一个漂亮且响应灵敏的登陆页面，该公司是我为课程编写的。
  原因#2：你不仅会学习如何编码
  编码固然很棒，但它并不是一切！这就是为什么我们将完成构建和启动网站项目的整个7 步骤过程。
  因此，庞大的 Omnifood 项目将教您构建现实世界 HTML 和 CSS 网站的实际技能：如何规划项目和页面布局、如何使用 HTML 和 CSS 技术实现设计、如何编写干净且有组织的代码、如何优化网站以获得良好的速度性能等等。
  最重要的是，本课程非常注重美观的设计。事实上，这是市场上唯一同时关注编码和设计的课程。
  理由#3：我是适合你的老师
  通过正确的指导和结构良好的课程，构建网站可以变得非常简单且有趣。有一堆随机教程和 YouTube 视频？没那么多。这就是我进来的地方。
  我叫 Jonas，是一位经验丰富的 Web 开发人员和设计师，也是 Udemy 的顶级讲师之一。自2015年以来，我一直在向超过 200,000 名开发人员教授这门畅销课程，始终倾听反馈并准确理解学生实际学习的方式。
  根据这些反馈，我最近从头开始重建了这门课程，并为每种类型的学生设计了理想的课程。它是项目、深入解释、理论讲座和挑战的独特结合。我相信你会喜欢它的！
• [03] 为什么这个课程这么长？
  原因#1：我花时间解释我教授的每个概念，以便您真正学习，而不仅仅是从屏幕上复制代码（这是一门课程，而不是教程）
  原因#2：我探讨了其他 HTML 和 CSS 课程回避的主题：专业网页设计、组件和布局模式、一些 CSS 理论、网站规划的理论和实践以及开发人员技能。我相信您需要这一切才能成功！
  原因#3：有大量的重复，这样你才能真正吸收和练习所学的内容。实践是学习中最重要的因素，因此我为您提供了大量的机会来提高您的技能
• [04] 以下是包装中还包含的内容：
  最新的高清质量视频，易于搜索和参考（非常适合 Udemy 商科学生）
  专业英文字幕（非自动生成）
  可下载的设计资源+每个部分的起始代码和最终代码
  20多个理论视频的可下载幻灯片（我保证不会无聊！）
  访问我多年来策划的无数免费设计和开发资源
  课程问答中的免费支持
  10 多个用于练习新技能的编码挑战（包括解决方案）
• [05] 本课程适合您，如果…
  …您是一个完全的初学者，不知道如何建立网站。
  …您已经从一些教程或视频中了解了一些 HTML 和 CSS，但很难构建一个美观、完整的网站。
  …您是一名设计师，想要将您的技能扩展到 HTML 和 CSS，因为您所有的设计师朋友都在学习如何编码（他们很聪明！）。
  基本上，如果您是HTML和CSS大师，并且构建了世界上最美丽的网站，那么就不要参加该课程。其他人：你今天应该参加这门课程。
  那么，这一切听起来很棒吗？那么今天就加入我和 200,000 多名其他开发人员，开始您的 Web 开发之旅！

此课程面向哪些人

• 想要学习如何构建专业、美观且响应灵敏的网站的完全初学者
• 具有一定HTML和CSS知识，但难以构建出色网站的学生
• 想要将自己的技能扩展到HTML5和CSS3的设计师