設計師該如何學習前端？

筆者的經歷在知乎就可以看到，大學專業是數字媒體藝術，大一實習過動效設計師，大二拿到了人生第一個大公司的 offer 是互動設計師，後來轉崗到淘寶旅行的前端團隊，現在在微信電影票做前端研發。也是走過了不少野路子，不過還好有小右哥 @尤雨溪 這樣藝術/設計轉前端的大神在前面做典範，也證明這條路是玩的通的

接下來就說說自己的學習建議吧，一個小教程，也是自己走過的流程，僅供參考哈

————

背景篇

在這個時代學習新東西，一定要善於使用 Bing/Google 等搜尋引擎…網路上的資源非常豐富，自學能力也尤為重要，尤其是對於學習技術！

入門篇（HTML/CSS）

說起設計師希望學前端的初衷，大概還是因為各種華麗的網頁特效/互動太過吸引人，這種感覺大概就是：“Hey，我的設計可以做成網頁訪問了呢！”

好在，“展示”對於前端技術來說反而是最簡單的部分。所以，放下你對“程式設計”兩個字的恐懼，從“稱不上是程式語言”的 HTML/CSS 開始，先做點有成就感的東西出來吧！

對於設計師來說，最有成就感的一定是“可以看到的東西”，而 HTML/CSS 正是用來幹這個的，HTML 就是一堆非常簡單的標籤，而 CSS 無非就是把你畫畫的流程用英語按一定的格式寫出來而已：

<p> p is paragraph! </p>

<style>
p { color: red;}
</style>

是不是非常容易，就跟讀英語一樣！

接下來，你就需要開始自學啦，比如常用 HTML 標籤的意思，各種 CSS 的屬性，還有 CSS 的盒模型、優先順序、選擇器……放心，它們都很容易；能玩得轉 PS/AI/Flash/Axure/AE/Sketch 的設計師們，學這個灑灑水啦

推薦幾個資源：

