head-first-front-end-1

編者按:非計算機科班設計師如何學習前端?讓@Hux黃玄?(現微信電影票前端)用親身經歷告訴你!作為一枚非計算機科班的設計師,他可是走過了不少彎路,都是自己親身經歷過的,實打實的寶貴經驗,全文不僅教你怎么學,還為將來的職業選擇附上了細致的建議,滿滿的都是干貨,來收!

筆者大學專業是數字媒體藝術,大一實習過動效設計師,大二拿到了人生第一個大公司的 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 – 黃玄的博客 (好久沒更新了…丟人現眼)

code20151029 (1)

入門篇(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 插件。它非常容易學習并且文英文教程都非常得健全,你并不需要理解它背后的工作原理就能很好的使用它,讓你快速達到“可以建站的水平”。另外,你不但可以學習如何使用它,還可以學習它背后的思想。

code20151029 (3)

轉職方向一:前端重構

業內通常把專精 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 :

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

你還可以試著用 JavaScript 寫寫小游戲,這不但能鍛煉你的編程水平還非常有趣~比如這是我剛學 JS 不久后 hack 一晚的產物 —— 用 DOM 實現的打飛機:Hux – Aircraft (不支持手機)

code20151029 (2)

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

如果你能完成上述所有的學習,你已經是一名非常出色的前端學徒了!對于只是想要豐富技能的設計師或者產品經理來說,接下來的內容可能會讓你感到不適 ; (

但如果你鐵了心想要真正入行進入大公司從事專職前端開發的工作,那么你可以接著往下看:

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

你需要非常了解 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/前端的社區非常非?;钴S,有太多的新東西需要你自己來發現與學習:比如 Universal JavaScript(同構)、 前端測試、HTML5 游戲、WebRTC、CSS 4、ES 7、React Native、Babel、TypeScript、Electron 等等等等…

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

所以,如果你自認為涵蓋了上述要求的 40%,歡迎簡歷發 huangxuan@wepiao.com ,實習/全職皆可~(非軟文,順道宣傳下)

【新人最喜歡的職場大全】

  1. 平面設計:《超贊!設計師完全自學指南》
  2. UI設計:《超實用新手指南!零基礎如何自學UI設計?》
  3. 交互設計:《交互設計師修煉指南!教你從零開始成為優秀交互設計師》
  4. 面試求職:《優設重磅首發!全方位揭開簡歷和面試話術的秘密》

原文地址:zhihu

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量103萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 7

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