標籤：

如何幫助前端新人入門和提高？

12-06

比如：

可以分哪些階段培養？

每個階段安排什麼樣的開發任務比較好？

每個階段以掌握到什麼樣的技能為標準？

四年後來mark一下，很多同學在評論區問能不能做徒弟之類的，還有私信問一些新手如何入門之類的，問的同學太多，無法一一回復，請各位見諒。
當時回答這個問題時，還在其他公司，而目前已加入騰訊四年多的時間，帶著一個小的前端團隊，最近也是有意向對各位入門以及入門後不知道如何提升的同學一些針對性的指導，方式可以是微信，QQ或者郵件等方式，當然機會合適，你可以來深圳，我們當面交流。於是，我想嘗試性的收三位徒弟，等幾年後再看這幾位同學發展的如何，也算是對自己在這個行業的一點考驗。
以下是具體報名的方式：
郵件到 smallni#http://vip.qq.com（請將#換成@）
簡單的介紹一下你自己：
姓名： 性別： 畢業院校： 所學專業： 平時興趣愛好： 常上的前端網站： 目前的困惑及希望得到的幫助： 最後附上你的一個最得意的前端作品：
------------------------------------
報名已截止，感謝大家。
--------------------------------------------
我來談一下我的感受吧，@Gino 所言極是，誰都希望招一個有經驗的前端人員，那樣也可以減少公司的培訓成本。但目前中國整個大的環境是沒有一所高校開設了前端相關的專業，前端的被重視程度還不夠，很多公司和很多人都還對前端這個職位停留在「美工」或者「頁面仔」的認知程度上，這樣一來前端的價值就不足以很好的被體現，真正做的比較優秀的前端也就少之又少，所以公司需要招一些熱愛但不怎麼熟練的前端回來培養，誰剛開始不是這樣過來的對嗎？
新人都是從最基本的html css神馬的開始摸索的，我記得我在高中那會還在用frontpage拖table來做網頁，自己只是興趣所趨，& css這些概念當時全然不知。說實話，如果不是自己對前端這個行業感興趣，自己也不會選擇了計算機專業，畢業後也不會一直從事著前端行業，也不會對html css js神馬的喜歡到一種偏愛的程度。前端入門容易，但說實話精通真的很難，無論哪個大牛都不敢說自己是精通，因為前端知識體系不僅有廣度還要有深度，每天跟代碼在一起生活，唯一能支持下去的動力恐怕就是興趣了吧。如果你不愛一個東西，那麼永遠也不會做好。

好吧，前面YY了一下。下面講講具體的如何幫助新人入門和提高吧：

去年在前一家公司培養過2個實習生，現在的一個已經當了小組的leader，但另一個放棄了這個職業，去考研去了。當時我是接到上面leader的通知，讓我來培養今年進來的2個實習生。2個實習生剛來時我出了一些題目測試了一下他們對前端基本知識的掌握程度，當時我就淚奔了。。可以說他們是一張白紙，啥也不會。。唯一有的好像就是興趣。。好吧，公司既然把這個任務給我了，再難也要迎難而上，也不應該打擊2位實習生的信心。

Leader給我下了硬性指標，三個月內要讓他們能參與到項目中來，我粗略算了下 有點緊，但如果他們有學習的動力還是沒什麼問題的。首先我為他們制定了一個三個月的學習計劃，大致上分為第一個月、第二個月、第三個月，然後每個月再劃分到每個星期，每個星期劃分到每天。每天學習的東西做日報，每周一次周報並且我會出一些測試題給他們做，每月一次綜合測試。三個月之後讓他們參與一個項目測試並做三個月的總結。（是不是很像大學期間的寫論文報告？但工作了之後有時總結真的很重要，能夠正視自己的不足）

當然，學習所有的基本知識之前，第一天需要培養的是「思想」！要讓他們知道什麼是前端以及當前前端業界的一個趨勢，不然在不清楚自己定位的情況下去學東西永遠會在迷茫，只有清楚自己想要的才會更好地去努力。我特別傳達給他們的概念就是永遠不要把自己當做一個代碼機器，不然自己以後真的走上前端之路會得抑鬱症，在前端工作中享受前端所帶來的樂趣是最高的境界。
前端不是頁面仔，不是美工，前端直接面向了最終用戶，前端是針線活，需要細心和耐心，前端需要不斷地學習新知識，前端需要不斷研究出現的問題，前端需要關注用戶體驗，前端需要了解用戶心理，前端也需要了解程序員的心理，前端還需要了解設計師天馬行空的想法 : )

第一個月主要讓他們對一些專業術語和前端整體的知識體系做了概覽（包括html、css、js、dom、bom等），當然這裡必須要去了解的是W3C的誕生以及它的發展歷程，還有各大瀏覽器廠商的發展歷程以及當今不斷變化的市場格局。前半個月對html所有的標籤做一個系統的學習，並對常用的標籤(divph1-h6spanimguldlolli)做重點的理解和DEMO書寫，這裡我特別傳達了語義化的概念給他們希望他們合理的使用標籤，而不是根據自己的心情隨意的使用標籤。後半個月對css的所有屬性做通覽，並對常用的CSS屬性做重點理解和實戰，這裡我沒有讓他們對所有的CSS屬性做很詳細的了解（有些CSS屬性可能我們自己一輩子都不會用到，以後遇到的時候學會查API即可）。這過程中還傳達了hack這個概念給他們，以及對待hack的態度和常用實例。

第二個月主要是JS的學習（話說一個月學習JS真的是太難太難了，雖然是個腳本語言但要注意的地方特別多），首先對JS基礎的一些東西的學習（詞法結構、數據類型和值、變數、表達式和運算符、語句等等一些基礎知識），在學JS期間我發現他們明顯比第一個月學習html和css來的煩躁，但好得他們有學過編程，有些基礎。基礎學好之後，就是客戶端的一些知識的學習，domom等等，如何對dom操作，關於性能這方面的東西暫時沒有傳達給他們，等他們達到一定知識程度上我希望他們學習如何優化。後半個月就是讓他們接觸一個JS框架，並學會高效快速的寫出頁面交互代碼。

第三個月基本就是實戰，html+css+js，每周基本都要寫好幾個頁面，然後我會帶他們一起去review，並指出所存在的問題，順便讓他們自己記錄下，總結，下次再寫頁面時避免。

當然這三個月期間，他們還需要學會前端工具的使用(svndw
otepad++vimzen-codingps等等)，工具我沒有過多的去教他們，這個純粹是一個使用熟練度的問題，只要自己多操作即可。

最後再這三個月的學習過程中我發現其中一個（是個女孩子）每天下班後經常留在公司，把白天遇到的一些問題代碼實戰，然後發現了她的一個本本，上面記錄了遇到的問題，另外一個男孩子也偶爾會留下來，但幾乎很少。三個月之後男孩子說自己要考研了，走了，我想他可能真的不適合前端，也許是有自己的理想，女孩子留了下來，並且迅速的融入了項目團隊。（這裡我對我這個徒弟還是比較自豪的，前端沒有性別之分，女孩子也可以很出色）