• w3school 線上教程 (中文，一個很 Low 但是又很好的入門學習網站）
• Learn to code (Codecademy，如果你英文 OK，強烈建議你使用它進行互動式的學習！裡面從 HTML/CSS 到搭建網站的課程都有，免費，生動直觀）

這個階段的練習主要是“臨摹”：用程式碼畫出你想畫的網站，越多越好。

對於書，我非常不推薦上來就去看各種厚厚的入門/指南書，沒必要！這一個階段應該快速上手，培養興趣，培養成就感。先做出可以看的東西再說，掌握常用的 HTML/CSS 就夠用了

如果完成的好，這個階段過後你大概就可以寫出一些簡單又好看的“靜態網頁”了，比如這個作品集/簡歷：Portfolio – 黃玄的部落格 （好久沒更新了…丟人現眼）

入門篇（JavaScript/jQuery）

想要在網頁上實現一些互動效果，比如輪播圖、點選按鈕後播放動畫？那你就必須要開始學習 JavaScript 了！JavaScript 是一門完整、強大並且非常熱門的程式語言，你在瀏覽器裡看到的所有互動或者高階功能都是由它在背後支撐的！

舉個小栗子：

alert("Hello World!")

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

在瞭解一些基礎的 JavaScript 概念（變數、函式、基本型別）後，我們可以直接去學習 jQuery，你不用知道它具體是什麼（它是一個 JavaScript 程式碼庫），你只要知道它可以顯著地降低你編寫互動的難度就好了：

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

通過 jQuery，我們可以繼續使用在 CSS 中學到的“選擇器”

對於沒有程式設計基礎的人來說，想要完全掌握它們兩並不容易。作為設計師，很多時候我們可以先不必深究它們的原理，而是嘗試直接應用它！這樣成就感會來得很快，並且你可以通過實際應用更加理解 JavaScript 是用來做什麼的。

我仍然推薦你使用 w3school 線上教程 與 http://www.codecademy.com/ 進行學習。另外，你可以看一看諸如《鋒利的jQuery (豆瓣)》 這一類非常實用的書籍，可以讓你很快上手做出一些簡單的效果來！

如果學習得順利，你還可以嘗試使用各種豐富的 jQuery 外掛，你會發現寫出支援使用者互動的網站也沒有那麼困難～很多看上去很複雜的功能（比如輪播圖、燈箱、下拉選單），搜一搜然後看看文件（教程）、改改示例程式碼就好了。

比如說，配合 Huxpro/jquery.HSlider · GitHub 這樣的輪播圖外掛，你可以很輕鬆的寫出 Hux-Slider | Demo 這樣的網頁相簿～

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

轉職方向一：前端重構

業內通常把專精 HTML/CSS 的前端從業人員成為重構，而對於注重視覺效果的設計師來說，在掌握基本的 HTML/CSS 後，就可以朝著這個方向發展了。

到了這個階段，你不但要知道怎麼寫頁面，還要知道它們都是為什麼，並且知道怎麼做更好。這對你理解 Web 世界非常有幫助，並且能幫助你做出更“系統化”的設計。

CSS 的學問很多，你需要開始理解文件流、浮動流等各種定位的方式與原理，理解 CSS 的繼承複用思想、理解瀏覽器的差異、相容、優雅降級……這裡強烈推薦一本書：《精通CSS（第2版） (豆瓣)》，雖然前端技術突飛猛進，但這本書的思想永遠不會過時。

HTML 方面，要開始注重語義化、可訪問性與結構的合理，你要開始學習“結構與樣式的分離”，這裡有一本神書將這種分離做到了極致：《CSS禪意花園 (豆瓣)》

另外，各種炫酷屌的 CSS 3 屬性你一定會喜歡：你可以用媒體查詢做響應式網頁設計，你可以用 transiton 和 animation 做補間動畫與關鍵幀動畫，用 transform 做縮放、旋轉、3D變換，還有圓角、漸變、陰影、彈性盒！樣樣都是設計師的神器！

如果你還掌握了 入門篇（JavaScript/jQuery）的知識，那麼恭喜你！你已經可以做出很多有趣的網頁了！很多 minisite 或者微信上的“H5” 小廣告，這個程度的你已經可以輕鬆完成了！

配合上你的設計功力，你可以開始嘗試創作一些好玩的東西，比如這種富含互動和動畫的網站 紳寶 SENOVA ，它仍然是基於 Huxpro/jquery.HSlider · GitHub 實現的！或者給自己做個小小的個人網站試試

轉職方向二：前端工程師

如果你覺得上述的這些都還滿足不了你，你渴望做出更多了不起的互動，甚至你已經喜歡上了程式設計，想要轉行做工程師，或者成為一名全棧設計師，那麼你可以朝著這個方向繼續發展！

這個階段的最大難度，是你必須學會像一名軟體工程師一樣思考。你需要踏踏實實學習程式語言，深入理解作用域、物件、類、封裝、繼承、物件導向程式設計、事件偵聽、事件冒泡等一大堆程式設計概念，你還需要了解瀏覽器，學習 DOM、BOM、CSSOM 的 API，你甚至還需要學習一些網路原理，包括域名、URL、DNS、HTTP 請求都是什麼…

你可能會被這一大堆名詞嚇到。確實，想要搞定他們並不容易。但是，你要相信只要你肯花功夫它們也沒有那麼難，而更重要的是，如果你能拿下他們，你所收穫的並不只是這些而已，而是真正跨過了一道坎 —— 你的世界將因此開啟， 你看待世界的方式將因此改變

對於這個階段，你可以繼續在 http://www.codecademy.com/ 上學習，但是 w3school 已經不夠用了，遇到不會的語法，我推薦你查閱 Mozilla 開發者網路，這是少數中英文都有的超級專業且友好的網站。

同時，你可能需要看一些書本來幫助你學習 JavaScript ：

• 《JavaScript高階程式設計（第3版） (豆瓣) 》或 《JavaScript權威指南 (豆瓣)》，大而全的書只需要一本就夠了
• 如果上面這本你覺得太難，你可以先看 《JavaScript DOM程式設計藝術 （第2版） (豆瓣)》來過渡一下，這本書比較容易，它會教給你 “優雅降級、漸進增強”的優秀思想

如果你能順利得渡過了這個階段，我想你已經能做出很多令你自豪的網站了！試著向身邊的工程師朋友詢問如何購買域名、配置簡單的靜態伺服器，或者搜搜“Github Pages”，然後把你的作品掛在網路上讓大家欣賞吧！

你還可以試著用 JavaScript 寫寫小遊戲，這不但能鍛鍊你的程式設計水平還非常有趣～比如這是我剛學 JS 不久後 hack 一晚的產物 —— 用 DOM 實現的打飛機：Hux – Aircraft （不支援手機）

入行篇

如果你能完成上述所有的學習，你已經是一名非常出色的前端學徒了！對於只是想要豐富技能的設計師或者產品經理來說，接下來的內容可能會讓你感到不適 ;(
但如果你鐵了心想要真正入行進入大公司從事專職前端開發的工作，那麼你可以接著往下看：

近幾年的前端技術發展迅猛，前端工程師早已不是切切圖寫寫頁面做點特效就完事的職位，你需要具備相當完善的工程師素質與計算機知識，成為一名真正的工程師。

你需要非常瞭解 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 3，使用 Scss/Less 等編譯到 CSS 的語言，使用 autoprefixer 等 PostCSS 工具，瞭解 CSS 在 Scope/Namespace 上的缺陷，你還可以學習 CSS Modules、CSS in JS 這些有趣的新玩意

你需要非常瞭解前端的模組化規範，可能在你學習到這裡的時候，Require.js/AMD 已經再見了，但是 CommonJS 與 ES6 Modules 你必須要了解。（你可以觀看我的分享《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 做後端渲染優化你的首屏體驗

你需要了解各種 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 來避免 Jank 並進行有針對性的效能優化

你需要專門學習 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 單頁應用，這是 web 的未來，包括利用 history API 或者 hash 實現路由，包括基於 Ajax + 模版引擎或者其他技術的前端渲染、包括組織較為複雜的軟體設計等等

我還建議你學習更多的計算機知識，它們能對你的程式碼能起到潛移默化的作用，包括簡單的計算機體系結構、更廣泛的程式設計知識（物件導向/函式式等）、棧、堆、陣列、佇列、雜湊表、樹、圖等資料結構、時間複雜度與空間複雜度以及簡單的演算法等等

你需要了解業內的大神並閱讀它們的部落格/知乎/微博，比如 @尤雨溪@賀師俊@張雲龍@徐飛@張克軍@玉伯@拔赤@寸志@題葉@郭達峰 等等等等，很多思想和新東西只有從他們身上才能學到。我還推薦你多參加技術交流會，多認識一些可以一起學習的小夥伴，你們可以互相交流並且一起成長

你需要具備很強的自學能力、對技術有熱情並且不斷跟進。因為 JavaScript/前端的社群非常非常活躍，有太多的新東西需要你自己來發現與學習：比如 Universal JavaScript（同構）、 前端測試、HTML5 遊戲、WebRTC、CSS 4、ES 7、React Native、Babel、TypeScript、Electron 等等等等…

雖然一下扯得有點多，但這些確實就是你未來將會遇到的。你並不需要全部掌握它們，但是卻多多益善；你也可以專精在某幾個方面，這已經足以讓你成為非常專業的前端工程師。