首頁 > 文章 > web前端 > github上最全的資源教學-前端所涉及的所有知識體系

github上最全的資源教學-前端所涉及的所有知識體系

WBOY原創: 2016-09-20 03:30:002836瀏覽

前端無疑是2016年最火熱的技術，沒有之一。

各種前端mvc框架層出不窮，angular js，vue，react，前端組件化開發概念已經深入人心。前端薪資已經比手機端開發還要高了。

身為個人站長，學習下前端設計也是有必要的，一來有些小的設計問題可以自己解決，同時還能提升自己的審美，提升網站的ui設計水準。

必備基礎技能

前端技能總結這個專案詳細記錄
了前端工程師牽涉到的各方面知識。在具備基本技能之後可以在裡面找到學習
的方向，精進技能和知識面。

frontend-dev-bookmarks是老外總結的前端開發資源。覆蓋面非常廣。包括各種知識點、工具、技術，非常全面。

以下是個人覺得入門階段應該熟練的基礎技能：

HTML4，HTML5語法、標籤、語意
CSS2.1，CSS3規範，與HTML結合實現各種佈局、效果
Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能
一個成熟的客戶端javascript函式庫，推薦jquery
一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸註冊功能就足夠支援前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬，
HTTP

在掌握以上基礎技能後，工作中遇到所需的技術也能快速學習。

基本開發工具

恰當的工具能有效提升學習效率，將重點放在知識本身，在出現問題時能快速定位並
解決問題，以下是個人覺得必備的前端開發工具：

文字編輯器：推薦Sublime Text，支援各種外掛程式、主題、設置，使用方便
瀏覽器：推薦Google Chrome，更新快，對前端各種標準提供了非常好的支援
調試工具：推薦Chrome自帶的Chrome develop tools，可以輕鬆查看DOM結構、樣式，透過控制台輸出調試信息，調試javascript，查看網絡等
輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，
FQ工具：lantern, 壁虎漫步

學習方法與學習目標

方法：

入門階段反覆閱讀經典書籍的中文版，書籍中的每一個例子都動手實現並在瀏覽器中查看效果
在具備一定基礎之後可以上網搜各種教程、demo，了解各種功能的實際用法和常見功能的實現方法
閱讀HTML，CSS，Javascript標準全面完善知識點
閱讀前端牛人的部落格、文章提升對知識的理解
善用搜尋引擎

目標：

熟記前面知識點部分的重要概念，結合學習經驗得到自己的理解
熟悉常見功能的實作方法，如常見CSS佈局，Tab控制項等。

入門之路

以下是入門階段不錯的書籍和資料

HTML先看《HTML & CSS: Design and Build Websites》1-9章，然後《HTML5: The Missing Manual》1-4章。
CSS先看《CSS: The Missing Manual》，然後《CSS權威指南》
javascript先看《javascript高級程式設計》，然後《javascript權威指南》
HTTP看HTTP權威指南
在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模組都需要三者結合才能實現。
動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜尋引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教學網址
- 可以搜尋各大公司前端校招筆試面試題作為練習題或他人總結的前端面試題還有個人總結的面試題（帶參考答案）
- http://code.tutsplus.com有各式各樣的教學
- MDN也有很多教程，更重要的是裡面有詳細的文檔，需要查找某個功能時在谷歌搜尋：xxx site:https://developer.mozilla.org
- http://www.html5rocks.com/zh/也有很多優質教學
- http://www.sitepoint.com/
- http://alistapart.com/
原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或去jQuery官網
建造一個https://github.com/帳號，保存平時學習中的各種程式碼和專案。
有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或http://www.csdn.net/這樣的網站註冊帳號，方便實用
經常實用Google搜尋英文資料應該經常找到來自http://stackoverflow.com/的高品質答案，與到問題可以直接在這裡搜索，如果有精力，註冊一個帳號為別人解答問題也能極大提高個人能力。
經典書籍熟讀之後，可以打開前面必備基礎技能部分的連結。認真讀對應標準，全面掌握知識

繼續提高

有了前面的基礎之後，前端基本上算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。
可以參考前面必備技能部分提到的兩個項目，從裡面選一些來發展學習。以下是一些不錯的方面：

Grunt：前端自動化工具，提高工作效率
less css：優秀的CSS預處理器
bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美
requirejs：AMD規範的模組載入器，前端模組化趨勢的必備工具
Node.js：JavaScript也可以做後台，前端工程師地位更上一步
AngularJS：做Single Page Application的好工具
行動端web開發：智慧型手機的普及讓行動端的流量正在逐步趕上PC端
Javascript記憶體管理：SPA長期運作需要注意記憶體外洩的問題
High Performance JavaScript(Build Faster Web Application Interfaces)
Best Practices for Speeding Up Your Web Site：重要技能

一些個人經驗

LingyuCoder的學習經驗

上面的大神都總結得差不多了，我這裡就胡扯一些吧

####工具

chrome dev tools：前端開發調試利器，著重幾個功能：
- console（廢話）
- elements:元素樣式調整，很常用
- sources：程式碼中加入斷點，單步調試，以及單步調試過程中查看內存中的對象
  - watch expression：透過表達式查看目前記憶體中的值
  - call stack：查看呼叫棧，開啟async，可以看非同步呼叫棧（這個非常有用，尤其是ajax調試的時候）
  - scope variables：作用域鏈上的變量，非常有用