說到底，前端新人，如果你是一個導師，要學會去傳達一個正確的觀念 ，並讓他們永遠保持著學習的激情，不要小看一張白紙，如果給他一支水筆，他也會描繪出一幅美好的藍圖。

背景

在公司里長期帶前端新人，都是985大三或者研一的實習生，剛進來的時候都是前端小白。

12個月後基本每一個實習生都找到了BAT、網易級的前端工程師工作。

過程

在項目開始前，集中突擊培訓，大家進公司實習的時候基礎是不同的，首先就是要在短期內「對齊」，這個階段要從ES6、CSS等等基礎開始培訓，我會儘可能的講得細一些，教材都是MDN或者阮一峰的博客。

統一化IDE、灌輸代碼書寫規範、嚴格執行 ESLint，實習生可能開始並不能理解，但是不出兩周，就能明白良好的代碼風格給他們帶來的好處。

在即將進入項目階段的時候集中培訓Git、Jenkins等軟體生命周期必備的工具，並且找一些能夠吸引年輕人的簡單項目開始訓練他們工程化的思想、架構設計的基本理念。不出一個月他們的練手作品就能從單HTML網頁迅速過渡到基於現代化前端構建的複雜項目。

演練

大家可以在github搜索網易音樂（netease-music）有很多都是我和我帶過的實習生做的課堂、課後練習。

最近又找了一個豆瓣電影 API 練習 React/Redux 和動畫，大家可以在 Github 上搜索 movie-board 這個關鍵字，這裡先放一個我自己的：

Github

MagicCube/movie-board: Re-design and implement Douban Movie with React and Redux.

在線演示

THE BEST WAY TO EXPLORE MOVIES

像網易音樂、豆瓣這些項目的共同特點是，實現周期短，一般都在5個工作日內，有現成的 API 可以調用，將來還可以自己把數據用 Python 趴下來，然後用 Node.js 自己實現服務端。最關鍵的是大學生朋友們對這些項目都非常感興趣。

這個項目還在持續更新中，如果喜歡的話可以直接Fork，歡迎 Star 和 Follow。

實戰

由於所在的部門是創新為主的業務，讓我們經常會接到緊急的任務。這是我們去年在CEBIT上做的酷炫 Demo

回到正題，最好的鍛煉無疑是在項目中不斷歷練，當然前提是你有一顆追求完美、追逐技術的心（未完待續）。

分享

當然還有一點非常重要，就是鼓勵他們將自己的所思所想和經驗沉澱成文檔，鼓勵技術創新，鼓勵技術分享交流會，發布博客和知乎專欄。

到今年，從上高中參加全國網頁Flash競賽開始，做了20年Web開發，光是前端做了整整12年，如今前端技術發展太快，老人不但要與時俱進，更有義務向新人傳授經驗。

分享幾個最近發現的一些前端學習資源~~ 有興趣可以看看

  1. css 編寫規範 http://cssguidelin.es/
  2. 前端性能優化的24種方法 http://browserdiet.com/en/
  3. 學習js正確的方法 JS: The Right Way
  4. 很有趣的js編程教材（才出的） Eloquent JavaScript
  5. 設計師寫的js入門教程，頁面很贊 http://rachelnabors.com/javascript-for-designers/#slide-0
  6. CSS女神開發的正則表達式工具，超贊： RegExp playground

都很深入淺出，大家可以看看~

可能我的回答並不受人待見，覺得前端就是HTML+CSS+JS請出門左轉，覺得自己如何四個月學會一個框架月薪上萬請出門右轉。初學者必須要明確前端是計算機學科中的一個職業分支，它和其他的計算機職業一樣需要紮實的計算機基礎知識，唯一的區別在於前端的工作宿主對象是瀏覽器。所以《數據結構》、《演算法導論》、《計算機原理基礎》、《彙編語言》、《linux操作系統命令行》、《計算機網路通信協議》這些基礎知識不是說要掌握多好，不管是科班還是非科班出身的人或多或少都應該學習。這樣後面的路才會走的順暢。

現在很多培訓機構上來就是給新人灌輸框架，我不否認這種教學會快速培訓出一個app組裝工人，但是對個人發展來說是極為不利的，這就如同你在富士康再怎麼熟練拼裝一台iphone去apple公司面試別人也不會錄取你是一個道理。

框架是前端的快捷方式，沒有一個框架會是一個程序員安身立命之本。

前端的知識面非常的繁雜，從平面設計、交互設計、web安全到MVC框架設計、webpack組件化等等幾乎每一面都需要從業人員非常紮實的功底，而Javascript作為一門偉大的語言，隨著時代的發展宿主對象早已跨越瀏覽器的局限。在函數式編程思想和面向對象思想基礎上分建立了不同庫和框架，學海無涯，吾生有涯。選擇其中某一個方向鑽研都會有非常大的收穫。

現在的前端特別好笑，一方面是企業招不到人，一方面大量速成「前端」找不到工作。其中的緣由就在此。很多人進入這個行業的原因就是被培訓機構給匡進來的，自己學了一段時間用了點框架和庫搭建了一個簡單的頁面就覺得前端不過如此嘛！支付寶淘寶過幾年我也能回老家創業搞一個。還是回到富士康那個梗上，會組裝iphone的流水線工人想去蘋果應聘硬體工程師，你還得從計算機基礎知識開始學起。這條路你抄不了近道。當你願意踏踏實實走過這些必由之路時，一切自會海闊天空。

補充：很多人覺得我舉出的書名怎麼怎麼難，其實我相信稍微對計算機有了解的朋友都知道這都是計算機專業本科的基礎課本，並非什麼深奧的理論教材，面對的人群也是高中畢業才上大學的學生。坦白說的這個答案不是說給那些一心想著四個月學會搭個框架，仿一個網站，寫一堆假簡歷的人的。你們反正JAVA火速成JAVA，挖掘機火速成挖掘機。我希望一些真正喜歡計算機專業的朋友，一些希望在前端這個領域有安身立命想法的朋友不要受到一些人的誤導，能夠踏踏實實地去面對計算機領域的知識。這樣他們才會在未來的路上走的踏實，職業路徑才會更加的順暢。

計算機領域是一個典型的一分耕耘一分收穫的地方，你四個月速成自然有四個月速成的收穫，你願意花更長的時間去學習自然會有完全不一樣的收穫。對於知識，尤其是那些看起來不是那麼好學的知識，我們應當心存敬畏之心，你若熱愛計算機，那就請尊重它們，你若只是想進來撈一筆錢，沒有關係，但也請你不要用無知和狂妄去肆意踐踏它們，因為這些知識不是因為你而存在。

人其實都不笨，想從事前端的人肯定都知道前端是個啥東西，接下來就先從基礎的技能培養開始就行了。

1. 首先，前端最基礎的就是html，js，css，這三項的基本功必須紮實。入門的時候推薦三個網站
* w3school ?ú???ì3ì， w3cshool,很零碎的知識點，可以片段化的練習代碼
* 最體系最負責的前端在線教學網站 如果你想系統的入門前端，而且比較懶不想看文字，那可以上攻城課堂看看，有很體系化的前端視頻教程 ，課後還有小練習
* codeacademy 邊學邊練，也不錯

