標籤：

零基礎的前端開發初學者應如何系統地學習？

11-16

A.學習背景
開始網站開發，起先是從手機網站的UBB語法開始的，也因此有了深入學習的興趣。為了讓學習的熱情膨脹，我有意的培養這一愛好 ，定位了自己要成為一名優秀的網站開發員的目標。
作為一名只有高中水平的零基礎初學者，周圍也沒有掌握相關知識的朋友，打算自學的我只有通過google,baidu來了解要學習網站開發所需要的知識點。
目前掌握的知識點
了解到網站分為前端和後端。
前端方面：由於我是從UBB語法上開始的，我一開始就選擇了學習的XML，後來學到，schema的一知半解，到後來的DOM就出現了瓶頸，於是放下這個開始學習HTML，CSS,可是一直都覺得簡單，也就當看電影一樣一氣呵成，便開始了學習Javascript，一直堅持到了自己能編寫一些簡單的效果，也在這裡進一步的了解了DOM，此時我覺得可以進行一些進階級的網站效果設計，可是忽然發現我對HTML+CSS原來是如此不堪，我並不能很好的用它們去編排內容，更或者說我連從哪下手去設計都不知……為此我迷茫了很久，又回過頭來學習一遍，我才發現自己腦子裡的知識點是一片混亂！
由於我是斷網自學（手機上網看文字的內容還是很方便的），原因是為了不讓自己在網路上分散了學習上的那份專註。所以對於圖片等素材是很是欠缺的。我也知道前端對於熟悉PS，AI，Flash等圖行工具很重要，可是我看了這麼多教程，就是找不到學習的竊門，只能對圖片進行一些簡單處理，Flash更是難點重重，我就一直想不明白，用滑鼠鍵盤怎麼畫出那麼好看的動畫。。。。。。
後端方面：我選擇了PHP，MySQL。由於前面學Javascript的經驗，學PHP也不是很難，學完了一些基礎語法，MySQL也了解了建庫建表，可就是一直沒用過，這也是因為前面的知識點一直沒找到突破口，所以也就沒打算怎麼去深入學習後台知識。
B.問題
一． 怎樣編寫標準的HTML+CSS，對於這些規範的標準很是不解，對於編寫代碼(包括js，php)有哪些好的習慣?我一直沒有給自己寫的代碼注釋，也許是目前自己寫的都是太簡單了。
二． 從Javascript , xml 上我都對DOM這一知識點上了解不深，是不是一種面向對象的知識，我該怎麼去形象通俗的了解面向對象？
三． 我該如何去系統的整合我現在的HTML+CSS+Javascript+xml+PHP+MySQL的知識，或者說是如何系統的學習，作為一名單獨的自學者，我很是迷茫這一點！???
四． 圖形工具（PS,AI,Flash）方面，有沒有一個好的學習建議或竅門？
五． 從未來的互聯網發展趨勢來看，還有哪些知識點是網站開發者需要掌握的?
C.後記
個人對自己的點評：1）可能是約束力不夠，搞得知識面混雜。2)有點好高騖遠了，基礎沒勞固就想開發？3)急功求成，對於一個23歲沒收入的青年來說，如果不能早日學成，是個很可怕的事，壓力啊！
在此我也講講發這一篇像博文般問題的原由，知乎作為中國首家專註社交問答類的網站，我認為這必然有它的出彩之處。這裡牛人前輩也是特別的多，所以我想單純的提出問題，還不如上百度算了，這裡提倡社交式的問答，問題問的不止是要答案，還要是著重於社交這一點，所以我加入了對問題背景的產生，更好的讓人了解了我的現狀，對回答應該有所幫助。
同時我也是想著能否找到一些與我一樣的初學者，相互提高；或者是偏重圖形工具的人能與我形成互補，希望以後能有合作的機會。有意的加上以下聯繫方式：
E-mail: t-sky2008#http://163.com (把 # 換成 @)

最後,我對所有對我的幫助者致以真誠的感謝!

---------------------------------2014年9月22日--------------------------------

坐在一個完全與編程無關的職位上，我對著電腦，想了好久，這個問題的發出兩年多了，讓我認識了好多朋友，大部分都是在校的學生，你們都正當年，我很開心看到你們這麼熱情的學習心態，同時我也想讓其它更多看到這個問題的人，好好珍惜學習的機會。我是沒有適當的條件的，我沒有在編程開發這條路上堅持到我成長成為一個工程師。現在的我依然感到有點惋惜，因為，我即將開始一場屬於自己的事業，必然的選擇了與互聯網，網站開發建設有關，呵呵，大家也別笑我沒這能力還去搞這玩意，具體我做什麼的就不在這裡表露了。
順便說一下，有心找我學習編程知識，共同進步的人，可能要失望了，但是，這些都不會阻礙我們能成為朋友，而且從社會經驗來講，我這草根人物，很多經驗會適合很多人，有興趣的不妨也可以問一下。聯繫我郵箱就行。
在此最後，真心感謝用心回答這個問題的答主們，您們辛苦了！感謝您們為這麼多迷茫在這條路上的學習者提供了這麼好指引，聲明，我不是來驕情式的感恩，我是誠心的，沒有餓過的人，永遠無法知道飢餓者對給他們一塊麵包的人那種感恩的心。
還有一些回復，一些點贊的事，我就不錦上添花了，希望能理解。謝謝。

（前端變化太快，以下內容我會不定期更新，第三方網站請不要轉載，如果實在想轉載，請只轉載摘要，並保留原文鏈接，謝謝）


網站開發開發大致分為前端和後端，前端主要負責實現視覺和交互效果，以及與伺服器通信，完成業務邏輯。其核心價值在於對用戶體驗的追求。可以按如下思路學習系統學習：

基礎知識：
1. html + css 這部分建議在 w3school 在線教程 上學習，邊學邊練，每章後還有小測試。 之後可以模仿一些網站做些頁面。
2. javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。

對於習慣看視頻學習的同學，以上內容也可以在 慕課網-國內最大的IT技能學習平台 上學習。雖然我沒用過，但好幾位同學推薦過了，大概看了下，內容還不錯。

進階：
有了以上基礎，就可以進行一般的靜態網頁設計，不過對於複雜的頁面還需要進一步學習。

1. css。截至今日（2015.12.08），天貓、淘寶、支付寶都已停止對ie6,7的支持，未來相信大多數網站都會停止對ie6，7的支持，ie8的市場份額也不像兩年前那麼高了（天貓即將停止對IE8的支持，2016.12.13），webkit內核已成為市場主流。對於css的學習，我推薦分三塊：「基礎概念」，「css2.1規範」，「css3規範」。必看 精通CSS（第2版） (豆瓣)，看完這本書你應該對：盒子模型，流動，block，inline，層疊，樣式優先順序，等概念非常了解了。這本確實有些年頭了，但基礎概念部分講述非常清晰，可以稱之為經典。ie6，7相關的內容可以不看。css3的部分可以參考：CSS3實用指南 (豆瓣)。這本書同樣有些老，只是最新出版的書中沒發現有特別好的。

2. javascript。上面提到內容還不足以讓你勝任js編程。在有了基礎之後，進一步學習內容包括：

a) 框架。推薦 zepto，簡單易用，在w3school簡單學習js後，直接上手 zepto 即可完成一些簡單的項目。zepto 源碼簡單清晰，也適合新手閱讀。補充： 可以使用 codecademy 學習 javascript，zepto，用戶體驗真的很好（感謝 TonyOuyang ）。最近比較熱門的框架是React, VUE, Angular這些, 根據需要稍作了解即可。隨著ie瀏覽器市場份額的下降，以及移動端的發展，標準原生js已經可以在實際項目中使用（目前還需要藉助es5shim、babel等），重點還是ES5, ES6, ES7。

b) javascript 語言範式 。這個名字可能並不恰當，只是我找不到可以描述「面向對象」，「函數式」這個兩個概念的概念。javascript不完全是一個面向對象的語言，它的很多設計理念都有函數編程語言的影子，甚至說如果你不用面向對象，完全可以把它理解成一門函數式編程語言。javascript的很多語言特性，都是因為他具有函數式語言的特點才存在的。這部分推薦先學習面向對象的基本理論，對封裝，繼承，多態等概念要理解，維基百科，百度百科會是你的幫手，另外推薦《object oriented javascript》，應該有中文版。對與函數式編程可以參考這篇文章：JavaScript 中的函數式編程實踐

c) javascript 語言內部機制。必須弄清如下概念：js中變數的作用域，變數傳遞方式，函數的定義環境與執行環境，閉包，函數的四種調用方式（一般函數，對象的方法，apply，call），以及四種調用方式下，『this"指向的是誰。這部分內容你會在《javascript語言精粹》中詳細了解。

d) dom編程，這個web前端工程師的核心技能之一。必讀《dom編程藝術》，另外《高性能javascript》這本書中關於dom編程的部分講的也很好。

e) ajax編程，這是另一核心技術。ajax建議在網上查些資料，了解這個概念的來龍去脈，百度百科，維基百科上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對ajax有良好的封裝，編程並不複雜。另外，ajax未來幾年會被 Fetch Standard 取代，也需要了解。另外關於xhr2，cors（跨站資源共享），formData文件上傳，也需要了解。

f) es5, es6。現在開發js大部分基於es5的，ie8以下通過es5-shim。但利用一些工具，現在已經可以直接寫es6代碼了，尤其在reactjs，nodejs類型的項目中。對於從es5，es6每個階段js發生了哪些變化都需要系統學習，學習順序建議是 JavaScript基礎 -&> es5 -&> es6，越靠前的越重要。一些參考鏈接：ECMAScript 5 compatibility tableECMAScript 6入門ES5 ? 張鑫旭

3. html5。需要了解html都提供了哪些api，然後項目中用起來。這部分沒有什麼難理解的，關鍵在於能用html5解決業務問題，以及不支持html5的瀏覽器的降級方案。這部分體現了前端的一個思想：面向未來編程，儘早將新技術引入業務中來，而不是過分考慮兼容性問題，進而導致面向過去編程。

再進一階 · 代碼層面：
有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1易維護，2可測試，3高性能，4低流量（移動端）。
1. 易維護。對於頁面你該理解『樣式』，『數據』，『行為』三者分離，對應的當然就是css,html,js。對於js代碼，你最好了解設計模式，重構，MVC等內容。
2. 可測性。就是保證你的代碼能溝通單元測試100%覆蓋到所有分支
3. 高性能。必讀《高性能javascript》
4. 低流量。移動端關注比較多，PC端現在可以不用太關注了

再進一階 · 工程層面：
前端項目同樣面臨軟體生命周期的各個環節，首先是代碼管理，你必須學會使用svn和git。其次是代碼的構建，如今前端代碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模塊合併、各種編譯，必須要學會使用grunt、gulp、webpack、rollup等前端構建工具，以及前端模塊管理的方式，amd，cmd，es6 module 等等。

然後呢？
以上內容只是簡單說了前端學習的順序。前端工程師應該有的知識結構請參考這裡：JacksonTian/fks · GitHub

補充：
對於前段開發，基本內容就這些了，可以根據自己的興趣愛好選擇性學習以下內容。
1. 交互設計。大公司依然有專業人士搞這些，不過不懂交互的前端一定不是好前端。推薦《簡約至上》。
2. 後端。應該說前段工程師必須至少了解一門後端語言，不過如果愛好也可深入學習，入手難度比較低的應該是php了。這部分由可分為基於頁面，基於框架兩種。大型項目都是基於框架開發的，建議至少了解一個MVC框架，比如php的ci, yii, yaf 等，好還框架的設計思想都大同小異。如今NodeJs在大公司已經得到普遍的使用，推薦大家使用在Node上使用Koa框架做一些後端服務的開發。
3. Android和ios開發。時至今日，前端的工作領域已經非常廣泛，native的界面開發本質上也是前端開發，個大公司都面臨著Native環境和web環境頁面同時維護的問題，如果能夠在技術上得到統一，將會有巨大的價值。對於學有餘力的同學，應該了解Native開發的基本流程，至少了解到界面構建的技術。
4. 如果你能夠認真看到這裡，說明你對前端有真愛，最後說一個編程習慣的問題，絕對是保你工作平安，少出故障。代碼提交前必須做的三個事情：A. git diff（svn diff）,檢查所有變更；B. 跑一邊單元測試；C. 手動運行一遍所有demo.

如果你以上內容你都已掌握，想加入一個牛B的前端團隊，可以私信我。坐標：杭州·天貓·前端

（以上內容最初發佈於2012年上半年，已經更新過幾次了，我會持續維護，希望對後來人有幫助。加油、共勉！最後更新時間：2016-12-13 13:30）


原本不想回答這個已經有了這麼多答案的問題的，但是發現竟然沒有人安利現在Github上最火的一個項目：

這是一個專門為零基礎學習者準備的學習路徑，從零開始學習Web開發。FreeCodeCamp鼓勵的學習方式是learning by doing，課程設置很平滑，既有循序漸進的基礎知識，又有需要你自由發揮的開發小項目，和打遊戲闖關一樣的學習體驗，比起看教學視頻，w3cschool之類的要更加生動有趣。

這是一個專門為零基礎學習者準備的學習路徑，從零開始學習Web開發。FreeCodeCamp鼓勵的學習方式是learning by doing，課程設置很平滑，既有循序漸進的基礎知識，又有需要你自由發揮的開發小項目，和打遊戲闖關一樣的學習體驗，比起看教學視頻，w3cschool之類的要更加生動有趣。
學會之後你還可以參與合作項目組裡和其他FreeCodeCamp的學習者一起為公益組織開發真正會投入使用的Web應用。
中文版官網：https://www.freecodecamp.cn/
參與完整個Camp之後，你不光學習到了知識，也獲得了開發經驗。
FCC的論壇里已經有很多零基礎學習者通過完成課程之後成功找到開發工作的真實例子。
在FCC整個學習路徑中，你可以獲得四個資質認證：
前端開發認證
完成前端開發認證需要學習基本的HTML/CSS/JQuery和Bootstrap知識。
完成10個前端開發任務，和學習基本的Javascript演算法。
數據可視化認證
學習有關Sass, React 和 D3的技術。
開發完成5個React應用，5個D3.js的數據可視化應用。
後端開發認證
學習Node.js, Express, 和MongoDB相關知識，學習版本控制軟體Git等。
完成5個API開發任務，5個全棧App開發任務。
全棧開發認證
運用你所學的知識為公益組織開發真實可用的Web應用。
你需要開發兩個全新的項目，維護兩個已有的項目，這些都是公益組織會真實投入使用的應用，完成也就意味著你有了真正的開發工作經驗。

點擊這裡加入：Sign in to Free Code Camp using a Social Media Account
===============================================================
已經有很多從知乎過來的朋友加入了，歡迎更多的人參與到FCC當中來，現在就可以加入中文聊天室和大家交流：FreeCodeCamp/chinese

如果你的英文還說得過去的話，還是推薦到英文官網去學習：Learn to Code and Help Nonprofits

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

FCC的題目除了一關一關地學習Web編程知識以外，還有許多需要自主完成的任務，例如創建一個個人主頁、當地天氣應用、JavaScript計算器、股票應用甚至是克隆Pinterest，完整學習下來並完成所有的任務還是需要付出相當努力的，不過不需要擔心，課程的設置完全是從零開始，一步一步，循序漸進的。

FCC的題目除了一關一關地學習Web編程知識以外，還有許多需要自主完成的任務，例如創建一個個人主頁、當地天氣應用、JavaScript計算器、股票應用甚至是克隆Pinterest，完整學習下來並完成所有的任務還是需要付出相當努力的，不過不需要擔心，課程的設置完全是從零開始，一步一步，循序漸進的。
FCC鼓勵Read-Search-Ask的學習方法。即閱讀文檔和錯誤-搜索問題-詢問他人獲得幫助。並且建立了很成熟的社區：
在線聊天室：FreeCodeCamp/FreeCodeCamp
交流論壇：Free Code Camp Forum
FCC中文社區QQ群：526289580
FCC在很多平台上都非常活躍，再給幾個比較有用的鏈接：
Youtube頻道：https://www.youtube.com/c/freecodecamp 這裡有FCC官方的視頻課程，學習者為公益組織開發項目的展示等等。
Linkedin 大學主頁：Free Code Camp 是的你沒有看錯，Linkedin認證FCC為大學機構，你可以把你在FCC學習的經歷填寫在你的Linkedin主頁里。
Medium主頁：https://medium.freecodecamp.com/ FCC官方分享的一些技術乾貨等。
Github 主頁：GitHub - FreeCodeCamp/FreeCodeCamp

前端資源匯總

綜合類 | 地址
--- | ---
前端知識體系--前端知識體系
前端知識結構--GitHub - JacksonTian/fks: 前端技能匯總 Frontend Knowledge Structure
免費的編程中文書籍索引--GitHub - justjavac/free-programming-books-zh_CN: 免費的計算機編程類中文書籍，歡迎投稿
智能社 - 精通JavaScript開發--精通JavaScript開發(視頻教學)
重新介紹 JavaScript（JS 教程）--重新介紹 JavaScript（JS 教程）(文字教學)
麻省理工學院公開課：計算機科學及編程導論--麻省理工學院公開課：計算機科學及編程導論
JavaScript中的this陷阱的最全收集--沒有之一--JavaScript中的this陷阱的最全收集--沒有之一
JS函數式編程指南--第 1 章: 我們在做什麼？
JavaScript Promise迷你書（中文版）--http://liubin.github.io/promises-book
騰訊移動Web前端知識庫--GitHub - AlloyTeam/Mars: 騰訊移動Web前端知識庫
大前端工具集 - 聶微東--GitHub - nieweidong/fetool: 大前端的瑞士軍刀，只記錄有用的
Web Front-end Stack v2.2--https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png

