← Learn to Code — Python, Java, C, SQL & Web · 编程入门 — Python, Java, C, SQL & Web
Web Basics — HTML & CSS · 网页基础 —— HTML 与 CSS
Start from zero. Short steps. Build a real web page. · 从零开始,一步一步,做出真正的网页。
html 21 Lessons · 课程
Every lesson runs in your browser — write real code, press Run, and the tasks check themselves. Free, no account needed, with translated notes paired with English. · 每节课均在浏览器中运行——编写真实代码，点击运行，任务自动检查。免费，无需账户，配有与英文对照的翻译笔记。
Lessons in this course · 本课程中的课程
No lessons match. Clear the search or choose another filter. · 没有匹配的课时。请清空搜索或选择其他筛选条件。
- history A short history of the web · 网络简史 Reading and resources · 阅读与资源
- usage What a web page is made of · 网页是由什么组成的 Reading and resources · 阅读与资源
- resources Where to learn more · 去哪里学更多 Reading and resources · 阅读与资源
- setup What you need (almost nothing) · 你需要什么(几乎不用) Reading and resources · 阅读与资源
- 01 Your first web page · 你的第一个网页 2 required tasks · 2 个必做任务 Video · 视频
- 02 Headings and paragraphs · 标题和段落 2 required tasks · 2 个必做任务 Video · 视频
- 03 Bold, italic and line breaks · 加粗、斜体和换行 2 required tasks · 2 个必做任务 Video · 视频
- 04 Lists · 列表 2 required tasks · 2 个必做任务 Video · 视频
- 05 Links · 链接 2 required tasks · 2 个必做任务 Video · 视频
- 06 Images · 图片 2 required tasks · 2 个必做任务 Video · 视频
- 07 Make it a real page · 做成一个真正的页面 2 required tasks · 2 个必做任务 Video · 视频
- 08 Comments and neat nesting · 注释与整齐的嵌套 2 required tasks · 2 个必做任务 Video · 视频
- 09 Tables · 表格 2 required tasks · 2 个必做任务 Video · 视频
- 10 Forms · 表单 2 required tasks · 2 个必做任务 Video · 视频
- 11 Boxes and sections · 盒子与分区 2 required tasks · 2 个必做任务 Video · 视频
- 12 Add some style · 加点样式 2 required tasks · 2 个必做任务 Video · 视频
- 13 Selectors — class and id · 选择器 —— class 和 id 2 required tasks · 2 个必做任务 Video · 视频
- 14 Colours and backgrounds · 颜色与背景 2 required tasks · 2 个必做任务 Video · 视频
- 15 Styling text · 文字样式 2 required tasks · 2 个必做任务 Video · 视频
- 16 The box model · 盒模型 2 required tasks · 2 个必做任务 Video · 视频
- 17 Spacing — margin and padding · 间距 —— margin 和 padding 2 required tasks · 2 个必做任务 Video · 视频
- 18 Showing and hiding (display) · 显示与隐藏(display) 2 required tasks · 2 个必做任务 Video · 视频
- 19 Width and centering · 宽度与居中 2 required tasks · 2 个必做任务 Video · 视频
- 20 Rows with Flexbox · 用 Flexbox 排成一行 2 required tasks · 2 个必做任务 Video · 视频
- 21 Mini-project: a profile card · 小项目:个人名片 3 required tasks · 3 个必做任务 Video · 视频