2. 有了基本的html，js，css之後當然就要開始堆頁面了，因為實操才是硬道理，不管書看了多少，視頻看了多少，不練其實你還是啥都不會。可以拿知乎這個網站的頁面作為學習的對象，比如從註冊登錄頁開始，慢慢仿著做，然後做個人主頁，等等。 當你把知乎的大的頁面都仿過之後，那麼你的基礎的做頁面的水平就相當不錯了

3. 要開始接觸前端的開發框架，類庫。 最常用的無非是jquery，bootstrap，grunt這些工具。把之前做知乎的例子重新擼一遍，原生的js換成jquery等等，相當是還是通過做項目的方式來熟悉這些東西。

4. 再接來下要進階就是往js方向深挖
推薦一些書 ，啃爆這兩本，基本血槽漲一堆：
高性能JavaScript (豆瓣)
JavaScript高級程序設計（第3版） (豆瓣)

5. 往技術專家和架構師的方向發展
* 關注牛人，跟著牛人學習，follow他們 知乎上有哪些 JavaScript 高手？ - 前端開發 ， 或者公司里如果有牛人，直接貼身學習最完美
* 上github，github上的js，css，html板塊上排名靠前的項目都是教科書般的牛x代碼，star這些項目研究代碼，follow這些作者，有問題甚至可以私信交流。技術人基本都很熱心解答問題
* 可以加入github上的一些好項目，貢獻代碼
* 自己嘗試著做一個工具或者框架，來解決自己工作中開發遇到的不順

剩下的一堆其他博客資料什麼，其他回答的童鞋也說的挺多的。不過這些東西不是越多越好，自己能看的過來才是最重要的。學技術最重要的還是一個練字，靜下心來好好壘碼吧

作者：余博倫
鏈接：如何成為一個卓越的前端開發工程師 - 從零學習前端開發 - 知乎專欄
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

原文鏈接：https://www.infoq.com/news/2015/08/great-front-end-developer/

這不是一篇嚴格意義上的翻譯，我只是用中文傳達了原文的觀點，裡面有很多自己撰寫的部分，可能和原文根本對應不上但表述的還是一個意思。而且我替換了其中所有的資源鏈接，以方便大家查閱。如果有什麼建議歡迎在評論中提出。

本文中提到的建議來自於兩位工程師，一位推薦高效的工具和技術，另一位提供在編程實踐中解決困難的建議和方法。

Rebecca Murphey, 來自 Bazaarvoice 的開發者，之前寫過一篇題為 A Baseline for Front-End [JS] Developers: 2015 的博文。總結起來有以下幾點：


學習 ECMAScript 2015(ES6)

推薦資源:

  1. 阮一峰 ECMAScript 6入門
  2. ECMAScript 6 Features 中文版

事實上你並沒有必要現在就精通ES6的全部特性，很多情況下ES6的應用還需要通過BabelJS編譯來實現對不支持瀏覽器的兼容。Murphey推薦深入了解有關非同步調用，回調以及Promises的部分。


使用模塊

推薦資源:

  1. Webpack 中文指南
  2. webpack
  3. ECMAScript 6 模塊簡介

模塊化是開發Web應用的大趨勢。你可以通過webpack一類的構建工具來組織你的代碼，當然現在ES6已經提供了原生的modules支持。


測試你的代碼

推薦資源:

  1. Intern.
  2. Mocha
  3. 修改代碼的藝術
  4. Working Effectively with Legacy Code

Intern.的使用方式更人性化一些，而使用Mocha已經屬於一種習慣。這裡還要推薦一本書修改代碼的藝術，有能力者可以讀英文原版。


自動化構建

推薦資源:

  1. Grunt
  2. Gulp
  3. Yeoman -Yeoman官方教程中文版
  4. Broccoli.js

大家對Grunt和Gulp可能已經比較熟悉了。在這裡Murphey和譯者都強烈推薦Yeoman，它提供了特別多的啟動開發項目的模板，只需要命令行里的一行代碼就可以將你應用需要的技術棧下載配置完畢。Broccoli也是新流行起來的一個構建工具。


編寫高質量的代碼

推薦資源:

  1. JSCS
    • JavaScript代碼風格檢查工具 - JSCS 介紹
  2. ESLint
    • ESLint 使用入門

在編寫代碼的過程中一定要注意保持統一的規範和風格。畢竟在很多情況下，你寫的代碼並不是自己一個人看，即使是你自己一個人看，如果不遵循任何規則，你敢保證你能看懂自己上個月寫出的代碼么？


使用Git

推薦資源:

  1. ghooks

在項目開發中，你必然要使用到版本控制工具來和他人協作編寫代碼。git本身提供一個hook功能，可以在commit或者push前出發一些其他任務。ghook這個npm包提供了一種非常簡便的配置hook的方法。


伺服器端渲染

推薦閱讀:

  1. JS前端渲染VS伺服器端渲染
  2. 玩轉 React 伺服器端渲染

在實際應用中，由於性能問題等一些原因，會在伺服器端預先渲染好客戶端請求的數據頁面，再直接將靜態文件傳回客戶端。


使用Node.js

推薦資源:

  1. Node.js 中文官網
  2. 淘寶 NPM 鏡像
  3. Express 中文官網
  4. request module -node.js的request模塊使用說明

不用學習新的語言，使用js就可以直接在伺服器端編程，前端工程師一秒變全棧。雖然Nodejs廣為詬病，被諷刺node根本不是一種語言，充其量是個框架。但實際應用中還是挺爽的。至少學會如何使用Express搭建一個簡單的API服務，如何使用request代理請求。在譯者看來，會用npm就可以解決很多問題啦。

============================================

來自Google的工程師Philip Walton有著不同的觀點，他並不推薦工具和框架，而更看重在實際應用中解決問題的能力。他說「區別人能力高低的關鍵在於思想而不是知識。」

譯者認為，尤其是在這個三天兩頭就有新輪子新工具推出的大環境下，不要出現一個新流行趨勢就馬上去學習使用這個工具或是框架，而不去了解開發這個框架想要解決的問題和其背後的原理。這樣只會陷入眼花繚亂之中，永遠掌握不料編程的真諦。

npm的社區維護的也沒有你想像的好，你下載下來的包里可能會包含著一個後台默默為別人twitter點贊轉發的代碼，也有可能下載下來一張十幾兆的廣告圖片。隨便一個人移除了自己的代碼包可能會造成使用其代碼的項目大面積癱瘓。所以永遠信賴自己，不要依靠工具。


知其然知其所以然

現在有太多的人面向搜索引擎，面向Github，面向別人的代碼編程。也許你找來的一段代碼碰巧好用起了效果，但是你並不明白其中的原理，短期來看你稀里糊塗解決了手頭的問題，但是真正了解其中的原理可以節省你未來的時間。你會很清楚你要怎樣寫，節約大把的「猜猜然後再試試」的時間。


時刻關注瀏覽器的變化

比如說當IE10出來之後下面這行代碼就不能用了：