入門類 | 地址
--- | ---
前端入門教程--web前端開發分享
瘳雪峰的Javascript教程--JavaScript教程（js筆記）
jQuery基礎教程--jQuery基礎課程_jQuery視頻教程
前端工程師必備的PS技能——切圖篇--前端工程師必備的PS技能
結合個人經歷總結的前端入門方法--GitHub - qiu-deqing/FE-learning: 結合個人經歷總結的前端入門方法

jQuery| 地址
--- | ---
jQuery API 中文文檔--jQuery API 中文文檔 -- jQuery 中文網
hemin 在線版--jquery 在線手冊
css88 jq api--.on() | jQuery API中文文檔(適用jQuery 1.0
css88 jqui api--jQuery UI API中文文檔(適用jQuery UI 1.10)
學習jquery--jQuery Learning Center
jquery 源碼查找--jQuery source viewer

綜合API| 地址
--- | ---
runoob.com-包含各種API集合--菜鳥教程 - 學的不僅是技術，更是夢想！
開源中國在線API文檔合集--在線API文檔
devdocs--DevDocs API Documentation 英文綜合API網站

效果類 | 地址
--- | ---
js彈出層--彈出層效果_技術學習教程
js焦點圖輪播特效--焦點圖輪播特效
w3help--http://www.w3help.org 綜合Bug集合網站

CSS| 地址
--- | ---
騰訊css3動畫製作工具--動畫工具[Tool]
志爺css小工具集合--CSS小工具
bouncejs 觸摸庫--Bounce.js
animate.css--Animate.css
全局CSS的終結(狗帶 [譯]--全局CSS的終結(狗帶) [譯]

工具類| 地址
--- | ---
css sprite 雪碧圖製作--CSS Sprite雪碧圖應用
版本控制入門 – 搬進 Github--版本控制入門
Grunt-beginner前端自動化工具--Grunt-beginner前端自動化工具

慕課專題| 地址
--- | ---
張鑫旭 - 慕課系列--http://www.imooc.com/space/teacher/id/197450
lyn - 慕課系列--http://www.imooc.com/space/teacher/id/104593
艾倫 - 慕課系列--http://www.imooc.com/space/teacher/id/290139
碧仔 - Hello，移動WEB--Hello，移動WEB_移動web建站

彈出層| 地址
--- | ---
artDialog 最新版--GitHub - aui/artDialog: 經典的網頁對話框組件
artDialog 文檔--artDialog
google code 下載地址--https://code.google.com/p/artdialog/downloads/list
賢心彈出層--layer官方演示與講解（jQuery彈出層插件）

Angularjs| 地址
--- | ---
Angular.js 的一些學習資源--GitHub - dolymood/AngularLearning: Angular.js 的一些學習資源
Angular的一些擴展指令|AngularJS 最佳實踐
Angular數據綁定原理|GitHub - Pasvaz/bindonce: Zero watches binding for AngularJs
一些擴展Angular UI組件|AngularUI · GitHub
Ember和AngularJS的性能測試|http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
帶你走近AngularJS - 基本功能介紹|帶你走近AngularJS
Angularjs開發指南|403頁面不存在
Angularjs學習|Angularjs學習---官方phonecat實例學習angularjs step0 step1
不要帶著jQuery的思維去學習AngularJS|不要帶著jQuery的思維去學習AngularJS
angularjs 學習筆記|點點網路 | 輕博客
angularjs 開發指南|{{global.metatitle}}
angularjs 英文資料|GitHub - jmcunningham/AngularJS-Learning: A bunch of links to blog posts, articles, videos, etc for learning AngularJS
angular bootstrap|Angular directives for Bootstrap
angular jq mobile|GitHub - opitzconsulting/jquery-mobile-angular-adapter: jquery mobile angular adapter
angular ui|AngularStrap
整合jQuery Mobile+AngularJS經驗談|【每日一博】整合jQuery Mobile+AngularJS經驗談
有jQuery背景，該如何用AngularJS編程思想|有jQuery背景，該如何用AngularJS編程思想？
AngularJS在線教程|AngularJs 在線教程 入門教程 開發指南 學習筆記 基礎教程 angular在線
angular學習筆記|AngularJS學習筆記

React| 地址
--- | ---
react.js 中文論壇|React 中文
react.js 官方網址|A JavaScript library for building user interfaces
react.js 官方文檔|Getting Started
react.js material UI|Material-UI
react.js TouchstoneJS UI|TouchstoneJS
react.js amazeui UI|Amaze UI React
React 入門實例教程 - 阮一峰|React 入門實例教程
React Native 中文版|React Native官方文檔中文版_React Native中文教程_React Native開發中文手冊[PDF]下載
Webpack 和 React 小書 - 前端亂燉|Webpack 和 React 小書
Webpack 和 React 小書 - gitbook|介紹 | React Webpack 小書
webpack|GitHub - webpack/webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Webpack，101入門體驗|Webpack，101入門體驗
webpack入門教程|webpack入門教程
基於webpack搭建前端工程解決方案探索|基於webpack搭建前端工程解決方案探索
React原創實戰視頻教程|霹靂漁

移動端API| 地址
--- | ---
99移動端知識集合|GitHub - jtyjty99999/mobileTech: A useful tools or tips list for mobile web application developing
移動端前端開發知識庫|GitHub - AlloyTeam/Mars: 騰訊移動Web前端知識庫
移動前端的一些坑和解決方法（外觀表現）|移動前端的一些坑和解決方法（外觀表現）
【原】移動web資源整理|【原】移動web資源整理
zepto 1.0 中文手冊|403頁面不存在
zepto 1.0 中文手冊|http://www.html-5.cn/Manual/Zepto
zepto 1.1.2|Zepto.js (1.1.6) API 中文文檔
zepto 中文注釋|zepto源碼注釋
jqmobile 手冊|http://app-framework-software.intel.com/api.php
移動瀏覽器開發集合|Issues · maxzhang/maxzhang.github.com · GitHub
移動開發大雜燴|GitHub - hoosin/mobile-web-favorites: This is a favorites, with a mobile web tips.
微信webview中的一些問題|http://lin-chao.github.io/2014/11/14/%E5%BE%AE%E4%BF
%A1webview%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98

框架| 地址
--- | ---
特色的HTML框架可以創建精美的iOS應用|Framework7 - Full Featured Mobile HTML Framework For Building iOS Android Apps
淘寶SUI|SUI Mobile

avalon| 地址
--- | ---
avalonjs|avalon中文官網
Avalon新一代UI庫： OniUI|OniUI
avalon.oniui-基於avalon的組件庫|GitHub - RubyLouvre/avalon.oniui: 基於avalon的組件庫
|

Requriejs| 地址
--- | ---
Javascript模塊化編程（一）：模塊的寫法 |Javascript模塊化編程（一）：模塊的寫法
Javascript模塊化編程（二）：AMD規範|Javascript模塊化編程（二）：AMD規範
Javascript模塊化編程（三）：require.js的用法|Javascript模塊化編程（三）：require.js的用法
RequireJS入門（一）|RequireJS入門（一）
RequireJS入門（二）|RequireJS入門（二）
RequireJS進階（三）|RequireJS進階（三）
requrie源碼學習|【requireJS源碼學習01】了解整個requireJS的結構
requrie 入門指南|RequireJS 入門指南
requrieJS 學習筆記|RequireJS學習筆記
requriejs 其一 |Why SeaJS
require backbone結合|RequireJS與Backbone簡單整合

Seajs| 地址
--- | ---
seajs|http://seajs.org
seajs 中文手冊|Why SeaJS

Less,sass| 地址
--- | ---
sass|sass入門 - sass教程
sass教程-sass中國|sass中國_SCSS教程_Sass教程_Sass學習
Sass 中文文檔|Sass: Syntactically Awesome Style Sheets
less|快速入門 | Less.js 中文文檔

Markdown| 地址
--- | ---
Markdown 語法說明 (簡體中文版|Markdown 語法說明(簡體中文版)
markdown入門參考|Learning-Markdown/README.md at master · LearnShare/Learning-Markdown · GitHub
gitbook|GitBook ?· Writing made easy 國外的在線markdown可編輯成書
mdeditor|Cmd Markdown 編輯閱讀器 一款國內的在線markdown編輯器
stackedit|StackEdit a€「 In-browser markdown editor 國外的在線markdown編輯器，功能強大，同步雲盤
mditor|mditor 一款輕量級的markdown編輯器 一款輕量級的markdown編輯器
lepture-editor|GitHub - lepture/editor: A markdown editor. still on development.
markdown-editor|GitHub - jbt/markdown-editor: Live (Github-flavored) Markdown Editor

D3| 地址
--- | ---
d3 Tutorials|Tutorials · d3/d3 Wiki · GitHub
Gallery|Gallery · d3/d3 Wiki · GitHub
lofter|習·D3.js 學習資源匯總-Data Visualization
iteye|d3.js 學習資源
ruanyifeng|D3.js -- JavaScript 標準參考教程（alpha）

兼容性| 地址
--- | ---
esma 兼容列表|ECMAScript 6 compatibility table
W3C CSS驗證服務|W3C CSS 驗證服務
caniuse|Can I use... Support tables for HTML5, CSS3, etc
csscreator|http://csscreator.com/properties
microsoft|CSS ?…???1?€§?』? Internet Explorer(v=vs.85.aspx
在線測兼容-移動端|Responsinator
emulators|https://www.manymo.com/emulators

UI相關| 地址
--- | ---
bootcss|Bootstrap 中文文檔
MetroUICSS|Metro UI CSS
semantic|Semantic UI
Buttons|Buttons Builder
kitecss|Kite
pintuer|拼圖Pintuer-跨屏響應
amazeui|Amaze UI | 中國首個開源 HTML5 跨屏前端框架
worldhello|GotGitHub — GotGitHub
linuxtoy|沉浸式學 Git: Contents
gitmagic|Git Magic - 前言
rogerdudler|git - the simple guide
gitref|Git 參考手冊
book|http://git-scm.com/book/zh
gogojimmy|Git 教學(1) : Git 的基本使用

HTTP| 地址
--- | ---
HTTP API 設計指南|HTTP API 設計指南

其它API| 地址
--- | ---
javascript流行庫匯總|javascriptoo
驗證api|nice Validator 示例，jQuery智能表單驗證
underscore 中文手冊|Underscore.js(1.8.3) 中文文檔
underscore源碼分析|underscore.js源碼分析
underscore源碼分析-亞里士朱德的博客|標籤: underscore // 亞里士朱德的博客
underscrejs en api|Underscore.js
lodash - underscore的代替品|lodash
ext4api|Sencha Docs - Ext JS
backbone 中文手冊|http://www.csser.com/tools/backbone/backbone.js.html
qwrap手冊|QWrap 有啊版應用手冊
緩動函數|緩動函數速查表
svg 中文參考|SVG 參考手冊
svg mdn參考|SVG | MDN
svg 導出 canvas|GitHub - gabelerner/canvg: Javascript SVG parser and renderer on Canvas
svg 導出 png|GitHub - exupero/saveSvgAsPng: Save SVGs as PNGs from the browser.
ai-to-svg|AI to SVG | Zamzar
localStorage 庫|GitHub - machao/localStorage: 全瀏覽器兼容localStorage組件

圖表類| 地址
--- | ---
Highcharts 中文API|中文 API | Highcharts中文網
Highcharts 英文API|Highcharts API Reference
ECharts 百度的圖表軟體|ECharts
高德地圖|開發 | 高德開放平台
開源的矢量圖腳本框架|Paper.js
svg 地圖|Home

vue| 地址
--- | ---
Vue|vue.js
Vue 論壇|Vue.js Discussion
Vue 入門指南|Vue 入門指南
Vue 的一些資源索引|Vue.js 的一些資源索引
awesome-vue|GitHub - vuejs/awesome-vue: A curated list of awesome things related to Vue.js

正則| 地址
--- | ---
JS正則表達式元字元|JS正則表達式元字元
正則表達式30分鐘入門教程|正則表達式30分鐘入門教程
MDN-正則表達式|正則表達式 - JavaScript
ruanyifeng - RegExp對象|RegExp對象 -- JavaScript 標準參考教程（alpha）
小鬍子哥 - 進階正則表達式|進階正則表達式
is.js|is.js/is.js at master · Cedriking/is.js · GitHub
正則在線測試|Regexper

ionic| 地址
--- | ---
ionic|GitHub - ychow/ionic-guide: Ionic 中文指南

其它| 地址
--- | ---
Mock.js 是一款模擬數據生成器|Mock.js

前端| 地址
--- | ---
通過分析github代碼庫總結出來的工程師代碼書寫習慣|Code Guide by @AlloyTeam
HTMLCSS編碼規範 by @mdo|編碼規範 by @mdo
團隊合作的css命名規範-騰訊AlloyTeam前端團隊|http://www.alloyteam.com/2011/10/107
前端編碼規範之js - by yuwenhui|Max Yu
前端編碼規範之js - by 李靖|前端編碼規範之JavaScript
前端開發規範手冊|http://zhibimo.com/read/Ashu/front-end-style-guide
Airbnb JavaScript 編碼規範（簡體中文版）|GitHub - yuche/javascript: Airbnb JavaScript 編碼規範
AMD與CMD規範的區別|AMD 和 CMD 的區別有哪些？ - JavaScript
AMD與CMD規範的區別|AMD規範與CMD規範的區別
KISSY 源碼規範|KISSY 源碼規範
bt編碼規範|編碼規範 by @mdo
規範加強版|https://github.com/Suxiaogang/Code_Guide
前端代碼規範 及 最佳實踐|前端代碼規範 及 最佳實踐
百度前端規範|前端代碼規範 及 最佳實踐
百度前端規範|ISOBAR Front-end Code Standards Best Practices
百度前端規範|Baidu Front-end Style Guides - 浮雲 - 知乎專欄
ECMAScript6 編碼規範--廣發證券前端團隊|GitHub - gf-rd/es6-coding-style: ECMAScript 2015 Coding Style -- 廣發證券前端團隊
JavaScript 風格指南/編碼規範（Airbnb公司版）|JavaScript 風格指南/編碼規範（Airbnb公司版）
網易前端開發規範|規範 - NEC : 更好的CSS樣式解決方案
css模塊|歸檔 - 奇舞團博客
前端規範資源列表|GitHub - ecomfe/spec: This repository contains the specifications.

PHP| 地址
--- | ---
最流行的PHP 代碼規範|最流行的PHP 代碼規範
最流行的PHP 代碼規範|fig-standards/PSR-2-coding-style-guide.md at zh_CN · hfcorriez/fig-standards · GitHub

Android| 地址
--- | ---
【敏捷開發】Android團隊開發規範|【敏捷開發】Android團隊開發規範
Android 開發規範與應用|【譯】[乾貨] Android 開發規範與應用

各大公司開源項目| 地址
--- | ---
Facebook Projects|https://code.facebook.com/projects/web
百度web前端研發部|首頁 - FEX
百度EFE|EFE Tech - 百度EFE（Excellent FrontEnd）技術體系
百度github|Baidu FEX team · GitHub
alloyteam|Web前端 騰訊AlloyTeam Blog
alloyteam-github|Tencent AlloyTeam
alloyteam-AlloyGameEngine|GitHub - AlloyTeam/AlloyGameEngine: made game making super easy
AlloyDesigner|AlloyDesigner——For Fast Web Development 即時修改，即時保存，設計稿較正，其它開發輔助工具
H5交互頁編輯器AEditor介紹|H5交互頁編輯器AEditor介紹 H5動畫交互頁開發的工具介紹
AEditor|AEditor H5動畫交互頁開發的工具
maka|http://forum.maka.im/wordpress
值得訂閱的weekly|GitHub - fenbility/weekly-feed: 推薦的一些值得訂閱的Weekly
騰訊html5|http://cube.qq.com
奇舞團開源項目|奇舞團開源項目
Qunar UED|Qunar UED
Scrat|Scrat - webapp模塊化開發體系

常用 |地址
--- | ---
ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性|首頁 ? 張鑫旭
/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome
模擬鍵盤|Virtual Keyboard
拼音|GitHub - hotoo/pinyin: 漢字拼音 ? hàn zì pīn yīn
中國個人身份證號驗證|GitHub - mc-zone/IDValidator: 中國個人身份證號驗證 Chinese Personal ID Card Validation

演算法 | 地址
--- | ---
數據結構與演算法 JavaScript 描述. 章節練習|GitHub - Ralph-Wang/algorithm.in.js: 數據結構與演算法 JavaScript 描述. 章節練習
常見排序演算法（JS版）|GitHub - twobin/twobinSort: 常見排序演算法（JS版）
經典排序|jsAgm/sort.js at master · luofei2011/jsAgm · GitHub
常見排序演算法-js版本|GitHub - hechangmin/jssort: 常見排序演算法-js版本
JavaScript 演算法與數據結構 精華集|GitHub - lightningtgc/JavaScript-Algorithms: JS演算法 數據結構 精華集
面試常考演算法題精講|http://www.nowcoder.com/live/courses

移動端 | 地址
--- | ---
fastclick|GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs
no-click-delay|GitHub - mmastrac/jquery-noclickdelay: Removes the 300ms click delay from iOS webviews

JSON | 地址
--- | ---
模擬生成JSON數據|JSON Generator a€「 tool for generating random JSON data
返回跨域JSONAPI|JSONProxy

Html5 | 地址
--- | ---
HTML5 有哪些讓你驚艷的 demo？|HTML5 有哪些讓你驚艷的 demo？ - CSS

CSS | 地址
--- | ---
browserhacks|Browserhacks

焦點圖 | 地址
--- | ---
myfocus|GitHub - koen301/myfocus: myFocus JavaScript Library
myfocus-官方演示站|myFocus官方演示站
SuperSlidev2.1 -- 大話主席|SuperSlide | TouchSlide 官方網站 大話主席
soChange|基於jQuery的對象切換插件：soChange 1.6 made by bujichong

Ext, EasyUI, J-UI 及其它各種UI方案 | 地址
--- | ---
extjs|Ext JS - JavaScript MVC/MVVM framework for cross-platform web apps
ext4英文api|Ext JS 4.0.7
ext4中文api|Sencha Docs - Ext JS

EasyUI | 地址
--- | ---
jquery easyui 未壓縮源代碼|http://jquery-easyui.googlecode.com/svn/trunk/src

J-UI | 地址
--- | ---
J-UI|簡單實用國產jQuery UI框架

Other | 地址
--- | ---
MUI-最接近原生APP體驗的高性能前端框架|MUI-最接近原生APP體驗的高性能前端框架
Amaze UI | 中國首個開源 HTML5 跨屏前端框架|Amaze UI | 中國首個開源 HTML5 跨屏前端框架
淘寶 HTML5 前端框架|SUI Mobile
KISSY - 阿里前端JavaScript庫|KISSY - A Powerful JavaScript Framework
網易Nej - Nice Easy Javascript|NEJ-Nice Easy Javascript
Kendo UI MVVM Demo|Kendo UI MVVM Demo
Bootstrap|Bootstrap中文網
Smart UI|http://smartui.chinamzz.com
雅虎UI - CSS UI|http://developer.yahoo.com/yui/grids

頁面 社會化 分享功能 | 地址
--- | ---
百度分享|百度分享，為您帶來更多流量 pc端
JiaThis|JiaThis - 社會化分享按鈕及移動端分享代碼提供商！ pc端
社會化分享組件|百度分享平台-服務詳情 移動端
ShareSDK 輕鬆實現社會化功能|Mob官網 - 中國最大的移動開發者服務平台 移動端
友盟分享|友盟社會化分享Android文檔 移動端

富文本編輯器 | 地址
--- | ---
功能齊全 tinymce|TinyMCE | The Most Advanced WYSIWYG HTML Editor
百度 ueditor|UEditor - 首頁
經典的ckeditor|CKEditor.com
經典的kindeditor|在線HTML編輯器
wysiwyg|微型、開源的Bootstrap所見即所得（WYSIWYG）富文本編輯器 -- 由MindMup貢獻
一個有情懷的編輯器。Bach"s Editor|http://integ.github.io/BachEditor
tower用的編輯器|GitHub - mycolorway/simditor: An Easy and Fast WYSIWYG Editor
summernote 編輯器|GitHub - summernote/summernote: Super simple WYSIWYG editor
html5編輯器|Squire
XEditor|WALLPAPERUN.COM
wangEditor|GitHub - wangfupeng1988/wangEditor: wangEditor —— 輕量級web富文本框

PC | 地址
--- | ---
經典my97|My97ШеЦкПиМ? бнЪО ЮФЕЕ My97 DatePicker Demo Doc
強大的獨立日期選擇器|強大的獨立日期選擇器(date picker)插件
fullcalendar|http://fullcalendar.io
fullcalendar日曆控制項知識點集合 |fullcalendar日曆控制項知識點集合
中文api|http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html
農曆日曆|GitHub - zzyss86/LunarCalendar: 農曆（陰曆）萬年曆，是一款支持Node.js和瀏覽器端使用的全功能農曆和公曆日曆類庫。支持農曆與公曆之間相互轉換，含有二十四節氣，天干地支紀年紀月紀日，生肖屬相，公曆節假日及農曆傳統節假日信息等功能。自帶2013-2014節假日安排數據，並可自行配置。帶有黃曆數據，可自行選擇配置。支持1891-2100年。
超酷的仿百度帶節日日曆老黃曆控制項|超酷的仿百度帶節日日曆老黃曆控制項免費下載
日期格式化|Moment.js | Home
大牛日曆控制項|https://github.com/Johnqing/QPAYCalendar
我群某管理作品|GitHub - Iamlars/dateMarker: 簽到日曆
input按位替換-官網|digitalbush
input按位替換-github|GitHub - digitalBush/jquery.maskedinput at 1.2.2
bootstrap-daterangepicker|GitHub - dangrossman/bootstrap-daterangepicker: Date range picker component for Bootstrap
國外30個插件集合|30 Best Free Calendar Datepicker jQuery Plugins
JavaScript datepicker|Pikaday: JavaScript datepicker
Datepair.js|Datepair.js
一個風格多樣的日曆|GitHub - glad/glDatePicker: An ultra-simple, customizable, light-weight date picker plug-in for jQuery
彈出層式的全日曆|Date picker a€「 pickadate.js
jquery雙日曆|Date Range Picker for Bootstrap

移動 | 地址
--- | ---
大氣實用jQuery手機移動端日曆日期選擇插件|http://www.frankdemo.cn/index.php?c=contenta=showid=115
jQuery Mobile 移動開發中的日期插件Mobiscroll |Mobiscroll: Customizable HTML5 UI components for mobile web and hybrid apps

Date library | 地址
--- | ---
Datejs|GitHub - datejs/Datejs: A JavaScript Date and Time Library
sugarjs|API Documentation

綜合效果搜索平台 | 地址
--- | ---
效果網|jQuery插件庫-收集最全最新最好的jQuery插件
17素材|中國素材網站_素材中國psd_素材天下psd_素材天下
常用的JavaScript代碼片段|Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!

概述 | 地址
--- | ---
前端工具大全|Awesomes - 前端資源庫
什麼是前端工程化|前端工程——基礎篇 · Issue #10 · fouber/blog · GitHub

Gulp | 地址
--- | ---
Gulp官網|gulp.js - the streaming build system
Gulp中文網|gulp.js - 基於流的自動化構建工具。
gulp資料收集|GitHub - Platform-CUF/use-gulp: gulp資料收集
Gulp：任務自動管理工具 - ruanyifeng|Gulp：任務自動管理工具 -- JavaScript 標準參考教程（alpha）
Gulp插件|gulp.js plugin registry
Gulp不完全入門教程|Gulp不完全入門教程
為什麼使用gulp?|2015-5-30 使用gulp · Issue #33 · hjzheng/CUF_meeting_knowledge_share · GitHub
Gulp安裝及配合組件構建前端開發一體化|Gulp安裝及配合組件構建前端開發一體化
Gulp 入門指南|GitHub - nimojs/gulp-book: Gulp 入門指南
Gulp 入門指南 - nimojs|《Gulp 入門指南》
Gulp入門教程|Gulp入門教程
Gulp in Action|gulp-in-action（一）
Gulp開發教程（翻譯）|Gulp開發教程（翻譯）
前端構建工具gulpjs的使用介紹及技巧|前端構建工具gulpjs的使用介紹及技巧

Grunt | 地址
--- | ---
gruntjs|Grunt: The JavaScript Task Runner
Grunt中文網|Grunt: JavaScript世界的構建工具 -- Grunt中文網

Fis | 地址
--- | ---
fis 官網|F.I.S -前端工具框架
fis|FIS3 - 前端工程構建工具

pc圖輪 | 地址
--- | ---
單屏輪播sochange|http://www.jsfoot.com/jquery/demo/2011-09-20/192.html
左右按鈕多圖切換|Examples | Responsive jQuery Slider
fullpage全屏輪播|GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

移動端 | 地址
--- | ---
無縫切換|GitHub - thebird/Swipe: Swipe is the most accurate touch slider.
滑屏效果|Swiper - Most Modern Mobile Touch Slider
全屏fullpage|GitHub - peunzhang/fullpage: For desktop(ie5.5+) or mobile webApp without jQuery,create full screen pages fast and simple.
單個圖片切換|GitHub - qiqiboy/touchslider: TouchSlider是一個輕量級的javascript組件，設計的目的是提供一個可以方便實現全平台（PC及移動端觸摸界面）的幻燈slider效果。
單個全屏切換|GitHub - peunzhang/slip.js: 移動端跟隨手指滑動組件，零依賴。
百度的切換庫|Touch.js Examples
單個全屏切換|GitHub - peunzhang/iSlider: Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App
滑屏效果|GitHub - saw/touch-interfaces: Building Touch Interfaces with HTML5
旋轉拖動設置|Tiny Circleslider: A lightweight cross browser circular carousel.
類似於swipe切換|TouchSlider a€」 JavaScript slide content
支持多種形式的觸摸滑動|Swiper演示 - Swiper中文網
滑屏效果|main/index.html at master · joker-ye/main · GitHub
大話主席pc移動圖片輪換|SuperSlide | TouchSlide 官方網站 大話主席
滑屏效果|GitHub - hahnzhu/parallax.js: 滾動視差效果封裝，便於快速調用實現
基於zepto的fullpage|GitHub - yanhaijing/zepto.fullpage: 專註於移動端的fullPage.js
[WebApp]定寬網頁設計下，固定寬度布局開發WebApp並實現多終端下WebApp布局自適應|博客園 - 開發者的網上家園
/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html
判斷微信客戶端的那些坑|判斷微信客戶端的那些坑
可以通過javascript直接調用原生分享的工具|GitHub - JefferyWang/nativeShare.js: 一個在手機網頁端可以直接調用原生分享的js
JiaThis 分享到微信代碼|分享到微信代碼
聊聊移動端跨平台開發的各種技術|聊聊移動端跨平台開發的各種技術
前端自動化測試|如何進行前端自動化測試？ - 前端開發
多種輪換圖片|NiceSlider - A Lightweight Touch Slider
滑動側邊欄|Slideout.js - A touch slideout navigation menu for your mobile web apps.

文件上傳 | 地址
--- | ---
百度上傳組件|Web Uploader
上傳|jQuery File Upload Demo
flash 頭像上傳|flash上傳頭像剪裁預覽組件
圖片上傳預覽|Dropzone.js
圖片裁剪|http://elemefe.github.io/image-cropper
圖片裁剪-shearphoto|ShearPhoto官方主頁
jQuery圖片處理|jQuery圖像處理

模擬select | 地址
--- | ---
糖餅 select|selectbox
flexselect|GitHub - rmm5t/jquery-flexselect: A jQuery plugin that turns regular select boxes into Quicksilver-like, flex-matching, incremental-finding controls.
雙select|jQuery multiselect
select2|Select2 - The jQuery replacement for select boxes

取色插件 | 地址
--- | ---
類似 Photoshop 的界面取色插件|jQuery顏色選取器插件COLPICK
jquery color|GitHub - jquery/jquery-color: jQuery plugin for color manipulation and animation support.
取色插件集合|jQuery顏色選擇插件
farbtastic 圓環＋正方形|GitHub - mattfarina/farbtastic: jQuery Color Wheel

城市聯動 | 地址
--- | ---
jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果|第74款插件：jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果

剪貼板 | 地址
--- | ---
剪貼板|GitHub - zeroclipboard/zeroclipboard: The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
clipboard 最新的剪切方案|clipboard.js
不是Flash的剪貼板|GitHub - zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped

簡繁轉換 | 地址
--- | ---
簡繁轉換|GitHub - BYVoid/OpenCC: A project for conversion between Traditional and Simplified Chinese

表格 Grid | 地址
--- | ---
facebook表格|FixedDataTable
類似於Excel編輯表格-handsontable|The Excel-like front-end spreadsheet library for developers
bootstrap-table插件|Bootstrap Table
datatables|DataTables | Table plug-in for jQuery

在線演示 | 地址
--- | ---
js 在線編輯 - runjs|RunJS - 在線編輯、展示、分享、交流你的 JavaScript 代碼
js 在線編輯 - jsbin|JS Bin - Collaborative JavaScript Debugging
js 在線編輯 - codepen|CodePen - Front End Developer Playground Code Editor in the Browser
js 在線編輯 - jsfiddle|Create a new fiddle
java 在線編輯 - runjs|Ideone.com - Online Compiler and IDE &>&> C/C++, Java, PHP, Python, Perl and 40+ other compilers and interpreters
js 在線編輯 - hcharts|| highcharting online
js 在線編輯 - jsdm|JSDM
sql 在線編輯 - sqlfiddle|SQL Fiddle
mozilla 在線編輯器|Thimble by Mozilla

播放器 | 地址
--- | ---
Html5 VideoPlayer|GitHub - zmmbreeze/DeadSimpleVideoPlayer: Dead simple html5 Video player.

粒子動畫 | 地址
--- | ---
Proton 煙花|Proton

Nodejs | 地址
--- | ---
nodejs 篇幅比較巨大|http://liuqing.pw
Node.js 包教不包會|GitHub - alsotang/node-lessons: 《Node.js 包教不包會》
篇幅比較少|Nodejs 歸檔 - rainweb前端開發rainweb前端開發
node express 入門教程|前端網（W3Cfuns）
nodejs定時任務|http://my.oschina.net/u/568264/blog/193773
一個nodejs博客|http://60sky.com
【NodeJS 學習筆記04】新聞發布系統|【NodeJS 學習筆記04】新聞發布系統
過年7天樂，學nodejs 也快樂|過年7天樂，學nodejs 也快樂
七天學會NodeJS|GitHub - nqdeng/7-days-nodejs: 七天學會NodeJS
Nodejs學習筆記（二）--- 事件模塊|Nodejs學習筆記（二）--- 事件模塊
nodejs入門|Node.js入門 - M守護神
angularjs nodejs|GitHub - zensh/jsgen: JsGen is a next generation，free, open source web software that you can generate a powerful website, such as blog, forum, etc. It is coded by pure JavaScript, based on Node.js, AngularJS, MongoDB.
從零開始nodejs系列文章|從零開始nodejs系列文章
理解nodejs|Understanding node.js
nodejs事件輪詢|Understanding the node.js event loop
node入門|Node入門
nodejs cms|OurJS-免費開源的博客引擎，論壇系統，網站模板和輕量級的CMS
Node初學者入門，一本全面的NodeJS教程|Node初學者入門，一本全面的NodeJS教程
NodeJS的代碼調試和性能調優|NodeJS的代碼調試和性能調優

常規優化|地址
--- | ---
Javascript高性能動畫與頁面渲染|Javascript高性能動畫與頁面渲染
移動H5前端性能優化指南|騰訊ISUX – 社交用戶體驗設計
5173首頁前端性能優化實踐|http://ued.5173.com/?p=1731
給網頁設計師和前端開發者看的前端性能優化|給網頁設計師和前端開發者看的前端性能優化
複雜應用的 CSS 性能分析和優化建議|複雜應用的 CSS 性能分析和優化建議
張鑫旭——前端性能|前端性能 ? 張鑫旭
前端性能監控總結|xiaoqiang.org
網站性能優化之CSS無圖片技術|http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7
%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF
web前端性能優化進階路|阿里巴巴（中國站）用戶體驗設計部博客
%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html
前端技術：網站性能優化之CSS無圖片技術|http://my.eoe.cn/tuwandou/archive/4544.html
瀏覽器的載入與頁面性能優化|首頁 - FEX
頁面載入中的圖片性能優化|首頁 - w3ctech
Hey——前端性能|前端性能 – Hey@feelcss
html優化|首頁 - FEX
99css——性能|http://www.99css.com/tag/%e6%80%a7%e8%83%bd
Yslow——性能優化|http://www.yslow.net/category.php?cid=20
YSLOW中文介紹|YSLOW 中文介紹
轉一篇Yahoo關於網站性能優化的文章，兼談本站要做的優化|轉一篇Yahoo關於網站性能優化的文章，兼談本站要做的優化
Yahoo!團隊實踐分享：網站性能|Yahoo!團隊實踐分享：網站性能優化的34條黃金守則（一）
網站性能優化指南：什麼使我們的網站變慢？|網站性能優化指南：什麼使我們的網站變慢？
網站性能優化實踐，減少載入時間，提高用戶體驗|網站性能優化實踐，減少載入時間，提高用戶體驗
淺談網站性能優化 前端篇|http://www.umtry.com/archives/747.html
前端重構實踐之如何對網站性能優化？|上海艾藝信息技術有限公司
前端性能優化：使用媒體查詢載入指定大小的背景圖片|前端性能優化：使用媒體查詢載入指定大小的背景圖片
網站性能系列博文|http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html
載入，不只是少一點點|載入，不只是少一點點-TGideas-騰訊遊戲官方設計團隊
前端性能的測試與優化|http://mzhou.me/article/95310
分享網頁載入速度優化的一些技巧？|分享網頁載入速度優化的一些技巧？
頁面載入中的圖片性能優化|HugeDomains.com
web前端優化(基於Yslow|創想信息網 - 創想工場
網站性能優化工具大全|https://www.qianduan.net/website-performance-optimization-tool.html
【高性能前端1】高性能HTML|【高性能前端1】高性能HTML
【高性能前端2】高性能CSS|【高性能前端2】高性能CSS
由12306談談網站前端性能和後端性能優化|由12306.cn談談網站性能技術
AlloyTeam——前端優化|http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96
毫秒必爭，前端網頁性能最佳實踐|毫秒必爭，前端網頁性能最佳實踐
網站性能工具Yslow的使用方法|網站性能工具Yslow的使用方法
前端工程與性能優化（上）：靜態資源版本更新與緩存|前端工程精粹（一）：靜態資源版本更新與緩存
前端工程與性能優化（下）：靜態資源管理與模板框架|前端工程精粹（二）：靜態資源管理與模板框架
HTTPS連接的前幾毫秒發生了什麼|HTTPS連接的前幾毫秒發生了什麼
Yslow|Yslow
Essential Web Performance Metrics — A Primer, Part
1|http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1
Essential Web Performance Metrics — Part 2|http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2
YUISlide,針對移動設備的動畫性能優化|拔赤的文章列表
Improving Site Performance|http://joelglovier.com/improving-site-performance
讓網站提速的最佳前端實踐|讓網站提速的最佳前端實踐
Why Website Speed is Important|Why Website Speed is Important
Need for Speed – How to Improve your Website
Performance|Need for Speed a€「 How to Improve your Website Performance
阿里無線前端性能優化指南 (Pt.1 載入期優化 |阿里無線前端性能優化指南 (Pt.1 載入期優化) · Issue #1 · amfe/article · GitHub

優化工具|地址
--- | ---
JavaScript 性能分析新工具 OneProfile|JavaScript 性能分析新工具 OneProfile
JavaScript 堆內存分析新工具 OneHeap|JavaScript 堆內存分析新工具 OneHeap

在線工具|地址
--- | ---
google在線工具|https://developers.google.com/speed/pagespeed/insights
阿里測|阿里測，專業的網站即時探測工具
阿里-免費測試服務|http://itest.aliyun.com
阿里-F2etest多瀏覽器兼容性測試解決方案|GitHub - alibaba/f2etest: F2etest是一個面向前端、測試、產品等崗位的多瀏覽器兼容性測試整體解決方案。
js性能測試|http://jsperf.com

前端架構|地址
--- | ---
技術架構|技術架構 - 熱門問答
前端架構|Saito - The Architecture of F2E
如何成為前端架構師|如何成為前端架構師？ - 前端開發
關於前端架構-張克軍|http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html
百度騰訊offer比較（騰訊遊戲VS百度基礎架構）|百度騰訊offer比較（騰訊遊戲VS百度基礎架構）？ - 職業選擇

推薦作品|地址
--- | ---
winter代碼片段需要翻牆|https://gist.github.com/wintercn
fgm|http://www.fgm.cc/learn
岑安作品集|GitHub - hongru/hongru.github.com: hongru.github.com
當耐特demo集合|http://kmdjs.github.io
米空格 js作品|http://www.laoshu133.com/Lab
myFocus|Koen"s Project
SeaJS組件庫|SeaJS 組件庫
顏海鏡作品|顏海鏡的項目
腳兒網作品|我的作品 分類
javascript個人作品|javascript個人作品
妙味的雷東升遊戲作品|【妙味課堂】我用 JavaScript 寫遊戲之 -- 雷東升作品集
javascript作品集|HTML5和Javascript作品與技術分享-CSDN論壇-CSDN.NET-中國最大的IT技術社區
雲五筆，灰度產生生成工具|GitHub - TooBug/works: 一些比較老的作品
項目主頁|Koen"s Project
個性的作品主頁|CSS3-html5?ú??2aê?
播放器|http://static.tingall.com/v2/player
ucren js demos 集|歷年來我的一些實驗性代碼
智能社|案例展示 | 智能社www.zhinengshe.com
實例陳列架|實例陳列架-陳列一些日常開發中的有意思的小實例
zoye demo|您訪問的網站不存在
王員外|攻城師的實驗室
平凡|平凡個人技術展示
jyg 遊戲案例|javascript JY官方網站
很多jquery插件|文章一覽表_Helloweba
不羈蟲 - soJs 作品系列|soJs API參考文檔
frozenui|移動端動效庫
黑白棋|javascript黑白棋人機博弈遊戲 版本:1.01
fromone|fromone | to be unique

國外大牛精品|地址
--- | ---
pazguille|http://pazguille.me

簡歷模板|地址
--- | ---
不錯的個人簡歷|胡俊卿的個人簡歷
簡歷|chmyun"s個人簡歷
張倫|您訪問的網站不存在
簡歷|GitHub - hacke2/ResumeSample: Resume template for Chinese programmers . 程序員簡歷模板系列。包括PHP程序員簡歷模板、iOS程序員簡歷模板、Android程序員簡歷模板、Web前端程序員簡歷模板、Java程序員簡歷模板、C/C++程序員簡歷模板、NodeJS程序員簡歷模板、架構師簡歷模板以及通用程序員簡歷模板
翁天信|我的個人網站是怎麼做出來的
動畫方式的簡歷|超級酷炫的HTML5互動式程序員求職簡歷
組件豐富簡歷|http://www.linqing07.com/resume.html
簡歷池|http://www.mojianli.com/resume/view
haorooms博客|關於 我
Justin Young|youngdze.com

面試題|地址
--- | ---
那幾個月在找工作（百度，網易遊戲）|那幾個月在找工作（百度，網易遊戲，華為）
2014最新面試題|2014年最新前端開發面試題
阿里前端面試題|前端網（W3Cfuns）
2016校招內推 -- 阿里巴巴前端 -- 三面面試經歷 |2016校招內推 -- 阿里巴巴前端 -- 四面面試經歷
騰訊面試題|前端網（W3Cfuns）
年後跳槽那點事：樂視+金山+360面試之行|年後跳槽那點事：樂視+金山+360面試之行
阿里前端面試題上線|http://fatesinger.com/2722.html
拉勾網js面試題|js 也來 - 【拉勾專場】拋棄簡歷！讓代碼說話！
前端面試|前端工作面試問題
Web開發筆試面試題 大全|點點網路 | 輕博客
前端開發面試題|前端開發面試題
2014最新前端面試題|My-blog/Front-end-Developer-Questions at master · markyun/My-blog · GitHub
百度面試|GitHub - fex-team/interview-questions: FEX 面試問題
面試題|前端網（W3Cfuns）
前端工作面試問題|https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese
前端開發面試題|前端開發面試題
5個經典的前端面試問題|5個經典的前端面試問題
最全前端面試問題及答案總結 |http://segmentfault.com/a/1190000002562454
如何面試一名前端開發工程師？|如何面試一名前端開發工程師？
史上最全 前端開發面試問題及答案整理|GitHub - hawx1993/Front-end-Interview-questions: 史上最全 前端開發面試問題及答案整理
前端實習生面試總結 |前端實習生面試總結
史上最全 前端開發面試問題及答案整理|GitHub - hawx1993/Front-end-Interview-questions: 史上最全 前端開發面試問題及答案整理
BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇|BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇
前端開發面試題大收集|GitHub - paddingme/Front-end-Web-Development-Interview-Question: 前端開發面試題大收集
收集的前端面試題和答案|GitHub - qiu-deqing/FE-interview: 收集的前端面試題和答案
如何面試前端工程師|如何面試前端工程師？ - 前端開發
前端開發面試題|My-blog/README.md at master · markyun/My-blog · GitHub
牛客網-筆試面經|討論區_百度阿里騰訊谷歌小米筆試面試分享

iconfont|地址
--- | ---
中文字體|中文字體有類似google fonts這樣的網站么？ - 字體設計
淘寶字型檔|Iconfont-阿里巴巴矢量圖標庫
字體|UX圖標字體庫
製作教程|Home
zhangxinxu-icommon|icomoon ? 搜索結果 ? 張鑫旭
icommon|IcoMoon App - Icon Font, SVG, PDF PNG Generator
用字體在網頁中畫ICON圖標(推薦教程|用字體在網頁中畫ICON圖標
字體壓縮工具|字蛛（FontSpider）

前端開發工具|地址
--- | ---
IntelliJ IDEA 簡體中文專題教程|GitHub - judasn/IntelliJ-IDEA-Tutorial: IntelliJ IDEA 簡體中文專題教程
Webstorm,InterllIdea,Phpstorm|http://t.cn/8kZZ1Uy
SublimeText|GitHub - jikeytang/sublime-text: sublime-text
Atom|Atom
visual studio code|Visual Studio Code

Fiddler|地址
--- | ---
Fiddler調式使用知多少(一深入研究|Fiddler調式使用知多少(一)深入研究
微信fiddle|移動開發中Fiddler的那些事兒
微信fiddle|[微信開發利器]微信內移動前端開發抓包調試工具fiddler使用教程

Chrome|地址
--- | ---
Google Chrome 官方|https://developer.chrome.com/devtools
Chrome - 基礎|Chrome開發者工具不完全指南（一、基礎功能篇）
Chrome - 進階|Chrome開發者工具不完全指南（二、進階篇）
Chrome - 性能|Chrome開發者工具不完全指南：（三、性能篇）
Chrome - 性能進階|Chrome開發者工具不完全指南（四、性能進階篇）
Chrome - 移動|Chrome開發者工具不完全指南（五、移動篇）
Chrome - 使用技巧|chrome使用技巧（看了定不讓你失望）
Chrome - Console控制台不完全指南|Chrome 控制台不完全指南
Chrome - Workspace使瀏覽器變成IDE|通過 Chrome Workspace 調試本地項目
network面板|分析chrome中的network面板
chrome開發工具快捷鍵|Chrome Devtools Cheatsheet
chrome調試工具常用功能整理|chrome調試工具常用功能整理
Chrome 開發工具 Workspace 使用|Chrome 開發工具 Workspace 使用
Chrome神器Vimium快捷鍵學習記錄 |Chrome神器Vimium快捷鍵學習記錄
sass調試-w3cplus|sass調試
如何更專業的使用Chrome開發者工具-w3cplus|如何更專業的使用Chrome開發者工具_tools 教程_w3cplus
chrome調試canvas|使用Chrome開發工具調試Canvas
chrome profiles1|https://developer.chrome.com/devtools/index
chrome profiles2|http://h5dev.uc.cn/article-25-1.html
chrome profiles3|使用Chrome DevTools的Timeline和Profiles提高Web應用程序的性能
chrome移動版調試|https://developer.chrome.com/devtools/docs/mobile-emulation
chrome調試|對不起，您訪問的頁面不存在！
chrome的調試|作為Web開發人員，我為什麼喜歡Google Chrome瀏覽器
chrome console 命令詳解|https://developer.chrome.com/devtools/docs/commandline-api
查看事件綁定1|http://www.cnblogs.com/leonkao/p/3809655.html
查看事件綁定2|查看html元素綁定的事件與方法的利器
神器——Chrome開發者工具(一|神器——Chrome開發者工具(一)
奇趣百科性能優化(Chrome DevTools 中的 Timeline Profils 等工具使用介紹|https://xinranliu.me/2015-05-22-qiqu-performance
chrome 開發者工具的 15 個小技巧|chrome 開發者工具的 15 個小技巧
Chrome開發者工具不完全指南|Chrome開發者工具不完全指南
Chrome 開發者工具使用技巧|Chrome 開發者工具使用技巧

Firebug|地址
--- | ---
firebug視頻教程|WEB調試工具---Firebug_技術學習教程
firefox 模擬器|WebIDE - Firefox 開發工具
console.log 命令詳解|http://www.cnblogs.com/ctriphire/p/4116207.html
Firebug入門指南|Firebug入門指南
Firebug控制台詳解|Firebug控制台詳解

移動,微信調試|地址
--- | ---
瀏覽器端調試安卓|STF | Smartphone Test Farm
移動端前端開發調試|移動端前端開發調試
使用 Chrome 遠程調試 Android
設備|https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-
debugging/md/Use-Tools/remote-debugging.md
mac移動端調試|UC瀏覽器開發者版
mac移動端調試|MIHTool - iOS Web Debugger Pro
無線調試攻略|無線調試攻略
無線調試攻略|如何調試移動端網頁
屌爆了,完美調試 微信webview(x5|屌爆了,完美調試 微信webview(x5)
微信調試的那些事|微信調試的那些事 // 曉風博客
遠程console|JavaScript console
微信調試工具|微信調試工具
各種真機遠程調試方法匯總|GitHub - jieyou/remote_inspect_web_on_real_device: 各種真機遠程調試方法匯總——「真機遠程調試」（remote inspect web on real device），是指用桌面電腦（PC或MAC）遠程連接上移動設備，通過類似Chrome瀏覽器開發人員工具的界面，來調試移動設備上運行的網頁

iOS Simulator|地址
--- | ---
Simulator|https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Xcode中的iOS模擬器(iOS Simulator的介紹和使用心得|【整理】Xcode中的iOS模擬器(iOS Simulator)的介紹和使用心得

img|地址
--- | ---
loading img|Preloaders.net
智圖-圖片優化平台|智圖_圖片壓縮在線工具
在線png優化|TinyPNG a€「 Compress PNG images while preserving transparency

生成二維碼|地址
--- | ---
生成二維碼|草料二維碼生成器

瀏覽器同步|地址
--- | ---
puer|GitHub - leeluolee/puer: more than a live-reload server, built for efficient frontend development
liveReload|LiveReload
f5|Web開發免刷新工具
File Watchers|如何為WebStorm設置SASS的File Watchers？

在線PPT製作|地址
--- | ---
nodePPT|推薦nodeppt：使用markdown語法來寫網頁ppt
PPT|GitHub - ksky521/nodePPT: This is probably the best web presentation tool so far!
reveal|GitHub - hakimel/reveal.js: The HTML Presentation Framework
slippy|GitHub - Seldaek/slippy: HTML Presentations

前端導航網站|地址
--- | ---
界面清爽的前端導航|http://uxbees.com/index.html
前端導航|前端網址導航
前端網址導航|前端網址導航_大前端
前端名錄|前端圈 - 江湖錄
前端導航|前端導航站 - 前端工程師專用的導航站
前端開發資源|前端開發資源導航
網址導航|http://www.haourl.cn
前端開發倉庫 - 眾多效果的收集地|前端開發倉庫
前端資源導航|GitHub - jnoodle/f2e-collect: 前端開發相關的社區、網站、博客、資源等搜集
F2E 前端導航|F2E 前端導航

常用CDN|地址
--- | ---
新浪CDN|http://lib.sinaapp.com
百度靜態資源公共庫|百度靜態資源公共庫
360網站衛士常用前端公共庫CDN服務|360網站衛士常用前端公共庫CDN服務
Bootstrap中文網開源項目免費 CDN 服務|Bootstrap中文網開源項目免費 CDN 服務
開放靜態文件 CDN - 七牛|開放靜態文件 CDN
CDN加速 - jq22|jQuery cdn加速
jQuery CDN|jQuery CDN
Google jQuery CDN|http://www.google-jquery-cdn.com
微軟CDN|Microsoft Ajax Content Delivery Network

Git|地址
--- | ---
git-scm|Git
廖雪峰-Git教程|Git教程 - 廖雪峰的官方網站
git-for-windows|Git for Windows
GitHub 添加 SSH keys|GitHub 添加 SSH keys
gogithub|GotGitHub — GotGitHub
git常規命令練習|Learn Git Branching
git的資料整理|GitHub - xirong/my-git: Individual collecting material of learning git（有關 git 的學習資料）
我所記錄的git命令（非常實用）|我所記錄的git命令（非常實用）
企業開發git工作流模式探索部分休整|my-git/git-workflow-tutorial.md at master · xirong/my-git · GitHub
GitHub 漫遊指南|GitHub - phodal/github-roam: GitHub 漫遊指南
GitHub秘籍|github-cheat-sheet/README.zh-cn.md at master · tiimgreen/github-cheat-sheet · GitHub
使用git和github進行協同開發流程|http://livoras.com/post/28
動畫方式練習git|Explain Git with D3

優秀JavaScript項目 | 地址
--- | ---
Angular和Webpack種子文件|GitHub - AngularClass/angular2-webpack-starter: An Angular 2 Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod), Material Design, Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Codelyzer, Hot Module Replacement, Typings, and Webpack by @AngularClass
Fis3面向前端的工程構建系統|GitHub - fex-team/fis3: FIS3
Fis3 DEMO|GitHub - fex-team/fis3-demo: fis3 demo
前端JQuery系列:源碼剖析|GitHub - JsAaron/jQuery: 前端JQuery系列
avalon框架|GitHub - RubyLouvre/avalon: an elegant efficient express mvvm framework
Microsoft ChakraCore 微軟的Chakra引擎|GitHub - Microsoft/ChakraCore: ChakraCore is the core part of the Chakra Javascript engine that powers Microsoft Edge
Quintus HTML遊戲引擎|GitHub - cykod/Quintus: HTML5 Game Engine
一個用node.js搭建的有趣博客|GitHub - STRML/strml.net: STRML: Projects Work
Web前端助手--FeHelper（Chrome擴展）|GitHub - zxlie/FeHelper: Web前端助手--FeHelper（Chrome擴展）
百度前端技術學院|GitHub - baidu-ife/ife: Baidu Institute of Front
Cheerio（node.js中的jQuery）|GitHub - cheeriojs/cheerio: Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
nodejs的一個聊天軟體 類似微信|GitHub - BryanYang/freechat: nodejs 的一個聊天軟體，類似微信。
使用html5和node.js構建的網易雲音樂|GitHub - stkevintan/Cube: A cross-platform web music player in nw.js
babel ES6轉換為ES5|GitHub - babel/babel: Babel is a compiler for writing next generation JavaScript.
一個JS富文本編輯器|GitHub - fex-team/ueditor: rich text 富文本編輯器
一個JS腦圖可視化工具|GitHub - fex-team/kityminder-core: 強大的腦圖可視化工具
一個JS寫的Flappy Bird Game|GitHub - ellisonleao/clumsy-bird: A MelonJS port of the famous Flappy Bird Game
一個JS寫的GBA模擬器|GitHub - taisel/IodineGBA: JavaScript GameBoy Advance emulator.
SegmentFault寫的Markdown解析器|GitHub - SegmentFault/HyperDown.js
基於node.js的Ghost博客|GitHub - TryGhost/Ghost: Just a blogging platform
學習react的demos|GitHub - ruanyf/react-demos: a collection of simple demos of React.js

關於我：路人甲
程序員的專欄：IT人不懂安全怎麼行 - 知乎專欄

首先你已經不是零基礎了。

其實這種事情沒有什麼捷徑，親自動手，一步一步來即可，不能好高騖遠。

Step 1: 用 HTML + CSS 模仿幾個漂亮的靜態頁面。當你看到現在大部分的網頁都覺得能大概猜到怎樣做，並且花時間真的能做出來的時候，即可進入下一步。注意，這個時候請你不要管瀏覽器兼容性或者太過注意代碼的優雅結構，因為沒必要。做到能兼容現代瀏覽器，內容和樣式基本完全分離即可。這大概需要半個月到一個月的學習時間。

Step 2: 用 HTML + CSS + JS 寫幾個有交互的頁面。例如，你可以寫一個漂亮的註冊頁面，它能夠驗證各種輸入是否符合條件並且有一個用原生 JS 實現的日期選擇器（Date Picker）。或者，寫一個漂亮的，有動畫的相冊。注意，這個階段請使用原生 JavaScript。同樣的，兼容現代瀏覽器即可。這大概需要半個月的學習時間。

Step 3: 入門一門後端語言。按照你的情況，就 php 吧。有了上面的經驗，php 入門之後，相信你能夠做一個漂亮的無用戶留言版了。請把數據存貯在文件中，因為你還沒有學習 SQL 嘛。這大概需要半個月的時間，如果你學習能力強，一個星期也不是沒有可能。

Step 4: 入門一個關係資料庫。比如說 MySQL。DDL 和 CRUD ，請一定要熟練。恩，這個階段不要談什麼優化，那是扯淡。現在，你大概可以做一個多用戶的博客程序了。這大概需要半個月的時間。

你看，兩個半月不到你就可以成為一個初級的 Web 開發者了。博客做好之後，你可以嘗試造更多的輪子。比如：帶簡單的用戶許可權的論壇程序、簡單的記賬工具，等等，做你喜歡做的任何小程序都行。在這個過程中，你會變成一個熟練的初級程序員，或者，你為了偷懶，會學會 jQuery，Smarty 等框架。

有一天，你發現你靠寫小程序提高不了水平了。接下來就要學習真正的乾貨了。

  • 學習 C 語言。別問我為什麼，我就是覺得一個程序員應該要學過 C 語言，牛逼不牛逼是另外一會事兒，況且很多書都是用的 C 語言描述。別光學語法，弄清編譯是什麼，鏈接是什麼，指針是又怎麼一會事兒。
  • 學習數據結構和簡單的演算法。你看，你學完 C 語言就能學數據結構和演算法了，我難以想像用 php 來描述數據結構和演算法會有多麼地奇怪。如果你覺得學了之後還是不知道數據結構究竟是什麼，有什麼用，那證明你還沒有真的學到。
  • 學習一門面向對象的靜態編程語言。推薦 Java。學得有多好，就看你花了多少時間了。請務必仔細閱讀各類相關書籍，深刻領會面向對象的重要編程思想（不過，切忌迷信面向對象編程）。
  • 學習操作系統和計算機網路。至少一些基本的概念需要弄清楚，具體的細節，沒有必要過於糾結。

Okay...以上都可劃為「不求甚解」的階段，接下來就可以選一個方向（前端，或者後端）「求甚解」了。在「求甚解」的階段里，我這裡就不細說了，也沒法兒細說，並且你到了這個階段，一般是不需要別人告訴你需要學什麼了。所以，我只說在進入這個階段之前，或者剛剛進入這個階段時，最好去做的一些事情：

  • 看書或文檔拋棄中文譯本，藉助各種工具閱讀英文原版。
  • 學習使用 Unix-like 系統。
  • 學會提問[1]。
  • 訂閱科技博客，了解業界正在發生什麼事情。

Happy hacking！

[1] 提問的智慧：http://www.wapm.cn/smart-questions/smart-questions-zh.html

獻上我寫的《GitHub - phodal/growth-ebook: Growth: 全棧增長工程師指南。Growth: Learning Full Stack》

電子書放在GitHub上，遇到錯別字等內容歡迎來Pull Request。

  • Growth: 全棧增長工程師指南
    • 全棧工程師是未來
      • 技術的革新史
      • 軟體開發的核心難題：溝通
      • 大公司的專家與小公司的全棧
      • 全棧工程師的未來：無棧
  • 基礎知識篇
    • 工具只是輔助
      • WebStorm還是Sublime?
      • 語言也是一種工具
    • 提高效率的工具
      • 快速啟動軟體
      • IDE
      • DEBUG工具
      • 終端或命令提示符
      • 包管理
    • 環境搭建
      • OS X
      • Windows
      • GNU/Linux
    • 學好一門語言的藝術
      • 一次語言學習體驗
      • 輸出是最好的輸入
      • 如何應用一門新的技術
    • Web編程基礎
      • 從瀏覽器到伺服器
      • 從HTML到頁面顯示
    • HTML
      • hello,world
      • 中文？
      • 其他html標記
      • 小結
    • CSS
      • 簡介
      • 樣式與目標
      • 選擇器
      • 更有趣的CSS
    • JavaScript
      • hello,world
      • JavaScriptFul
      • 面向對象
      • 其他
  • 前端與後台
    • 後台語言選擇
      • JavaScript
      • Python
      • Java
      • PHP
      • 其他
    • MVC
      • Model
      • View
      • Controller
      • 更多
    • 後台即服務
      • API演進史
      • 後台即服務
    • 數據持久化
      • 文件存儲
      • 資料庫
      • 搜索引擎
    • 前端框架選擇
      • Angular
      • React
      • Vue
      • jQuery系
    • 前台與後台交互
      • Ajax
      • JSON
      • WebSocket
  • 編碼
    • 編碼過程
    • Web應用的構建系統
      • Web應用的構建過程
      • Web應用的構建實戰
    • Git與版本控制
      • 版本控制
      • Git
    • Tasking
      • 如何Tasking一本書
      • Tasking開發任務
    • 寫代碼只是在碼字
    • 如何編寫測試
      • 測試金字塔
      • 如何測試
    • 測試替身
      • Stub
      • Mock
    • 測試驅動開發
      • 紅-綠-重構
      • 測試先行
    • 可讀的代碼
      • 命名
      • 函數長度
      • 重複代碼
    • 代碼重構
      • 重命名
      • 提取變數
      • 提煉函數
    • Intellij Idea重構
      • 提煉函數
      • 內聯函數
      • 查詢取代臨時變數
    • 重構到設計模式
      • 過度設計與設計模式
  • 上線
    • 容器
      • Web容器
      • 應用容器
    • Docker
    • LNMP架構
      • Linux
      • HTTP伺服器
    • 代理伺服器
    • Web緩存
      • 資料庫端緩存
      • 應用層緩存
      • 前端緩存
      • 客戶端緩存
      • HTML5 離線緩存
    • 可配置
    • Toggle
      • PropertyPlaceHolder
    • 自動化部署
  • 數據分析
    • 數據分析
      • 數據分析的過程
    • Google Analytics
      • 受眾群體
      • 流量獲取
      • 移動應用
    • SEO
      • 爬蟲與索引
      • 什麼樣的網站需要SEO？
      • SEO基礎知識
      • 內容
    • Hadoop分析數據
      • 數據源
      • 數據分析
      • 學習
    • UX
      • 什麼是UX
    • UX入門
      • 什麼是簡單？
      • 進階
      • 用戶體驗要素
    • 認知設計
  • 持續交付
    • 持續集成
      • 前提條件
      • 瀑布流式開發
      • 小步前進
    • 持續交付
      • 配置管理
      • 持續集成
      • 測試
      • 構建與部署
      • 自動化
  • 遺留系統與修改代碼
    • 遺留代碼
      • 什麼是遺留代碼
      • 遺留代碼的來源
      • 遺留代碼的問題
    • 如何修改代碼
    • 網站重構
      • 速度優化
      • 功能加強
      • 模塊重構
  • 回顧與架構設計
    • 自我總結
      • 吾日三省吾身
    • Retro
      • Well
      • Less Well
      • Suggestion
      • Action
    • 浮現式設計
      • 意圖導向
      • 重構
      • 模式與演進
    • 架構模式
      • 預設計式架構
      • 演進式架構
    • 每個人都是架構師
      • 如何構建一個博客系統
      • 相關閱讀資料
    • 架構解耦
      • MVC
      • CQRS
      • 高級CQRS

對這本書有興趣的，求個微信公眾號(Phodal)關注~

http://weixin.qq.com/r/mnVYQHrEVicprT4j9yCI (二維碼自動識別)

幫不了題主太多，但是路過推薦些資源：學習網站導航 一個專門收集高質量國內外學習網站的小眾站點。

************另附學霸養成學習榜單(不謝，可以點個贊嘛~(≧▽≦)/~)************
一、匯總榜單：

  1. 公開課_學習網站導航

    收錄了網易、多貝、傳課等眾多公開課學習網站

  2. 大學生常用_學習網站導航收錄了外語學習、就業、實習、考研等眾多大學生相關的學習網站
  3. IT互聯網_學習網站導航收錄了IT、程序員、web開發、移動開發等眾多互聯網相關的學習網站
  4. IT職業技能_學習網站導航收錄了產品經理、UI設計師、前端、網路安全等互聯網職業技能提升網站
  5. 其他網站收錄

    收錄了一些稀奇古怪的網站、音樂電台、工具應用、大雜燴

二、適合大學生的：

  1. 外語學習提供了英語學習的相關網站
  2. 就業 | 實習提供了大學生就業、實習相關的學習網站
  3. 考研提供了考研相關的學習網站
  4. 國外學習網站收集國外眾多優質學習網站，首先。。你得會英文(⊙o⊙)…
  5. 科研|文檔|資料

    學霸過來吧~找論文利索~

三、IT互聯網相關的：

  1. IT互聯網IT互聯網學習相關網站
  2. IT程序員IT程序員學習相關網站
  3. IT移動開發IT移動開發學習相關網站
  4. web開發web開發學習相關網站
  5. IT培訓機構

    這些培訓機構上可以找到一部分免費的教程

四、IT職業技能相關網站：

  1. 產品經理網站導航N多產品經理學習入門學習網站
  2. UI設計師學習網站導航N多UI設計師入門學習網站
  3. WEB前端學習網站導航N多前端初學者學習入門的網站
  4. 黑客|網路安全學習網站導航N多黑客入門安全攻防學習資料
  5. 科技媒體網站導航

    了解互聯網圈內動態，培養互聯網思維~

五、其他：

  1. 稀奇古怪的網站不少都是很有意思的，不要錯過~
  2. 稀奇古怪工具有些工具可是神器哦~
  3. 益智訓練專治大腦生鏽！
  4. 舞蹈|藝術妹子可以看看
  5. 谷歌代理訪問國外網站學習的利器，提供N多代理
  6. 音樂電台N多高質量音樂網站，觸動心靈的音符！
  7. 影視動畫|遊戲策劃
  8. 電影|動漫
  9. 旅遊|攝影|體育|戶外
  10. 創意|生活有意思

麻煩點個贊好嘛！

可以參考我的一個回答 Web前端的路該怎麼走？ - 若愚的回答


入門者的知識體系包括哪些東西呢，下面是我的個人看法，按照這個流程走不一定立刻成為大牛，至少能讓入門者抓住重點一步步走下去：

1. 基本工具使用
Git/GitHub的熟練使用，編輯器(sublime、webstrom、atom、vscode)的體驗區分與使用，chrome開發調試工具的使用，Photoshop的簡單使用，翻牆軟體、筆記工具、流程圖工具、思維導圖工具的了解使用


2. 靜態頁面功底
doctype、亂碼、meta、字體原理、字體圖標、常見標籤的用法、HTML書寫規範、CSS選擇器使用及權重、CSS常見樣式的寫法、雪碧圖、inline-block特性與使用、line-height與vertical-align用法、盒模型種類、浮動的特性與應用(兩欄三欄布局)、清除浮動clearfix、BFC、定位的特性與使用場景、z-index、浮動與負邊距的應用(聖杯布局雙飛翼布局)、常見的CSS Hack、邊框＋偽元素＋定位的應用(做三角、tooltip、繪製簡單的效果)、CSS編碼規範等。
掌握這些功底後力量上你可以用合理規範的方式寫出任何你看的到的靜態頁面，你有底氣把自己寫的HTML CSS代碼拿給任何一個大牛來評判，給你一個頁面你會無視效果直接審查元素指出源碼中的不足並提出改進意見。


3. JS與JQuery功底
頁面渲染基本原理、白屏與FOUC、數據類型與類型轉換、引用類型與基礎類型的區別、深淺拷貝、聲明前置、函數聲明與函數表達式、字元串的各種操作、正則的各種操作、貪婪模式與非貪婪模式、日期數學函數各種操作、作用域與作用域鏈的概念與應用、閉包的概念與應用、IIFE的封裝性、setTimeout相關概念、事件冒泡捕獲機制、綁定事件的兼容性封裝、事件代理、ajax的原理與封裝、跨域的幾種方式與實現、jsonp的封裝、原生js實現常見效果的實現（懶載入、點擊載入、回到頂部、導航條、Dialog、Tab等）、jquery的語法與使用、jquery實現各種常見效果（懶載入、點擊載入、回到頂部、導航條、Modal模態框、Tab切換、各種輪播、瀑布流布局、木桶布局、懶載入＋ajax＋瀑布流的使用等）

做了這些後，你會對代碼的規範性和美感有一定的認識，會以寫出精簡、好看、復用性高的代碼為目標而不是以實現效果為目標。分析、拆解未知問題的能力有所提高，習慣於使用google搜索文檔並掌握一些搜索技巧、習慣看英文文檔、熟練使用調試工具定位錯誤解決問題，嘗試總結紀錄甚至分享心得。
到這裡，你的能力甚至能力超過一些所謂的一兩年甚至兩三年工作經驗的前端開發者。在交流群里慢慢的以準確、睿智的視角幫初學者解決問題。你開始發現代碼不管怎麼優化總是沒那麼滿意，你會為別人更優雅的解決方式嘆服抱怨自己太笨，你在空餘時間默默實現你在很久以前羨慕的效果，默默的開始美化自己的博客記錄心得，你開始覺得自己玩High了。對於找工作反而不急了。

4. JS進階
OOP的概念、構造函數創建對象的方式、原型與原型鏈（會畫圖）、繼承的寫法、功能模塊化的寫法、常見的設計模式（工廠、單例、發布訂閱）、面向對象的應用（輪播組件、Tab組件、曝光組件、日曆組件、Dialog組件等）、JQurey插件的封裝、JQuery核心源碼解讀、HTTPwebserver相關知識點、CMDAMD規範、模塊化寫法 (Requirejs或者webpack使用)、npm的使用、工程化概念與應用(gulp)、HTML5新功能、純CSS做一些有意思的特效和動畫(如按鈕、漸變特效、loading、CSS3輪播、3D輪播等)、響應式的應用(寫一個bootstrap的柵格系統)、CSS預處理等

到這裡之後，基本功已經很牢靠了，可以去看node教程、去看ES6語法、去嘗試用express搭建個博客、去跑跑React Angular里的Demo，在一番體驗後你清楚的知道它們的應用場景與利弊之道哪些需要深入哪些需要了解。

在學的同時在去多關注些大牛博客前端社區（了解跟進新技術），需要找工作的可以多做做筆試面試題（查缺補漏），如果是應屆生需要抽空補一補數據結構演算法。網路上東西太多太雜，在自己有一定判斷力之後在去吸收些精華，否則很容易陷入迷茫不知道如何入手。那些所謂的讓人眼花繚亂的新技術在基礎紮實的前提下很容易快速介入，不要捨本逐末，丟了西瓜撿芝麻。

關於看書
在無人指導的情況下，看書是一種學習途徑。比如《JS高級程序設計》《權威指南》是前端開發者必看書籍。但對於入門的同學來說看著費勁很難看懂、而且太枯燥很難堅持下去。我的建議是好的書籍是學習的補充，在有一定積累後可以把書作為查漏補缺的工具，平時偶爾翻一翻，對知識點不是很清楚可以針對性翻一翻。書是買來看的，不是找心理安慰的，一本一本買，一本一本看。對不喜歡看書的同學，也不要盲目跟風強迫自己做不喜歡的事失去了對前端的樂趣

關於入門學習資料
學習資料和看書一樣，不要上去就收集一大堆自己永遠都不會在看第二眼的資料（雖然裡面有很多精華）。 HTML CSS可以從MDN看起CSS | MDN ，javascript可以看看阮老師的 javascript 教程 JavaScript 標準參考教程（alpha） -- JavaScript 標準參考教程（alpha） ，也可以參考我上課的課件 課件/項目 。 在學習的時候 心裡一定有個知識體系脈絡圖，參考我上面寫的知識體系。一個知識點一個知識點的去學習去查找，如果這個資料沒有在去google下一個資料，這個時候很多大牛的博客很多推薦資料才真的對你有價值，不至於自己在一些無關緊要的地方浪費大量時間和精力而不自知。

關於社區
學累了、學煩了可以逛逛社區，把社區當作茶餘飯後的點心，不要當主食

  • 飢人谷學員博客
    • 從第一篇開始翻閱，看零基礎如何學前端
  • stackoverflow
    • 國外技術問答社區，一般在遇到問題 google 該問題的英文關鍵字，可在該網站找到答案
  • 阮一峰的 JavaScript 教程阮一峰的 ES6 教程
    • 學習 JavaScript 必看, ES6 入門學習必備
  • 百度前端技術博客
    • 跟進新技術，作為茶餘飯後的點心
  • 騰訊前端技術博客
    • 跟進新技術，作為茶餘飯後的點心
  • 360團隊
    • 偶爾可翻閱
  • div.io
    • 精品文章的彙集，不適合新手
  • w3cplus
    • HTML5 CSS3 相關的知識可以翻閱
  • 張鑫旭的博客
    • CSS講的不錯
  • 知乎
    • 搜索 "知乎 知識點"
張帥的回答令我明確了很多東西，寫了一篇文章總結了盒子模型，流動，block，inline，層疊，樣式優先順序，等概念
有興趣的同學歡迎閱讀指正
http://my.oschina.net/proloki/blog/99457

對於你說的 「圖片等素材是很是欠缺的。」我覺得這個不是阻礙。
不必去精通PS，現在的網頁除了那種設計感強的宣傳頁，其實對圖片的要求並不高，需要的時候用用PS就OK了，要求高的可以交給專業美工。
但是對於設計理論，配色排版知識等還是有必要去深入學習，多看看國外優秀設計，上上花瓣之類的網站。所以希望你不要閉門造車，還是去牽一根網線吧。

框架了解即可，只要你熟悉了js，框架什麼的上手還不簡單？框架屏蔽簡化了很多東西，比如ajax的實現原理，建議去深入下，這部分涉及到的東西比較重要。學習還是要把基礎打好。我就見過很多用jQuery的人，基本原理都搞不清楚，脫離框架連選擇元素都不會，這樣自然是不可取的。
面向對象這一塊，對於沒有面向對象語言實戰基礎的人來說是不知道怎麼去學。這個就可以去學別人的庫，看別人是怎麼使用面向對象的，了解這樣的好處，然後自己模仿模仿。
一定要善用開發者工具。firefox的firebug和Chrome的F12都是很好的選擇，用好了這個必會發現他帶給你的幫助比看一本書更多。你把firebug摸透了你還擔心對DOM理解不夠？
考慮到未來，html5和css3是必須學習的。

從基礎到精通列舉Web前端工程師的學習路線：

HTML5、CSS、JavaScript、JQuery、Ajax是Web前端工程師的核心技術，另外，作為一個合格的前端工程師還需要熟悉互聯網交互設計能力、熟悉後端伺服器運行環境和數據通信協議、掌握響應式布局框架、Bootstrap、AngularJS等最新的JS框架技術。

基礎：HTML,、CSS學習

主要學習HTML標籤、屬性和事件，學習使用CSS來控制網頁的樣式和布局。

基礎知識點：HTML 基本格式、文本、圖像、超鏈接、表格、列表、表單、框架等；

CSS 基礎語法、框模型與背景、文本格式化、表格、顯示與定位、動畫、過渡、2D/3D 轉換、CSS 優化等。

超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因此，Web前端工程師必須掌握HTML的基本結構和常用標記及屬性。

HTML 的學習是一個記憶和理解的過程，在學習過程中可以藉助Dreamweaver的「拆分」視圖輔助學習。在「設計」視圖中看效果，在「代碼」視圖中學本質， 將各種視圖的優勢發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味。

在學習了HTML之後，我們只是掌握了各種「原材料」的製作方法，要想蓋一幢樓房就還需要把這些「原材料」按照我們設計的方案組合布局在一起並進行一些樣式的美化。開始CSS學習。

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。

同時CSS中的盒子模型、相對布局、絕對布局等能夠實現對網頁中各對象的位置排版進行像素級的精確控制。通過此階段的學習，我們就可以順利完成「一幢樓房」的建設。

進階：Javascript，jQuery

做HTML5開發，主要使用JS語言，所以學習JS非常有必要，必要時還要學習一些JS庫。如jQuery。

基本知識點：JS語法、函數、DOM對象、事件處理等。

JQuery：語法、選擇器、JQuery HTML操作、jQuery CSS操作、事件、元素、特效、JQuery Traversing、JQuery常用Plug-in、JQuery擴展、JQuery Mobile

JavaScript是一種在客戶端廣泛使用的腳本語言，在JavaScript當中提供了一些內置函數、對象和DOM操作，藉助這些內容可以來實現一些客戶端的特效、驗證、交互等，使頁面看起來不那麼呆板。

JavaScript的兼容性和複雜性有時候的確讓人頭疼，還好有「大神」做了封裝。

jQuery 是一個免費、開源的輕量級的JavaScript庫，並且兼容各種瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了開發的時間，提高了開發速度，這也充分體現了其 write less,do more的核心宗旨。

高級：AJAX ，JSON ，XML

ajax是指一種創建互動式網頁應用的網頁開發技術，通過在後台與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。Ajax 的核心是 JavaScript 對象 XmlHttpRequest。

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，易於人閱讀和編寫，同時也易於機器解析和生成(網路傳輸速率)。

框架擴展學習：Bootstrap，jQuery UI，jQuery EasyUI ，jQuery Mobile

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，並且支持響應式布局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。

在項目開發過程中，我們可以藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發周期。

拓展：

10大H5、Js 3D遊戲引擎和框架

22款最佳JavaScript框架盤點

常用開發工具：Dreamweaver，Notepad++，Photoshop

10款Web程序員必備的在線CSS工具

Web前端工程師其他技術：

調試工具：Firebug

UI 交互設計：Photoshop設計工具、原型工具AP、互聯網UI交互設計理論

HTTP協議：伺服器端組件原理、HTTP請求（GET、POST、PUT、DELETE等）、HTTP響應、Cookie原理、Session原理、Restful協議

服務端：Java伺服器端技術簡介及Tomcat伺服器、PHP伺服器端技術簡介及Apache伺服器、.NET伺服器端技術簡介及IIS伺服器

響應式布局：使同一份代碼快速，有效適配手機，平板和PC設備。

Web前端技術剛入門時比較快，但想要精通在後續學習中速度則會降下來。因為前端工程師在工作中接觸面比較光，在知識體系上就有一定的廣度，但要成為一個有競爭力的工程師在核心技術上也要有深度，有時就牽涉到取捨的問題。另外，WEB前端技術日新月異，入了門想要有一定的發展就需要不斷的學習與調整。

附兩張Web前端工程師學習圖：

阿里云云棲社區，彙集阿里技術精粹，點此關注（文字鏈接地址：https://www.zhihu.com/org/a-li-yun-yun-qi-she-qu-48/activities）

在學習前端知識前小編建議先看看這條道路的職業建議，選擇一個職業就好比一個公司
選擇戰略方向至關重要，推薦這篇閱讀下：

《前端大牛得到的最佳職業生涯建議》：前端大牛得到的最佳職業生涯建議-博客-雲棲社區-阿里雲
另外在正式學習前可以先看看這篇：

《Web入門者必看的HTML代碼編寫的30條軍規》避免重複踩前人的坑：Web入門者必看的HTML代碼編寫的30條軍規-博客-雲棲社區-阿里雲
有關前端知識的學習，推薦閱讀《前端知識體系目錄》文章從HTML/HTML5、CSS、JS等相關知識學習步驟目錄，到相關書籍推薦應有盡有：前端知識體系目錄-博客-雲棲社區-阿里雲
另外其他輔助類文章推薦以下內容閱讀：
這篇不是前端知識類分享，更多是講解前端程序員成長經驗分享：

《一個前端的自我修養》：一個前端的自我修養-博客-雲棲社區-阿里雲 進階篇：

《阿里9年，我總結的前端架構演進3大階段及團隊管理心法》：阿里9年，我總結的前端架構演進3大階段及團隊管理心法-博客-雲棲社區-阿里雲

補充：


原文鏈接：前端知識庫-博客-雲棲社區-阿里雲

前端開發全面知識庫，包括HTML5，CSS3和js的基本框架知識，以及DOM和BOM操作的基礎知識和一些基本工具和IDE。學習本篇，你將了解到以下知識。


核心 Core

HTML5

W3C http://www.w3school.com.cn/html5/ W3C https://www.w3.org/html/ig/zh/wiki/HTML5 菜鳥教程 http://www.runoob.com/html/html5-intro.html HTML5中文門戶 http://www.html5cn.org/

CSS3

W3C CSS教程 http://www.w3school.com.cn/css/index.asp W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp 菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html 菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html CSS參考手冊 http://css.doyoe.com/

JS

W3C http://www.w3school.com.cn/js/ 菜鳥教程 http://www.runoob.com/js/js-tutorial.html 廖雪峰js教程 http://www.liaoxuefeng.com js標準參考教程-阮一峰http://javascript.ruanyifeng.com/

jQuery

W3C http://www.w3school.com.cn/jquery/ 菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html 極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/ 廖雪峰 http://www.liaoxuefeng.com/wiki/ 參考手冊 http://www.css88.com/jqapi-1.9/ 參考手冊 http://www.runoob.com/manual/jquery/

ES6

阮一峰ES6 http://es6.ruanyifeng.com/ 極客學院 http://wiki.jikexueyuan.com/project/es6/ JavaScript 標準參考　阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html

插件

parallel.js: 前後端通用的一個並行庫 zepto: 用於現代瀏覽器的兼容 jQuery 的庫 totoro: 穩定的跨瀏覽器測試工具 TheaterJS: 一個用於模擬人輸入狀態的 JS 庫 stellar.js: 前端用於實現非同步滾動效果的庫，現已不再維護 skrollr: 另一款實現一步滾動的開源庫，使用人數眾多，可實現各種狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是開發人員可以基於 web 技術構建 IOS7 程序 regulex: 用於生成 正則表達式 的可視化流程圖 markdown-it: 新型 Markdown 解析器，快速，支持插件 multiline: 用於 Javascript 中的多行文本，類似於 Ruby 的 HERE Doc screenfull.js: 全屏插件，支持各大瀏覽器 lunr.js: 類似於 Solr, 但是用於瀏覽器上的全文搜索引擎，可以為 JSON 創建索引，離線也可以使用 jquery.hotkeys: jQuery 插件，用於綁定熱鍵 breach_core: Javascript 編寫的 Browser (瀏覽器) octocard: 用於生成 Github 信息卡片的庫 github-cards: 用於生成 Github 信息卡片的庫 money.js: 輕量級貨幣轉換庫，web 和 node 皆可用 accounting.js: 輕量級的數字、貨幣轉換庫 javascript-algorithms: Javascript 實現的各種演算法集合 lazy.js: 類似於 underscore, 但是會延遲執行，某些場景下，性能會有很大的提升 seajs: 前端模塊載入器，解決模塊化、依賴等問題 jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫 js.js: Javascript 實現的 javascript JIT jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大 todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫 localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的介面 EventEmitter: 瀏覽器版的 EventEmitter jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據 knockout: 前端 MVVM 框架，用於開發富前端應用 mermaid: 可以根據文本生成流程圖，類似於 Markdown 的語法 js-sequence-diagrams: 另一款可以根據文本生成流程圖的庫，類似於 Markdown 的語法 flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品 zoomooz: jQuery 插件，用來處理瀏覽器縮放 fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方 mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初為了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好 jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持 jquery.scrollTo: 在頁面上以一個元素為起始以動畫的方式移動(ScrollTo)到另一個元素， 支持回退等 jScrollPane: 自定義的滾動條，讓所有瀏覽器都顯示一樣的滾動條 onepage-scroll: 提供類似於 iPhone6 展示頁類似的效果，適用於單頁應用，兼容到 IE8 scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好 ScrollMagic: 神奇的滾動交互效果插件，可以在滾動的過程中設置各種各樣的動態效果 infinite-scroll: 滾動載入，滾動到最下到自動載入， Paul Irish 大神之作 animatable: 僅僅依靠 border-width 和 background-position 實現的各種動態效果，看真相 Fluidbox: 頁面上內嵌圖片的放大縮小效果，類似於 Medium 中的效果 jquery-validation: jQuery 的一個插件，用於校驗 Form 表單 BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果 emscripten: 一款基於 LLVM, 可以將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度 qrcode-generator: 各種語言的二維碼生成工具 device.js: 一個可以檢測設備類型的工具，可以讓我們根據不同的設備來為其定製響應的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用來生成二維碼 Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果 isotope: 可以用來過濾、排列布局，實現美觀的動態布局切換效果，Demo lazysizes: 功能強大的圖片延遲載入工具，可以首先載入一個低質量的圖片，然後再載入高質量的圖片 progressbar.js: 簡潔美觀的進度條，扁平化 pigshell: 一個由 Javascript 實現的Shell, 將互聯網當做一個大的文件系統, 通過 cd/ls/cat…..等命令, 可以訪問 Facebook/Twitter/Google Drive 等網路服務 spectrum: Js實現的顏色選擇器 (Colorpicker) jQuery.countdown: jQuery 倒計時插件 summernote: WYSIWYG 富文本編輯器 awesomplete: 非常輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀 switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器 trix: Basecamp 公司出品的富文本編輯器，簡潔小巧 sensor.js: 在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等 hyhyhy: 用於創建 基於 HTML5 的 演示文稿 swipebox: jQuery 插件，用於處理移動端的觸摸事件 FileAPI: 前端用戶處理文件（拖放、多文件上傳等） Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬體加速 matter-js: 2D 物理效果引擎，碰撞、彈跳等 jQTouch: 用於輔助創建手機端的 Web 應用，支持主題、Zepto.js 等 snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫 c3: 基於 D3 的圖表庫 echarts: 企業級圖表庫，百度開發 parallax.js: 一個用於響應智能手機 orientation 的庫 jQuery-Animate-Enhanced: jQuery 動畫庫的一個增強，用於現代瀏覽器 wysihtml: 富文本編輯器，適用於現代瀏覽器 slip: 一個通過滑動或者拖拽來操控列表的庫 evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持 PhotoSwipe: JS 的一個圖片展示庫 focusable: 是頁面上一個元素高亮的庫，有圖有真相 firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5 mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架 interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫 rebound-js: 實現部分物理效果，Facebook 出品 basket.js: 基於 LocalStorage 的資源載入器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存 iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各種事件，不依賴任何的庫，且插件豐富, 大眾點評的手機端列表滾動就是用這個庫處理的 metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品 accessible-html5-video-player: Paypal 出品的 Video 播放器 loading: 幾種 Loading 效果，基於 SVG flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的 move.js: 基於 CSS3 的前端動畫框架 scrollReveal.js: 使元素以非常酷帥的方式進入畫布 (Viewpoint)，看 Demo Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫 foundation: 另一款前端模版框架，類似於 Bootstrap Flat-UI: Bootstrap 的一款主題，簡潔美觀 iCheck: 一款漂亮的 Checkbox 插件 Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮後的大小約 5kb slick: 功能異常強大的一個圖片滑動切換效果庫 SocialButtons: 漂亮的社交按鈕 sweetalert: 一個非常美觀的用於替換瀏覽器默認 alert 的庫 web-animations-js: Javascript 實現的 Web Animation API vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫 plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器 timesheet.js: 基於 HTML5 CSS3 時間表 slideout: 一個非常美觀的側滑菜單

包管理工具 Package Managers

NPM

菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html 淘寶 NPM 鏡像 https://npm.taobao.org/ npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html npm包搜索地址 https://www.npmjs.com/

Bower

Bower中文網 http://www.bowercn.com/ Bower：客戶端庫管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html

Yarn

yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理 YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/

編輯器 Text Editors

WebStorm

官網下載 http://www.jetbrains.com/webstorm/download 前端網破解版下載 http://www.qdfuns.com/tools

VScode

官網下載 https://code.visualstudio.com/ vscode 插件精選 - 獻給所有前端工程師https://segmentfault.com/a/1190000006697219

SublimeText

官網下載 https://www.sublimetext.com/ 前端網破解版插件版下載 http://www.qdfuns.com/tools SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言 Emmet：一個用於提高開發效率的編輯器插件，前身是Zen coding SublimeLinter: 一個提供代碼質量檢測的插件 SublimeTmpl：快速新建指定的模版文件 Syntax-highlighting-for-Sass：sass代碼高亮插件 MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等 ApplySyntax: 輔助檢測語法插件 CTags: Sublime Text Ctags 支持插件, 需要安裝 ctags sublime-react: React 代碼高亮

Atom

官網下載 https://atom.io/

HBuilder

官網下載 http://www.dcloud.io/

JS框架 JS Frameworks

Backbone

Backbone.js API中文文檔http://www.css88.com/doc/backbone/

AngularJs

中文官方文檔https://angular.cn/ angularjs中文網http://www.apjs.net/ angularjs教程http://www.angularjs.net.cn/ Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流 angular-schema-form: 根據 JSON 生成響應的 Form 表單 restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource ng-cordova: Cordova 常用組件的 Angular 版本 angular-translate: Angular 的國際化 (I18n) ng-inspector: Chrome 插件，用於調試 Angular angularjs-style-guide: AngularJS 代碼風格 ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components material: Google Material Design 效果的 Angular 實現 angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級 angular-filter: 一組有用的 Angular Filters bindonce: Angular 插件, 用於減少 Watcher 的數量, 提升性能

React

英文官方文檔https://facebook.github.io/react/docs/hello-world.html 中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html 阮一峰react入門http://www.ruanyifeng.com/blog/2015/03/react.html 阮一峰React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html React Router 中文文檔https://react-guide.github.io/react-router-cn/ react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html 阮一峰Redux 入門教程http://www.ruanyifeng.com/blog react: React 框架源代碼 react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架 react-hot-loader: 實時調整 React 組件效果 grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS touchstonejs: 基於 React 的手機應用前端框架 essential-react: 基於 React, ES6, React-Router的一個應用腳手架 react-router: React 路由解決方案

Vue

vue官方http://cn.vuejs.org/ vuex官方http://vuex.vuejs.org/zh-cn/ vue-router官方https://router.vuejs.org/zh-cn/

UI框架 UI Frameworks

Bootstrap

最受歡迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/

Ionic

一款接近原生的Html5移動App開發框架　會html css js就可以開發apphttp://www.ionic.wang/

Foundation

Foundation 中文網 迄今為止最好的響應式前端框架http://www.foundcss.com

FrozenUI

移動端服務的前端框架http://frozenui.github.io/

materializecss

基於Material Design的主流前端響應式框架http://www.materializecss.cn/

mui

最接近原生APP體驗的高性能前端框架http://dev.dcloud.net.cn/mui/

AntDesign

和react配合的UI框架https://ant.design

eleme

和vue配合的UI框架http://element.eleme.io/

JS預處理 JS Preprocessors

TypeScript

TypeScript 入門教程 菜鳥教程http://www.runoob.com/ TypeScript中文網https://www.tslang.cn/ TypeScript教程gitbookhttps://www.gitbook.com/

CoffeeScript

CoffeeScript 中文http://coffee-script.org/ CoffeeScript 實用手冊 極客學院http://wiki.jikexueyuan.com/project/coffeescript/

過程自動化 Process Automation

Grunt

Grunt中文網http://www.gruntjs.net/

Gulp

gulp.js 中文網http://www.gulpjs.com.cn/ gulp詳細入門教程http://www.ydcss.com/ 前端構建工具gulpjs的使用介紹及技巧http://www.cnblogs.com/2050/p/4198792.html Gulp開發教程https://www.w3ctech.com/topic/134

模板引擎 Templating

Handlebars

handlebarsjs官網http://handlebarsjs.com/ Handlebars中文文檔http://www.360doc.com/content/ Handlebars.js 中文文檔http://keenwon.com/992.html Handlebars的使用方法文檔整理http://www.tuicool.com/articles/fqQFN3

Haml

haml官方文檔https://github.com/haml/haml haml入門http://blog.csdn.net/napoay/article/details/50491363

Jade

Jade 官方的英文文檔http://www.w3cplus.com/html/how-to-use-jade.html Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html 帶你學習Jade模板引擎視頻http://www.imooc.com/learn/259

構建工具 Build Tools

RequireJS

RequireJS 英文網http://requirejs.org/ RequireJS 中文網http://requirejs.cn/ require.js的用法-阮一峰http://www.ruanyifeng.com/blog

seajs

seajs文檔http://seajs.org/docs/ SeaJS從入門到原理http://www.tuicool.com/articles/FfEJv2u

Browserify

官網http://browserify.org/ githubhttps://github.com/substack/node-browserify/

Webpack

Webpack 中文指南http://webpackdoc.com/ webpack的實例http://www.vichily.com webpack的入門http://www.vichily.com 一小時包教會 —— webpack 入門指南http://www.w2bc.com/Article/50764

CSS預處理器 CSS Preprocessors

Sass

sass入門http://www.w3cplus.com/sassguide/ sass參考手冊http://sass.bootcss.com/docs/sass-reference/ SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/

Less

less中文網http://lesscss.cn/ less快速入門http://less.bootcss.com/

stylus

stylus中文文檔-張鑫旭http://www.zhangxinxu.com/jq/stylus/

修改

阿里云云棲社區，彙集阿里技術精粹，點此關注（文字鏈接地址：https://www.zhihu.com/org/a-li-yun-yun-qi-she-qu-48/activities）

其實前端我接觸的並不多，但現在不是提倡Full Stack全棧工程師嘛。如果你掌握下面的會讓你如魚得水，不需要被UI,UE人員優先順序而影響。

  • Ruby on Rails：在web2.0時代，RoR一下子獲得很多創業公司的青睞，開發者將Rails作為一個框架來創建資料庫支持的Web應用，它本身是一個完整的解決方案，通過默認的標準實踐（convention）可以很大的加快開發效率，無縫的整合所有子組件以提供給開發者一個統一的介面。當時Twitter早期也是用這個框架寫的，但這個也是雙刃劍，在性能和內部機制上很難調節。
  • Django：Python的前端管理框架，直接生成管理頁面。有人經常那上面的作為PK相比於 Django、Pylon 等 Python 框架，Ruby on Rails 是否有很大的技術優勢？
  • Smarty：PHP的一種模板語言，很容易上手。
  • Bootstrap：Twitter提出的HTML，CSS和JS框架，讓你的web app容易適配到各種平台，比如手機上。
  • JQuery：Javascript的最流行的庫，可以做一些Ajax調用。
  • HTML5：就是下一代的HTML標準，增加了一些兼容的便簽，使得在手機和瀏覽器中閱讀效果一致。對應的是Native APP，就是原生的從底層開始寫的APP。當年Facebook是走HTML5的路，發現不對勁，性能很差，體驗糟糕。趕緊轉變成Native APP才讓它重新贏得市場。
  • Node.js：js寫的後端伺服器，處理高並發場景性能佳，使用 Node.js 的優勢和劣勢都有哪些？ 特別適合移動的伺服器端。 Socket.IO是其中一個組件，為了在瀏覽器和移動設備上創建實時應用而產生的，它可以模糊不同傳輸機制之間的差異
  • D3：各種可視化的效果，確實非常酷。
  • Impress.js: 基於CSS3轉換和過渡、工作於現代瀏覽器、並受prezi.com的理念啟發的演示工具。
  • Backbone.js：前端的MVC，為複雜Javascript應用程序提供模型(models)、集合(collections)、視圖(views)的結構。
  • Meteor: 一個構建在 Node.js 之上的平台，用來開發實時網頁程序。Meteor 位於程序資料庫和用戶界面之間，保持二者之間的數據同步更新。因為 Meteor 是基於 Node.js 開發的，所以在戶端和伺服器端都使用 JavaScript 作為開發語言。而且，Meteor 程序的代碼還能在前後兩端共用。

零基礎的前端開發初學者應如何系統地學習？

不知道，我學了五年（加上大學三年就一共八年了）也沒覺得我學得很系統，在不停地整理自己的知識中。

推薦先看視頻教程，寫幾個實例頁面，找到點成就感了再看書深入學習。不然容易半途而廢。
視頻教程網上一搜一大把。

可能是有史以來最好的手冊了，當然是對於我來說，因為他們都是心血。

更多好看又好玩的編程學習，統統都在北半球 - 一個開放的知識社區。

  • 前端開發者手冊 - 北半球
  • 關於
  • 前端開發者手冊
  • 什麼是前端開發者？
  • 第一部分: 前端開發實踐
  • 前端的工作職稱
  • 常用的網路技術
  • 前端開發技術棧
  • 前端開發做什麼
  • 團隊中的前端
  • 全才神話
  • 前端的面試問題
  • 前端工作版塊
  • 前端薪資
  • 如何成為前端開發者?
  • 第二部分: 前端開發學習
  • 自主學習
  • Internet/Web
  • Web瀏覽器
  • DNS
  • HTTP/網路
  • Web 主機
  • 前端開發綜合學習
  • 用戶界面和交互設計
  • HTML CSS
  • SEO
  • JavaScript
  • Web 動畫
  • DOM, BOM JQuery
  • Web 字體
  • 無障礙設計
  • Web/瀏覽器 API
  • JSON
  • 靜態網頁生成器
  • 前端應用架構設計
  • 介面/API 設計
  • Web 開發者工具
  • 命令行
  • Node.js
  • React.js
  • 模塊載入器
  • 包管理器
  • 版本控制
  • 構建 任務自動化
  • 網站性能優化
  • JS 測試
  • 無殼瀏覽器
  • 離線開發
  • 安全
  • 多平台開發
  • 指導學習
  • 前端指導學習
  • 前端開發者從哪裡學
  • 前端簡報, 資訊 博客
  • 第三部分: 前端開發工具
  • 常用前端開發工具
  • DOC/API 瀏覽
  • SEO
  • 原型和框架
  • 圖表
  • HTTP/網路
  • 代碼編輯
  • 瀏覽器
  • HTML
  • CSS
  • DOM
  • JavaScript
  • 靜態網頁生成器
  • APP(桌面, 移動, 平板等) 管理
  • 腳手架
  • 模板
  • UI 部件 組件
  • 數據可視化
  • 圖形
  • 動畫
  • JSON
  • 測試框架
  • 數據存儲
  • 模塊/包載入
  • 模塊/包倉庫
  • Web/雲/靜態主機託管
  • 項目管理 代碼託管
  • 合作 交流
  • CMS 託管/API
  • BASS
  • 離線
  • 安全
  • 任務管理
  • 部署
  • 網站/APP 監控
  • JS 錯誤監控
  • 性能
  • SVG
  • 更多好看又好玩的編程學習，統統都在北半球 - 一個開放的知識社區。

建議大家點一個贊，因為點贊會牽扯肌肉，同時消耗卡路里，和減肥健身的原理相同。看知乎也能減肥，誰又能想到呢？

歡迎大家關注我的公眾號。

配三個圖更加凸顯我的專業氣質！！！

十月八日開始，我開始我第三分前端實習工作了。我來說說自己的一些方法吧。

我跟上面回答的有很多的相同之處，作為一個記憶力比較差的人，我做得最多的是記筆記，而且我是gitbook記的。那個什麼著名的遺忘曲線，確實深有同感。學過的東西，即使有再回顧，有時候就是記不起，要快速使用但找來找去很麻煩的，所以我就把自學中、工作中學到的知識、遇到的問題答案都記下來了。

一般的舊知識，如果記得不太清楚，我就先查查自己的筆記，然後在谷歌，注意是

一般的舊知識，如果記得不太清楚，我就先查查自己的筆記，然後在谷歌，注意是谷歌，至於那個某度，用久了，就知道搜索質量相差多遠了。

這個筆記，我寫了一年多了，感覺還是挺有用的，之前在工作也有所幫助，據說面試的時候，那個面試官看我喜歡寫東西做記錄就要了我。我目前大四，十月份入職一家做開發的公司，打算還會繼續做前端這一行，畢竟還是挺有趣的。

這個筆記，我寫了一年多了，感覺還是挺有用的，之前在工作也有所幫助，據說面試的時候，那個面試官看我喜歡寫東西做記錄就要了我。我目前大四，十月份入職一家做開發的公司，打算還會繼續做前端這一行，畢竟還是挺有趣的。

如果畢業做不好，滾回老本行做體育了，畢竟老師常說，下一個中國首富必定是體育行業的。(無奈臉...ヾ(＠⌒ー⌒＠)ノ)。
好像最後應該放個地址：
gitbook筆記地址：https://note.niefee.com/

本人是產品經理出身，工作中設計、規劃、項目管理偏多。目前在創業做產品經理相關的工具平台。

因為自己創業的原因，開始學習web開發，分享一些自己在學習過程中，一些比較好的東西，能幫你從複雜的開發中，快速學習起來。

其實我給自己定位的是在學習之後能完成前端開發的工作，但是從學習中，發現前端開發必須也要會一些後端的東西。

我的學習之路是這樣的

第一階段（學習HTML+css+JS[簡單的基礎]）

首先，先去W3school 過一遍HTML + css+ js代碼
HTML 系列教程

然後在慕課網，看一編前端開發的一些教程

網頁布局基礎-慕課網
如何用CSS進行網頁布局-慕課網
JavaScript入門篇-JavaScript入門視頻教程-慕課網

看完這些之後，然後因為js語法比較複雜(對我而言)，可以去再看一下jQuery
jQuery語法比較簡單，是js的一個庫，能幫你快速寫出js的代碼
jQuery 教程

第二階段（編寫靜態頁面，開始實操）

開始實操的時候，徵詢了之前一些開發同事的意見，沒有學習bootstrap，開始直接用div這些寫布局和排版，沒有用前端框架，這樣學習起來更容易理解

我寫的第一個靜態頁面是七牛開發者社區的首頁，沒有寫hover之後的樣式，但是大部分的樣式都寫了出來，基本上就是用chrome來邊看別人的代碼，然後邊寫

http://developer.qiniu.com/

寫的第二個靜態頁面
3w咖啡的首頁

http://www.3wcoffee.com/

如果你這兩個階段都寫完之後，就可以開始學一個後端語言了

第三階段（學習一門後端語言）
剛開始的時候，有些朋友建議我看Node.js 來學習，但是看了兩天，發現因為js這塊才開始接觸，所以不太容易學習。然後我就開始看PHP了，相對來說還好理解一些。另外就是我朋友中，用PHP的偏多。所以我有困難的時候，比較容易諮詢，我就選擇了PHP來學習

先過一遍PHP的基礎代碼

http://www.w3school.com.cn/php/index.asp

然後我發現了一個比較好的學習的課程，就是比較容易入門的，這個課程能幫你大致的了解PHP的開發過程

http://www.chuanke.com/v1018455-97358-173362.html

第四階段（準備學習PHP的Laravel框架，然後學著去寫一個博客）
這個階段我剛開始，騰訊課堂這裡有一個比較好的課程，我準備跟著這個開始學習。
https://ke.qq.com/course/134477

--------------------介紹一下我用的開發環境和編輯器----------------------------

本地PHP環境的搭建
因為我是mac，朋友推薦我用brew來安裝PHP環境，但是對我來說太麻煩了。
這裡我推薦一個比較簡單的搭建環境的軟體MAMP，比較容易上手，可以快速的搭建一個本地的環境

編輯器
1. ATOM （github開發的編輯器）

2.Sublime （一個非常流行的編輯器，很好用）

我用ATOM比較多，主要還是因為界面好看

Git工具

1.SourceTree

2.Github DeskTop

這裡有一個使用Git的教程，我用Github DeskTop，也是因為有教程，然後自己去github上建立一個公開的倉，這樣把自己寫的東西託管上去。

http://www.imooc.com/learn/208

------------------2016.12.3---------------------------

千萬別聽別人說產品經理就不需要懂技術了

產品經理需要的技能很多，無論是交互、設計、開發、還是規劃，項目管理

如果你想讓自己的價值更大，就要一直學下去，讓自己變得更優秀

這個年代，學的更多，你收穫的更多

DOM:推薦《Javascript DOM編程藝術》 書不厚，但是是絕對的經典

北京葡萄藤.IT修真院 首頁 | IT修真院
===============================
免費，快速，高效的幫助IT新人入門，加QQ群：185354188。微信公眾號：葡萄藤IT技能樹

前言
===============================
CSS入門比較簡單，很適合零基礎的人去學習。但是該從哪裡開始呢？又該學到什麼程度，學會了之後，又會能找到一份什麼樣的工作呢。


目錄
===============================
一 什麼是CSS
二 該學習哪些內容
三 能勝任什麼工作

四 為什麼不推薦去看視頻
五 究竟該怎麼去學習
六 遇到問題怎麼交流
七 下一步學什麼
===============================

一 什麼是CSS？

CSS【層疊樣式表】是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
但是對於新人來講，更需要的是看懂這麼一個流程圖，論一個網站是怎麼開發完成的，這樣你才能了解通常程序員所說的CSS是什麼。

解釋一下每個名詞的含義：


1.產品經理：每一個好的產品，都是產品經理在浴室里思考會議室上拍桌子說服大佬最後拿著槍指著程序員做出來的。這就是產品經理的職責，他們被認為是互聯網的靈魂和發動機，理解用戶痛點，給出解決方案，做出差異化的產品，能夠快速迭代，可以合理分期並能夠及時評估項目風險。產品經理就是負責把用戶的需求，變成需求文檔和原型和PPT和流程圖。

當然，大多數程序員對於產品經理的形容只有兩個字：SB

2.UI：UI是一個又能做產品又能做頁面又能做交互的神奇物種，做UI是跟做前端的人打交道最多的職業，所以他們跟CSS一樣，有時候都被簡稱是美工或切圖的，有時候就是給合影照做PS的。UI就是把產品經理設計的原型圖，上色變成好看的設計稿。也就是PSD文件。

當然，大多數程序員（特別是CSS）對於UI人員的形容只有三個字：像素眼

3.CSS：其實有時候CSS根本不算程序員啦，這也是為什麼有時候UI會兼職做CSS的重要原因。也是CSS成為了最容易上手的IT職業。CSS就是負責把UI設計的圖片(PSD)，變成Html網頁,裡面的數據全是假的。很多時候學會CSS就能找到一份IT行業的工作，但是並不能幫助你拿高薪。

當然，大多數程序員對於CSS人員的形容只有三個字：切頁面的。


4.JS：JS入門的難度比CSS稍高一些，但也是所有真正程序員里比較簡單的工種了。簡單的JS程序員只是做點輪播，做點特效和動畫，加個彈窗，做個驗證。但是，現在呢，前後端分離的方式，前端架構概念的出現，Html5的普及，已經讓前端成為了一個最重要和最熱門的工種。

當然，大多數程序員對於JS人員的形容就是：我靠，你居然會寫後端代碼？


5.後端：後端其實才是神一樣的存在，無論前端是有Apple還是IOS還是桌面客戶端，永遠少不了後端，後端要懂業務邏輯，要懂擴展，要懂備份和安全。但是後端是一個很吃年限，入門要求很高的職業。

當然，大多數產品經理對於後端人員的形容就是：馬丹又延期了。


6.QA：QA歸屬於程序員，但是常常會被程序員孤立哈哈哈哈哈。因為QA就是專門挑錯的人，如果你挑錯挑的不嚴謹，Boss會罵你。如果你挑錯挑的很認真，程序員會殺了你。你自己看著辦吧。

當然，大多數程序員對於QA的形容就是：你是不會用吧。

7.OP：OP是比較奇葩的物種，跟各個程序員之間基本上沒什麼大的衝突，除非是到了發布的時間點。無數的OP都會經歷過這樣的事情，線上發布一次，馬丹，有Bug，回滾或者是直接在線上改。改了半個小時，馬丹，還是錯，再繼續改。這次先到了測試環境驗證，好不容易驗證通過了，再發到線上，又出問題了。馬丹，程序員們繼續改。

當然，大多數程序員最喜歡對OP說的一句話就是：大哥，睡了沒？沒睡再幫我發一個版本吧？

小結：CSS就是負責把UI設計的效果圖變成靜態網頁，然後由後端或者是前端JS把靜態網頁中（假數據）變成動態網頁（真數據）。簡單說，不用理解太多產品需求，只要勾搭好UI妹子，做好瀏覽器兼容，做好自適應和響應式，代碼寫的別那麼爛，有點通用性，就好啦。這就為一個月之內學會CSS，成為一個初級的CSS工程師，創造了前提條件。


二 該學習哪些內容
===============================
先看一下這張圖，不同的顏色代表著你需要了解到不同的程度。

簡單來說呢，我對一個月的CSS工程師要求是：能獨立完成自適應和響應式的項目，能會使用Bootstrap和Less。
你們覺得難么？可能大部分人都未必知道，什麼是適應，什麼是響應式，什麼是Boostrap和Less。

好吧，這確實是有點難度，不過我大IT修真院的弟子可以在15天之內完成這個的。所以，其實還不算太難啦，難的還在於是編碼規範。
這兒我把CSS初級工程師，需要會的內容，再整理成一個文字版的。

1.基礎環境的配置：WebStorm/sublime,Svn/Git，Nginx/shell ，PS ，命名和規範。這些都是一開始就要會的了，只有一開始都先從簡單的功能開始使用，然後每天鞏固，每天在用，當一個月之後，你會發現根本就不用刻意去學，自然就會了。其中，WEBStorm是IDE，SVN是源碼管理工具，Nginx是WEB伺服器，Shell只需要會一些簡單的腳本，PS是要你自己學會切圖，命名和規範是格外的重要的。。這裡每一個點都可以無限擴散，然而你並不需要會那麼多，暫時來說，會用就行。

2.布局+樣式：布局是最基礎的操作，先拋開各種奇怪的控制的屬性不談，單說各種對齊和局中。這裡其實是需要了解一些理論知識的（大概也是CSS里為數不多的理論知識之一），主要就是盒子模型，定位（標準流）（浮動）(相對，絕對)。用這些東西做出常見的居中，兩列，三列，Header，Foot，側邊欄等。 然後就是學習各種控制項（簡單的和複雜的）的樣式，這裡包括選擇器，優先順序等等。

3.自適應+響應式：可以這麼說吧，從現在開始，表再做沒有自適應的網頁了，優先考慮響應式吧，跨屏時候已經來臨。所以你要了解屏幕尺寸（Media），要懂長度單位（em,rem,百分比）

4.性能優化：一些簡單的常識就夠了。最少要學會雪碧圖的製作。

5.框架：Bootstrap和Less，在學會以上4種的時候，已經可以自己搭建一個網站了~吃驚咩？然而還是需要學習一下Bootstrap，學會了解一下使用開源框架的感受，學習別人封裝代碼的思路，這是最重要的。
Less可以幫助你從另一個角度去思考，讓你的代碼更簡潔。

好的，現在來簡單總結一下，當我說，一個月之內成為一個CSS初級工程師的時候，就是指的你已經學會了以上的內容。這樣你就能開始寫一些項目了，在寫項目的過程中，會加深很多細節的知識，CSS的知識就是繁瑣的。
只有掌握了這些，你才能完成接下來的學習。

三 能勝任什麼工作
===============================

其實，剛剛已經說到一些了。初級的CSS工程師，在北京可以拿到4K~8K的薪水，能不能找到工作，取決於你能不能獨立做出來項目的頁面。能拿到多少薪水，取決於你會不會一些JS。
這樣的水準啊。在北京找到份工作其實不難了，你每天的日常工作就是，從UI那裡拿到圖。然後切成靜態頁面，然後當後端的同學套頁面的時候，去看看套的對不對。

跟著會做一些輪播圖，做個小彈框之類的。如果你停止學習，你可能在這個水平上停留很長時間。哦，還有可能會懂一些瀏覽器的Hack。學會兼容IE的老版本。


四 為什麼不推薦去看視頻
===============================
坦白的說呢，如果沒有人教你，沒有人帶你，想要實現在一個月的時間裡就學會這些，基本上是做不到的。
這也是我寫這篇貼子的很重要的原因,這也是這篇貼子中最有價值的地方。
總的原則是：
1.永遠永遠不要去先看視頻，先看書。
2.永遠永遠記著代碼是寫出來的，不是看出來的。
3.永遠永遠記著要有自己獨立學習獨立解決問題的能力。
4.永遠永遠記著不要說自己不會英語。
5.永遠永遠記著不要給自己沒有時間找借口。
6.永遠永遠記著要學的知識有很多，找到一條正確的途徑才可以。

好了。看完這些，也可能會跟你之前的認知有所不同。
但是，想想，你有沒有遇到過這些問題。


1.不知道自己該學什麼，從哪裡入手。
2.視頻看了很多，講起來好像懂了，做起來完全又不會。
3.遇到了問題，根本找不到人解決。
那麼我來解釋一下，為什麼我會讓你們拋棄看視頻，看教程，做測試題等各種奇怪的學習方式，轉而投向更高效更快速的IT修真方式。

首先，技術是有體系的，但是又是非常零散的。
這些零散的小知識太多了，而且在實際使用中，你並不需要把所有的零散小知識都學會，那樣太慢了，更何況，在做真實的項目中，根本用不到這些小知識。
用不到的東西很容易就會忘啊。所以這就是你看視頻或者是教程之後，就算是懂了也會很快就忘記的原因。
怎麼解決？多寫多練，學習致用。

其次,做技術的要培養的是自我學習和解決問題的能力。這是看視頻和看教程絕對沒有辦法教會你的。比如說，遇到了問題，該去找哪些關鍵詞？百度的結果中，哪些常用網站的答案是可信的？哪些的方法根本就是錯的？
請教別人的時候，如何能夠快速準確的描述清楚自己的問題呢？
每個人都有自己的學習方式，都有自己無法理解的問題和困擾，這些只能靠真正的寫代碼去實踐出來的。

再次，學習的氛圍很重要，討論交流，同學都在努力學習的氛圍會讓你不自然的向前走。
這同樣是視頻和教程很能給你培訓的啊。沒有人監督，沒有人一起學，很容易被各種各樣的瑣事打斷。


最後，做項目更看重的是編碼規範，交流溝通，協作和進度支持。
這也是各種培訓機構很難帶給你們的。很多培訓機構的老師都只會講課，並不會做項目。

五 該怎麼去學習
===============================

說了這麼多，該怎麼去學習呢。別著急，容我仔細講來。


1.要明白自己學習的目標是什麼。
這裡的學習目標，並不是成為一個CSS工程師之類的，也不是迎娶白富美什麼的，而是一個明確的，專業的目標。
對於CSS工程師來講，要進入公司就必須能夠獨立做項目，必須學會編碼規劃和協作，必須學會自適應和響應式，再學會Bootstrap來了解框架，最後是學習Less擴展視野。


記住了么，如果這些名詞不太熟悉，不要害怕，學習都是有順序的。但是，前提條件是，你必須明白，你會了這些，你才能夠說自己算是CSS入門了，可以獨立去找一份工作了。


2.要有明確的學習規劃
從簡到難，先學什麼，後學什麼，有人帶和沒人帶的差別，就在於這裡。
對於CSS來說，重新回過頭來看看本篇貼子的第二節，這就是你的一個學習的規劃。這就是你要學習的內容。


3.要不斷的用代碼去驗證自己學習的成果
會和不會最直接的方式，就是你能不能做得出來，所以一定是你去做一個任務，然後這個任務呢，包括某種技能和知識點的訓練（玩過遊戲的都會比較熟悉這種方式），在做任務的時候遇到了問題，再去找人交流或者是請教師兄。
能直接寫出來的代碼，會讓你有腳踏實地的感覺，不會心虛。
對於CSS來說，重新回過頭來看看本篇貼子的第二節，這就是你的一個學習的規劃。這就是你要學習的內容。


4.要學會自己去主動解決問題

之前提到過，自己主動解決問題的能力很重要，這是一個程序中的生涯中必不可少的解決問題的方式。所以從一開始就要培養自己在這方面的能力，而這個真的是一種能力。有的人能夠快速找到問題的解決方案，有的人會被一個問題卡很久，每個人的情況都不一樣，早點入手，早點找到更適合自己的方式。


5.要學會自己去和其他人交流請教
其實交流和請教別人，也不是一件簡單的事兒，很多時候你並不能描述清楚你的問題。因為出現問題的原因總是千奇百怪，特別是每個人走的路子不一樣，解決問題的方案也不一樣。因些，最好的方式就是尋找那些剛剛解決過這些問題，比你早走一步的師兄，對他們來說，更樂意去幫助你解決掉這些問題，這也是強化記憶的一種方式。
學會尋找合適的人去請教，描述清楚又不能過多打擾對方，這也是一種能力的訓練。還有，提前認識一些技術上的前輩，他們能給你們的指導和幫助，遠遠超出你的想像。（IT修真院就是提供這麼一種途徑）


6.每天都去總結反饋
不要給自己任何的理由去停止練習，哪怕你什麼都沒做，也要保持記錄日報的習慣（IT修真院的論壇里有很多師兄寫的日報，可以參考，也是我帶IT修真院學員的時候，點評日報是和學員交流的最好方式），你可以發現，自己究竟學會了什麼，又因為什麼阻礙了自己的進度，在什麼地方進步更快。
不斷的反思和總結，會讓你收益頗豐。

7.公開代碼，接受交流
你是一個新人，所以沒什麼可羞澀的。把代碼公開出來，把做出來的效果貼出來，這都是很好的交流方式和心態。

8.注重規範，注重合作，注重交流
在真實項目中，這比什麼都重要，你會發現，當你和三個人一起合作的時候，因為Class命名不統一不規範產生衝突，因為三個人風格不一致導到項目後期維護困難，當需求發生變化的時候你發現自己寫的代碼簡直無法改動，等等等等這些，在剛開始的時候就這麼做，考慮代碼的擴展性和可維護性，否則一旦你養成很多壞習慣，再糾正過來就很難了。

9.在需要的時候再去看視頻和教程
在遇到一些關鍵的節點上，自己解決不了的問題的時候，再去翻閱視頻和教程-我不確定你們是否明白這兩種方式的差別，就是不要跟著教程和視頻走，那樣太慢，不要去做所謂的練習題，對你沒有任何幫助。而是把教程和視頻當成是詞典，你只在需求的時候去查閱它，在自己積累到了一定的困惑的時候，再去梳理和總結。這是我從業近十年以來發現的最快的學習方式。

10.不要太貪心，什麼都想學
嚴格按照任務序列去做，不要太糾結於細節，學會把不會的內容放一放，留在腦袋裡一直讓它困惑。保持足夠的進度，當積攢到一定程度，你發現他成為你學習的瓶頸的時候，再去解決它。

否則你會就迷失到知識的海洋中，根本找不到方向。


11.學會最佳實踐
在做CSS或者是其實的語言的時候，慢慢的你會發現，完成一份工作，總是有很多種方式，很多時候你會困惑，我究竟該用哪些方式好？這個在項目中，就叫做最佳實踐，換句話說。最佳實踐就是無數人走了無數的彎路，告訴你那麼走是走不通的，按照正確的方法走是沒問題的。

然而問題又來了，很多時候都會告訴你正確的路怎麼走，但是為什麼不能走其他的路，並沒有人說。而且，也太多了。
因此我必須要認真的提醒你，先確定自己能用一種方式把問題解決，然後再去尋找更好的方式，這就是你的最佳實踐。等以後有更好的辦法解決問題的時候，再去改進自己的經驗體系。


六 遇到問題怎麼交流

一般來說，遇到問題往往會有以下幾種解決方案。
1.如果有之前的正確代碼，回滾到正確的代碼上，先確認是哪一行代碼產生的問題。
2.確認你的運行環境，如果是CSS的話，確定是在哪個瀏覽器的哪個版本下出的問題。
3.打開F12，如果有報錯信息，那麼就直接百度報錯信息，先試著理解一下報錯的含義。
4.如果沒有報錯信息，用兩到三個詞來描述你的錯誤現象，查一下百度結果。用最快的速度判斷出來哪些結果有用和沒用。如果沒用，更換關鍵詞，通常你應該做到，在10秒鐘之內至少切換兩到三次關鍵詞。
5.寫清楚自己的環境很困惑的地方，像一個程序員一樣的去問問題，比如說，為什麼我的Nginx配置完正確的路徑之後顯示出來的仍然是默認的歡迎頁面，並沒有切換到我自己的Html頁。而不是像個傻子一樣說，有沒有人會Nginx？為什麼我的Nginx不能用？如果有截圖，截上全屏的圖，不要只截一小塊，真的很煩只截一小塊代碼的沒頭沒腦的圖。
6.先整理問題，再去提問，不要隨便遇到一個問題就各種去找人問，整理清楚自己的困惑，然後發給別人，等他們有時間的時候再回復。
7.查閱相關的資料，用最短的時間確定是否能解決自己的問題。不要迷失，不要一直看下去。有困惑一定要存疑，積累至少一到兩天或者一周（看你困惑的是不是關鍵性的問題）。
8.多寫不同的代碼，多找已有的例子，公開自己的源碼，找固定的學習夥伴，尋找比你剛好多學了一點點的師兄，而不是一定要找一些技術大牛，你遇到的問題，他很難領會到你的困境，因為離菜鳥困惑的時間點太遠了。【我不得不強烈推薦IT修真院，去哪找這麼好的學院找師兄？】

七 下一步學什麼

實際上，當你能通過IT修真院的15個Task，你就已經可以成為一個具有學習能力，了解CSS的整體趨勢，能夠獨立完成一些項目的初級CSS工程師了。接下來就應該偏向於代碼規範，JS，CSS3和Html5的內容。如果想了解更多，就關注IT修真院的微信公眾賬號，開始CSS中級工程師的修真之旅吧。

推薦你一個網站吧，freecodecamp 邊學邊練的形式，還可以跟一起學的人交流探討，在github上開源出來沒多久，點贊數已經超越bootstrap，很適合剛入行的同學學習

推薦閱讀：

TAG:前端開發 | CSS | JavaScript | 網站開發 |