- network：抓包查看每個請求，非常重要，前後端聯調必備
- timeline：分析渲染、js執行等等各階段，效能最佳化利器
- emulation：模擬行動端環境，mobile頁面開發必備
- 一些插件:
  - liveload: 修改頁面後自動刷新，不用按F5
  - dimensions：直接在頁面上測量的利器
  - livestyle：css樣式修改後自動起效果，不需要刷新，elements修改後也能同步到程式碼中
  - image tool：測量，取色
  - UC二維碼：行動端調試掃碼必備
  - pagespeed，YSlow：頁面效能分析與最佳化外掛程式
  - 馬克飛象：優秀的線上markdown編輯器，快速寫週報，做記錄
sublime text2：編碼方便，插件多，速度快，效能好
- emmet：提升html編碼速度必備
- sublimelinter + 各種語言的lint與hint：程式碼糾錯
- 一些snippets：自動補全，提升開發效率
Intellij IDEA和WebStorm：整合開發環境，整合了各種功能，開發比sublime要方便，但會比較吃性能
Mark Men：測量、取色、標註利器，拿到視覺稿之後第一個打開的軟體
GFW Fucker：我用紅杏，可以的話買虛擬伺服器當梯子
iHosts：非常優秀的hosts管理軟體，輕鬆修改hosts，開發調試必備
Charles：Mac 平台最好用的抓包分析工具
Rythem：AlloyTeam出品的代理抓包軟體，非常輕量，安裝簡單，行動端（真機）開發調試很好用
Wunderlist：一個非常好的Todo List，任務、需求多的時候管理起來很方便

####技能
前端的技能其實除了JavaScript（包括NodeJS）、HTML、CSS以外，還有很多。其實前端的技能樹很大，這裡只能列出一些我開發中見到的說一說
#####語言基礎
JavaScript：

作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎與常用API

CSS：

選擇器
瀏覽器相容性及常見的hack處理
CSS佈局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等

HTML：

語意化標籤

#####進階
JavaScript:

非同步控制（Promise、ES6 generator、Async）
模組化的開發方式（AMD、CMD、KMD等等）
JavaScript解釋器的一些相關知識
- 非同步IO實作
- 垃圾回收
- 事件隊列
常用框架使用及其原理
- jQuery：基於選擇器的框架，但個人認為不能叫框架，應該算工具庫，因為不具備模組載入機制，其中源碼很適合閱讀鑽研
- AngularJS/Avalon等MVVM框架：著重於理解MVVM模式本身的理念與雙向綁定的實現，如何解耦
- underscore：優秀的工具庫，方便的理解常用工具程式碼片段的實作
- polymer/React: 組件化開發，面向未來，瞭解組件化開發的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪製原理

DOM樹、CSSOM樹、渲染樹的建置流程及頁面渲染的流程
解析HTML、CSS、JavaScript時造成的阻塞
HTML5相關
- SVG及向量圖原理
- Canvas開發及動畫原理（幀動畫）
- Video和Audio
flex box佈置方式
icon fonts的使用

常用NodeJs的package：

koa
express
underscore
async
gulp
grunt
connect
request

一些理念：

響應式Web
優雅降級、漸進增強
dont make me think

網頁可用性、可訪問性、其中的意義
SEO搜尋引擎優化，了解搜尋引擎的原理
SPA的好處和問題

效能最佳化：

減少請求數量（sprite、combo）
善用快取（application cache、http快取、CDN、localstorage、sessionstorage，備忘錄模式）
減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）
CSS的回流與重繪

#####專案

版本管理：首推Git，用過Git都不會想用SVN了
- Git：本地版本管理的機制
- SVN：遠端中心的版本管理機制
自動化建置：主要是less、範本、coffee等的預處理以及對程式碼壓縮和合併
- Gulp：基於流構建，速度快、模組品質好
- Grunt：獨立任務構建，速度慢，配置蛋疼，靈活性高
預處理和模板引擎
- less：文法簡單，但功能有限
- jade、ejs、velocity等模板引擎，各有各的長處
- coffee：python工程師最愛，我沒用過
環境搭建：主要是將線上程式碼對應到本地，並在本地啟動一個demo伺服器，至於模擬資料的mock，見仁見智了
- 本地代理：ihosts
自動化測試：在業務較穩定的情況下，可以透過自動化測試來減少測試的事件，但需求較多的時候，維護測試案例的成本會很高，可能用自動化測試會起到反效果
- jasmine
- mocha
生態系統
- npm
- bower
- spm
搭建一個屬於自己的博客
- git pages
- hexo
- jekyll

#####未來

Web Componets：面向未來的元件化開發方式
- HTML範本
- Shadow DOM
- Custom Elements
- HTML Import
行動端Native開發：這也是需要了解的，以後前端工程師會常和webview打交道，也要了解native開發

#####其他
有些東西不是考敲碼就能弄好的，我參與實習的時候感受到了很多，這些是我遇到的也是我感覺自己做的不好的地方

