非科班設(shè)計(jì)師如何學(xué)習(xí)前端？讓@Hux黃玄 （現(xiàn)微信前端）用親身經(jīng)歷告訴你！作為一枚自學(xué)出身的設(shè)計(jì)師，他可是走過(guò)了不少?gòu)澛?，都是自己親身經(jīng)歷過(guò)的，實(shí)打?qū)嵉膶氋F經(jīng)驗(yàn)，全文不僅教你怎么學(xué)，還為將來(lái)的職業(yè)選擇附上了細(xì)致的建議，滿(mǎn)滿(mǎn)的都是干貨，來(lái)收！

筆者大學(xué)專(zhuān)業(yè)是數(shù)字媒體藝術(shù)，大一實(shí)習(xí)過(guò)動(dòng)效設(shè)計(jì)師，大二拿到了人生***個(gè)大公司的 offer 是交互設(shè)計(jì)師，后來(lái)轉(zhuǎn)崗到淘寶旅行的前端團(tuán)隊(duì)，現(xiàn)在在微信電影票做前端研發(fā)。

也是走過(guò)了不少野路子，不過(guò)還好有小右哥 @尤小右 這樣藝術(shù)/設(shè)計(jì)轉(zhuǎn)前端的大神在前面做典范，也證明這條路是玩的通的 ：）

接下來(lái)就說(shuō)說(shuō)自己的學(xué)習(xí)建議吧，一個(gè)小教程，也是自己走過(guò)的流程，僅供參考哈

—————————————————— 背景篇 ——————————————————

在這個(gè)時(shí)代學(xué)習(xí)新東西，一定要善于使用 Bing/Google 等搜索引擎…網(wǎng)絡(luò)上的資源非常豐富，自學(xué)能力也尤為重要，尤其是對(duì)于學(xué)習(xí)技術(shù)！

入門(mén)篇（HTML/CSS）

說(shuō)起設(shè)計(jì)師希望學(xué)前端的初衷，大概還是因?yàn)楦鞣N華麗的網(wǎng)頁(yè)特效/交互太過(guò)吸引人，這種感覺(jué)大概就是：“Hey，我的設(shè)計(jì)可以做成網(wǎng)頁(yè)訪(fǎng)問(wèn)了呢！”

好在，“展示”對(duì)于前端技術(shù)來(lái)說(shuō)反而是最簡(jiǎn)單的部分。所以，放下你對(duì)“編程”兩個(gè)字的恐懼，從“稱(chēng)不上是編程語(yǔ)言”的 HTML/CSS 開(kāi)始，先做點(diǎn)有成就感的東西出來(lái)吧！

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，最有成就感的一定是“可以看到的東西”，而 HTML/CSS 正是用來(lái)干這個(gè)的，HTML 就是一堆非常簡(jiǎn)單的標(biāo)簽，而 CSS 無(wú)非就是把你畫(huà)畫(huà)的流程用英語(yǔ)按一定的格式寫(xiě)出來(lái)而已：

<p> p is paragraph! </p> 
 
<style> 
p { color: red;} 
</style>

是不是非常容易，就跟讀英語(yǔ)一樣！

接下來(lái)，你就需要開(kāi)始自學(xué)啦，比如常用 HTML 標(biāo)簽的意思，各種 CSS 的屬性，還有 CSS 的盒模型、優(yōu)先級(jí)、選擇器……放心，它們都很容易；能玩得轉(zhuǎn) PS/AI/Flash/Axure/AE/Sketch 的設(shè)計(jì)師們，學(xué)這個(gè)灑灑水啦

推薦幾個(gè)資源：

