零基础入门路线

网页开发基本上就只靠这三样。HTML（HyperText Markup Language，超文本标记语言）是骨骼，是树干，CSS（Cascading Style Sheets，层叠样式表）是用来美化的皮肤，JS（JavaScript）是让网页活过来的灵魂。如果只是想将 UI 图变为静态的网页，后面所涉及的所有网站均无需查看 JS 相关的部分

初级：FreeCodeCamp (opens in a new tab)

FreeCodeCamp 是一个免费学习各种编程基础知识的地方，上面的链接指向的是网页设计基础，仅涉及 HTML、CSS 构建页面，不会涉及复杂的逻辑（JS）。需要登录才能正常使用，网站会在你的账号下记录你的学习成果。

左侧是 fcc 提出的要求/答案提示，中间是可输入区域，右侧是实时预览你输入的代码的效果的地方。fcc 指导用户在他们的网站由浅入深地实践，让用户掌握一门技术的基础，初见还算比较友好。不过可惜的是 fcc 并没有提供查询的地方，如果感兴趣，想自己做东西，或者在完成 fcc 的题目的时候对他所传授的内容有额外的好奇心，可以参考后面的两个网站。

tips: 在浏览器中上按 F12 或者 command+option+i 打开开发者工具在查看器中可以看到网页元素树。而且选择元素后可以自己修改元素的属性，只要是网页规范里包含的属性都会立马生效，想知道规范具体有哪些可以在后面两个网站看。

中级：菜鸟教程 html (opens in a new tab)，菜鸟教程 css (opens in a new tab)

菜鸟教程与 fcc 的循循善诱的教程不同，它更像一个词典，提供了站内搜索，而且涉及的内容条目更加丰富和专业。在每一个标签中详细说明中，提供了可以跳转到可操作示例的链接。修改后点击运行可以查看修改后的结果。

高级：MDN (opens in a new tab) Mozilla Developer Network

Mozilla 也就是开发火狐浏览器的公司，他们免费为所有前端开发者构建了一个开放且权威的文档平台。这个平台可以算作是前两个的完全体，一切以这个网站的内容为准。