對於業務的思考：我個人這方面非常欠缺，所以放在最前面，在敲碼前要多思考業務
交流與溝通能力：這非常重要，前端同時需要與專案經理、產品、互動、後台打交道，溝通不善會導致很多無用功，延緩專案
知識管理、時間管理：input和output的平衡，output是最好的input。如何做好分享，參與社區，做好交流，作好記錄
對新科技的渴望，以及敢於嘗試

####入門書
入門可以透過啃書，但書本上的東西很多都已經過時了，在啃書的同時，也要持續關注科技的新動態。這裡推幾本我覺著不錯的書：

《JavaScript高級程式設計》：可以作為入門書籍，但同時也是高級書籍，可以快速吸收基礎，等到提升再回來重新看
《JavaScript權威指南》：不太適合入門，但必備，不理解的地方就去查閱一下，很有幫助
《編寫可維護的JavaScript》和：
《Node.js開髮指南》：不錯的Nodejs入門書籍
《深入淺出Node.js》：Nodejs進階書籍，必備
《JavaScript非同步程式設計》：理解JS非同步的程式設計理念
《JavaScript模式》和《JavaScript設計模式》：JavaScript的程式碼模式和設計模式，將開發思維轉變到JavaScript，非常好的書
《JavaScript框架設計》：在用輪子同時，應當知道輪子是怎麼轉起來的，講解很詳細，從源碼級別講解框架的各個部分的實現，配合一個現有框架閱讀，可以學到很多東西

《Dont make me think》：網頁設計的理念，了解使用者行為，非常好
《CSS禪意花園》：歷久不衰的一部著作，同樣傳遞了網頁設計中的理念以及設計中需要注意的問題
《高效能JavaScript》和《高效能HTML5》：強調效能的書，其中不只是效能優化，還有很多原理層面的東西值得學習
《HTML5 Canvas核心技術》：我正在閱讀的一本書，對於canvas的使用，動畫的實現，以及動畫框架的開發都非常有幫助
《HTTP權威指南》：HTTP協定相關必備，前端開發調試的時候也會經常涉及其中的知識
《響應式Web設計》：科技本身不難，重要的是響應式網頁的設計概念，以及行動先行的想法
《JavaScript語言精粹》：老道的書，也是普及JavaScript的開發思維的一本好書，非常適合入門

####一些不錯的網站

github：沒啥好說的，多閱讀別人的源碼，多上傳自己的源碼，向世界各地的大牛學習
codepen：感受前端之美的必選之地，裡面有很多酷炫的效果和優秀的插件
echojs：快速了解js新資訊的網站
stackoverflow和segmentfault：基本上各種問題都能在上面獲得解答
google web fundamentals：每篇文章都適合仔細閱讀
static files：開放的CDN，很好用
iconfont：阿里的向量圖示庫，非常不錯，支援CDN而且支援專案
html5 rocks: 一個不錯的網站，很多瀏覽器的新功能以及前沿的技術，都能在這上面找到文章
css tricks：如何活用CSS，以及了解CSS新特性，這裡可以滿足你
JavaScript 秘密花園 JavaScript初學必看，非常不錯
w3cplus：一個前端學習的網站，裡面的文章品質都挺不錯的
node school：一個不錯的node學習網站
learn git branch：一個git學習網站，互動很棒
前端亂燉煮：一個前端文章分享的社區，有很多優秀文章
正規表示式：一個正規表示式入門教程，非常值得一看
阮一峰的部落格和張鑫旭的部落格：快速了解某些知識的捷徑，但是如果需要深挖，還需要其他的資源
各路大牛的部落格：這個太多了，就不貼了，知乎上有很全的
各種規範的官方網站，不懂得時候讀規範

####歷程
以前是做Java SSH的，半路出家做的前端，所以水平比較弱，遇到問題也比較多。基本上入門靠看書和W3C School上的教程，以及一些前端博客，如湯姆大叔的博客。以前也只是使用jQuery，原生js也沒有太多的鑽研，後來逐漸看了很多本動物書，像是老道的語言精粹等等。從這些書中學到了很多語言層面的知識。但這顯然是不夠的，所以我常常會去社區上看看大家在談論什麼，然後去看看相關的資料，感興趣就會多找些資料看看，或者寫一寫demo。學CSS主要就是透過這種方式。後來開始更多的關注各路大牛的博客和一些比較深的書籍，以及關註一些新的知識和框架，並且不斷地練手提交代碼到github，這樣也學到了很多知識。在實習的過程中，切身參與實際專案開發之中，能學到很多在學校學不到的理念和思維，這點也有很大的幫助。不說了，我要去搬磚求offer了…

MrRaindrop的學習經驗

應qiu神的邀請分享一下前端學習經驗，這裡對前端知識體系架構就不做總結了，各位大神們的總結已經相當到位了，我就貢獻幾個個人認為還比較有用的鏈接大家研究研究就好，然後主要分享一下我在前端學習過程中遇到的問題和總結的經驗教訓吧，如果能幫到想要入門的FE初學者（我就姑且假定為本文的讀者受眾類型了），讓他們少走點彎路，每走一步都知道自己下一步的方向，這是最好了。各位大神的總結與分享詳見qiu神整理的FE-learning。

先說下，前端這個東西每個人都可以有適合自己的學習方法，這篇僅作參考，寫的有點亂，各位湊合看。

緣起

