用 HTML 和 CSS 做你的第一个网站
从一个空文件开始，搭建一个真实的单页网站：干净的 HTML、现代的 CSS 布局，一个在手机上可用并通过基本无障碍检查的页面。
- 小时
- 24
- 个单元
- 4
- 节课
- 24
- 证书等级
- 3
关于本课程
从一个空文件开始，搭建一个真实的单页网站：干净的 HTML、现代的 CSS 布局，一个在手机上可用并通过基本无障碍检查的页面。
适合谁
初学者、小企业主，以及想把自己画的东西做出来的设计师。
学习节奏
标准 · 灵活
你将学会做什么
- 用语义化 HTML 构建页面结构
- 用 CSS 设置页面样式，包括 flexbox 和 grid 布局
- 让页面在手机和桌面宽度下都能正常使用
- 检查页面的基本无障碍性
课程大纲
4 个单元 · 24 个主题 · 24 小时
01语义化 HTML6 节课 · 6 小时
学习成果: 用语义化 HTML 构建页面结构
- L01网页如何工作60 分钟
- L02元素、标签与属性60 分钟
- L03标题、段落与列表60 分钟
- L04链接与图片60 分钟
- L05页面区域：header、main、footer60 分钟
- L06表单与标签60 分钟
- ✓单元检查：用证据证明这个学习成果
02CSS 与布局6 节课 · 6 小时
学习成果: 用 CSS 设置页面样式，包括 flexbox 和 grid 布局
- L07选择器与层叠60 分钟
- L08盒模型60 分钟
- L09字体排印与颜色60 分钟
- L10Flexbox60 分钟
- L11CSS grid60 分钟
- L12间距体系与自定义属性60 分钟
- ✓单元检查：用证据证明这个学习成果
03响应式页面6 节课 · 6 小时
学习成果: 让页面在手机和桌面宽度下都能正常使用
- L13视口与移动优先60 分钟
- L14媒体查询60 分钟
- L15流式文字与图片60 分钟
- L16响应式导航60 分钟
- L17在手机和桌面上测试60 分钟
- L18性能基础60 分钟
- ✓单元检查：用证据证明这个学习成果
04无障碍检查6 节课 · 6 小时
学习成果: 检查页面的基本无障碍性
- L19无障碍为谁而做60 分钟
- L20替代文本60 分钟
- L21键盘操作与焦点60 分钟
- L22颜色对比度60 分钟
- L23验证器与自动检查60 分钟
- L24结课项目：发布你的页面60 分钟
- ✓单元检查：用证据证明这个学习成果
每节直播课是什么样的
每个主题是一节一小时的直播课。你的讲师和导师都是 AI，并会如实说明。
Marek QuintAI 讲师
白板 · 概念
网页如何工作
- Marek Quint 在白板上一次讲一个概念，用平实的语言。
如何评估你
你要提交什么
一个通过验证器和无障碍检查的单页网站
最终检查
按需求说明搭建单页网站，进行自动验证和评审
证书等级 3
你证明了这项技能
你的证据按课程标准评定，并由一位真人签署这份证书。
谁来授课
每节课都有一位具名的 AI 教师和一位帮你保持进度的导师。两者都是 AI，每个界面都会标明。
- AI 讲师Marek Quint
- AI 导师Bastian Kwan
