超多干货！零基础设计师该如何学习前端？
非科班设计师如何学习前端？让@Hux黄玄（现微信前端）用亲身经历告诉你！作为一名自学出身的设计师，他走过不少弯路，这些都是实打实的宝贵经验。全文不仅会教你如何学习前端，还会为你未来的职业选择提供细致建议，满满的都是干货，快来收藏！
笔者大学专业是数字媒体艺术，大一实习时担任动效设计师，大二拿到人生第一个大公司的 offer，成为交互设计师，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。
我也曾走过不少野路子，好在有像@尤小右 这样从艺术/设计领域转前端的大神作为榜样，这也证明这条路是可行的。
接下来，我将分享自己的学习建议，这也是我走过的学习流程，仅供参考。
背景篇
在当今时代学习新知识，要善于利用 Bing、Google 等搜索引擎。网络上的资源极为丰富，自学能力对于学习技术尤为重要。
入门篇
HTML/CSS
设计师希望学习前端，大概率是被各种华丽的网页特效和交互所吸引，会有“我的设计可以做成网页供人访问了”的想法。
幸运的是，在前端技术中，“展示”部分相对简单。所以，放下对“编程”的恐惧，从算不上编程语言的 HTML/CSS 入手，先做一些有成就感的东西。
对于设计师而言，最有成就感的是能看到实际效果的东西，而 HTML/CSS 正是用于此。HTML 是由简单的标签组成，CSS 则是将画画的流程用英语按一定格式书写出来。这就跟读英语一样简单！
接下来，你需要开始自学，了解常用 HTML 标签的含义、各种 CSS 属性，以及 CSS 的盒模型、优先级、选择器等。能熟练使用 PS、AI、Flash、Axure、AE、Sketch 的设计师，学习这些轻而易举。
以下是一些推荐的学习资源：
- w3school 在线教程：中文教程，虽然界面不太美观，但非常适合入门学习。
- Learn to code（Codecademy）：如果你英文水平不错，强烈推荐使用它进行交互式学习。这里有从 HTML/CSS 到搭建网站的一系列课程，免费且生动直观。
这个阶段的练习主要是“临摹”，即用代码实现你想要的网站页面，越多越好。
不建议一开始就看各种厚重的入门或指南书籍，这个阶段应快速上手，培养兴趣和成就感，先做出能看的东西，掌握常用的 HTML/CSS 即可。
如果完成得好，这个阶段过后你应该可以写出一些简单又美观的“静态网页”，比如我的作品集/简历：Portfolio – 黄玄的博客（好久没更新了，有点惭愧）。
JavaScript/jQuery
若想在网页上实现交互效果，如轮播图、点击按钮播放动画等，就必须学习 JavaScript。JavaScript 是一门完整、强大且热门的编程语言，浏览器里的所有交互和高级功能都由它支撑。
举个简单的例子，下面这行代码就能在浏览器中弹出“Hello World”：
alert('Hello World');
在了解 JavaScript 的基础概念（变量、函数、基本类型）后，可以直接学习 jQuery。你无需深入了解它是什么（它是一个 JavaScript 代码库），只需知道它能显著降低编写交互代码的难度。
通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器”。
对于没有编程基础的人来说，完全掌握 JavaScript 和 jQuery 并非易事。作为设计师，很多时候可以先不深究原理，尝试直接应用，这样能快速获得成就感，也能更好地理解 JavaScript 的用途。
仍然推荐使用 w3school 在线教程和 Codecademy 进行学习。此外，像《锋利的jQuery (豆瓣)》这类实用书籍，能帮助你快速上手做出简单效果。
如果学习顺利，你可以尝试使用各种丰富的 jQuery 插件，会发现编写支持用户交互的网站并不困难。很多看似复杂的功能（如轮播图、灯箱、下拉菜单），搜索相关文档（教程），修改示例代码即可实现。
例如，配合 Huxpro/jquery.HSlider · GitHub 这样的轮播图插件，就能轻松实现 Hux - Slider | Demo 这样的网页相册。
最后，推荐 Bootstrap，它是世界上最知名的前端 UI 框架之一，提供大量 CSS 样式和 jQuery 插件。它易于学习，中英文教程都很完善，无需理解其背后的工作原理就能很好地使用，能让你快速达到“可以建站的水平”。此外，还能学习它背后的设计思想。
转职方向
前端重构
业内通常将专精 HTML/CSS 的前端从业人员称为重构工程师。对于注重视觉效果的设计师来说，掌握基本的 HTML/CSS 后，可朝着这个方向发展。
到了这个阶段，不仅要知道如何编写页面，还要理解其原理，并思考如何优化。这有助于你理解 Web 世界，做出更“系统化”的设计。
CSS 有很多学问，需要理解文档流、浮动流等各种定位方式和原理，理解 CSS 的继承复用思想，以及浏览器的差异、兼容和优雅降级等。强烈推荐《精通CSS（第2版） (豆瓣)》这本书，虽然前端技术发展迅速，但书中的思想永不过时。
在 HTML 方面，要注重语义化、可访问性和结构的合理性，学习“结构与样式的分离”。《CSS禅意花园 (豆瓣)》将这种分离做到了极致。
此外，各种炫酷的 CSS 3 属性值得探索：可以用媒体查询实现响应式网页设计，用 transition 和 animation 制作补间动画和关键帧动画，用 transform 进行缩放、旋转、3D 变换，还有圆角、渐变、阴影、弹性盒等，这些都是设计师的利器。
如果你还掌握了“入门篇（JavaScript/jQuery）”的知识，那么恭喜你！你已经可以完成很多有趣的网页了，像很多 minisite 或者微信上的“H5”小广告，对你来说都不在话下。
结合你的设计能力，你可以尝试创作一些有趣的作品，比如这种富含交互和动画的网站 绅宝 SENOVA（此处需替换为实际网址）。
前端工程师
如果你觉得上述内容还不够，渴望实现更多出色的交互，甚至喜欢上编程，想转行成为工程师或成为全栈设计师，那么可以朝着这个方向继续发展。
这个阶段的最大挑战是要学会像软件工程师一样思考。你需要扎实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等编程概念，了解浏览器，学习 DOM、BOM、CSSOM 的 API，甚至要掌握一些网络原理，如域名、URL、DNS、HTTP 请求等。
这些名词可能会让你望而却步，但只要肯下功夫，并不难掌握。更重要的是，一旦掌握这些知识，你看待世界的方式将发生改变。
这个阶段可以继续在 Codecademy 上学习，但 w3school 可能不够用了。遇到不会的语法，推荐查阅 Mozilla 开发者网络，这是少数中英文都很完善且专业友好的网站。
同时，可以阅读以下书籍辅助学习 JavaScript：
- 《JavaScript高级程序设计（第3版） (豆瓣)》或《JavaScript权威指南 (豆瓣)》，选择其中一本大而全的书籍即可。
- 若觉得上述书籍太难，可以先看《JavaScript DOM编程艺术 （第2版） (豆瓣)》过渡，这本书较容易理解，会教你“优雅降级、渐进增强”的优秀思想。
如果顺利度过这个阶段，你应该能做出很多让自己自豪的网站了。可以向工程师朋友请教如何购买域名、配置简单的静态服务器，或者搜索“Github Pages”，将作品发布到网络上。
还可以用 JavaScript 编写小游戏，既能锻炼编程能力，又很有趣。比如我刚学 JS 不久后花一晚写的用 DOM 实现的打飞机游戏：Hux - Aircraft（不支持手机）。
入行篇
如果你完成了上述所有学习，已经是一名出色的前端学徒了。对于只想丰富技能的设计师或产品经理来说，接下来的内容可能不适用。
但如果你决心进入大公司从事专职前端开发工作，可以继续往下看。
近年来，前端技术发展迅猛，前端工程师不再只是切图、写页面和做特效，需要具备完善的工程师素质和计算机知识，成为真正的工程师。
知识技能要求
- JavaScript 语言：深入了解 JavaScript，包括闭包、IIFE、this、prototype 及一些底层实现（ES、VO、AO），熟悉常用的设计模式和 JavaScript 范式（如实现类与私有属性）。同时，要了解新的 ES6 特性，如 class、module、arrow function 等。
- 网络及后端知识：熟悉前端常用的网络和后端知识，包括 Ajax、JSON、HTTP 请求、GET/POST 差异、RESTful、URL hash/query、webSocket、常用的跨域方式（JSONP/CORS），以及 CDN 缓存、静态网站/动态网站区别、服务器端渲染/前端渲染区别等。
- 进阶 CSS：学习进阶的 CSS，熟悉 CSS 3，使用 Scss/Less 等编译到 CSS 的语言，使用 autoprefixer 等 PostCSS 工具，了解 CSS 在 Scope/Namespace 上的缺陷，还可以探索 CSS Modules、CSS in JS 等新特性。
- 前端模块化规范：了解前端的模块化规范，如 CommonJS 与 ES6 Modules（可以观看我的分享《JavaScript Modularization Seven Day》学习 JS 模块化的历史）。
- Git 与 Shell 使用：熟悉 Git 和 Shell 的使用，包括基于 git 的版本管理、分支管理和团队协作，掌握简单的 Linux/Unix 命令。将代码上传到 github 与人分享，并学习优秀的开源代码。
- Node 使用：熟悉并习惯使用 Node，了解 npm，使用 Grunt/Gulp/Browserify/Webpack 优化工作流，对代码进行打包、混淆、压缩和发布。还可以使用 Express/Koa 配合 MongoDB/Redis 涉足后端领域，或用 Node 进行后端渲染优化首屏体验。
- HTML 5 新 API：了解各种 HTML 5 的新 API，如 [video]/[audio]、Canvas、webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高级的 DOM API、Fetch API 等。
- 异步编程：学习 JavaScript 的单线程和异步编程方法，如 setTimeout/setInterval、回调与回调地狱、事件与 event loop、Promise 甚至 Async/Await。
- 浏览器知识：深入了解浏览器，包括主流浏览器的名称、内核和差异，私有属性和 -webkit - 等。学习使用 Chrome DevTool，了解浏览器渲染的 reflow/repaint，进行性能优化。
- Mobile Web：专门学习 Mobile Web，包括 viewport、CSS pixel、touch 事件、iOS/Android 浏览器的差异与兼容、移动端的性能优化、300ms delay 等。了解 Hybrid 开发，如 Cordova/Phonegap，以及与 iOS/Android 通信的机制，如 URI Scheme 或 JS Bridge。
- 前端框架/库：学习热门的前端框架/库，如 Backbone、Angular、Vue、React、Polymer 等，了解它们背后的双向数据绑定、单向数据流、MVC/MVVM/Flux 思想、Web Component 与组件化等。
- 单页应用构建：学习如何构建 web 单页应用，包括利用 history API 或 hash 实现路由，基于 Ajax + 模版引擎或其他技术的前端渲染，以及复杂的软件设计。
- 计算机知识：学习更多计算机知识，如简单的计算机体系结构、广泛的编程知识（面向对象/函数式等）、栈、堆、数组、队列、哈希表、树、图等数据结构，时间复杂度与空间复杂度以及简单的算法等。
其他建议
- 关注业内大神：了解业内大神，阅读他们的博客、知乎、微博，学习他们的思想和新观点。
- 参加技术交流：多参加技术交流会，结识一起学习的小伙伴，互相交流，共同成长。
- 保持自学热情：具备强大的自学能力，对技术充满热情并持续跟进。JavaScript/前端社区非常活跃，有很多新事物需要自己去发现和学习，如 Universal JavaScript（同构）、前端测试、HTML5 游戏、WebRTC、CSS 4、ES 7、React Native、Babel、TypeScript、Electron 等。
虽然内容较多，但这些都是未来可能会遇到的知识。你无需全部掌握，但多多益善；也可以专精于某几个方面，这足以让你成为专业的前端工程师。