• w3school 在線(xiàn)教程 (中文，一個(gè)很 Low 但是又很好的入門(mén)學(xué)習(xí)網(wǎng)站）
• Learn to code (Codecademy，如果你英文 OK，強(qiáng)烈建議你使用它進(jìn)行交互式的學(xué)習(xí)！里面從 HTML/CSS 到搭建網(wǎng)站的課程都有，免費(fèi)，生動(dòng)直觀(guān)）

這個(gè)階段的練習(xí)主要是“臨摹”：用代碼畫(huà)出你想畫(huà)的網(wǎng)站，越多越好。

對(duì)于書(shū)，我非常不推薦上來(lái)就去看各種厚厚的入門(mén)/指南書(shū)，沒(méi)必要！這一個(gè)階段應(yīng)該快速上手，培養(yǎng)興趣，培養(yǎng)成就感。先做出可以看的東西再說(shuō)，掌握常用的 HTML/CSS 就夠用了

如果完成的好，這個(gè)階段過(guò)后你大概就可以寫(xiě)出一些簡(jiǎn)單又好看的“靜態(tài)網(wǎng)頁(yè)”了，比如這個(gè)作品集/簡(jiǎn)歷：Portfolio – 黃玄的博客 （好久沒(méi)更新了…丟人現(xiàn)眼）

入門(mén)篇（JavaScript/jQuery）

想要在網(wǎng)頁(yè)上實(shí)現(xiàn)一些交互效果，比如輪播圖、點(diǎn)擊按鈕后播放動(dòng)畫(huà)？那你就必須要開(kāi)始學(xué)習(xí) JavaScript 了！JavaScript 是一門(mén)完整、強(qiáng)大并且非常熱門(mén)的編程語(yǔ)言，你在瀏覽器里看到的所有交互或者高級(jí)功能都是由它在背后支撐的！

舉個(gè)小栗子：

alert("Hello World!") 

就這一行，就可以在瀏覽器里彈出 Hello World 啦！

在了解一些基礎(chǔ)的 JavaScript 概念（變量、函數(shù)、基本類(lèi)型）后，我們可以直接去學(xué)習(xí) jQuery，你不用知道它具體是什么（它是一個(gè) JavaScript 代碼庫(kù)），你只要知道它可以顯著地降低你編寫(xiě)交互的難度就好了：

$('.className').click(function(){ 
    alert("Hello jQuery") 
}) 

通過(guò) jQuery，我們可以繼續(xù)使用在 CSS 中學(xué)到的“選擇器”

對(duì)于沒(méi)有編程基礎(chǔ)的人來(lái)說(shuō)，想要完全掌握它們兩并不容易。作為設(shè)計(jì)師，很多時(shí)候我們可以先不必深究它們的原理，而是嘗試直接應(yīng)用它！這樣成就感會(huì)來(lái)得很快，并且你可以通過(guò)實(shí)際應(yīng)用更加理解 JavaScript 是用來(lái)做什么的。

我仍然推薦你使用 w3school 在線(xiàn)教程 與 http://www.codecademy.com/ 進(jìn)行學(xué)習(xí)。另外，你可以看一看諸如《鋒利的jQuery (豆瓣)》 這一類(lèi)非常實(shí)用的書(shū)籍，可以讓你很快上手做出一些簡(jiǎn)單的效果來(lái)！

如果學(xué)習(xí)得順利，你還可以嘗試使用各種豐富的 jQuery 插件，你會(huì)發(fā)現(xiàn)寫(xiě)出支持用戶(hù)交互的網(wǎng)站也沒(méi)有那么困難～很多看上去很復(fù)雜的功能（比如輪播圖、燈箱、下拉菜單），搜一搜然后看看文檔（教程）、改改示例代碼就好了。

比如說(shuō)，配合 Huxpro/jquery.HSlider · GitHub 這樣的輪播圖插件，你可以很輕松的寫(xiě)出 Hux-Slider | Demo 這樣的網(wǎng)頁(yè)相冊(cè)～

***，我想推薦下 Bootstrap · The world’s most popular mobile-first and respons ，這是世界上最知名的前端 UI 框架之一，提供了大量 CSS 樣式與 jQuery 插件。它非常容易學(xué)習(xí)并且文英文教程都非常得健全，你并不需要理解它背后的工作原理就能很好的使用它，讓你快速達(dá)到“可以建站的水平”。另外，你不但可以學(xué)習(xí)如何使用它，還可以學(xué)習(xí)它背后的思想。

轉(zhuǎn)職方向一：前端重構(gòu)

業(yè)內(nèi)通常把專(zhuān)精 HTML/CSS 的前端從業(yè)人員成為重構(gòu)，而對(duì)于注重視覺(jué)效果的設(shè)計(jì)師來(lái)說(shuō)，在掌握基本的 HTML/CSS 后，就可以朝著這個(gè)方向發(fā)展了。

到了這個(gè)階段，你不但要知道怎么寫(xiě)頁(yè)面，還要知道它們都是為什么，并且知道怎么做更好。這對(duì)你理解 Web 世界非常有幫助，并且能幫助你做出更“系統(tǒng)化”的設(shè)計(jì)。

CSS 的學(xué)問(wèn)很多，你需要開(kāi)始理解文檔流、浮動(dòng)流等各種定位的方式與原理，理解 CSS 的繼承復(fù)用思想、理解瀏覽器的差異、兼容、優(yōu)雅降級(jí)……這里強(qiáng)烈推薦一本書(shū)：《精通CSS（第2版） (豆瓣)》，雖然前端技術(shù)突飛猛進(jìn)，但這本書(shū)的思想永遠(yuǎn)不會(huì)過(guò)時(shí)。

HTML 方面，要開(kāi)始注重語(yǔ)義化、可訪(fǎng)問(wèn)性與結(jié)構(gòu)的合理，你要開(kāi)始學(xué)習(xí)“結(jié)構(gòu)與樣式的分離”，這里有一本神書(shū)將這種分離做到了***：《CSS禪意花園 (豆瓣)》

另外，各種炫酷屌的 CSS 3 屬性你一定會(huì)喜歡：你可以用媒體查詢(xún)做響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，你可以用 transiton 和 animation 做補(bǔ)間動(dòng)畫(huà)與關(guān)鍵幀動(dòng)畫(huà)，用 transform 做縮放、旋轉(zhuǎn)、3D變換，還有圓角、漸變、陰影、彈性盒！樣樣都是設(shè)計(jì)師的神器！

如果你還掌握了 入門(mén)篇（JavaScript/jQuery）的知識(shí)，那么恭喜你！你已經(jīng)可以做出很多有趣的網(wǎng)頁(yè)了！很多 minisite 或者微信上的“H5” 小廣告，這個(gè)程度的你已經(jīng)可以輕松完成了！

配合上你的設(shè)計(jì)功力，你可以開(kāi)始嘗試創(chuàng)作一些好玩的東西，比如這種富含交互和動(dòng)畫(huà)的網(wǎng)站 紳寶 SENOVA ，它仍然是基于 Huxpro/jquery.HSlider · GitHub 實(shí)現(xiàn)的！或者給自己做個(gè)小小的個(gè)人網(wǎng)站試試。

轉(zhuǎn)職方向二：前端工程師

如果你覺(jué)得上述的這些都還滿(mǎn)足不了你，你渴望做出更多了不起的交互，甚至你已經(jīng)喜歡上了編程，想要轉(zhuǎn)行做工程師，或者成為一名全棧設(shè)計(jì)師，那么你可以朝著這個(gè)方向繼續(xù)發(fā)展！

這個(gè)階段的***難度，是你必須學(xué)會(huì)像一名軟件工程師一樣思考。你需要踏踏實(shí)實(shí)學(xué)習(xí)編程語(yǔ)言，深入理解作用域、對(duì)象、類(lèi)、封裝、繼承、面向?qū)ο缶幊?、事件偵?tīng)、事件冒泡等一大堆編程概念，你還需要了解瀏覽器，學(xué)習(xí) DOM、BOM、CSSOM 的 API，你甚至還需要學(xué)習(xí)一些網(wǎng)絡(luò)原理，包括域名、URL、DNS、HTTP 請(qǐng)求都是什么…