var isIE6 = !isIE7 !isIE8 !isIE9;

其實這是鄙視IE的環節。譯者覺得我們連帶著鄙視用IE的人和單位就好了。


閱讀標準規範

推薦閱讀:

  1. Mozilla 開發者網路
  2. W3C Web 平台文庫

雖然很痛苦，但可以讓你的理解更深入。例如在瀏覽器兼容的調試中，如果你不知道標準，很難發現調試中發現bug的原因。


審查代碼

Walton認為閱讀別人的代碼對於擴展思路，團隊合作都有很好的幫助。而且我們得承認「我們大部分時間都是在組織或者修改已有的代碼」，而不是從零開始。


和更優秀的人一起工作

Walton強烈推薦開發者在最初工作時加入一個團隊，這樣才可以從更有經驗的人身上學習，也有機會讓別人審閱你的代碼。如果你仍然想作為一個自由職業者，那麼參加合作開源項目可以彌補你團隊工作的經驗。


重新發明輪子

重新發明輪子並不能提高你的生產力，卻是非常好的一種學習途徑。不使用別人的代碼而是自己從頭實現一個功能可以讓你學習到很多。


學習與實踐相結合

Walton總結：「根據我的經驗來看，寫作，講述，開發demo是由內到外完整了解某項知識的最好方式，即使你寫的東西沒人看，但你在做這些事情中取得的進步更有價值。」

正在教一個朋友學習前端，談下我的想法與過程：
1. 知己知彼，先了解下對方的基礎背景，我那朋友雖是科班出身，但是典型的為了考試而考試的那種，對於前端看過 @大漠 的博客，以CSS為主，JS這塊非常薄弱，HTML語義化也幾乎為零，所以基礎上可以判定為不及格，需要重點補齊的地方也非常明顯。
2. 所以我要做的第一件事情是補起他最大的一個扣分項：JS非常薄弱。《JavaScript權威指南》我自己是沒有看過，而且太厚，對新人有畏懼感。我的方法很簡單，讓他從看jQuery官方的教學視頻開始(Code School - Try jQuery)，英文不好可以看優酷上的中文字幕版本。認識我的人都知道我一直為jQuery代鹽，jQuery的親民最適合初學者踏入前端的大門。學習完基礎的jQuery能做什麼後(需熟悉絕大部分的jQuery API)，了解jQuery的幾種插件擴展機制，最後是按學習過程的吸收程度與悟性決定給對方講解 jQuery是如何工作的、背後的實現的源代碼，做了哪些兼容等等的深度。
通過這個學習jQuery的階段過程還是略有不足的，很多Javascript語言上的細節未必能了解到，所以我會從 Javascript中常用的模塊化方式作為切入點講解一些語言上的細節， 同時教授模塊化的代碼組織方式。這個過程後差不多在Javascript方面基本上能達到我認為的及格程度了。
3. JS是第一個學習階段，第二階段是HTML與CSS方面，單純看CSS3各方面文檔顯然是枯燥乏味的，雖然我把 @大漠 送我的那本《圖解CSS3》 http://item.taobao.com/item.htm?41929499010 借給了他學習，但沒有親自上手的過程總是單薄的。我的做法很實戰，把Bootstrap這套東西抽絲剝繭，一個一個組件的分析，落實到每個細節，通過這個過程他能學習到常見組件的實現方式，對應的HTML結構是怎麼設計，樣式是怎麼描述，樣式的模塊化組織方式，還包括一些無障礙的細節。
4. 最後布置作業，寫個jQuery的插件：日期選擇器。睡了，有空再寫。

要成為一個優秀的前端工程師，需要什麼技能和學習？答案：練習

在逛知乎、SegmentFault 又或者是相似的技術社區，我們總會看到類似的問題。新手總會關注於，需要怎樣的技能，怎麼才能入門？有一點經驗的程序員則是，需要練習什麼？如若一個程序員已經懂得問題的關鍵是，編程需要大量的練習。那麼，我想這個程序員已經入了這個行道了。

在我成為所謂的『前端工程師』之前，我沒有想到會變成這樣的結果。

前端項目的練習過程

年少的時候，想要做的是 Kernel Hacker。大學時，我做點前端相關的兼職，順便賺錢點錢。再用這點錢，買點硬體做一些底層、低級的編程，帶著去實驗室，拿著電洛鐵，高喊著：讓我們來做一個毀滅世界的機器人。好在，後來我離這個行當有點遠，要不這個世界可能就岌岌可危了。反而因此倒是，學會了相當多的前端知識，以及在今天看來是屠龍之術的 IE 兼容。

隨後，在研究數據可視化時，我看著用 JavaScript、HTML、CSS 可以做出這麼炫的效果。我就繼續回到圖形編程這個行當，前端的圖形編程倒也簡單，只需要找一個庫，多加練習就可以了。練習多了，便發現，需要更多的面向對象編程經驗，要不寫出來的代碼就跟屎一樣。要是在今天，那可能就是函數式編程經驗了。

玩了那麼多的東西後，我便就對這些東西駕輕就熟了。而在今天看來，仍然走了相當多的彎路。當有人再問我『怎樣練習才能成為一個優秀的前端工程師』時，我便想著：我應該好好的回答一下這個問題。

Output is Input

我一直很喜歡那句，Output is Input 的話，即：

即，我們輸出知識的時候，便是在輸入更完整的知識。因此當我練習的時候，我便會刻意地去結合使用他們，往往能達到事半功倍的效果。想嘗試玩一個新的框架時，我便會用這樣的邏輯去玩它：使用新框架編寫一個應用，再閱讀、整理相應的資料。

你若問我，為什麼我會這麼練習？我想那大概是，我可以更早的得到反饋。我可以更早的知道，A 框架對於使用過 B 框架的人來說有些難度，我也能輕鬆地指出他們的差異。甚至，如果這是一個新的項目，那麼我還能用一種『不很完美的姿勢』完成之。而如果只是完成這個項目，那對於我而言也沒有多少 實質性的提高。

遺憾的是對於多數人來說，可能就只是完成項目這一程度，後面仍然還有好長的路要走。做一個好的前端工程師，即要做很多的項目，又要讀一些書。即要會使用這個框架，又要知道他的一些基本的思想。

習慣了先輸出、後輸入的過程後，練習起來就很輕鬆了。

練習框架、技術的時機

練習，那可是相當燒時間的大事；時間，又是一種相寶貴的資源。暫不說，相當於好幾年的十萬小時理論。對於我們這些每天要早出晚歸的工作族來說，八小時以外的時間就更小了。對於一個在校的計算機專業學生來說，也不一定能在四年里搞定。

而這時候如果又選擇了一個錯誤的技術棧，哪怕是相當的浪費時間了。好在我們已經在那篇《學習前端只需要三個月【框架篇】》中討論了如何選擇一個合適的技術棧。此時還有一個問題是，如何在一個合適的時機練習它。

過去，習慣了將一些 Idea 放在 GitHub 上變成一個清單。也因此習慣了，將一些想要玩的框架放到了 TODO Lists 中，再慢慢地享受將他們完結的愉悅感。