我是屬於誤打誤撞進了前端，之前一直往做遊戲的方向去來著，搞過遊戲網站，玩過遊戲引擎，比如unity，unreal這種商業引擎，搗鼓了幾個遊戲原型，不過自打研一進了實驗室，直接就被導師派去寫了js，導師給了我半個月時間讓我寫個基於百度地圖api的數據展示頁面，雖然這個時間還是相當寬裕的，不過之前沒怎麼寫過js，也不會用地圖api，於是我就一邊啃著《Javascript權威指南》（犀牛書）一邊參考實驗室前人留下的“代碼”，總算是把功能都寫出來了。那個頁面算我的js入門作了，也是我前端學習路線的開始。

現在想來，雖然指派了去做前端，但是一直做下去並做好還是得靠興趣維持，當然前端是一個趣味性十足的技術領域，而且社區每天都很“熱鬧”。

項目，下一個項目

我個人認為前端的學習，初學階段你可以完全脫離開書本，以專案驅動。雖然我個人是從犀牛書開始啃咬的，不過如果你沒有充足的時間，或是覺得啃大部頭乏無味的話，還是別像我這樣。當然瞭如果決定啃書最好是把書裡的例子都跟著敲一遍的。我上研之前沒接觸過js，4月份還沒開學呢就被直接被導師甩了個百度地圖api的項目到臉上，接著就是各種ERP，地圖數據展示，雖然換著花樣來一點不重樣，不過基本上都是前端的活，SSH和android開發也打過醬油，整個實驗室就我一個人寫前端敢信？富客戶端SPA時代的後端就是一個restful接口，代碼量基本上都在前端啊，寫的我一個人怎一個爽字了得…期間跟著導師感受了一把創業，每天從7點搞到晚上10點，也算是經歷了一段快速成長期。

掌握一門技術先掌握它的大體框架，想一個能實現的點子，做一個能跑就行的demo，再去完善它的細節，等到demo完成了，對這門技術有了一個感性的認識，再去啃書，收穫會大很多。我從開始原生js寫到jquery，再到extjs，再到angularjs，從導師指定技術，到自己做技術選型，一個專案接著一個專案的練，就跟打怪升級似的。當然沒有項目就去自己創造項目，動手實現自己的想法是件有樂趣和成就感的事。

收集癖和知識管理

前端學習有個特點，很多東西都很零碎，分散，需要你自己去整理、歸納和總結。在微博、知乎上follow了眾多的大神，你不僅僅是為了聽八卦，大神們的只言片語有時候留下的是無盡的餘味，很有可能一個不經意提到的一個詞就成為你下一個學習的目標。收集這些信息，善用google，提問，思考。就像遊戲裡的收集要素，前端學習也是充滿蒐集要素的一個“遊戲”，只不過你需要一個知識管理工具來充當物品欄和倉庫，我所知道的大牛們無一不是知識管理工具的重度使用者。以前用的oneNote，那時還沒綁定到雲端存儲，現在基本上用evernote，筆記已經累積到1200+篇。書籤一直打算用delicious，因為它是基於tag管理的，但一直沒用起來。當然重點不在於這些工具，但趁手的工具可以提高你的學習效率。最關鍵當然是隨時保持旺盛的學習慾望，你的目標是了解有關前端的一切（當然不是所有都要掌握，因為畢竟你的精力有限，而且現實的說這也不太可能）。

跟對神

這個可控性貌似不大…跟對老大這個就不多說了，一定程度要看造化。不過話說回來，多跟身邊的高手交流是王道，這個高手不一定要多高，但是一定要對技術有熱情。研一的時候熱情高漲，每天7點進實驗室門，然後發現有個傢伙居然比我還早到。後來發現這傢伙早上就走了，下午又來了，而且導師對此習以為常，原來這傢伙晚上不睡覺通宵寫代碼，上午才跑回去睡。後來常常和這位神討論問題，每次都覺得經驗值蹭蹭的往上漲。然後實驗室還有一位神，被前面這位通宵神形容為“只能望其項背，一直在追趕，從來沒趕上”，兩位神的特點都是什麼都了解一點，所以什麼都能跟你討論得起來，我有一段時間做了個讀書計劃，從c/c++到vc/mfc再到unix網絡編程，最後一路看到java核心技術和MSDN上的C#編程指南，和神們也能扯得很high了。

總之就是這兩位神把我拉進了坑，或者說從一個坑跳進另一坑，雖然兩位神都不是搞前端的，不過技術之間總有相通之處。

讀書

讀書，多讀書，讀好書。在劉未鵬的部落格裡看到一個公式，你第一個月的工資等於之前買過（讀過）的技術書價格總和（這裡說的技術書指那些經典的公認的好書）。討論這個公式的正確性似乎沒什麼意義，然而它的合理性是毋庸置疑的，那就是多讀經典技術書。最極端的一個例子，google的徐宥在我的大學裡面說他掃蕩了圖書館的整個TP312書架…對於前端的經典書籍，後面列了一個我收集的前端書列（如果有遺漏的前端經典好書，還請留言告訴我），有條件可以試著刷一遍這些書，我也是在找完整的時間去啃完它們。之前說的，前端知識點鬆散，收集零散的知識點，從博客裡快速學習等，這些只是前端學習的一個方面，如果你要想深入理解一個知識體系，了解它的來龍去脈，對它建立系統認識，讀經典書還是不可或缺的。