你可能會(huì)被這一大堆名詞嚇到。確實(shí)，想要搞定他們并不容易。但是，你要相信只要你肯花功夫它們也沒(méi)有那么難，而更重要的是，如果你能拿下他們，你所收獲的并不只是這些而已，而是真正跨過(guò)了一道坎 —— 你的世界將因此打開(kāi)， 你看待世界的方式將因此改變

對(duì)于這個(gè)階段，你可以繼續(xù)在 http://www.codecademy.com/ 上學(xué)習(xí)，但是 w3school 已經(jīng)不夠用了，遇到不會(huì)的語(yǔ)法，我推薦你查閱 Mozilla 開(kāi)發(fā)者網(wǎng)絡(luò)，這是少數(shù)中英文都有的超級(jí)專(zhuān)業(yè)且友好的網(wǎng)站。

同時(shí)，你可能需要看一些書(shū)本來(lái)幫助你學(xué)習(xí) JavaScript ：

• 《JavaScript高級(jí)程序設(shè)計(jì)（第3版） (豆瓣) 》或 《JavaScript權(quán)威指南 (豆瓣)》，大而全的書(shū)只需要一本就夠了
• 如果上面這本你覺(jué)得太難，你可以先看 《JavaScript DOM編程藝術(shù) （第2版） (豆瓣)》來(lái)過(guò)渡一下，這本書(shū)比較容易，它會(huì)教給你 “優(yōu)雅降級(jí)、漸進(jìn)增強(qiáng)”的優(yōu)秀思想