當有一個新的框架出現時，看看知乎、微博、微信群里的討論還不錯，我就會將這個框架加到 Todo Lists。在一個周末，或者中午，搭建一下項目，玩一下 DEMO。

隨後，這個框架就會進入評估期。評估一個框架可不是一件容易的事，要從不同的角度去了解它：社區歡迎程度、API 變化程度、Roadmap 計劃、Release 情況等等。再確認一下框架是否可以適合當前的項目，可以的話，就會創建一個新的分支來玩玩，又或者直接引入項目。

如果這是一個有前景的框架，那麼我就會選擇一個合適的時機（有時間），創建一個開源來應用它。每個人都會有一些偏愛，這也決定了他們可能不會去玩某些框架，這倒是有些可惜了。

當我們決定去練習的時候，我們更需要一些練習的技巧。

練習的過程

練習框架、技術的技巧

練習嘛，我想就這麼幾步：

  • 找到一個模板
  • 邊修改模板，邊查閱資料，以此來完成一個應用
  • 閱讀官方文檔或者代碼來補漏
  • 編寫博客、文章、書籍來加強印象

我喜歡的就是這種輸入和輸出相結合的形式。一開始的時候，就應該先做一個應用。這種用意特別明顯，藉此可以快速地了解一個框架，就會覺得相當有成就感。隨後就是去補缺補漏，以便於我們可以更好地完成應用。最後，當我們寫文章去總結的時候，便會對這個框架有更基礎的認識——像擁有一張清晰的思維導圖，熟悉他的方方面面。

使用模板

對於多數的人而言，也包括我，決定去使用一個框架的時候，表明它已經是一個幾近成熟的框架——我們可以很容易找到一些資料。依據現在框架的發展趨勢，大部分的框架都會提供一個腳手架，即應用程序模擬。只需要運行這個模板，我們就可以有一個 hello,world。

如 Angular 官方提供了一個 angular-seed 的項目，它提供了一套基本的模板，可以用來快速的創建應用。而 React 也提供了一個名為 create-react-app 的工具來快速搭建環境。

遺憾的是，大部分的官方 hello,world 都不是很詳細，這時候我們可以在 GitHub 上搜索 xxx starter kit 來做同樣的事，如 React Starter Kit，就可以輕鬆地在 GitHub 上找到相就的項目，如react-slingshot

它提供了一些豐富的組合，如 React、Reactd Router、Redux、Babel、Jest、WebPack 等等的工具。現在，我們在這一步要做的事情就是運行起 hello,world。然後，我們再考慮下一步要做一些什麼？

做點什麼應用

拿到框架的下一個問題時，我們要去做什麼，這個就相當有趣了。挑一個有難度的吧，做不了；挑一個簡單的吧，覺得不能練手；還是挑一個實用的吧，比如博客。

我寫過最多的應用就是與博客相關的應用了。當出現一個新的練手框架時，我總會用這個框架來把博客寫一遍。於是，我的博客的後台 API 用 Node.js、Flask、Django 實現過一遍，而前台則用 Backbone、Angular 1、React 實現過一遍，而 APP 方面也使用 Ionic 1 和 React Native 實現過一遍。

對於博客而言，我們都很輕鬆它的功能：列表頁、詳情頁、登錄、創建博客等等。我通常只會實現上面的四個基本元素，這和大部分應用的主要模式差不多。對於前端來說，我們會練習到基本的內容：

  • GET 和 POST 數據
  • 列表頁到詳情頁的跳轉和返回
  • 對於用戶登錄憑據的獲取和保存

基本上涉及到了一個框架的大部分內容，路由、模板、API 請求、數據存儲、用戶授權等等。這樣一來，我們就要清楚地業務邏輯了，那麼剩下的是都是技術的事。

編寫一個博客應用

接下來，唯一的問題是：因為對這一系列的技術棧，我們會遇到一系列的困難。當一個新手選擇 React 的時候，就會遇到 JSX ES6 Babel Webpack Redux React-Router 等一系列的 React 全家桶。這時，難以下手的主要原因是，不知道這些東西都是幹嘛的，也對前端單應用應用沒有一個清楚的認識。

在沒有基礎的情況下，直接下手這些會有一定的困難：在學習新的技術棧的同時，也在學習前端應用的組成。因此：

首先，要對前端單頁面應用有一個大致的了解。如對於一個前端框架來說， 它要有模板引擎、依賴管理、路由處理、控制器（模板）和狀態等等，除此它還需要有構建工具、編譯工具、測試框架等等。

然後，就需要了解所使用的工具對應的有什麼功能。如上面說到的例子里，JSX 相當於是模板引擎、WebPack 是打包工具 / 構建工具、Babel 是 ES6 語言的編譯器、Redux 用來做狀態管理、React-Router 用來處理路由。

最後，需要一個應用的例子來將這些內容串在一起。如當我們打開一個 Web 應用的時候，應該要有一個路由處理的工具，來將用戶導向相應的頁面。而這個頁面會有對應的控制器和模板，路由就是來分發用戶的請求。當頁面數據數據或者用戶操作時，頁面上的數據狀態就會發生變化，這時就需要狀態管理工具來管理。

幸運的是，我們已經有了一個 starter kit，在這個 starter kit 中會為我們做好相應的配置。因此，我們可以直接閱讀代碼來了解它們的關係，逐一的了解他們的功能。過程有點痛苦，結局便是大豐收。

這一個過程里，還有一個難點是，我們缺少數據。這時候，我們可以用 moco、MockServer 等工具來做一個假的伺服器，以向我們的應用提供數據。

輸入和總結

編寫應用的時候，我們將一個又一個的內容放到了腦子裡，然後發現自己混亂了。需要重新理清他們的關係，這時候可以選擇寫博客、畫思維導圖、做分享的形式來整理。

當我們向別人講述一個東西的時候，就不得不壓迫自己對此有更深入的了解，要不只能丟臉。這時候，我們又在重新學習這些內容，並且比以往的任何時間更加深入。這也就是為什麼我喜歡寫作的原因，它能讓我的思路更加清晰。原本只是散落在房間里的書籍，現在整整齊齊的排列在了書架上。在需要的時候，我就可以找到想要的內容。而由於博客的存在，我可以在未來輕鬆地了解這個框架，別人需要的時候，也可以直接分享相應的經驗。

等閑了，逛逛官方的文檔，還會發現：原來這個地方可以這麼用；原來某個地方還可以做得更好。

其它

假如，我們將前端和後台所要求的能力做一些對比，我們會發現前端在高級領域比後台簡單一些。我的意思是，前端要在編程方面遇到瓶頸更快，並且需要從其他方面來補充，如後台，又或者是用戶體驗設計。

關於練手項目

在那一篇《關於編程，你的練習是不是有效的》中，我提到，提升技能的項目會有四種：

  • 純興趣驅動的項目。即我的Idea列表上的一個個酷炫的項目，先滿足自己再說。
  • 理論驅動的項目。這一類的項目會比較少，因為我們需要牽強地驅動出這樣的項目，然後以理論的方式驅動它。
  • 興趣結合理論型。有一個長長的Idea列表，難免有些時間會和將要學習的理論有很大的交集。這種的練習效果是最好的。
  • 整合成文章、電子書。這一步主要是為了分享、鞏固知識點、討論。
