非专业设计师如何学习前端？让@Hux黄玄（现微信前端）用亲身经历告诉你！作为一名自学成才的设计师，走过了很多弯路，这些都是他亲身经历过的。真正宝贵的经验，全文不仅教你如何学习，还附上详细的未来职业选择建议，干货满满，快来收藏吧！作者大学主修数字媒体艺术。我在大一的时候实习过动画设计师。我大二的时候拿到了大公司的第一份offer，作为交互设计师。后来转入淘宝旅游前端团队。现在从事微信电影票前端研发工作。自己也走过不少的野路，还好有像小优@尤小右这样的美术/设计高手转前端做榜样，也证明这条路好玩:)接下来说说我自己的学习建议，一个小教程，也是我走过的过程，仅供参考——————————————————背景篇——————————————————学习这个时代的新鲜事物，必须善于使用Bing/Google等搜索引擎……网络上资源丰富，自我-学习能力也很重要，尤其是学习技术！GettingStarted(HTML/CSS)说起设计者学习前端的初衷，大概是因为各种华丽的网页效果/交互实在是太吸引人了。这种感觉大概就是：“咦，我的设计可以做成网页了，完了！”幸运的是，“显示”是前端技术最简单的部分。所以，放下对“编程”二字的恐惧，从“称不上编程语言”的HTML/CSS入手，先做点有成就感的事吧！对于设计师来说，最有成就感的一定是“看得见的东西”，而HTML/CSS就是用来做到这一点的。HTML就是一堆很简单的标签，而CSS无非就是画你写的过程，只是用英文写成一定的格式：
pisparagraph!
是不是很简单，就像看英文一样！接下来就要开始自学了，比如常见的HTML标签的含义，各种CSS属性，还有CSS盒模型，优先级，选择器……不用着急，都很容易；你可以玩转PS/DesignersofAI/Flash/Axure/AE/Sketch，学习这个，推荐几个资源：w3school在线教程（中文，一个很Low但是很好的入门学习网站）学习编码（Codecademy，如果你英文还可以，强烈推荐大家用它来互动学习！从HTML/CSS到建站都有课程，免费，生动直观）这个阶段的练习主要是“临摹”：用代码画出自己喜欢的东西想画网页，越多越好。至于书，我强烈不建议看各种厚厚的入门/指导书，没必要！这个阶段要快速上手，培养兴趣，培养成就感。先做能看得见的东西，掌握常用的HTML/CSS就够了。如果做得好，过了这个阶段，你大概就能写出一些简洁漂亮的“静态网页”了，比如这个portfolio/resume:Portfolio–黄轩的博客（好久没更新了...可耻)入门(JavaScript/jQuery)想在网页上实现一些交互效果，比如轮播图片，点击按钮后的动画？那你就要开始学习JavaScript了！JavaScript是一门完整的、强大的、非常流行的编程语言，你在浏览器中看到的所有交互或高级功能都是它支持的！举个小栗子：alert("HelloWorld!")就是这行，浏览器就可以弹出HelloWorld了！了解了一些基本的JavaScript概念（变量、函数、基本类型）之后，我们就可以直接去学习jQuery了，你不需要知道它是什么（它是一个JavaScript代码库），你只需要知道它可以显着减少您的写作时间。交互难度刚刚好：$('.className').click(function(){alert("HellojQuery")})通过jQuery，我们可以继续使用我们在CSS中学到的“选择器”。对于人类来说，要完全掌握这两者并不容易。作为设计师，很多时候我们可以尝试直接应用它，而无需先研究它们的原理！这样成就感会来的很快，通过实际应用更能理解JavaScript是干什么用的。我还是推荐大家使用w3school在线教程和http://www.codecademy.com/来学习。另外，可以看看《锋利的jQuery (豆瓣)》等非常实用的书籍，可以让你快速上手，做出一些简单的效果！如果你学得好，你也可以尝试使用各种丰富的jQuery插件，你会发现写一个支持用户交互的网站并没有那么难~很多看似复杂的功能（比如轮播图片，灯光boxes,drop-downmenus)，搜索它然后查看文档（教程）并修改示例代码。比如有了Huxpro/jquery.HSliderGitHub这样的轮播插件，就可以轻松的写出类似Hux-Slider|的网络相册了。Demo~***，我要推荐Bootstrap世界上最流行的mobile-firstandresponses，是世界上最知名的前端UI框架之一，提供了大量的CSS样式和jQuery插件-插件。非常容易上手，中英文教程非常完善。你不需要了解它背后的工作原理就可以用好它，让你快速达到“能建站的水平”。另外，您不仅可以学习如何使用它，还可以学习它背后的思想。转职方向一：前端重构业界通常把专门从事HTML/CSS的前端从业者视为重构，而对于专注于视觉效果的设计师来说，在掌握了基本的HTML/CSS之后，就可以往这个方向发展了.在这个阶段，你不仅要知道怎么写页面，还要知道为什么会这样，知道如何做得更好。这对你了解web世界很有帮助，可以帮助你做出更“系统”的设计。关于CSS的知识有很多。你需要开始了解文档流、浮动流等各种定位方式和原理，了解CSS继承重用思想，了解浏览器差异、兼容性、优雅降级……这里强烈推荐一本书：《精通CSS（第2版） (豆瓣)》，虽然前端技术日新月异，但本书的思想永远不会过时。就HTML而言，你必须开始关注语义、可访问性和合理的结构。你必须开始学习“结构和风格分离”。这是一本实现这种分离的神书***：?一个你会喜欢的很酷的CSS3属性：你可以使用媒体查询进行响应式网页设计，你可以使用过渡和动画进行补间和关键帧动画，使用变换进行缩放，旋转，3D变换，还有圆角，渐变，阴影，flexbox！一切都是设计师的神器！如果你已经掌握了入门知识（JavaScript/jQuery），那么恭喜你！您已经可以制作很多有趣的网页了！小站或微信上有很多“H5”小广告，这一关轻松完成！凭借你的设计能力，你可以开始尝试创造一些有趣的东西，比如这个互动和动画丰富的网站SenovaSENOVA，它仍然基于Huxpro/jquery.HSlider·GitHub！或者做一个小型的个人网站供自己尝试。转行方向2：前端工程师如果你觉得以上都不够你，渴望做出更多优秀的交互，甚至已经爱上编程，想要转行做工程师，或者成为全栈设计老师，就可以继续往这个方向发展！这个阶段最大的困难是你要学会像软件工程师一样思考。你需要脚踏实地的学习编程语言，深刻理解作用域、对象、类、封装、继承、面向对象编程、事件监听、事件冒泡等很多编程概念。你还需要了解浏览器，学习DOM、BOM、CSSOMAPI，你甚至需要学习一些网络原理，包括什么是域名、URL、DNS、HTTP请求……你可能被这一堆名词吓倒了。确实，要得到它们并不容易。不过，你要相信，只要你肯努力，它们并没有那么难，更重要的是，如果你能赢得它们，你收获的不仅仅是这些，你真的跨过了一道坎——你的世界会打开，你看世界的方式也会改变。这个阶段可以继续在http://www.codecademy.com/上学习，但是w3school是不够的。我建议查看Mozilla开发者网络，这是为数不多的超级专业和友好的中英文网站之一。同时，你可能需要阅读一些书籍来帮助你学习JavaScript：《JavaScript高级程序设计（第3版） (豆瓣)》或《JavaScript权威指南 (豆瓣)》，一本大而全的书就足够了。如果上面的书对你来说太难了，可以先看《JavaScript DOM编程艺术 （第2版） (豆瓣)》过渡一下，这本书比较简单，会教给你“优雅退化，渐进增强”的绝妙思路如果你能过这个阶段顺利，我想你已经可以做出很多让你引以为豪的网站了！试试问问你的工程师朋友如何购买域名，配置简单的静态服务器，或者搜索“GithubPages”，然后把你的作品挂在网上，让大家欣赏！也可以尝试用JavaScript写小游戏，既能锻炼自己的编程能力，又很有趣~比如这是我刚学JS后黑了一晚上的产物——用DOM实现的自慰：Hux–飞机（不支持手机）——————————————————————————————————————————————————————————————如果你能完成以上所有的学习，你已经是一个非常优秀的前端学徒了！对于只想丰富自己技能的设计师或产品经理来说，以下内容可能会让你感到不适；（不过如果你真的想进大公司，全职做前端开发，那你可以接着往下看：这几年前端技术发展很快，前端工程师不再是只是在页面上编写和做一些特效。你需要有相当好的工程师素质和计算机知识才能成为真正的工程师。你需要对JavaScript语言有很好的理解，包括闭包，IIFE，this，原型和一些底层实现（ES、VO、AO），熟悉常用的设计模式和JavaScript范式（如实现类和私有属性）。另外，新的ES6已经出来了，包括类、模块、箭头函数等等。需要对常见的前端网络和后端知识有很好的了解，包括Ajax、JSON、HTTP请求、GET/POST区别、RESTful、URLhash/query、webSocket、常用跨域方法（JSONP/CORS）和CDN缓存，静态网站/动态网站，服务器端渲染/前端渲染等的区别。你需要学习使用高级CSS，包括熟悉CSS3，使用编译成的语言Scss/Less等CSS，使用autoprefixer等PostCSS工具，了解CSS在Scope/Namespace中的缺陷。您还可以学习CSS模块、CSSinJS有趣的新东西。您需要对前端模块化规范有很好的理解。也许当你学到这里，Require.js/AMD已经告别，但你必须了解CommonJS和ES6Modules。（可以看我的分享《JavaScript Modularization Seven Day》了解JS模块化的历史）你需要熟悉Git和Shell的使用，包括基于git的版本管理，分支管理和团队协作，包括简单的Linux/Unix命令，你要知道程序员的大部分工作都可以通过shell更快更酷地完成，而且很多“软件”只能通过shell才能使用。你也可以把你的代码放在github上分享给其他人，学习github上其他优秀的开源代码。您需要熟悉并习惯使用Node，包括了解npm，使用Grunt/Gulp/Browserify/Webpack来优化您的工作流程，打包、混淆、压缩和发布您的代码，您还可以使用Express/Koa与MongoDB/Redis涉足后端世界，或者尝试使用Node做后端渲染来优化你的首屏体验。您需要了解各种新的HTML5API，包括