如果你能順利得渡過(guò)了這個(gè)階段，我想你已經(jīng)能做出很多令你自豪的網(wǎng)站了！試著向身邊的工程師朋友詢(xún)問(wèn)如何購(gòu)買(mǎi)域名、配置簡(jiǎn)單的靜態(tài)服務(wù)器，或者搜搜“Github Pages”，然后把你的作品掛在網(wǎng)絡(luò)上讓大家欣賞吧！

你還可以試著用 JavaScript 寫(xiě)寫(xiě)小游戲，這不但能鍛煉你的編程水平還非常有趣～比如這是我剛學(xué) JS 不久后 hack 一晚的產(chǎn)物 —— 用 DOM 實(shí)現(xiàn)的打飛機(jī)：Hux – Aircraft （不支持手機(jī)）

—————————————————— 入行篇 ——————————————————

如果你能完成上述所有的學(xué)習(xí)，你已經(jīng)是一名非常出色的前端學(xué)徒了！對(duì)于只是想要豐富技能的設(shè)計(jì)師或者產(chǎn)品經(jīng)理來(lái)說(shuō)，接下來(lái)的內(nèi)容可能會(huì)讓你感到不適 ; (

但如果你鐵了心想要真正入行進(jìn)入大公司從事專(zhuān)職前端開(kāi)發(fā)的工作，那么你可以接著往下看：

近幾年的前端技術(shù)發(fā)展迅猛，前端工程師早已不是切切圖寫(xiě)寫(xiě)頁(yè)面做點(diǎn)特效就完事的職位，你需要具備相當(dāng)完善的工程師素質(zhì)與計(jì)算機(jī)知識(shí)，成為一名真正的工程師。

你需要非常了解 JavaScript 這門(mén)語(yǔ)言，包括 閉包、IIFE、this、prototype 及一些底層實(shí)現(xiàn)（ES、VO、AO）、熟悉常用的設(shè)計(jì)模式與 JavaScript 范式（比如實(shí)現(xiàn)類(lèi)與私有屬性）。另外，新的 ES6 已經(jīng)問(wèn)世，包括 class, module, arrow function 等等。

你需要非常了解前端常用的網(wǎng)絡(luò)及后端知識(shí)，包括 Ajax、JSON、HTTP 請(qǐng)求、GET/POST 差異、RESTful、URL hash/query、webSocket、常用的跨域方式（JSONP/CORS），以及 CDN 緩存、靜態(tài)網(wǎng)站/動(dòng)態(tài)網(wǎng)站區(qū)別、服務(wù)器端渲染/前端渲染區(qū)別等等。

你需要學(xué)習(xí)使用進(jìn)階的 CSS，包括熟悉 CSS 3，使用 Scss/Less 等編譯到 CSS 的語(yǔ)言，使用 autoprefixer 等 PostCSS 工具，了解 CSS 在 Scope/Namespace 上的缺陷，你還可以學(xué)習(xí) CSS Modules、CSS in JS 這些有趣的新玩意。

你需要非常了解前端的模塊化規(guī)范，可能在你學(xué)習(xí)到這里的時(shí)候，Require.js/AMD 已經(jīng)再見(jiàn)了，但是 CommonJS 與 ES6 Modules 你必須要了解。（你可以觀(guān)看我的分享《JavaScript Modularization Seven Day》 來(lái)學(xué)習(xí) JS 模塊化的歷史）

你需要熟悉 Git 與 Shell 的使用，包括基于 git 的版本管理、分支管理與團(tuán)隊(duì)協(xié)作，包括簡(jiǎn)單的 Linux/Unix 命令、你要知道大部分程序員的工作可以通過(guò) shell 更快更酷的完成，并且很多“軟件”只能通過(guò) shell 來(lái)使用。你還可以把你的代碼放到 github 上與人分享，并且學(xué)習(xí) github 上其他優(yōu)秀的開(kāi)源代碼。

你需要熟悉并且習(xí)慣使用 Node，包括了解 npm、使用 Grunt/Gulp/Browserify/Webpack 優(yōu)化你的工作流、對(duì)你的代碼進(jìn)行打包、混淆、壓縮、發(fā)布，你還可以使用 Express/Koa 配合 MongoDB/Redis 涉足到后端領(lǐng)域，或者嘗試用 Node 做后端渲染優(yōu)化你的首屏體驗(yàn)。

你需要了解各種 HTML 5 的新 API，包括 <video>/<audio>，包括 Canvas，webGL、File API、App Cache、localStorage、IndexedDB、Drag & Drop、更高級(jí)的 DOM API、Fetch API 等等。

你需要學(xué)習(xí) JavaScript 的單線(xiàn)程與異步編程方法，因?yàn)樗鼈兎浅７浅３Ｓ谩?setTimeout/setInterval，回調(diào)與回調(diào)地域、事件與event loop、還有 Promise 甚至 Async/Await。