就說一點：關於培養。
遇到解決不了問題，來問自己，你告訴他這是瀏覽器兼容問題即可，具體的讓他自己去google，如果現成的答案就在身邊，一般孩子是不會留心注意的。
這玩意還是得多年多項目的積累啊，每做個項目都會有提升，每次都是脫胎換骨的神清氣爽的重生啊。

如果有項目，給他一個項目；如果沒項目，給他一個模塊；如果沒模塊，給他一個功能；如果沒功能，給他一些bug。

總之讓他負責點兒什麼，只有這樣才能既熟悉技術，也熟悉業務。

Review他的代碼，發現他不理解的概念，給他指明如何去理解的方向。

我在知乎上面收過一個徒弟，那時候我好像回答別人的問題，特別是女生24歲，轉行學習前端 晚了嗎？　
還是在去年的夏天。　有一個人看到我回答別人的問題，然後私信我，和我說，她聽力不好，她想學習前端　就是不知道下一步怎麼做，而且看到我是聾人，覺得我給她莫大的信心，就像太陽照亮她的心，那時候她就有了方向感。為此我留下qq，然後交流一下，我和她說先去w3school刷題吧，
爭取把html css 刷一遍，再然後看林小志&。
她說好啊。她說要當我徒弟，我說以我的水平會誤人子弟，她說沒關係沒關係的。我稍作思考了一會，收了她吧，從此我在網上收到第一個大徒弟。
我跟她說我只要帶她入門就夠了，後面我實在不行，因為前端發展太快了。有好多東西我都沒接觸過。只能根據公司的業務需求教教她。
剛開始我在想怎麼教好她，我覺得不能太敷衍行事了。想了一個辦法，實戰提升她的水平。下作決定從電腦里找找以前留下的psd.然後扔給她、
再給她慕課網的網址，好好刷一遍這樣就能理解css的布局。
於是 每天 我又收到徒弟的幾回消息 ： 師傅，這個元素怎麼擠下面去啊， 我說要加:overflow:hidden 。 她說好神奇啊 ...溢出去了原來只要加這個，
至於有其它方法我只用這個，常用。.
每天又會收到徒弟有關css布局的問題，我一個一個回答幫她解決。剩下她自己研究。每回我給她psd 她就一兩天做好了我檢查一下，差太多了，如果不能保證還原設計稿99% 做什麼前端啊。 這樣我每幾回給她psd,她就當作業練習做，發給我，我就像老師無悔地的批改下，指出出來。漸漸地她的切圖水平越來越有進步了。連jquery也用得差不多。懂得利用百度找第三方庫插件了。 直到她離職之後她去了二線城市找前端工作，開始找的不順利，她有好多地方不懂，她的簡歷還是我審閱過的，我還鼓勵她面試之後不要太慫，要忽悠一下。給自己信心點。 直到她入職成功之後，我就放了心。。
再後來她js寫得比我越來越66..
作為師傅我很欣慰。
她已經開始用ng2和typescript寫後台管理系統。
我都不會。
哈哈哈~沒辦法，公司業務不一樣。

說到，帶前端新人，我以親身經歷來講，真心不容易，尤其是小白同學，樓主提到三個問題：
第一 可以分哪些階段培養？第二，每個階段安排什麼樣的開發任務比較好？第三， 每個階段以掌握到什麼樣的技能為標準

分幾個階段，應該結合公司使用的技術，來劃分，但是HTML，CSS，JS基礎必然是基本的也是必須掌握的，結合我廠的情況，分為三個階段：
第一, CSS和HTML基礎，結合w3school自學，css布局 學習CSS布局
此階段安排的任務很簡單，就是隨便截網頁，PSD2HTML，讓新人自己練手，一般聰明點的學生，這個過程也就1周搞定。
推薦此書: 精通CSS（第2版） (豆瓣)

掌握技能 PSD2HTML

第二，JS基礎，這個就有難度了，結合實際經驗，很多新人學習JS基礎語法，如沒有實戰，僅僅看書，即使學了，也不會掌握的很好，除非之前有過其他語言編程經驗。
此階段任務安排是看慕課網或妙味課堂的視頻，並完成課後練習，再結合犀牛書鞏固複習。

掌握技能

  1. 語法: 標識符, 數字, 字元串, 語句, 表達式, 字面量, 函數
  2. 對象, 函數, 繼承, 數組, 正則, 變數提升, 閉包, 原型繼承, 立即自執行函數, 高階函數, 函數的四種調用方式等
  3. DOM, BOM 和 Ajax 請求

第三，也是最後階段，安排學習AngularJS
該階段任務就是獨立完成餓了嗎或者飛飯首頁的練習。
掌握技能
1. ui-router, ng-resource, AngularJS
2. git 使用

當新人經過1個半月的培訓後，就可以上項目fix bug了。

來公司不到6個月，帶過很多新人，有0基礎的，有培訓機構培訓過的，有後端轉前端的，他們中學的好的，往往不是那些聰明的學生，而是那些勤奮的學生。

另外，送一份我個人總結的資料：GitHub - ShuyunXIANFESchool/newcomer: 新人培訓

忐忑的飄過……

推薦一些書吧：
http://uicss.cn/fed-book/

CSS網站布局實錄
javascript高級程序設計
高性能網站建設進階指南
Don"t Make Me Think
SEO實戰密碼
領導學(原書第6版)
頸椎病治療

按順序，挨個讀就好……

以前學習過一段時間的web前端開發，整理了一些我看過的/我認為比較好的學習資料（網站、書籍）。不要問我為啥沒有進階版，我只是一條產品汪而已，求輕噴。＝＝

以下引用知乎 @李路 的話。

以我的經驗，大部分技術，熟讀下列四類書籍即可。

入門，用淺顯的語言和方式講述正確的道理和方法，如head first系列
全面，巨細無遺地探討每個細節，遇到疑難問題時往往可以在這裡得到理論解答，如Definitive Guide/Programming xx系列
實踐，結合實際中經常遇到的情景環境，來描述如何設計和解決問題，如cookbook系列
深入，講解一些文化，思路，甚至於哲學上的東西，真正做到深入一種語言去編程，如unix編程藝術，程序員修鍊之道等等

受李路老師的啟發，我結合了自己在學習前端過程中用到的資料如下：

一、 語言基礎（以書和網站為主）
1.HTMLCSS：
（1）入門：

  • Codecademy上的htmlcss課程——在線互動式編程平台，弄清楚基本概念和基本語法
  • w3school上的HTML/CSS教程——技術手冊式的教程，比較全面，照著實例敲一遍

（2）進階：

  • 《精通CSS·高級Web標準解決方案》——對CSS有一個比較深入的學習，對核心技術了解
  • 《HTML5權威指南》——非常全面的書，內容也很新，包含了HTML5+CSS3+JS DOM