我從最開始啃完犀牛書，然後接著去看了其他一些和前端幹係不大的經典技術書，再後來通過實驗室的項目和自己弄的一些小項目逐漸對前端領域比較上路以後，又看了《Javascript模式》、《Javascript設計模式》、《寫可維護的Javascript》，後來了解到node並開始用node搞點小玩意兒，又看了本《NodeJS up and run》和《Mongodb權威指南》，不過感覺前者略坑。那會兒樸靈那本深入淺出（曬書麼麼噠）還沒出，後來出了就去圖書館借來看完，這麼看下來感覺還不錯，不過感覺看的還是偏少了，還需要繼續刷（參考上面的書列）。

前端的定位

前端的定位關乎到你需要吸收什麼樣的知識和技能，決定在科技世界裡你對什麼需要格外敏感。如果你認為前端只是停留在切頁面，實現互動和視覺的要求，那你對前端的認識還停留在初級階段。阿里終面的時候我問了考官這麼個問題：前端技術日新月異，範圍越擴越寬，標準越來越豐富，似乎任何一個觸角都能伸出很遠。怎麼給前端一個適合的定位？考官給我分析了半天，然後總結成一句話，就是使用者和網站的聯結者，使用者體驗的創造者（原話不是這樣，但大體是這個意思）。也就是說前端的終極目標其實就是創造使用者體驗，提升使用者體驗，以使用者體驗為中心。不管你是從互動設計上下手，還是從效能優化出發，或是改善工作流程提升工作流程效率，最終都是為了創造和提升使用者體驗，最終都要體現到使用者體驗這一點。我認為這個總結非常有道理（當然「用戶體驗」這個詞太寬泛了，而且不僅僅是前端工程師的範疇，比如開發後台的時候對一個數據處理過程進行優化，提升了整體性能，這也是對用戶體驗的一個提升）。

現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題，比如前端自動化、圖像編程、性能優化等等，再往後推一點就是PHP /JSP/ASP/nodeJs，過去後端模板一般屬於後端的範疇，現在隨著前端架構的演進，可能會讓你去寫後端模板的程式碼，需要用到後端語言（PHP/Java/C#等），這就是所謂大前端（然而這與前端的定位並不是相背離的，大前端處理的依然是與用戶接觸的部分，仍然是對用戶體驗的優化）。可能最常見或被談論最多的就是node，其實這幾種技術選型都可以，bat三家據說百度用PHP比較多，阿里用node比較多。

玉伯在他的部落格裡提過所謂全棧是橫向的，全棧是縱向的。全棧即所有的終端說白了都是前端，因為都關乎到用戶體驗，直接和用戶接觸。適應多終端的開發，要求你在web前端的基礎上，可能還要去擴展android開發和ios開發的知識，好在由於hybrid開發方式的流行，對使用native語言開發的技能會要求的不那麼深入。

全棧可以說是最適合新創公司的一種發展類型，廣義上認為是從前端幹到後端，從開發乾到運維，這種就不說了，一般人應該不會想要去往這個方向發展，想要成為這種意義上的full-stack dev的，可能用不著來看我這篇文章了；而狹義上的全棧特指使用js語言從前端寫到架設在nodeJs上的後端，前後端統一語言，統一程式設計模型，甚至公用同一套程式碼。更多了解全端開發可以看看玉伯這篇說說全端工程師。

以上是我對前端以及衍生出來的技術路線的一些淺薄理解，學習一個領域掌握它的整體上的走向和趨勢還是挺重要的。另外如果想要對前端學習方向、職涯成長路徑有一個整體的認識，推薦看看拔赤總結的這篇前端開發十日談。

最後

貢獻幾個對前端學習、面試有幫助的連結：

前端面試問題合集（Front-end-Developer-Interview-Questions）
前端技能總結（JacksonTian）
另一張前端技能總表
前端那點事兒（書列）

byr論壇yiyizym的建議

與grunt相比，學習gulp會比較簡單

做SPA的話，推薦backbone.js和 backbone.marionette.js

FQ不用折騰，花十塊錢買一個月的紅杏。

把基礎打紮實了再學這些都沒問題。

html 沒什麼好說的，有空學html5。

css 盡量看文件，因為很多中文資料都各執一辭，看多了反而會糊塗。

有個網站可以找出html/css標籤、屬性在各個瀏覽器中的支援情況，還挺好用的。

javascript 就看 javascript高階程式設計。不過這麼厚的書看過就會忘。對javascript核心概念的講解：物件/原型鏈/ 建構函數/執行上下文/作用域鏈/閉包/this，這裡有一篇不錯的文章。

有閒情可以看看 ecmascript 6，計劃明年6月就發布啦。阮一峰的網站有入門資料。

jquery 有很多 API,這個網站可以方便查到。有時間弄清楚jquery deferred 的用法。

多給 sublimetext 裝插件，比如說檢查程式碼錯誤的，新建目錄檔的，整理程式碼的。

綜合類

