还不知道 Web前端开发怎么学？看完保你会！

这篇文章的阅读者是前端学习者，尤其是入门和中级前端开发。我写出了我自己所看到的前端开发世界里的色彩缤纷，也整理出了各个阶段能够参考学习的网站和资料。

三驾马车：HTML5 + CSS3 + JavaScript

HTML5 + CSS3 + JavaScript

HTML5 是 HTML 和 XHTML 的新版本。 在 HTML5 草案 的规范中定义了可以用 HTML 和 XML编写的单一的语言，意在解决在之前 HTML 的迭代中发现的一些问题并满足 web 应用的需求，这是以前HTML没有充分覆盖到的领域。

这意味着 HTML5 的很多新特性是为了适应现代浏览器而增加的，这其中包括更加语义化的标签，视音频播放的 API，本地存储功能的 API 等。详情参看 W3school。

CSS3 是 CSS 技术的升级版，目前最新版本是 CSS2.1，为 W3C 推荐标准，建议阅读该规范的中文版，这篇翻译来自@黯羽轻扬。当然，目前 CSS3 已被大部分现代浏览器支持，而下一代 CSS4 还在开发中（有关 CSS3 开发相关请参考 ）。

ECMAScript 6 (简称 ES6)是 JavaScript 语言的下一代标准，已经在2015年6月正式发布。伴随着 Node.js 的火热，JavaScript 已经不仅仅是浏览器里面的脚本。同时，越来越多的库和框架：React(a javascript library for building user interfaces)、Flux(application architecture for buiding user interfaces)、Angular(Superheroic JavaScript MVW Framework)、Babel、Mocha……让前端开发更加简单。

入门（html+css+js）

HTML5

我仍然是从前端开发的三驾马车开始讲入门的知识。毫无疑问，前端入门最快的路是打开电脑上的文本编辑工具，写下：

Hello World!

然后命名为 'name.html'，接着在浏览器中打开这个文件。当看到浏览器中显示出“Hello World!”时，一切 OK！这个桥段实在是俗了点，不过我就是从这里开始踏上前端之路的。

接下来，我要选择一个编辑器或者 IDE ，透露最终答案：我目前使用 Win10 系统，编辑器使用 sublime text3 和 Atom。对的，我使用两个编辑器，并且最终没有选择任何 IDE。但在此，我建议刚入门的开发者去尝试 WebStrom 这样功能齐全的 IDE，可以感受到代码高亮，代码自动补全，集成本地服务器测试等功能。然后，开始尝试在 sublime text3 和 Atom 中自己安装能实现 IDE 里一切所需功能的插件，以及 IDE 不具备的功能。没错，这两个编辑器完全可以定制为一个 IDE，并且更专注于编程这一件事，而不管是 web 开发者，还是 java 开发者……。当然，前提是作为一个喜欢自己折腾的开发者。

选择好一个编辑工具，如同选择一把趁手的兵器。接下来是开始学习html5，css3，js 的时候了。这里仍然是一个很俗的桥段，打开这个网站：W3school。开始把这个网站里的所有代码（html5,css3,js按照这个顺序）抄写到自己的编辑器里，并且保存，然后在浏览里查看效果。

《前端开发》这里的知识也同样超过了入门阶段所需知识。但我仍然建议入门者去看看，但不要急于动手去写其中的代码，这里的内容可以让你看到前端开发是多么有趣，以至于忘记照着 W3school 里的枯燥代码写下 'hello,world' 这类的东西是多么无趣。然而， 在能够理解视频里那些酷炫好玩的东西之前，必须忍受 W3school 里呆板的代码。所以，现在先收藏这个网站，并且随时学习自己力所能及的内容。

CSS3

上一部分，已经涵盖了入门 html5 + css3 + javascript 所需要的工具和参考。但是，这里依然单独用一章节来讲 CSS3。因为，如果只是学完上面提及的内容，也许你会认为 css3 能做的事情仅此而已。但是，我可以郑重的提醒你，css3 可以实现所有你能够想象的样式。当结合 js，几乎所有的动画，交互都可以实现。

没错，这很夸张，但是我现在却深信不疑。无论是否看完 W3school 里 CSS3 的内容，下面这个视频集合的内容都有可能让你重新认识 CSS3 ——《重拾 CSS 的乐趣》 。请务必记住这个视频的作者，@CSS魔法。因为他翻译的《css sprites》也是我重点推荐的参考书籍。

JavaScript

当然，在看完 W3school 上 JS 的知识后，就应该看 jQuery 的知识了，仍然是在 W3school上，同时也应该多查看 jQuery 官网。如果精力充足的话，可以去看看 Bootstrap。因为单凭 jQuery，Bootstrap 这两个东西已足够实现一个界面优美，功能完善的网站。

— 本节的扩展 —

（1）三个有趣的前端新应用：Hybrid app，微信内应用，H5

从迈入移动端时代，前端技术也有了新的应用。这里主要扩展三个我认为有趣的前端的应用。

最后再补充一个好玩的东西：Electron。Electron 可以让你使用纯 JavaScript 调用丰富的原生 API 来创造桌面应用。

（2）ES6，Node.js，MongoDB，PHP，SQL……