（3）實戰：

  • bootstrap框架: bootstrap中文網/《bootstrap實戰》——流行的前端框架，注重實用即可
  • Codeademy上的Web Developer Skills+Projects——通過自己做小頁面/小網站來運用所學

（4）提高：

  • 《CSS禪意花園》——提高自己的藝術設計能力，通過實例來學習如何用CSS設計出漂亮的頁面

2.Javascript：
（1）入門：

  • Codeademy上的javascript教程——實例比較多，比較淺，算是基本了解JS
  • w3school上的JS教程——比較詳細的了解下JS的特性
  • 《JavaScript DOM編程藝術》——講js和DOM的基本知識和運用，了解JS和DOM可以做什麼

（2）進階：

  • 《JavaScript高級程序設計》——JS聖經，比較全面，非常好的一本書，比犀牛書可閱讀性強
  • 《JavaScript權威指南》——傳說中的犀牛書，好厚好厚的一本書，不適合入門，適合當工具書看
  • 《JavaScript語言精粹》——很薄的一本書，但是可以幫助你快速了解JS的精華部分

（3）實戰：

  • jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery
  • 《jQuery基礎教程》——流行的前端框架，注重實用

（4）提高：

  • 《高性能JavaScript》——講如何提高js性能，以及構建和部署文件到生產環境的最佳實踐
  • 《Secrets of the JavaScript Ninja》——jQuery作者寫的書，如果你覺得精通JS了再看這本書

附錄：前端網站大匯總
1、前端知識體系：

  • 前端知識體系及修鍊攻略：前端知識體系及修鍊攻略——對前端知識體系剖析的非常好，尤其是最後對前端的階段性劃分，對前端學習很有指導意義，推薦！
  • 前端開發知識結構：JacksonTian/fks · GitHub——有個前端知識框架的思維導圖，給了很多鏈接和好書，推薦！

2、技術資訊類

  • W3Cfuns : 前端網（W3Cfuns）——國內最大的前端站，比較全
  • 大前端：大前端_關注前端開發和wordpress主題的博客——沒有W3Cfuns那麼雜，有些wodpress的主題，「前端導航」也比較好用
  • W3Cplus:W3CPlus | css3教程-css3實例-css3動畫——也是比較全，有個「國外優秀譯文」，非常喜歡
  • 前端觀察 ：前端觀察——專註於前端設計與開發的博客，比較有深度，排版乾淨，推薦！
  • 前端亂燉 ：前端亂燉, 最專業的前端技術內容社區——有點像前端的知乎，有問答平台和專欄啥的

3、技術教程、文檔類

  • 慕課網：慕課網-學習計劃
    ——超級實用的視頻教程類網站，各種小實例，非常適合照著「前端學習計劃」計劃學習
  • codecademy :http://www.codecademy.com/——英文，簡單有趣的互動編程學習網站，非常適合入門，中文版是http://www.fenby.com/
  • W3schoo在線教程l: w3school 在線教程——中文，適合入門，教程相當全，在線實例可以敲，可惜較淺，有些地方不太準確和深入
  • 火狐開發者網路MDN：Mozilla 開發者網路——中文，不僅有技術文檔，而且有相當多的參考資料和資源、工具，推薦！
  • W3C標準：Standards - W3C
    ——英文，不解釋，官方文檔，真前端和偽前端就在於此。可惜英文的，而且可讀性差。極不適合入門，適合提高。
  • Web平台文檔：Your Web, documented · WebPlatform.org——英文，權威性僅次於W3C標準，可讀性高於W3C標準，W3C官方認可，高質量。

1、先給自己設定一個目標，比如寫一個網站；（當然你可能不會後台，可以在本機架一個wordpress來改。）
2、看一些基礎教材（html/css/js），大致了解一下語法；個人覺得w3school足矣。
3、開始寫，實現你當前設定的目標。
碰到不會了就去看別人的代碼或者Google。

這樣來學不會覺得枯燥，反而每解決一個問題都會很有成就感。


PS：最煩那些列書單的，明擺著嚇唬人嘛！上手了，想深入，再去找書看。在初期了解大致語法後，看別人的代碼比看書有用多了。

紙上得來終覺淺，絕知此事要躬行。工程項目的實踐效率和收益遠大於簡單學習，我們的處理套路是：快速學習 -&> 小項目小頁面上手開發 -&> 改bug -&> 定期總結分享 -&> 繼續項目開發，如此輪詢。

最後，繼續擴招中:)，at.script@qq.com

對於新人入門，我以我帶過的學生來談談我的經驗。

新人入行，第一要做的就是擺正心態。

現在各種培訓機構宣傳前端速成，xx k薪水(xx&>10)。看起來是十分誘人，但也讓新人有了浮躁之風，多了各種不切實際的幻想：如我是零基礎的學生，三個月出去就可以月薪10k；我之前學過點html+css，稍微培訓下就能成為中級前端工程師；太多太多，不再列舉。

首先我確實見過三個月前端出去十幾k的學生，但是不是每個人都能做到。那個學生科班出生，3年javaWeb開發經驗。做過javaWeb就知道，前端多多少少都知道點。人家當時做java的工資也都十幾k，所以才能達成這樣。

這年頭會html+css太多了，我見過的很多設計師都懂。

不管學習什麼，最重要的還是戒躁，能靜下心來把慢慢學紮實了，才是重中之重。

第二就是找個好老師。

好的老師能給你一些方向上的指導，新手很容易在方向上迷茫。這裡的老師不一定是人（當然是一個在職工程師，或是行業大牛是最好的）選上一個好的教程，一步一步慢慢做，也是非常有效的。

這裡推薦w3school 在線教程，新手可以從html部分自己慢慢來。我當年入門就是按這個來的。

第三就是勤動手

前端也屬於軟體行業，軟體行業有一句話，看別人做和自己做出來完全是兩碼事。

動手做是前端最重要的事，沒有之一。代碼一定要自己敲出來（注意這裡是自己敲出來，不是抄過來，或者背出來）。

第四就是一直學習

現在前端領域已經發生翻天覆地的變化了。

以前還只是html+css浮動搞搞，jQuery實現一點效果，最多加上一點AJAX基本玩轉前端。

現在這樣的前端已經爛大街，找不到工作了。

及時你已經找到工作，一定要對新技術保有熱情，不斷嘗試學習新的技術，才能讓自己不被淘汰，進而尋求晉陞。

以上回答完全根據帶過的學生和我自己的實際體會回答。歡迎大家討論。

點贊加關注，乾貨持續分享中

1看書學基本知識
2找新上線的網站的一個功能或效果，直接看看待，一般沒壓縮還帶注釋
3在w3school查一下用到的東西
3想別人的代碼為什麼那麼寫
4自己實現那個效果或功能
5對照一下，測試一下區別

把每個功能或效果都走一遍這個循環，基本就OK了