綜合類	位址
前端知識體系	http://www.cnblogs.com/sb19871023/p/3894452.html
前端知識架構	https://github.com/JacksonTian/fks
Web前端開發大系概覽	https://github.com/unruledboy/WebFrontEndStack
Web前端開發大系概覽-中文版	http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
Web Front-end Stack v2.2	Web Front-end Stack v2.2
免費的程式設計中文書籍索引	https://github.com/justjavac/free-programming-books-zh_CN
前端書籍	https://github.com/dypsilon/frontend-dev-bookmarks
前端免費書籍大全	https://github.com/vhf/free-programming-books
前端知識體系	http://www.cnblogs.com/sb19871023/p/3894452.html
免費的程式設計中文書籍索引	https://github.com/justjavac/free-programming-books-zh_CN
智能俱樂部 - 精通JavaScript開發	http://study.163.com/course/introduction/224014.htm
重新介紹 JavaScript（JS 教學）	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
麻省理工學院公開課：電腦科學及程式設計導論	http://v.163.com/special/opencourse/bianchengdaolun.html
JavaScript中的this陷阱的最完整收集--沒有之一	http://segmentfault.com/a/1190000002640298
JS函數式程式設計指南	https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
JavaScript Promise迷你書（中文版）	http://liubin.github.io/promises-book
騰訊行動Web前端知識庫	https://github.com/AlloyTeam/Mars
Front-End-Develop-Guide 前端開髮指南	https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
前端開發筆記本	https://li-xinyang.gitbooks.io/frontend-notebook/content
大前端工具集 - 聶微東	https://github.com/nieweidong/fetool
前端開發者手冊	https://dwqs.gitbooks.io/frontenddevhandbook/content

入門類

入門類	地址
前端入門教學	http://www.cnblogs.com/jikey/p/3613082.html
瘳雪峰的Javascript教學	http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
jQuery基礎教學	http://www.imooc.com/view/11
前端工程師必備的PS技能－切圖篇	http://www.imooc.com/view/506
結合個人經歷總結的前端入門方法	https://github.com/qiu-deqing/FE-learning

工具類

工具類	位址
前端人的俱樂部	http://f2er.club/ 真可以解放你的收藏夾
如何優雅地使用Sublime Text	http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
新編碼神器Atom使用紀要	http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
css sprite 雪碧圖製作	http://www.imooc.com/learn/93
版本控制入門 – 搬進 Github	http://www.imooc.com/learn/390
Grunt-beginner前端自動化工具	http://www.imooc.com/learn/30
IntelliJ IDEA 簡體中文專題教學	https://github.com/judasn/IntelliJ-IDEA-Tutorial
Webstorm,InterllIdea,Phpstorm	http://t.cn/8kZZ1Uy
SublimeText	https://github.com/jikeytang/sublime-text
Atom	https://atom.io
visual studio code	https://code.visualstudio.com

綜合效果搜尋平台

綜合效果搜尋平台	位址
JavaScript 資源大全中文版	https://github.com/jobbole/awesome-javascript-cn
100+ 超全的網頁開發工具與資源	https://xituqu.com/170.html
zoommyapp.com	http://zoommyapp.com/ 高品質圖庫
unsplash.com	https://unsplash.com/ 高品質圖庫
www.pinterest.com	https://www.pinterest.com/ 圖庫
New Old Stock	http://nos.twnsnd.co 復古風圖庫
效果網	http://www.jq22.com
花瓣網	http://huaban.com/
優美圖	http://www.topit.me/
codepen	http://codepen.io/
攝圖網	http://699pic.com/
常用的JavaScript程式碼片段	http://microjs.com

團隊Blog|週報類

週報類	地址
奇舞周刊	http://old.75team.com/weekly/
碼農周刊	http://weekly.manong.io
WEB前端開發	http://www.css88.com
A JS tip per day!	http://www.jstips.co
騰訊全體 AlloyTeam	http://www.alloyteam.com/webdevelop/
平安科技行動開發二隊技術週報	https://github.com/PaicHyperionDev/MobileDevWeekly

開發中心

開發中心	地址
mozilla js參考	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
chrome開發中心（chrome的核心已轉向blink）	https://developer.chrome.com/extensions/api_index.html
safari開發中心	https://developer.apple.com/library/safari/navigation
microsoft js參考	https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
js秘密花園	http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js秘密花園	http://bonsaiden.github.io/JavaScript-Garden/zh
w3help	http://www.w3help.org 綜合Bug集合網站

Nodejs

Nodejs	地址
nodejs 篇幅比較巨大	http://liuqing.pw
Node.js 包教不包會	https://github.com/alsotang/node-lessons
篇幅比較少	http://www.rainweb.cn/article/category/Nodejs
node express 入門教學	http://www.w3cfuns.com/article-5598538-1-1.html
nodejs定時任務	http://my.oschina.net/u/568264/blog/193773
一個nodejs部落格	http://60sky.com
【NodeJS 學習筆記04】新聞發布系統	http://www.cnblogs.com/yexiaochai/p/3536547.html
過年7天樂，學nodejs 也快樂	http://www.cnblogs.com/qqloving/p/3541099.html
七天學會NodeJS	https://github.com/nqdeng/7-days-nodejs
Nodejs學習筆記（二）--- 事件模組	http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
nodejs入門	http://www.cnblogs.com/liusuqi/p/3735491.html
angularjs nodejs	https://github.com/zensh/jsgen
從零開始nodejs系列文章	http://blog.fens.me/series-nodejs
理解nodejs	http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs事件輪詢	http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
node入門	http://www.nodebeginner.org/index-zh-cn.html
nodejs cms	http://ourjs.com/detail/53e1f281c5910a9806000001
Node初學者入門，一本全面的NodeJS教學	http://ourjs.com/detail/529ca5950cb6498814000005
NodeJS的程式碼調試和效能調優	http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