你需要非常了解瀏覽器，包括主流瀏覽器的名稱(chēng)、內(nèi)核與差異、包括私有屬性與 -webkit-，你需要學(xué)習(xí)如何使用 Chrome DevTool，你需要了解瀏覽器渲染的 reflow/repaint 來(lái)避免 Jank 并進(jìn)行有針對(duì)性的性能優(yōu)化。

你需要專(zhuān)門(mén)學(xué)習(xí) Mobile Web，因?yàn)橐苿?dòng)互聯(lián)網(wǎng)是趨勢(shì)。包括 viewport、CSS pixel、 touch 事件、iOS/Android 瀏覽器的差異與兼容、移動(dòng)端的性能優(yōu)化、300ms delay 等等…你還需要知道 Hybrid 是什么，包括 Cordova/Phonegap，更復(fù)雜的比如和 iOS/Android 通信的機(jī)制，比如 URI Scheme 或者 JS Bridge。

你需要學(xué)習(xí)一些非常火熱的前端框架/庫(kù)，他們不但能幫助你更快的進(jìn)行開(kāi)發(fā)、更重要的是他們背后所蘊(yùn)含的思想。包括 Backbone、Angular、Vue、React、Polymer 等等、了解它們背后的雙向數(shù)據(jù)綁定、單向數(shù)據(jù)流、MVC/MVVM/Flux 思想、Web Component 與組件化等等。

你需要學(xué)習(xí)如何構(gòu)建 web 單頁(yè)應(yīng)用，這是 web 的未來(lái)，包括利用 history API 或者 hash 實(shí)現(xiàn)路由，包括基于 Ajax + 模版引擎或者其他技術(shù)的前端渲染、包括組織較為復(fù)雜的軟件設(shè)計(jì)等等。

我還建議你學(xué)習(xí)更多的計(jì)算機(jī)知識(shí)，它們能對(duì)你的代碼能起到潛移默化的作用，包括簡(jiǎn)單的計(jì)算機(jī)體系結(jié)構(gòu)、更廣泛的編程知識(shí)（面向?qū)ο?函數(shù)式等）、棧、堆、數(shù)組、隊(duì)列、哈希表、樹(shù)、圖等數(shù)據(jù)結(jié)構(gòu)、時(shí)間復(fù)雜度與空間復(fù)雜度以及簡(jiǎn)單的算法等等。

你需要了解業(yè)內(nèi)的大神并閱讀它們的博客/知乎/微博，很多思想和新東西只有從他們身上才能學(xué)到。我還推薦你多參加技術(shù)交流會(huì)，多認(rèn)識(shí)一些可以一起學(xué)習(xí)的小伙伴，你們可以互相交流并且一起成長(zhǎng)。

你需要具備很強(qiáng)的自學(xué)能力、對(duì)技術(shù)有熱情并且不斷跟進(jìn)。因?yàn)?JavaScript/前端的社區(qū)非常非?；钴S，有太多的新東西需要你自己來(lái)發(fā)現(xiàn)與學(xué)習(xí)：比如 Universal JavaScript（同構(gòu)）、 前端測(cè)試、HTML5 游戲、WebRTC、CSS 4、ES 7、React Native、Babel、TypeScript、Electron 等等等等…

雖然一下扯得有點(diǎn)多，但這些確實(shí)就是你未來(lái)將會(huì)遇到的。你并不需要全部掌握它們，但是卻多多益善；你也可以專(zhuān)精在某幾個(gè)方面，這已經(jīng)足以讓你成為非常專(zhuān)業(yè)的前端工程師。