前端大牛們都學過哪些？
最近在看bootstrap，發現除了大一的時候看過的html+css,和一些js，JQuery之外，幾乎沒學什麼關於前端的東西。偶爾了解過一些html5。想知道如果作為一個團隊的前端負責人還需要學習哪些東西？發現bootstrap與.less有關，除了這個還有哪些是需要學習的？希望得到各方大神的回答。
--------------------------------------------------------------------------------------------------------------------------------------------
補充一下，一些基本的計算機方面的東西還是學習過的。就是說除了最基本的像樓下馬前輩說的這些之外，還需要哪些？
一步一步來。
CSS不能編程？用Less、Sass、Stylus、甚至直接用 Absurd，框架除了Bootstrap還有很多。JS寫多了很麻煩？jQuery。移動開發？Zepto.js。結構不好？找框架，Backbone.js是MVC，AngularJS和Ember.js是MVVM，Twitter還弄了個事件驅動框架Flight。庫多了要優化載入？RequireJS。
代碼質量成問題？Jasmine、QUnit、Mocha做單元測試。各種瀏覽器都要測？用Karma。測試通過了部署還有問題？持續集成，用Travis CI。用戶行為也要測？用Selenium 。樣式測試還有 Viff 。覺得JS都夠麻煩的？用CoffeeScript。
想做動畫？Canvas或SVG還有CSS3幫忙，幹掉Flash。SVG太難畫？用Snap.svg。想開發遊戲？用Canvas。自己寫FPS太低？用框架，CreateJS.。2D太幼稚？three.js幫你用WebGL開發3D，還不夠給力？asm.js讓你在瀏覽器中擁有虛幻3引擎。
這一堆東西都要配置部署，麻煩，用Grunt，庫太多？用Bower管理，項目開始要創建各種文件文件夾？用Yeoman。開源項目太多了，GitHub.上找，不會？學Git。順便用Jekyll託管博客，不是吧還有Ruby這玩意...SASS也是Ruby寫的，等等Sublime Text是Python寫的，要寫插件？也學一下。調試太難？用Chrome開發者工具，一堆API和功能。
光在電腦瀏覽器上跑不給力？移動開發HTML5，離開網路就渣了？HTML5離線應用。不如原生應用？用PhoneGap。想調用原生API？開發Firefox OS應用吧。瀏覽器應用也得會吧，Chrome Firefox都有自己的文檔。接著是不是把後端甩了，自己來，裝Node.js，所以還得學點伺服器知識，想用npm管理node包？linux技巧shell神馬的也得學。想前後端通吃？再看看http協議。Web精通了？node-webkit 讓你可以寫桌面程序了，繼續學吧。
想學模塊化開發？看看CommonJS和AMD規範。理解JS有偏差？看看ECMA-262，等等不知道什麼時候第6版就要出了。瀏覽器各不相同，弄不清該怎麼兼容？看看W3C標準，HTML寫出來人看的懂，機器讀不懂？要SEO，要支持殘障人士？看HTML語義化，全會了但IE就是不支持？叫不出名字的瀏覽器尼瑪連JS都不知道是啥？漸進增強。想一次把各種設備全搞定？響應式設計。
然後上面這些不過是一些討巧的小技術。公司做什麼業務的？了解一下行業信息。面向大眾的產品？交互設計。美工不給力？UI設計。外包和諮詢？設計模式、重構方法、演算法、數據結構。知道軟體工程嗎？了解一下敏捷開發，或許還可以試試TDD、ATDD、BDD。
看了這麼多東西，第一反應是不是求中文文檔？學英語去吧。
這些也不過是我目前所能看到的一小部分，而且每段基本都是到了一個邊界，並不是沒得學了，而是繼續學又是另一片天地。真心希望有人能幫我填補知識盲區。另外，我僅把一些知識點串起來，不全或不對的地方請見諒。
吐槽：知乎的鏈接功能至少浪費我15分鐘時間。
----------------
本來不想更新，不過看到一直有人看到這個答案，擔心時間過太久誤導了大家，所以再說兩句。其實我一直都在說，我只是看這個問題是疑惑該學點什麼，所以擺了些工具和框架。但我發現許多人都只看標題，只記得「大牛」兩個字，其實技術棧層面的前後端之分根本就很滑稽，無非是JavaScript和某某語言的區別罷了，對資源分配策略或者說思維的不同才是前後端之分的本質區別。如果沒有領會到這一點的話，還是好好學技術，別管什麼前端後端的了，項目需要你做web做頁面，你就學前端再學點Java, Ruby, PHP之類的都可以。不要把前端這個概念當成懶得學其他技術的借口。未來JavaScript會變成相對瀏覽器來說的底層語言，開發者用各種各樣語法的語言開發之後編譯成JavaScript在瀏覽器上跑，如果還是只會前端三板斧，那註定被前端如火如荼的浪潮覆滅。TypeScript 相比CoffeeScript已經有了一些質變，還有類似Haskell語法的Elm, 加上webpack 的催化，這種趨勢會越來越明顯。
學過的東西雜而不精，算不得大牛。帶過前端團隊，也算是有幾年前端負責人的經驗。
隨著這幾年前端node.js,react,Angularjs等技術新起，越來越多從之前單純的前端開發到前端全棧開發，技術之多，之有趣，前端實在是繁華得很。
但是目前大多數情況下的前端開發，主要還是在web開發上，所使用的技術無非就是html,css,javascript。所以我覺得這個基礎是很有必要的，把html,css,javascript學精通，已經是小神級別（我就很羨慕那些可以寫一手好看的js的前端工程師）。
進入下一個階段，優化！不管是前端，後端，任何一個技術方向，都實現功能，好的代碼結構，接下來就是優化。你需要開始考慮頁面的載入速度，代碼壓縮，圖片壓縮，dom節點的載入順序，你會發現進入了新的境地。
作為前端負責人：
1 前端開發的能力
2 技術選型
3 管理團隊
4 前端團隊文化塑造
本回答只從技術角度闡述。
前端開發的能力，把html,css,javascript學好，你已經沒有問題啦。
技術的選型，這對負責人的前端技術視野，甚至後端技術也有要求，還需要考慮團隊的整體技術能力。
轉一個資源匯總，對技術視野或有幫助（轉自 前端資源教程 侵權刪）
-----------————————————————————————
感謝知友，有好的前端內容告知我一下，列表持續更新
綜合類
- 前端知識體系
- 前端知識結構
- Web前端開發大系概覽
- Web前端開發大系概覽-中文版
- Web Front-end Stack v2.2
- 免費的編程中文書籍索引
- 前端書籍
- 前端免費書籍大全
- 前端知識體系
- 免費的編程中文書籍索引
- 智能社 - 精通JavaScript開發
- 重新介紹 JavaScript（JS 教程）
- 麻省理工學院公開課：計算機科學及編程導論
- JavaScript中的this陷阱的最全收集–沒有之一
- JS函數式編程指南
- JavaScript Promise迷你書（中文版）
- 騰訊移動Web前端知識庫
- Front-End-Develop-Guide 前端開發指南
- 前端開發筆記本
- 大前端工具集 - 聶微東
- 前端開發者手冊
入門類
- 前端入門教程
- 瘳雪峰的Javascript教程
- jQuery基礎教程
- 前端工程師必備的PS技能——切圖篇
- 結合個人經歷總結的前端入門方法
效果類
- 彈出層
- 焦點圖輪播特效
工具類
- css sprite 雪碧圖製作
- 版本控制入門 – 搬進 Github
- Grunt-beginner前端自動化工具
慕課專題
- 最體系最負責的前端在線教學網站
- 張鑫旭 - 慕課系列
- lyn - 慕課系列
- 艾倫 - 慕課系列
- 碧仔 - Hello，移動WEB
周報類
- 平安科技移動開發二隊技術周報
六. API:1. 總目錄
開發中心
- mozilla js參考
- chrome開發中心（chrome的內核已轉向blink）
- safari開發中心
- microsoft js參考
- js秘密花園
- js秘密花園
- w3help 綜合Bug集合網站
綜合搜索
- javascripting
- 各種流行庫搜索
綜合API
- runoob.com-包含各種API集合
- 開源中國在線API文檔合集
- devdocs 英文綜合API網站
2. jQuery
- jQuery API 中文文檔
- hemin 在線版
- css88 jq api
- css88 jqui api
- 學習jquery
- jquery 源碼查找
3. Ecmascript
- Understanding ECMAScript 6 - Nicholas C. Zakas
- exploring-es6
- exploring-es6翻譯
- exploring-es6翻譯後預覽
- 阮一峰 es6
- 阮一峰 Javascript
- ECMA-262，第 5 版
- es5
4. Js template
- template-chooser
- artTemplate
- tomdjs
- 淘寶模板juicer模板
- Fxtpl v1.0 繁星前端模板引擎
- laytpl
- mozilla - nunjucks
- Juicer
- dustjs
- etpl
5. 彈出層
- artDialog 最新版
- artDialog 文檔
- google code 下載地址
- 賢心彈出層
- 響應式用戶交互組件庫
- sweetalert-有css3動畫彈出層
6. CSS
- CSS 語法參考
- CSS3動畫手冊
- 騰訊css3動畫製作工具
- 志爺css小工具集合
- css3 js 移動大雜燴
- bouncejs 觸摸庫
- css3 按鈕動畫
- animate.css
- 全局CSS的終結(狗帶) [譯]
7. Angularjs
- Angular.js 的一些學習資源
- angularjs中文社區
- Angularjs源碼學習
- Angularjs源碼學習
- angular對bootstrap的封裝
- angularjs + nodejs
- 呂大豹 Angularjs
- AngularJS 最佳實踐
- Angular的一些擴展指令
- Angular數據綁定原理
- 一些擴展Angular UI組件
- Ember和AngularJS的性能測試
- 帶你走近AngularJS - 基本功能介紹
- Angularjs開發指南
- Angularjs學習
- 不要帶著jQuery的思維去學習AngularJS
- angularjs 學習筆記
- angularjs 開發指南
- angularjs 英文資料
- angular bootstrap
- angular jq mobile
- angular ui
- 整合jQuery Mobile+AngularJS經驗談
- 有jQuery背景，該如何用AngularJS編程思想
- AngularJS在線教程
- angular學習筆記
8. React
- react.js 中文論壇
- react.js 官方網址
- react.js 官方文檔
- react.js material UI
- react.js TouchstoneJS UI
- react.js amazeui UI
- React 入門實例教程 - 阮一峰
- React Native 中文版
- Webpack 和 React 小書 - 前端亂燉
- Webpack 和 React 小書 - gitbook
- webpack
- Webpack，101入門體驗
- webpack入門教程
- 基於webpack搭建前端工程解決方案探索
- React原創實戰視頻教程
9. 移動端API
- API
- 99移動端知識集合
- 移動端前端開發知識庫
- 移動前端的一些坑和解決方法（外觀表現）
- 【原】移動web資源整理
- zepto 1.0 中文手冊
- zepto 1.0 中文手冊
- zepto 1.1.2
- zepto 中文注釋
- jqmobile 手冊
- 移動瀏覽器開發集合
- 移動開發大雜燴
- 微信webview中的一些問題
- 框架
- 特色的HTML框架可以創建精美的iOS應用
- 淘寶SUI
10. avalon
- avalonjs
- Avalon新一代UI庫： OniUI
- avalon.oniui-基於avalon的組件庫
- 前端資源教程
11. Requriejs
- Javascript模塊化編程（一）：模塊的寫法
- Javascript模塊化編程（二）：AMD規範
- Javascript模塊化編程（三）：require.js的用法
- RequireJS入門（一）
- RequireJS入門（二）
- RequireJS進階（三）
- requrie源碼學習
- requrie 入門指南
- requrieJS 學習筆記
- requriejs 其一
- require backbone結合
12. Seajs
- seajs
- seajs 中文手冊
13. Less,sass
- sass
- sass教程-sass中國
- Sass 中文文檔
- less
14. Markdown
- Markdown 語法說明 (簡體中文版)
- markdown入門參考
- gitbook 國外的在線markdown可編輯成書
- mdeditor 一款國內的在線markdown編輯器
- stackedit 國外的在線markdown編輯器，功能強大，同步雲盤
- mditor 一款輕量級的markdown編輯器
- lepture-editor
- markdown-editor
15. D3
- d3 Tutorials
- Gallery
- lofter
- iteye
- ruanyifeng
16. 兼容性
- esma 兼容列表
- W3C CSS驗證服務
- caniuse
- csscreator
- microsoft
- 在線測兼容-移動端
- emulators
17. UI相關
- bootcss
- MetroUICSS
- semantic
- Buttons
- kitecss
- pintuer
- amazeui
- worldhello
- linuxtoy
- gitmagic
- rogerdudler
- gitref
- book
- gogojimmy
18. HTTP
- HTTP API 設計指南
19. 其它API
- javascript流行庫匯總
- 驗證api
- underscore 中文手冊
- underscore源碼分析
- underscore源碼分析-亞里士朱德的博客
- underscrejs en api
- lodash - underscore的代替品
- ext4api
- backbone 中文手冊
- qwrap手冊
- 緩動函數
- svg 中文參考
- svg mdn參考
- svg 導出 canvas
- svg 導出 png
- ai-to-svg
- localStorage 庫
20. 圖表類
- Highcharts 中文API
- Highcharts 英文API
- ECharts 百度的圖表軟體
- 高德地圖
- 開源的矢量圖腳本框架
- svg 地圖
21. vue
- Vue
- Vue 論壇
- Vue 入門指南
- Vue 的一些資源索引
- 前端資源教程
21. 正則
- JS正則表達式元字元
- 正則表達式30分鐘入門教程
- MDN-正則表達式
- ruanyifeng - RegExp對象
- 小鬍子哥 - 進階正則表達式
- is.js
- 正則在線測試
- 前端資源教程
22. ionic
- ionic
23. 其它
- Mock.js 是一款模擬數據生成器
七. 開發規範
前端
- 通過分析github代碼庫總結出來的工程師代碼書寫習慣
- HTMLCSS編碼規範 by @mdo
- 團隊合作的css命名規範-騰訊AlloyTeam前端團隊
- 前端編碼規範之js - by yuwenhui
- 前端編碼規範之js - by 李靖
- 前端開發規範手冊
- Airbnb JavaScript 編碼規範（簡體中文版）
- AMD與CMD規範的區別
- AMD與CMD規範的區別
- KISSY 源碼規範
- bt編碼規範
- 規範加強版
- 前端代碼規範 及 最佳實踐
- 百度前端規範
- 百度前端規範
- 百度前端規範
- ECMAScript6 編碼規範–廣發證券前端團隊
- JavaScript 風格指南/編碼規範（Airbnb公司版）
- 網易前端開發規範
- css模塊
- 前端規範資源列表
PHP
- 最流行的PHP 代碼規範
- 最流行的PHP 代碼規範
Android
- 【敏捷開發】Android團隊開發規範
- Android 開發規範與應用
八. 其它收集1. 各大公司開源項目
- Facebook Projects
- 百度web前端研發部
- 百度EFE
- 百度github
- alloyteam
- alloyteam-github
- alloyteam-AlloyGameEngine
- AlloyDesigner 即時修改，即時保存，設計稿較正，其它開發輔助工具
- H5交互頁編輯器AEditor介紹 H5動畫交互頁開發的工具介紹
- AEditor H5動畫交互頁開發的工具
- maka
- 值得訂閱的weekly
- 騰訊html5
- 奇舞團開源項目
- Qunar UED
2. Javascript
常用
- ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性
- 模擬鍵盤
- 拼音
- 中國個人身份證號驗證
演算法
- 數據結構與演算法 JavaScript 描述. 章節練習
- 常見排序演算法（JS版）
- 經典排序
- 常見排序演算法-js版本
- JavaScript 演算法與數據結構 精華集
- 面試常考演算法題精講
- 前端資源教程
移動端
- fastclick
- no-click-delay
JSON
- 模擬生成JSON數據
- 返回跨域JSONAPI
3. Html5
- HTML5 有哪些讓你驚艷的 demo？
4. CSS
- browserhacks
- 前端資源教程
5. jQuery
焦點圖
- myfocus
- myfocus-官方演示站
- SuperSlidev2.1 – 大話主席
- soChange
6. Ext, EasyUI, J-UI 及其它各種UI方案
Ext
- extjs
- ext4英文api
- ext4中文api
- 前端資源教程
EasyUI
- jquery easyui 未壓縮源代碼
J-UI
- J-UI
Other
- MUI-最接近原生APP體驗的高性能前端框架
- Amaze UI | 中國首個開源 HTML5 跨屏前端框架
- 淘寶 HTML5 前端框架
- KISSY - 阿里前端JavaScript庫
- 網易Nej - Nice Easy Javascript
- Kendo UI MVVM Demo
- Bootstrap
- Smart UI
- 雅虎UI - CSS UI
7. 頁面 社會化 分享功能
- 百度分享 pc端
- JiaThis pc端
- 社會化分享組件 移動端
- ShareSDK 輕鬆實現社會化功能 移動端
- 友盟分享 移動端
8. 富文本編輯器
- 百度 ueditor
- 經典的ckeditor
- 經典的kindeditor
- wysiwyg
- 一個有情懷的編輯器。Bach』s Editor
- tower用的編輯器
- summernote 編輯器
- html5編輯器
- XEditor
- wangEditor
9. 日曆
PC
- 經典my97
- 強大的獨立日期選擇器
- fullcalendar
- fullcalendar日曆控制項知識點集合
- 中文api
- 農曆日曆
- 超酷的仿百度帶節日日曆老黃曆控制項
- 日期格式化
- 大牛日曆控制項
- 我群某管理作品
- input按位替換-官網
- input按位替換-github
- bootstrap-daterangepicker
- 國外30個插件集合
- JavaScript datepicker
- Datepair.js
- 一個風格多樣的日曆
- 彈出層式的全日曆
- jquery雙日曆
移動
- 大氣實用jQuery手機移動端日曆日期選擇插件
- jQuery Mobile 移動開發中的日期插件Mobiscroll
Date library
- Datejs
- sugarjs
- Moment.js
10. 綜合效果搜索平台
- 效果網
- 17素材
- 常用的JavaScript代碼片段
11. 前端工程化
概述
- 前端工具大全
- 什麼是前端工程化
Gulp
- Gulp官網
- Gulp中文網
- gulp資料收集
- Gulp：任務自動管理工具 - ruanyifeng
- Gulp插件
- Gulp不完全入門教程
- 為什麼使用gulp?
- Gulp安裝及配合組件構建前端開發一體化
- Gulp 入門指南
- Gulp 入門指南 - nimojs
- Gulp入門教程
- Gulp in Action
- Gulp開發教程（翻譯）
- 前端構建工具gulpjs的使用介紹及技巧
Grunt
- gruntjs
- Grunt中文網
Fis
- fis 官網
- fis
12. 輪播圖
pc圖輪
- 單屏輪播sochange
- 左右按鈕多圖切換
- fullpage全屏輪播
移動端
- 無縫切換
- 滑屏效果
- 全屏fullpage
- 單個圖片切換
- 單個全屏切換
- 百度的切換庫
- 單個全屏切換
- 滑屏效果
- 旋轉拖動設置
- 類似於swipe切換
- 支持多種形式的觸摸滑動
- 滑屏效果
- 大話主席pc移動圖片輪換
- 滑屏效果
- 基於zepto的fullpage
- [WebApp]定寬網頁設計下，固定寬度布局開發WebApp並實現多終端下WebApp布局自適應
- 判斷微信客戶端的那些坑
- 可以通過javascript直接調用原生分享的工具
- JiaThis 分享到微信代碼
- 聊聊移動端跨平台開發的各種技術
- 前端自動化測試
- 多種輪換圖片
- 滑動側邊欄
13. 文件上傳
- 百度上傳組件
- 上傳
- flash 頭像上傳
- 圖片上傳預覽
- 圖片裁剪
- 圖片裁剪-shearphoto
- jQuery圖片處理
- 前端資源教程
14. 模擬select
- 糖餅 select
- flexselect
- 雙select
- select2
- 前端資源教程
15. 取色插件
- 類似 Photoshop 的界面取色插件
- jquery color
- 取色插件集合
- farbtastic 圓環＋正方形
- 前端資源教程
16. 城市聯動
- jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果
- 前端資源教程
17. 剪貼板
- 剪貼板
- clipboard 最新的剪切方案
- 不是Flash的剪貼板
18. 簡繁轉換
- 簡繁轉換
19. 表格 Grid
- facebook表格
- 類似於Excel編輯表格-handsontable
- bootstrap-table插件
- datatables
20. 在線演示
- js 在線編輯 - runjs
- js 在線編輯 - jsbin
- js 在線編輯 - codepen
- js 在線編輯 - jsfiddle
- java 在線編輯 - runjs
- js 在線編輯 - hcharts
- js 在線編輯 - jsdm
- sql 在線編輯 - sqlfiddle
- mozilla 在線編輯器
21. 播放器
- Html5 VideoPlayer
22. 粒子動畫
- Proton 煙花
九. Nodejs
- nodejs 篇幅比較巨大
- Node.js 包教不包會
- 篇幅比較少
- node express 入門教程
- nodejs定時任務
- 一個nodejs博客
- 【NodeJS 學習筆記04】新聞發布系統
- 過年7天樂，學nodejs 也快樂
- 七天學會NodeJS
- Nodejs學習筆記（二）— 事件模塊
- nodejs入門
- angularjs nodejs
- 從零開始nodejs系列文章
- 理解nodejs
- nodejs事件輪詢
- node入門
- nodejs cms
- Node初學者入門，一本全面的NodeJS教程
- NodeJS的代碼調試和性能調優
十. 性能優化
常規優化
- Javascript高性能動畫與頁面渲染
- 移動H5前端性能優化指南
- 5173首頁前端性能優化實踐
- 給網頁設計師和前端開發者看的前端性能優化
- 複雜應用的 CSS 性能分析和優化建議
- 張鑫旭——前端性能
- 前端性能監控總結
- 網站性能優化之CSS無圖片技術
- web前端性能優化進階路
- 前端技術：網站性能優化之CSS無圖片技術
- 瀏覽器的載入與頁面性能優化
- 頁面載入中的圖片性能優化
- Hey——前端性能
- html優化
- 99css——性能
- Yslow——性能優化
- YSLOW中文介紹
- 轉一篇Yahoo關於網站性能優化的文章，兼談本站要做的優化
- Yahoo!團隊實踐分享：網站性能
- 網站性能優化指南：什麼使我們的網站變慢？
- 網站性能優化實踐，減少載入時間，提高用戶體驗
- 淺談網站性能優化 前端篇
- 前端重構實踐之如何對網站性能優化？
- 前端性能優化：使用媒體查詢載入指定大小的背景圖片
- 網站性能系列博文
- 載入，不只是少一點點
- 前端性能的測試與優化
- 分享網頁載入速度優化的一些技巧？
- 頁面載入中的圖片性能優化
- web前端優化(基於Yslow)
- 網站性能優化工具大全
- 【高性能前端1】高性能HTML
- 【高性能前端2】高性能CSS
- 由12306談談網站前端性能和後端性能優化
- AlloyTeam——前端優化
- 毫秒必爭，前端網頁性能最佳實踐
- 網站性能工具Yslow的使用方法
- 前端工程與性能優化（上）：靜態資源版本更新與緩存
- 前端工程與性能優化（下）：靜態資源管理與模板框架
- HTTPS連接的前幾毫秒發生了什麼
- Yslow
- Essential Web Performance Metrics — A Primer, Part 1
- Essential Web Performance Metrics — Part 2
- YUISlide,針對移動設備的動畫性能優化
- Improving Site Performance
- 讓網站提速的最佳前端實踐
- Why Website Speed is Important
- Need for Speed – How to Improve your Website Performance
- 阿里無線前端性能優化指南 (Pt.1 載入期優化)
- 前端資源教程
優化工具
- JavaScript 性能分析新工具 OneProfile
- JavaScript 堆內存分析新工具 OneHeap
在線工具
- google在線工具
- 阿里測
- 阿里-免費測試服務
- 阿里-F2etest多瀏覽器兼容性測試解決方案
- js性能測試
- 前端資源教程
十一. 前端架構
- 技術架構
- 前端架構
- 如何成為前端架構師
- 關於前端架構-張克軍
- 百度騰訊offer比較（騰訊遊戲VS百度基礎架構）
- 前端資源教程
十二. 個人作品1. 推薦作品
- winter代碼片段需要翻牆
- fgm
- 岑安作品集
- 當耐特demo集合
- 米空格 js作品
- myFocus
- SeaJS組件庫
- 顏海鏡作品
- 腳兒網作品
- javascript個人作品
- 妙味的雷東升遊戲作品
- javascript作品集
- 雲五筆，灰度產生生成工具
- 項目主頁
- 個性的作品主頁
- 播放器
- ucren js demos 集
- 智能社
- 實例陳列架
- zoye demo
- 王員外
- 平凡
- jyg 遊戲案例
- 很多jquery插件
- 不羈蟲 - soJs 作品系列
- frozenui
- 黑白棋
- fromone
2. 群員作品
- MDialog - [合肥-M.J]
- 輪播圖 - [上海－冷靜]
- [廣州—堅殼]
- [成都 - 無痕] 感恩節專題
- [球霸天]
- [北京-小數]
- [ptf] Magix 工具
- [杭州-Pft] Magix 基於 MVC 結構和 Hash 驅動的 OPOA（One Page One Application）應用
- [上海-劇中人]-實驗室
- [上海-豪情 ] 作品集合
- [成都-feeling]
- [上海-angela]
- [海南-hank]作品
- [上海-張力]博客
- [上海-zenki]作品
- 移動端圖案解鎖
- [合肥-M.J] - MPreview 移動端圖片預覽組
- [合肥-M.J] - Mexam 移動端在線做題組
- [北京-蘇瑞] - dancer小人
- [上海-玄沐]- 個人網站
- [廈門-二哲]- 個人博客
3. 國外大牛精品
- pazguille
十三. 簡歷模板
- 不錯的個人簡歷
- 簡歷
- 張倫
- 簡歷
- 翁天信
- 動畫方式的簡歷
- 組件豐富簡歷
- 簡歷池
- haorooms博客
- Justin Young
- 前端資源教程
十四. 面試題
- 那幾個月在找工作（百度，網易遊戲）
- 2014最新面試題
- 阿里前端面試題
- 2016校招內推 – 阿里巴巴前端 – 三面面試經歷
- 騰訊面試題
- 年後跳槽那點事：樂視+金山+360面試之行
- 阿里前端面試題上線
- 拉勾網js面試題
- 前端面試
- Web開發筆試面試題 大全
- 前端開發面試題
- 2014最新前端面試題
- 百度面試
- 面試題
- 前端工作面試問題
- 前端開發面試題
- 5個經典的前端面試問題
- 最全前端面試問題及答案總結
- 如何面試一名前端開發工程師？
- 史上最全 前端開發面試問題及答案整理
- 前端實習生面試總結
- 史上最全 前端開發面試問題及答案整理
- BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇
- 前端開發面試題大收集
- 收集的前端面試題和答案
- 如何面試前端工程師
- 前端開發面試題
- 牛客網-筆試面經
十五. iconfont
- 中文字體
- 淘寶字型檔
- 字體
- 製作教程
- zhangxinxu-icommon
- icommon
- 用字體在網頁中畫ICON圖標(推薦教程)
- 字體壓縮工具 感謝初級群 [深圳-小魚] 的推薦
十六. 開發工具類
前端開發工具
- IntelliJ IDEA 簡體中文專題教程
- Webstorm,InterllIdea,Phpstorm
- SublimeText
- Atom
- visual studio code
Chrome, Firebug, Filddle 調試
Fiddler
- Fiddler調式使用知多少(一)深入研究
- 微信fiddle
- 微信fiddle
- 前端資源教程
Chrome
- Google Chrome 官方
- Chrome - 基礎
- Chrome - 進階
- Chrome - 性能
- Chrome - 性能進階
- Chrome - 移動
- Chrome - 使用技巧
- Chrome - Console控制台不完全指南
- Chrome - Workspace使瀏覽器變成IDE
- network面板
- chrome開發工具快捷鍵
- chrome調試工具常用功能整理
- Chrome 開發工具 Workspace 使用
- Chrome神器Vimium快捷鍵學習記錄
- sass調試-w3cplus
- 如何更專業的使用Chrome開發者工具-w3cplus
- chrome調試canvas
- chrome profiles1
- chrome profiles2
- chrome profiles3
- chrome移動版調試
- chrome調試
- chrome的調試
- chrome console 命令詳解
- 查看事件綁定1
- 查看事件綁定2
- 神器——Chrome開發者工具(一)
- 奇趣百科性能優化(Chrome DevTools 中的 Timeline Profils 等工具使用介紹)
- chrome 開發者工具的 15 個小技巧
- Chrome開發者工具不完全指南
- Chrome 開發者工具使用技巧
Firebug
- firebug視頻教程
- firefox 模擬器
- console.log 命令詳解
- Firebug入門指南
- Firebug控制台詳解
- 前端資源教程
移動,微信調試
- 瀏覽器端調試安卓
- 移動端前端開發調試
- 使用 Chrome 遠程調試 Android 設備
- mac移動端調試
- mac移動端調試
- 無線調試攻略
- 無線調試攻略
- 屌爆了,完美調試 微信webview(x5)
- 微信調試的那些事
- 遠程console
- 微信調試工具
- 各種真機遠程調試方法匯總
iOS Simulator
- Simulator
- Xcode中的iOS模擬器(iOS Simulator)的介紹和使用心得
img
- loading img
- 智圖-圖片優化平台
- 在線png優化
生成二維碼
- 生成二維碼
瀏覽器同步
- puer
- liveReload
- f5
- File Watchers
在線PPT製作
- nodePPT
- PPT
- reveal
- slippy
- impress.js
十七. 前端導航網站
- 界面清爽的前端導航
- 前端導航
- 前端網址導航
- 前端名錄
- 前端導航
- 前端開發資源
- 網址導航
- 前端開發倉庫 - 眾多效果的收集地
- 前端資源導航
- F2E 前端導航
十八. 常用CDN
- 新浪CDN
- 百度靜態資源公共庫
- 360網站衛士常用前端公共庫CDN服務
- Bootstrap中文網開源項目免費 CDN 服務
- 開放靜態文件 CDN - 七牛
- CDN加速 - jq22
- jQuery CDN
- Google jQuery CDN
- 微軟CDN
十九. Git,SVN,Github
Git
- git-scm
- 廖雪峰-Git教程
- git-for-windows
- GitHub 添加 SSH keys
- gogithub
- git常規命令練習
- git的資料整理
- 我所記錄的git命令（非常實用）
- 企業開發git工作流模式探索部分休整
- GitHub 漫遊指南
- GitHub秘籍
- 使用git和github進行協同開發流程
- 動畫方式練習git
- 我從沒正經學過 HTML，都是用到就查，我基本只是把所有標籤對應的單詞背下來了而已。
- 我也沒有正經學過 CSS，也是用到就查 CSS Tricks，再不行就看 specs。
- JS 我是正經學過的（在亞馬遜中國搜 JavaScript 前 20 本書只要作者不是中國人，我基本都看過）
- 不過我在學 JS 前是正經學過 C 語言、彙編、http://ASP.NET、C# 的
- 我還在圖書館仔細研讀了產品經理方面的暢銷書
- 我對設計比較感興趣，了解用戶體驗和字體設計方面的一些常識
- 大學期間經常參與演講活動
- 大學期間經常幫人裝系統、做 PPT、修改 Word 排版、剪輯視頻，以及寫一些小程序、小網站
- 我們軟體工程專業的老師說「你們應該把市面上常見軟體的界面全部都熟悉一下，才能開發出好軟體」，於是我照做了，當時把我見過的軟體的所有功能都了解了一遍，後來發現貌似只有我這麼做了
- 卸載 Windows 堅持使用 Fedora 一年（然後買了 Macbook Air）
- 跟一美國 Python 程序員交流一年學編程和英語
- 跟某 Ruby 大牛交流三個月學 Rails 開發
- 跟騰訊某大佬學習前端開發
- 在阿里學習價值觀
- 在知乎學習裝逼
- 堅持寫作
這麼說起來，學了挺多東西的。
對於其他答案，我只想說：你們說來說去不都只是在學前端技術而已嗎？其他的也學學嘛。
以前我在 GitHub - phodal/developer: developer roadmap. use growth https://github.com/phodal/growth replace this 整理了自己學習的東西。。。
後來我把它整理成了一本電子書： GitHub - phodal/growth-ebook: Growth Engineering: The Definitive Guide。全棧增長工程師指南
- 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 重構
- 提煉函數
- 內聯函數
- 查詢取代臨時變數
- 重構到設計模式
- 過度設計與設計模式
- 上線
- 隔離與運行環境
- 隔離硬體：虛擬機
- 隔離操作系統：容器虛擬化
- 隔離底層：Servlet 容器
- 隔離依賴版本：虛擬環境
- 隔離運行環境：語言虛擬機
- 隔離語言：DSL
- LNMP 架構
- GNU/Linux
- HTTP 伺服器
- Web 緩存
- 資料庫端緩存
- 應用層緩存
- 前端緩存
- 客戶端緩存
- HTML5 離線緩存
- 可配置
- 環境配置
- 運行機制
- 功能開關
- 自動化部署
- 依賴與包倉庫
- 構建軟體包
- 上傳和安裝軟體包
- 隔離與運行環境
- 數據分析
- 構建-衡量-學習
- 想法-構建
- 產品-衡量
- 數據-學習
- 數據分析
- 識別需求
- 收集數據
- 分析數據
- 展示數據
- 用戶數據分析：Google Analytics
- 受眾群體
- 流量獲取
- 移動應用
- 網站性能
- 網站性能監測
- 網站性能
- SEO
- 爬蟲與索引
- 什麼樣的網站需要 SEO？
- SEO 基礎知識
- 內容
- UX 入門
- 什麼是 UX
- 什麼是簡單？
- 進階
- 用戶體驗要素
- 認知設計
- 流
- 構建-衡量-學習
- 持續交付
- 持續集成
- 持續集成系統
- 持續集成流程
- 持續交付
- 基礎設施
- 持續部署
- 持續學習
- 持續閱讀
- 持續編程
- 持續寫作
- 持續集成
- 遺留系統與修改代碼
- 遺留代碼
- 遺留代碼
- 如何修改遺留代碼
- 修改遺留代碼
- 網站重構
- 速度優化
- 功能加強
- 模塊重構
- 遺留代碼
- 回顧與架構設計
- 自我總結
- 吾日三省吾身
- Retro
- Retro 的過程
- 三個維度
- 架構模式
- 預設計式架構
- 演進式架構：擁抱變化
- 浮現式設計
- 意圖導向
- 重構
- 模式與演進
- 每個人都是架構師
- 如何構建一個博客系統
- 相關閱讀資料
- 架構解耦
- 從 MVC 與微服務
- CQRS
- CQRS 結合微服務
- 自我總結
免責申明，偶不是大牛，連小牛都不是 
純拋磚引玉，前端，我的理解是主要是HTML, CSS, JavaScript
學過哪些東西，我覺得取決於方向，因為JavaScript似乎什麼都可以做，一些個人認為的方向，拋磚引玉：
- - 桌面Web前端，也就是通常的前端，jQuery, YUI, MooTools, Dojo, Closure等
- - 移動Web開發 (Mobile Web)，jQuery Mobile, Sencha touch (沒做過移動開發以前，我錯誤的認為這個桌面前端差不多，現在覺得差別還是比較大的)
- - Web後端，NodeJS
- - 前後通吃，MeteorJS
- - 單頁面Hybrid應用，BackboneJS，AngularJS，EmberJS， KnockoutJS等
- - 移動App開發，PhoneGap, Firefox OS, Titanium
- - 桌面應用，如Window8，再如 rogerwang/node-webkit 路 GitHub
- - 用JavaScript玩轉物聯網：Technical Machine獲100萬美元融資，打造Tessel微處理器
但無論如何基礎都要打紮實了，我覺得
前端大牛？大牛？不知為何，我特別討厭大牛這倆字。可能只是喜歡在行業群里蹦躂，也有可能只是熟練使用某些框架，這些人都不叫大牛。 優秀的前端只有兩點，第一，美感好，對用戶體驗有研究，能影產品甚至ued（可惜幾乎沒有這樣的前端）！第二，程序思維好，對應的是css、html、js基礎紮實，並且願意去研究前端的前沿技術、框架同時對於後端也有一定的了解（為了更好的和後端配合）。
HTML，CSS，JAVASCRIPT
web開發萬變不離其宗。工具日新月異，但基本功還是這些。
不推介在有一定基礎之前搞些亂七八糟的工具，什麼自動化處理組件。其中的原理自己都沒明白，只會是個人雲亦云的應聲蟲。
學習前端，少想那些有的沒的，少看那些人云亦云的東西。看看大牛的微博，博客。看看他們討論什麼，學習什麼。
微博上有很多前端大牛。自己稍微看看，就知道了。參與一些開源的項目。
慢慢的去積累。想成為任何大牛。你可知道，大牛成長之前都是卑微的苦行者？
首先，你的問題有兩點，一個是大牛，一個是學過什麼？
上面大部分回答是學過什麼，如果你真想問大牛學過哪些的話，可以直接 live 付費騷擾，或者直接去博客上找。不過，我感覺你想要的只是學過什麼，前提條件應該是：一些有經驗的人的前端學習路徑是啥？
上面那個描述感覺更對你的想法。
前端能學啥這個問題，我真的勸你別問。因為，前端最不缺的就是學啥。
首先，基本的 HTML、CSS、JS 三個語言。
然後，具體方向橫向衍生就可以扯出很多很多。
光 JS 我可以給你扯出：
ECMAScript 2015 Language Specification
ECMAScript? 2016 Language Specification
https://tc39.github.io/ecma262/
上面只是基本語法。
然後，到 HTML5 的標準，就有：HTML5.1/2
HTML 5.1 2nd Edition
HTML 5.2
衍生到具體技術就有：
Service Worker 全面進階 | PWA
直播 | villianHR
react系列 | villianHR
WebRTC | villianHR
動畫 | villianHR
web安全 | villianHR
js設計模式系列 | villianHR
。。。
當然，我這裡還沒扯到具體的編譯工具，webpack、rollup、gulp 等，CSS 的語法糖：SCSS/LESS，後端 NodejS 語言基本操作等等。
沒事，你只要能學完前端，算我輸~
作者：張小河
原文鏈接：怎麼學習前端開發？求推薦學習路線？
？ - 張小河的回答
大家都是從小白走過來，每個人的軌跡不一樣。冒昧說一下個人看法
自學
如果有耐心的話，可以看看w3cschool的教程w3school 在線教程
下面標紅的地方，可以按照順序看看。
but....
我知道多數人肯定沒有耐心一個一個看下去，而且看完這些確實也比較累。
最主要的是，很多知識點不一定就在工作中比較頻繁的運用到。一般來說，咱們前端工程師遇到不懂的小問題，通過查查手冊也可以解決。
看學習視頻
如果想比較直觀的學習，其實看視頻是一件比較快的方式。（我本人是這樣的，喜歡看視頻）
慕課網有比較多的免費視頻可以入門前端開發_web前端開發
但缺點也比較明顯，就是慕課網的體系不是按照一套完整的課程體系來的，多數是具體的案例拆解的。
再一個因為講師比較多，這個是優點也是缺點。學生找到一個自己喜歡的講師可能需要費點功夫。不過作為入門是足夠了。
學習論壇
如果遇到不懂的問題可以去論壇提問，w3cfuns 前端網（W3Cfuns）是一個不錯的地方，又很多朋友分享案例，替你解答問題。
大牛博客
還有一些大牛的博客可以關注下：
阮一峰 阮一峰的網路日誌
張鑫旭 首頁 ? 張鑫旭
大漠 w3cplus_引領web前沿，打造前端精品教程
上面都是很優秀的前端博客、建議題主可以好好看看。
關於報班
如果自學比較費勁，其實找一個培訓機構倒也是一個好事。至少來說，培訓機構總結整理了一套完善的課程體系，讓學員學習起來比較系統。可以監督跟進學員的學習情況。包括一個學習氛圍。
不過不得不承認現在的培訓機構魚龍混雜，需要學員擦亮眼睛。
再一個，請大家不要過度迷信培訓機構，那些號稱包就業、包學會的機構...多數都是騙人的。對，騙紙...（希望不要被拍磚）
我們都知道能不能學會一項技能，多數都是靠學生自己的努力。優秀的講師，優秀的課程只是一個輔助作用。作為培訓機構能做到不誤人子弟，不傳遞錯誤的知識，如果再能有一些責任心，這樣的機構就很不錯了。
最後，附上一張學習圖譜，給需要的朋友參考一下：
第一本，入門
《Head first HTMLCSS》
最好的入門書。看兩遍就對HTML CSS 有個大概印象了。
此時把w3cschool作為備查手冊收藏起來
第二本《CSS權威指南（第三版）》
最權威的CSS書籍，除了閱讀W3C的文檔外的不二選擇（就是翻譯有點操蛋，遇到感到難理解的地方可能還是要求助於網路資源）。有時間（無論是現在還是將來）可以反覆看，併當做字典隨時查。
第三本《精通CSS》
廣受前輩推薦的一本書。上一本書是字典的話，這本書相當於《中學生作文大全》，彙集了一些CSS的最佳實踐。
第四本《圖解CSS3：核心技術與案例實踐》
這本書比較新，講解的是最新的CSS3（前三本書停留在CSS2.1時代），CSS3也是必學的，不是什麼可學可不學的最新技術。
HTML CSS值得看的書就這些（之後會有一本《CSS秘密花園》，尚在翻譯中，也很值得期待），剩下的就是自己寫還有看技術博客了。接下來是JavaScript，HTML和CSS都是沒有邏輯的標記型語言，JS才是真正的編程語言，評價前端工程師的水平就看這個了。
第五本《JavaScript DOM編程藝術》
最好的JS入門書籍，一目了然地告訴你如何用JS操作DOM（這是瀏覽器端編程的基本功），還灌輸了最符合標準的編程理念。可惜有點老，最新一版是2010年的，以至於部分內容有點過期，例如本書內經常提到「某某方法瀏覽器不一定支持，需要小心使用」，而這些歷史遺留問題當今已經不存在了，閱讀過程中無視就好。真想學好前端這門技術，不能光看視頻和看書，想學習可以加裙前面是 6 1 1中間是4 2 8 後面是 1 4 2，這裡有最新的HTML資料和分析課程講解，真心想學習的可以加，不是來學習的請勿打擾。請勿打擾點擊鏈接加入群【網頁製作學習群】：https://jq.qq.com/?_wv=1027k=49ZfTHl
第六本《JavaScript高級程序設計》
每個前端必看的書，此書是前端工程師科技樹的關鍵一環。看完此書後再看看之後各類進階書籍會比較好。
俗稱紅寶書，也算入門書籍，雖然是大部頭（七百多頁），但至少通讀一遍。
全部掌握了，你可以在網路社區里談笑風生了，經過實踐的鍛煉後，面試個前端工程師的崗位應該都沒問題了。
第七本《JavaScript語言精粹》
也是前端必看。薄薄一百來頁，對JS的去粗取精。
第八本《你不知道的JavaScript》
這是一套叢書， 目前為止僅翻譯了第一卷。每本都挺薄，深入介紹了JS中的重要概念。
第九本《JavaScript設計模式》
「設計模式」是軟體工程的重要課題，相當於高考時候的答題套路。前人總結出來的應對各種問題的模板。也算是必看書籍。關於JavaScript設計模式的書籍目前也有好幾本，也有國人寫的，挑一兩本看看就好。
第十本《高性能網站建設指南》（及其續篇《高性能網站進階》）
告訴你真正的商業公司的前端是怎麼優化一個網站的。當然優化的問題不是看看書就能解決的，最好時刻了解你的同行們的經驗。
看 完以上十本算是前端入門了。到現在為止，配合搜索引擎，已經可以無障礙地做出靜態網頁、各種特效、用AJAX配合後台構建Web應用了。然後是各種框架、 庫、預處理語言的學習，而且現在JavaScript也可以用來寫伺服器了（Node.js），這樣一來JS通吃前後端，前端工程師都歡欣鼓舞，這也是個 學習熱點。下面是一些補充書籍，可以穿插著看。（至少看了兩遍《JavaScript高級程序設計》再看下面的書）
《圖解HTTP》和《HTTP權威指南》
每個Web程序員都應該熟悉HTTP協議里的內容。《圖解HTTP》算是科普級別的書，《HTTP權威指南》則是大部頭，需要點耐心才能看完。建議在了解AJAX後立刻開始學習HTTP協議。
《鋒利的jQuery》
講JS最著名的庫——jQuery的，快速入門的書。光會原生JS不夠，還要會用庫。
《數據結構和演算法的JavaScript描述》
作為程序員如果連基本的數據結構和排序、查找演算法都不會實在丟臉。
《JavaScript編程精解》
鞏固對JS的理解，很薄
《JavaScript啟示錄》
同上，也很薄。
《JavaScript權威指南》
號稱「聖經」，最權威的JS書本，買來當作字典備查吧，沒事也可以翻翻。
然後就是向高級前端工程師發展了，由於我是個菜鳥，也沒辦法做什麼推薦。這時候全靠上社區、看博客來開闊眼界追趕潮流了。
=========
最後不得不說的是，所有的書裡面的一些理念、方法等，只是作者自己認為的最佳方案，不代表就是絕對的真理，有的甚至因為時代的發展反而成為了錯誤內容，「盡信書不如無書」，大家還是應該結合工作實際和當前的潮流來學習新知識。
《圖解CSS3:核心技術與案例實戰》
《CSS實戰手冊第3版》
《HTML5與CSS3權威指南（上下冊）》
JS
入門：
《深入淺出JavaScript》
《JavaScript DOM編程藝術》
《JavaScript學習指南》
《JavaScript權威指南》
任選其一。
個人建議：JavaScript權威指南。
進階：
《ppk談JavaScript》
《精通JavaScript》
《JavaScript高級程序設計》
任選其一。
個人建議：JavaScript高級程序設計。
前端好可怕，看完回答我都不想幹了……居然要掌握這麼多東西。0 0
當你js很好的時候，你會發現，上面有些工具的學習，只需要1天
最近在看bootstrap，發現除了大一的時候看過的html+css,和一些js，JQuery之外，幾乎沒學什麼關於前端的東西。偶爾了解過一些html5。想知道如果作為一個團隊的前端負責人還需要學習哪些東西？發現bootstrap與.less有關，除了這個還有哪些是需要學習的？希望得到各方大神的回答。
補充一下，一些基本的計算機方面的東西還是學習過的。就是說除了最基本的像樓下馬前輩說的這些之外，還需要哪些？
目前大多數情況下的前端開發，主要還是在web開發上，所使用的技術無非就是html,css,javascript。所以我覺得這個基礎是很有必要的，把html,css,javascript學精通，已經是小神級別(最基礎的往往是最重要的)
掌握了最基礎的東西後，學學習一些框架的的玩意,看到網上很多框架，如MVVM那些（vue，angular，react。。。。。），各種框架層出不窮，有生之前估計不可能全部學完，但是類似這些框架都是有很多的共同點的，你學會了一個學其他的就很快了。想玩 Web後端，就學習一下Node.js,想發展單頁面Hybrid應用,可以嘗試PhoneGap, Firefox OS, Titanium，如果想做遊戲類的，多多研究canvas這些東西。
首先我不是大牛
- 前端規範，無規不成方圓，養成良好的代碼習慣是學習前端開發的基石；
- html+css（html語意化，css要有個人見解，不停留在會寫）；
- js（研究類庫，學習他們的思想，試著編寫js庫）；
- nodeJS，angularJS，「新」是前端的靈魂，要跟著時代走，新技術一定要去了解；
- php+java+Linux+http+db+oc，後端要去了解，說好的全棧工程師呢？
- 可以的話能在mac環境下開發
對了，還有git…
/* update */
剛幾個朋友問我為什麼要選mac環境：
1、Mac OS X 是基於 Unix 的。這一點太重要了，尤其是對開發人員，至少對於我來說很重要，這意味著Unix 下一堆好用的工具都可以隨手撿到。如果你是個 windows 開發人員，我想你會在 windows 上裝一套cygwin 環境吧？你不用 flex/yacc，grep，screen，ssh，make？好多 open source 的項目只提供cygwin/gcc/make 的編譯環境。Mac 就是基於 BSD Unix 的，所有這些都是 built in 的。
2、開發環境。c/c++/java/perl/python/php/ruby/lisp，各種 shell，應有盡有，直接支持，非常方便。你要在 windows 上開發 C++，要裝個 Visual Studio 編譯器吧？或者其他的 C++ 編譯器；你要開發 Java，你要下載 Java SDK 吧，說不定還要一個 Elipse 或者 Netbean；你要用 Perl，要安裝一個 Perl 解釋器吧，Active Perl？你要 python/php/ruby，你要安裝……？開發程序需要庫，圖像處理，視頻處理，人工智慧之類大部分庫都是只支持 Unix/Linux 的。Mac 基於 Unix，所以這些通通都和 Mac 能很好和睦相處。
3、編輯器 Vi/Emac。作為 程序員/IT 人員一個好用的編輯器太重要了，因為寫程序/改系統配置都需要編輯器。我在Mac上差不多1/2的時間是 browser/email，另外1/2時間差不多就是 Vi 了。
4、沒有病毒/木馬。用了5年多的 Mac 就沒看到病毒長成什麼樣，我還看不到 Mac 上裝殺毒軟體的需要。
5、不需要維護。Mac 買來就直接用，磁碟碎片整理？不需要。裝驅動？Mac 裝好了，驅動就好了。重裝系統？我5年沒有重裝過一次（期間換了幾次不同的 Mac）。
6、簡潔。Mac 上所有的操作都簡潔到了極致，盡量避免干擾用戶，增加了程序員的生產力。比如切換無線網功能，在 Mac 上切換隻需要1次滑鼠點擊就可以完成，在 windows 上需要點擊多次滑鼠（包括一些很愚蠢的確認對話框）；再比如卸載 USB 盤，Mac 只需要1次滑鼠點擊，windows 至少需要點擊右下角圖標、停止設備、確認對話框等多次點擊。
7、多窗口切換。這個很方便管理打開的程序/文檔。我經常要在多個虛擬窗口切換，比如看瀏覽網頁/郵件一個窗口，寫程序/文檔一個窗口。
8、程序員文化。國外程序員是以 Unix 為主流成長起來的。這一點和國內不同，中國程序員/開發人員大都是從90年代的 DOS 開始的，隨著 Windows 的壯大，成長了一批使用 Microsoft 工具的程序員。這也解釋了為什麼自從 Mac 切換到 Unix 陣營後，Mac 會發展這麼快。基於 Unix 的 Mac 一經推出後，迅速贏得了一大批老 Unix hacker 和新 Web 2.0/Linux hacker 的關注，正是因為這些忠實的 fans 影響了他們的人際網路，圈子，博客，從而影響了整個程序員文化。有點像 Ruby on Rails，開始是一小部分人（精英人士）試用，這些人感覺不錯就在博客，研討會等各種場合鼓吹，從而在 Web 開發領域颳起一陣 Ruby 風。
9、蘋果很酷。每台電腦，每個系列都設計完美，從包裝盒，宣傳冊，廣告，電源線，電腦內部，電腦外觀，電腦軟體都精心設計，風格統一。甚至微小到螺絲，看過蘋果機箱上的螺絲，機箱裡面的數據線嗎？那個也是設計。每個 Mac 上都標記著：Designed by Apple in California，而不是 Desgined in USA，蘋果就是這麼酷，「我們是一家加州公司」。蘋果的保密措施可以說做到了極致，產品官方不發售就在市場上看不到蹤影。
10、企業家精神。蘋果的傳奇經歷吸引了大批矽谷創業者，Apple/Google/Microsoft/Amazon/eBay/Yahoo 代表了創新，進取的企業家精神。這不是一個大原因，但可以看作是 Mac 在國外，尤其是在美國，尤其是在矽谷，尤其是在大學這麼流行的一個小原因吧。據調查2007年美國大學 Mac 市場佔有率第一，這些大學精英們畢業以後走上工作崗位，走上社會，再過幾年其中一部分走入中層，走進高層，他們會如何影響 Mac 呢？
放個圖補充@張錚錚的答案：）
如果說精通一個領域需要一萬小時，HTML＋CSS＋JS，要三萬小時啊
很簡單，就是這麼一張圖而已。。。
其實上面的大拿們說的感受還有一些先關的技術,對於入門級別的人來說是不大的,與其花時間在初期的學習,不如直接用現有的技術去實踐,前端不同於其他,需要一種積累,一種對於改變的追求,js實現一件事情會有一萬種方法,問題就在於選擇那種為什麼.當你review自己的代碼發現需要改變的時候,你會發現需要到很多上面提到的技術.so.....慢慢來積累吧
授之於魚不如授之於漁
…………………
從上向下的學習法是先了解什麼是GUI，然後了解前端解決的是什麼問題，而這些問題對應的是什麼技術，這些技術對應的知識點是什麼。
從下向上的學習方法是先學習html，js，css的使用，然後學習規範，然後根據遇到的問題尋找解決辦法，根據項目積累經驗。
重點：我廠招前端，我廠有大牛！簡歷請發jia.kang@qunar.com我不是大牛，只是介紹一點微小的人生經驗。
我開始學前端，是w3cshool上的最基本的html、css和javascript教程，剛學完這些的時候其實也就入了個門，事實上連個毛都寫不出來。「學以致用」，這些基礎的知識，可能很多當時看的時候並不太明白，但是以後你碰到了具體的問題，再回想的時候，你就會恍然大悟，「原來如此」。
後來我在我的畢業設計上，需要用到一些前端操作，那個時候我主要用的是Bootstrap和jQuery，學完這兩個東西你就能比較簡單地寫出一些還算好看的、也能動起來的頁面了，不像前面那些東西，學了半天還是只能做一些很醜的頁面，即使是實現一些基本的dom操作和ajax請求都很麻煩。
後來我實習了，剛開始學AngularJS的時候，它的雙向綁定，前端MVC，真是讓我驚為天人，簡直太特么好用了。你要是前面的路都走完了，來到這裡的時候你就會發現其實基本的html、css、javascript也就真的只是個基礎，不一定要學得一字不落的，前端的發展日新月異，每分每秒都有很多新鮮的東西發明出來，雖然這有重複造輪子的嫌疑，但是這些新技術確實體現了現代化的軟體開發思想（畢竟js是一門設計時間很短、也很不完善的語言）。
現在我主要用React+Redux+ES6寫前端，感覺真是爽飛。而像gulp、webpack這些工具，其實只要稍微了解一下就行了，我個人的css不算好，所以對css方面不算太了解。
Apress出的書其實都蠻好的，例子很多，講解又深，我推薦這幾本
《Pro AngularJS》《Pro React》兩本，還有一本css的書我覺得也很不錯《CSS3 the missing manual》，不過都是英文的（搞計算機還是要有一定的英文水平）。
至於電子書的下載地址，你用谷歌搜書名就都找得到。
然後還有幾個鏈接：
ECMAScript 6入門
React 入門教程
Read Me | Redux
一小時包教會 —— webpack 入門指南
我個人主要的路子就是以上這樣的。其實我前端的基礎並不算太好，全都是自學。但是這世上很多事情，要都想等到萬無一失的時候才動手，那就什麼都幹不了，所以學得差不多了就趕快用起來，不要拖不要等，用著用著，你就會發現，也就這樣，沒啥大不了的。
前端技能匯總 JacksonTian/fks · GitHub
推薦閱讀：