綜合API

綜合API	位址
javascripting	http://www.javascripting.com
各種流行庫搜尋	http://microjs.com
runoob.com-包含各種API集合	http://www.runoob.com
開源中國線上API文件合集	http://tool.oschina.net/apidocs
devdocs	http://devdocs.io 英文綜合API網站

Ecmascript

Ecmascript	地址
Understanding ECMAScript 6 - Nicholas C. Zakas	https://leanpub.com/understandinges6/read
exploring-es6	https://leanpub.com/exploring-es6/read
exploring-es6翻譯	https://github.com/es6-org/exploring-es6
exploring-es6翻譯後預覽	http://es6-org.github.io/exploring-es6
阮一峰 es6	http://es6.ruanyifeng.com
阮一峰 Javascript	http://javascript.ruanyifeng.com
ECMA-262，第 5 版	http://yanhaijing.com/es5
es5	http://es5.github.io

Js template

Js template	地址
template-chooser	http://garann.github.io/template-chooser
artTemplate	https://github.com/aui/artTemplate
tomdjs	https://github.com/aui/tmodjs/blob/master/README.md
淘寶模板juicer模板	http://juicer.name/docs/docs_zh_cn.html
Fxtpl v1.0 繁星前端模板引擎	http://koen301.github.io/fxtpl
laytpl	http://laytpl.layui.com
mozilla - nunjucks	https://github.com/mozilla/nunjucks
Juicer	https://github.com/PaulGuo/Juicer
dustjs	http://akdubya.github.io/dustjs
etpl	http://ecomfe.github.io/etpl

HTML5(HTML)

HTML(HTML5)	位址
深入理解HTML5標籤	https://segmentfault.com/a/1190000002695791
如何寫出高效率的HTML	https://segmentfault.com/a/1190000002680822
HTML meta標籤總結與屬性使用介紹	https://segmentfault.com/a/1190000004279791
戲說HTML5	http://www.cnblogs.com/dojo-lzz/p/5059316.html

CSS3(CSS)