单就入门阶段的扩展而言，我想这些知识已经现在已经足够了。但是，前端的发展很多并不是我能够想象得到的，所有关注一些公众号，微博，github，以及各种前端技术的官方网站，时刻把握动向，是非常有必要的。虽然，经验丰富的开发人员会认为新的东西往往带有风险，只有成熟，稳定的技术才能实现价值。但是，现在前端的发展太过迅猛，每一个技术都在争夺开发者。前端开发框架中火热的有 Angular、React、Vue（国内阿里团队推出的一个框架），前端构建工具中有 Grunt,Gulp,browserify,webpack，前端测试工具有 mocha,jasmine，简直如同海贼王里的大航海时代。所以，对于火热的前端，我的态度是积极投身其中，研究各种技术，进而领悟它们所展示的思路和想象，而不是等到一切尘埃落定再来选择剩下来的技术。

流程和规范

网站开发不是一个人的战斗，即使是全栈工程师，也不应该一个人承担所有的任务。作为前端工程师，既要与视觉设计师、交互设计师对接设计稿、交互稿，又要与后端工程师对接数据模型。

“图难于易，为大于细”——就细节而论，与每一个角色的交流沟通过程都可以细致的整理出文章来单独讲解。因此，这里只扩展前端需要了解的知识。

PS 和 AI 的熟练使用，切图的规范，字体、svg 和 iconfont 的应用

PS 和 AI 自不必说。 MAC 上的专属设计神器 Sketch，如果有 MAC 设备建议也了解下。这里我只能提供一套不错的 PS 学习视频：PS入门教程。

至于 AI，由于最近我觉得网站矢量化是一个不错的方向，所以会更深入的学习 AI，之后单独整理一篇讲网站矢量化的文章，里面再详细讲解 PS 和 AI 制作矢量图。

切图的规范，是需要设计师与前端一起商议出来。前端最好不要等到设计师自顾自的导出切图和标注图，毕竟大多数设计师不懂前端开发的逻辑。很多情况下，前端开发需要写相对距离，然而标注图上只有绝对距离，又或者相对距离的对象又完全不对，等等。总之，作为前端要清楚明白自己需要什么样的标注图，需要什么样的切图。我认为明白这两点最好的方式是自己多尝试标注、切图，找到符合自己开发逻辑的那套规范。当然，后续我也会把自己用的那一套规范整理出一篇文章。

字体的使用上，不可避免设计师会使用一些具有设计感的字体。对此，我的建议是两点：

如果用到的特殊字体只有少部分，不是全站都要使用的，我建议是做成 SVG 图导入网站。单独提一点小 tip，在高分辨率设备逐渐普及的现在，能够做成 SVG 的图，千万不要用像素图。（这点我会在网站矢量化的研究在单独讲解）如果是全站都要用到某些字体，比如媒体网站或者新闻阅读类网站，那么建议使字蛛字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。这里又提到 iconfont 的应用了解，但是我也发现 iconfont 存在用户体验的问题，在一些大型网站上如 github 已经直接使用 SVG 替换 iconfont。当然作为了解 iconfont 的使用，我会在那篇网站矢量化的文章中介绍。

BAE,PHP 和 SQL的学习使用

百度应用引擎（Baidu App Engine，简称BAE）是 PaaS 平台，提供弹性、便捷、一站式的应用部署服务，支持 PHP/Java/Node.js/Python 等各种应用。只需上传应用代码，BAE 自动完成运行环境配置、应用部署、资源监控、日志收集等工作。简单的说就是把网站代码传到 BAE 分配的空间，就可以访问网站了，完全不需要自己搭建后端服务器环境，不需要自己手动配置。这是前端开发者搭建自己的网站或博客所需要的。因为我以前常用的是 BAE, 其实新浪有 SAE，阿里，腾讯也有相同的 Paas 平台。现在，我是自己在 VPS 主机上搭建服务器来运行自己的网站。至于博客，可以上一篇文章里看到介绍了 Github Page + Hexo 组合搭建博客的详细过程。

PHP 和 SQL 的学习，我还是认为学完 W3school 里的内容就够用了，但是能够越熟练越深入越好

实际上，按照现在前后端分离的开发模式来看，前端与后端最重要的沟通交流的是数据模型。一般，使用的数据格式是 XML 或 JSON ，作为前端最好根据后端设计的数据模型来设计自己的代码。因为我是自学的前端技术，在软件开发层面的知识相对薄弱，对于数据结构了解更是浅薄，所以，只要合作的后端不是很弱的那种，我一般是按照他们给出的数据模型来开发。

编码规范

记住这句话“当你开始工作时，你不是在给你自己写代码，而是为后来人写代码”。大多数时候，我们面对的都是写好的代码。当以一种可维护的方式来写代码，可以让你和协作者很容易知道上段代码写到什么地方什么程度。同时，当发现以同一种方式来编写代码时，即使过很长一段时间再回头 review，也将会是一件愉快的事情。“Java 语言编码规范”是当前很流行的关于编码规范的文档之一，它指出了编码规范如此重要的几个原因：

那么，当你意识到整洁、统一的编码规范的重要性的时候，应该如果形成自己的编码规范了。在这个问题上，我已经不再建议自己去实践尝试来得出答案。虽然实践大多数时候是得出答案的好办法，但是，对于编码规范还是直接拿来主义，把优秀的规范拿来就用：

网站的优化打包发布

当我们网站开发完成，本地测试 OK 以后，还要合并压缩静态文件、使用前端镜像库、使用 CDN 进行加速、用 YSlow 或 Google Page Speed 这类的网站质量检测工具来检测线上测试站点。

web前端学习资料获取方式：转发文章+私信【资料】