前端學習之路

入門篇（HTML/CSS）

提及設計師但願學前端的初衷，大概仍是由於各類華麗的網頁特效/交互太過吸引人，這種感受大概就是：「Hey，個人設計能夠作成網頁訪問了呢！」 好在，「展現」對於前端技術來講反而是最簡單的部分。因此，放下你對「編程」兩個字的恐懼，從「稱不上是編程語言」的 HTML/CSS 開始，先作點有成就感的東西出來吧！

對於設計師來講，最有成就感的必定是「能夠看到的東西」，而 HTML/CSS 正是用來幹這個的，HTML 就是一堆很是簡單的標籤，而 CSS 無非就是把你畫畫的流程用英語按必定的格式寫出來而已：

p is paragraph!

是否是很是容易，就跟讀英語同樣！ 接下來，你就須要開始自學啦，好比經常使用 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 在線教程 與 www.codecademy.com/ 進行學習。另外，你能夠看一看諸如《鋒利的jQuery (豆瓣)》 這一類很是實用的書籍，可讓你很快上手作出一些簡單的效果來！

若是學習得順利，你還能夠嘗試使用各類豐富的 jQuery 插件，你會發現寫出支持用戶交互的網站也沒有那麼困難～不少看上去很複雜的功能（好比輪播圖、燈箱、下拉菜單），搜一搜而後看看文檔（教程）、改改示例代碼就行了。

好比說，配合 Huxpro/jquery.HSlider · GitHub 這樣的輪播圖插件，你能夠很輕鬆的寫出 HSlider | Demo 這樣的網頁相冊或者 HSlider | Weather 這樣的手機端 App 原型～

最後，我想推薦下 Bootstrap · The world's most popular mobile-first and respons ，這是世界上最知名的前端 UI 框架之一，提供了大量 CSS 樣式與 jQuery 插件。它很是容易學習而且中英文教程都很是健全，你並不須要理解它背後的工做原理就能很好的使用它，讓你快速達到「能夠建站的水平」。有餘力的話，你不但能夠學習如何使用它，還能夠學習它背後的設計思想。

轉職方向一：前端重構 （Web Rebuild）

業內一般把專精 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 實現的！或者給本身作個小小的我的網站試試

轉職方向二：前端工程師（Front-end Engineer）

若是你以爲上述的這些都還知足不了你，你渴望作出更多了不得的交互，甚至你已經喜歡上了編程，想要轉行作工程師，或者成爲一名全棧設計師，那麼你能夠朝着這個方向繼續發展！

這個階段的最大難度，是你必須學會像一名軟件工程師同樣思考。你須要踏踏實實學習編程語言，深刻理解做用域、對象、類、封裝、繼承、面向對象編程、事件偵聽、事件冒泡等一大堆編程概念，你還須要瞭解瀏覽器，學習 DOM、BOM、CSSOM 的 API，你甚至還須要學習一些網絡原理，包括域名、URL、DNS、HTTP 請求都是什麼…

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

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

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

《JavaScript高級程序設計（第3版） (豆瓣) 》或 《JavaScript權威指南 (豆瓣)》，大而全的書只須要一本就夠了 若是上面這本你以爲太難，你能夠先看 《JavaScript DOM編程藝術 （第2版） (豆瓣)》來過渡一下，這本書比較容易，它會教給你 「優雅降級、漸進加強」的優秀思想 若是你能順利得渡過了這個階段，我想你已經能作出不少令你自豪的網站了！試着向身邊的工程師朋友詢問如何購買域名、配置簡單的靜態服務器，或者搜搜「Github Pages」，而後把你的做品掛在網絡上讓你們欣賞吧！

你還能夠試着用 JavaScript 寫寫小遊戲，這不但能鍛鍊你的編程水平還很是有趣～好比這是我剛學 JS 不久後 hack 一晚的產物 —— 用 DOM 實現的打飛機：Hux - Aircraft （不支持手機）

入行篇

「我本身是一名從事了5年前端的老程序員，辭職目前在作講師，今年年初我花了一個月整理了一份最適合2019年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各類框架都有整理，送給每一位前端小夥伴，這裏是小白彙集地，歡迎初學和進階中的小夥伴。"

加QQ羣：931661106（招募中）

關注公衆號：蝌蚪前端

每晚7點直播講課，送前端學習資料，從基礎到框架，專業的老師爲你指導

加微❤：QD_666_QD

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

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

你須要很是瞭解 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、HTTP 強緩存/協商緩存，以及如何利用 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，包括

你須要學習 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 + 模版引擎或者其餘技術的前端渲染、包括組織較爲複雜的軟件設計等等

我還建議你學習更多的計算機知識，它們能對你的代碼能起到潛移默化的做用，包括簡單的計算機體系結構、更普遍的編程知識（面向對象/函數式等）、棧、堆、數組、隊列、哈希表、樹、圖等數據結構、時間複雜度與空間複雜度以及簡單的算法等等

「我本身是一名從事了5年前端的老程序員，辭職目前在作講師，今年年初我花了一個月整理了一份最適合2019年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各類框架都有整理，送給每一位前端小夥伴，這裏是小白彙集地，歡迎初學和進階中的小夥伴。"

加QQ羣：931661106（招募中）

關注公衆號：蝌蚪前端

每晚7點直播講課，送前端學習資料，從基礎到框架，專業的老師爲你指導

加微❤：QD_666_QD

你須要瞭解業內的大神並閱讀它們的博客/知乎/微博，好比 @尤雨溪@賀師俊@張雲龍@徐飛@張克軍@玉伯@拔赤@寸志@題葉@郭達峯 等等等等，不少思想和新東西只有從他們身上才能學到。我還推薦你多參加技術交流會，多認識一些能夠一塊兒學習的小夥伴，大家能夠互相交流而且一塊兒成長

你須要具有很強的自學能力、對技術有熱情而且不斷跟進。由於 JavaScript/前端的社區很是很是活躍，有太多的新東西須要你本身來發現與學習：好比 Universal JavaScript、Isomorphic JavaScript、前端測試、HTML5 頁遊、WebRTC、WebSocket、CSS 四、SVG、HTTP/二、ES 七、React Native、Babel、TypeScript、Electron 等等等等…

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