CSS	地址
CSS 文法參考	http://tympanus.net/codrops/css_reference
如何寫出可維護的CSS	https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS3動畫手冊	http://isux.tencent.com/css3/index.html
騰訊css3動畫製作工具	http://isux.tencent.com/css3/tools.html
志爺css小工具集合	http://linxz.github.io/tianyizone
css3 js 行動大雜燴	http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
bouncejs 觸控庫	http://bouncejs.com
css3 按鈕動畫	http://fian.my.id/Waves
animate.css	http://daneden.github.io/animate.css
全局CSS的終結(狗帶 [譯]	http://www.alloyteam.com/2015/10/8536
browserhacks	http://browserhacks.com

Angularjs

Angularjs	位址
Angular.js 的一些學習資源	https://github.com/dolymood/AngularLearning
angularjs中文社群	http://angularjs.cn
Angularjs源碼學習	http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs源碼學習	http://www.ifeenan.com/?c=AngularJS
angular對bootstrap的封裝	http://angular-ui.github.io/bootstrap
angularjs + nodejs	https://cnodejs.org/topic/51404e0f069911196d2e3923
呂大豹 Angularjs	http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS 最佳實踐	http://www.infoq.com/cn/news/2013/02/angular-web-app
Angular的一些擴充指令	http://www.lovelucy.info/angularjs-best-practices.html
Angular資料綁定原理	https://github.com/Pasvaz/bindonce
一些擴充Angular UI元件	https://github.com/angular-ui
Ember和AngularJS的效能測試	http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
帶你走近AngularJS - 基本功能介紹	http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
Angularjs開發指南	http://angular.duapp.com/docs/guide
Angularjs學習	http://www.cnblogs.com/amosli/p/3710648.html
不要帶著jQuery的思維去學習AngularJS	http://www.rainweb.cn/article/angularjs-jquery.html
angularjs 學習筆記	http://wangjiatao.diandian.com/?tag=angularjs
angularjs 開髮指南	http://www.angularjs.cn/T008
angularjs 英文資料	https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap	http://angular-ui.github.io/bootstrap
angular jq mobile	https://github.com/opitzconsulting/jquery-mobile-angular-adapter
angular ui	http://mgcrea.github.io/angular-strap
整合jQuery Mobile+AngularJS經驗談	http://www.tuicool.com/articles/7ZZVr2
有jQuery背景，該如何用AngularJS程式設計想法	http://blog.jobbole.com/46589/
AngularJS線上教學	http://each.sinaapp.com/angular
angular學習筆記	http://www.zouyesheng.com/angular.html

React

React	地址
react.js 中文論壇	http://www.react-china.org
react.js 官方網址	https://facebook.github.io/react/index.html
react.js 官方文件	https://facebook.github.io/react/docs/getting-started.html
react.js material UI	http://material-ui.com/#
react.js TouchstoneJS UI	http://touchstonejs.io
react.js amazeui UI	http://amazeui.org/react
React 入門實例教學 - 阮一峰	http://www.ruanyifeng.com/blog/2015/03/react.html
React Native 中文版	http://wiki.jikexueyuan.com/project/react-native
Webpack 和 React 小書 - 前端亂燉	http://www.html-js.com/article/Fakefish%203053
Webpack 和 React 小書 - gitbook	https://fakefish.github.io/react-webpack-cookbook
webpack	https://github.com/webpack/webpack
Webpack，101入門體驗	http://html-js.com/article/3009
webpack入門教學	http://html-js.com/article/3113
基於webpack搭建前端工程解決方案探索	http://segmentfault.com/a/1190000003499526
React原創實戰影片教學	http://www.piliyu.com

vue

vue	地址
Vue	http://cn.vuejs.org
Vue 論壇	http://forum.vuejs.org
Vue 入門指南	http://www.cnblogs.com/aaronjs/p/3660102.html
Vue 的一些資源索引	http://segmentfault.com/a/1190000000411057
awesome-vue	https://github.com/vuejs/awesome-vue

行動端API

行動裝置API	位址
99行動端知識集合	https://github.com/jtyjty99999/mobileTech
行動端前端開發知識庫	https://github.com/AlloyTeam/Mars
移動前端的一些坑和解決方法（外觀表現）	http://caibaojian.com/mobile-web-bug.html
【原】行動web資源整理	http://www.cnblogs.com/PeunZhang/p/3407453.html
zepto 1.0 中文手冊	http://mweb.baidu.com/zeptoapi
zepto 1.0 中文手冊	http://www.html-5.cn/Manual/Zepto
zepto 1.1.2	http://www.css88.com/doc/zeptojs_api
zepto 中文註釋	http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
jqmobile 手冊	http://app-framework-software.intel.com/api.php
行動瀏覽器開發集合	https://github.com/maxzhang/maxzhang.github.com/issues
行動開發大雜燴	https://github.com/hoosin/mobile-web-favorites

jQuery

jQuery	地址
jQuery API 中文文件	http://www.jquery123.com
hemin 線上版	http://hemin.cn/jq
css88 jq api	http://www.css88.com/jqapi-1.9/on
css88 jqui api	http://www.css88.com/jquery-ui-api
學習jquery	http://learn.jquery.com
jquery 原始碼查找	http://james.padolsey.com/jquery
Web前端資源匯總(jQuery,Js,Css3等)	http://www.cnblogs.com/jihua/p/webfront.html

D3

D3	地址
d3 Tutorials	https://github.com/mbostock/d3/wiki/Tutorials
Gallery	https://github.com/mbostock/d3/wiki/Gallery
lofter	http://datavisual.lofter.com/post/40cf3a_188e535
iteye	http://alanland.iteye.com/blog/1878595
ruanyifeng	http://javascript.ruanyifeng.com/library/d3.html

Requriejs

Requriejs	地址
Javascript模組化程式設計（一）：模組的寫法	http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript模組化程式設計（二）：AMD規格	http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
Javascript模組化程式設計（三）：require.js的用法	http://www.ruanyifeng.com/blog/2012/11/require_js.html
RequireJS入門（一）	http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
RequireJS入門（二）	http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
RequireJS進階（三）	http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
requrie源碼學習	http://www.cnblogs.com/yexiaochai/p/3632580.html
requrie 入門指南	http://www.oschina.net/translate/getting-started-with-the-requirejs-library
requrieJS 學習筆記	http://www.cnblogs.com/yexiaochai/p/3214926.html
requriejs 其一	http://cyj.me/why-seajs/requirejs/
require backbone結合	http://www.cnblogs.com/yexiaochai/p/3221081.html

Seajs

Seajs	地址
seajs	http://seajs.org
seajs 中文手冊	http://cyj.me/why-seajs/zh

Less,sass

Less,sass	地址
sass	http://www.w3cplus.com/sassguide
sass教學-sass中國	http://www.sass.hk
Sass 中文文檔	http://sass.bootcss.com
less	http://less.bootcss.com

Markdown

Markdown	地址
Markdown 文法說明 (簡體中文版	http://wowubuntu.com/markdown
markdown入門參考	https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook	https://www.gitbook.com 國外的線上markdown可編輯成書
mdeditor	https://www.zybuluo.com/mdeditor 一款國內的線上markdown編輯器
stackedit	https://stackedit.io 國外的線上markdown編輯器，功能強大，同步雲端硬碟
mditor	http://bh-lay.github.io/mditor 一款輕量級的markdown編輯器
lepture-editor	https://github.com/lepture/editor
markdown-editor	https://github.com/jbt/markdown-editor
作業部落	https://www.zybuluo.com 功能強大，速度流暢，全平台同步

相容性

相容性	位址
esma 相容列表	http://kangax.github.io/compat-table/es6
W3C CSS驗證服務	http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse	http://caniuse.com/#index
csscreator	http://csscreator.com/properties
microsoft

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：flex佈局淺談和實例下一篇：flex佈局淺談和實例

看更多