同入門級前端小白一隻，談談我這幾個月學習的經歷和體驗吧。
本人大三學生，三月份開始在公司實習，開始接觸前端，因此也一發不可收拾的對前端技術產生了濃厚的興趣，因此也積累了一部分學習經驗，希望對正在接觸學習前端的童鞋有所幫助。
--------------------------------------------------------
萬事難開頭。
首先，你要對前端的整個知識體系有一個大致的了解，要知道學習前端要學習哪些技術，對這些技術有一個最初的認識，之後才是深入學習。
前端最基礎也是最重要的知識點：html5 , css3 ,javascript
在講學習之前，還有一個很重要的事情，那就是寫！博！客！為什麼我們學了很多東西都會忘掉？很多時候我們學了，一時記住了，但是時間一長就會忘掉，再去重新學習又會浪費很多時間，那該怎麼辦呢？在學習的時候就把重要的知識點、難點都記錄下來，以博客的形式存下來，這可以說是一個程序員所必備的好習慣。博客的形式可以有很多種，CSDN，博客園之類的都可以，如果你想自己動手做一個那是最好不過的啦~不過在前端基礎很薄弱的情況下，建議自己搭博客可以選擇框架，比如WordPress或者是hexo，都是很好的。
下面進入主題。
了解前端：

  • 前端開發者手冊：https://dwqs.gitbooks.io/frontenddevhandbook/content/ --系統介紹了前端的各種技術以及學習的途徑，有大量的學習資源鏈接，很贊的網站。
  • 前端知識體系：前端知識體系 --前端的知識體系詳解，各種外鏈可以學習，贊
  • WEB知識結構：GitHub - JacksonTian/fks: 前端技能匯總 Frontend Knowledge Structure --詳細介紹了WEB的知識結構以及各種前端相關的知識、要點等。

學習前端：

  • 慕課網前端路線：Web前端工程師 --裡面有詳細的學習路線及課程，可以循序漸進的學習，內容比較豐富，適合初學者。但是學到後面會有點難度，所以要記得做筆記，寫博客。
  • 極客學院：http://www.jikexueyuan.com/course/web/ -- 極客學院的課程相對與慕課網來說，基礎的教學更多，而且都是以視屏的形式來展現，很適合初學者。就是有個會員制度，當然你每個月邀請一個好友註冊你就有30天的VIP可以免費看視屏，還是不錯的。
  • 廖雪峰教程：JavaScript教程 --這個JavaScript教程我看了幾遍，裡面講的東西會讓你覺得與JavaScript相見恨晚，對很多需要注意的東西比如JavaScript中的一些坑都有比較詳細的講解，會讓你在學習過程中少走很多彎路。
  • 前端入門教程：web前端開發分享 --入門級教程，對入門小白很友好。

前端工具：

  • git: 版本管理工具介紹 / Git教程 - 廖雪峰的官方網站 --git已經成為程序員生活中必不可少的一部分了，值得學，必須學！
  • github：版本控制入門 --介紹了github的使用，github怎麼樣，誰用誰知道。
  • grunt: Grunt-beginner前端自動化工具 --前端的自動化工具。

資源：

  • 前端免費書籍：GitHub - vhf/free-programming-books: Freely available programming books --免費的書，對提升很有幫助。
  • 免費的中文書籍檢索：GitHub - justjavac/free-programming-books-zh_CN: 免費的計算機編程類中文書籍，歡迎投稿

以上就是這麼多，還有我自己收藏的部分學習視頻，來自極客學院、慕課網等，下面分享出來：

  • HTML5開發：https://pan.baidu.com/s/1hsDaOEK 密碼:zpuw
  • HTML5基礎: https://pan.baidu.com/s/1jHZbj5W 密碼: v2jj
  • CSS3基礎: https://pan.baidu.com/s/1gft0cJT 密碼: g5bb
  • JavaScript基礎: https://pan.baidu.com/s/1gfqcqYZ 密碼: ich9
  • HTML5遊戲開發：https://pan.baidu.com/s/1hrByF1E 密碼: 8zxd
  • Bootstrap: https://pan.baidu.com/s/1mi0HxzE 密碼: n6c5

--------------------------------------------
總結
前端技術發展很快，資源也在不斷更新，所以做前端開發需要一直不停地學習。各位前端以及走向前端的童鞋們，加油！相信天道酬勤！


最近在寫一些前段學習筆記以及在實習公司項目開發中用到的一些技術的文章記錄，我會發布在我的專欄：WeCode365以及同名微信公眾號中，有興趣的同學可以關注一下。

來談一下自己的親身經歷，目前來說市場上面想招一個靠譜的前端還是比較困難的，公司也不會說是去正兒八經的培養前端，因為中國的大環境是這樣的，你的培養很可能給別人摘了果子，很大程度上，都要靠自己。（這是一個中心思想）

檢測一下團隊中的平均水準，用到對的地方很重要。有的人擅長重構，有的人擅長JS，有的人在業務上是把好手，卻缺少架構的能力，有的人更追求細節。於是，你需要對一個事物進行劃分。（這是開始分配任務的基石）

接下來，你要開始判斷每一個任務的難易程度，去跟你團隊的人相匹配。前端，大家都知道，起點是切圖，如何快速的切出來一張圖，以及兼容性的優壞，這是一個階段的分水嶺。在組織頁面的過程中，是不是使用了大量的現代特性，也會是一個重要的參考（CSS3的應用，分層，模塊化組織等），到了這個階段，說明現在你已經玩的轉CSS了，而且可以很高質量的出產頁面。接下來，如果你的網頁是偏效果類的，那麼提升的方向又不一樣了。你需要去獲取的是動畫的知識，這一個階段需要大量的獲取理論知識，才可能會寫出高效流暢的動畫，這個時候的任務會比較偏向於的動畫設計與實現，總之這裡是一個前端新手的必經之路。

下一個階段，如果的網頁偏應用，首先你要做的是將業務都可以很好的以模塊的方式分隔開來。模塊，是目前來說比較好的協作方式，而且這也意味著你相當於有了技術選型。從框架，工具，模塊定義和業務代碼的熟練程度為分水嶺，如果你的人還未熟練的使用，那麼你需要先分割一些簡單的任務，讓人對你的技術棧有一個熟悉的過程，循環漸進的方式，一直到可以獨立編寫完一個完整的模塊為止。

在熟練掌握了使用的階段，相信也對語言有了自己的理解，在這一個階段根據團隊的大小可以適當的調整，對於UI，業務中相同類似的東西，性能的優化可以分配一個框架小組，專門封裝UI，封裝業務組件，框架層面的優化，這個時候的任務分配，多數以支持其他業務團隊為主，因為你需要提供抽象一層的東西，可以讓業務團隊快速的開發產品。

最後更高層的路與傳統的軟體工程類似了，網路通信，數據結構與演算法，其他語言的技術儲備，前沿的標準等，每一項都是你需要不斷的學習的過程。

關於前端領域的郵件訂閱，《課多周刊》挺不錯的，內容起於前端而非止於前端，精選一周前端領域的技術乾貨，郵件訂閱地址：https://w3crange.com

推薦閱讀：

※前端工程師和 UI 設計師該如何選擇？
※前端大牛們都學過哪些？
※學web前端開發，培訓還是自學靠譜？
※前端工程師，你們都在研究哪些技術？

TAG:前端開發 | HTML | CSS | JavaScript | 前端工程師 |