工欲善其事，必先利其器。在进入 Bootstrap 与 jQuery 的修炼之前，你需要先扎好三样基本功： HTML、CSS、JavaScript。
这三样基本功，我们不在这里重复造轮子——互联网上有一处公认的武学圣地： MDN Web Docs（Mozilla 开发者网络）。 它的中文文档质量极高、结构清晰、随学随查，是学习网页技术最值得信赖的地方。 下面的路线图告诉你按什么顺序学、学到什么程度，就可以回来继续修炼。
路线总览
建议按以下顺序推进。每一站都是一个里程碑，练熟了再走下一站。
| 里程碑 | 内容 | MDN 入口 | 修成标准 |
|---|---|---|---|
| 第一站 | HTML 基础：标签、语义、表单 | MDN · HTML 学习区 | 能手写常见标签，知道“语义化”是什么 |
| 第二站 | CSS 基础：选择器、盒模型、颜色与文本 | MDN · CSS 学习区 | 能看懂“这个元素为什么长这样” |
| 第三站 | CSS 布局：Flexbox 与 Grid | MDN · CSS 布局 | 能独立排出一个三栏布局（本回是重头戏） |
| 第四站 | JavaScript 语法：变量、函数、对象、数组 | MDN · JavaScript 学习区 | 能读懂并写出简单函数 |
| 第五站 | DOM 操作：找到元素、修改元素 | MDN · DOM 指南 | 能点一个按钮、改一段文字 |
关于布局：给你打个预防针
CSS 布局是新手最容易卡住的地方，请务必把 Flexbox 与 Grid 练熟。 好消息是：第二回的 Bootstrap 栅格系统，本质上就是把 Grid/Flex 封装成了好用的类名—— 基础打得好，后面事半功倍；基础虚，后面步步维艰。
修成标准
当你能做到下面两件事，就可以回来进入第二回了：
- 不看教程，手写一个带标题、段落、图片和链接的 HTML 页面；
- 用 CSS 把它排成“页头 + 两栏内容 + 页脚”的布局，并让它在手机宽度下不散架。
练功 · 第一回
- 去 MDN 把“HTML 学习区”的入门部分过一遍（约一到两天）。
- 每天手写一个小页面：自我介绍页、菜谱页、宠物介绍页……什么都可以，写就对了。
- 遇到不懂的属性或标签，直接去 MDN 搜索——养成“查文档”的习惯，这是整个修行的内功。
练完这一回，回到这里。第二回，我们拜会江湖前辈 Bootstrap。