轉自: https://www.zhihu.com/question/22146521/answer/94842197
學過的東西雜而不精，算不得大牛。帶過前端團隊，也算是有幾年前端負責人的經驗。
隨着這幾年前端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 前端開發指南
- 前端開發筆記本
- 大前端工具集 - 聶微東
- 前端開發者手冊
-
入門類
-
效果類
-
工具類
-
慕課專題
-
週報類
六. API:1. 總目錄
-
開發中心
-
綜合搜索
-
綜合API
- runoob.com-包含各種API集合
- 開源中國在線API文檔合集
- devdocs英文綜合API網站
2. 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. 彈出層
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
- 框架
10. avalon
11. Requriejs
- Javascript模塊化編程（一）：模塊的寫法
- Javascript模塊化編程（二）：AMD規範
- Javascript模塊化編程（三）：require.js的用法
- RequireJS入門（一）
- RequireJS入門（二）
- RequireJS進階（三）
- requrie源碼學習
- requrie 入門指南
- requrieJS 學習筆記
- requriejs 其一
- require backbone結合
12. Seajs
13. Less,sass
14. Markdown
- Markdown 語法說明 (簡體中文版)
- markdown入門參考
- gitbook國外的在線markdown可編輯成書
- mdeditor一款國內的在線markdown編輯器
- stackedit國外的在線markdown編輯器，功能強大，同步雲盤
- mditor一款輕量級的markdown編輯器
- lepture-editor
- markdown-editor
15. D3
16. 兼容性
17. UI相關
- bootcss
- MetroUICSS
- semantic
- Buttons
- kitecss
- pintuer
- amazeui
- worldhello
- linuxtoy
- gitmagic
- rogerdudler
- gitref
- book
- gogojimmy
18. HTTP
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. 圖表類
21. vue
21. 正則
22. ionic
23. 其它
七. 開發規範
-
前端
- 通過分析github代碼庫總結出來的工程師代碼書寫習慣
- HTML&CSS編碼規範 by @mdo
- 團隊合作的css命名規範-騰訊AlloyTeam前端團隊
- 前端編碼規範之js - by yuwenhui
- 前端編碼規範之js - by 李靖
- 前端開發規範手冊
- Airbnb JavaScript 編碼規範（簡體中文版）
- AMD與CMD規範的區別
- AMD與CMD規範的區別
- KISSY 源碼規範
- bt編碼規範
- 規範加強版
- 前端代碼規範 及 最佳實踐
- 百度前端規範
- 百度前端規範
- 百度前端規範
- ECMAScript6 編碼規範–廣發證券前端團隊
- JavaScript 風格指南/編碼規範（Airbnb公司版）
- 網易前端開發規範
- css模塊
- 前端規範資源列表
-
PHP
-
Android
八. 其它收集1. 各大公司開源項目
- Facebook Projects
- 百度web前端研發部
- 百度EFE
- 百度github
- alloyteam
- alloyteam-github
- alloyteam-AlloyGameEngine
- AlloyDesigner即時修改，即時保存，設計稿較正，其它開發輔助工具
- H5交互頁編輯器AEditor介紹H5動畫交互頁開發的工具介紹
- AEditorH5動畫交互頁開發的工具
- maka
- 值得訂閱的weekly
- 騰訊html5
- 奇舞團開源項目
- Qunar UED
2. Javascript
-
常用
-
算法
-
移動端
-
JSON
3. Html5
4. CSS
5. jQuery
6. Ext, EasyUI, J-UI 及其它各種UI方案
-
Ext
-
EasyUI
-
J-UI
-
Other
7. 頁面 社會化 分享功能
- 百度分享pc端
- JiaThispc端
- 社會化分享組件移動端
- ShareSDK 輕鬆實現社會化功能移動端
- 友盟分享移動端
8. 富文本編輯器
- 百度 ueditor
- 經典的ckeditor
- 經典的kindeditor
- wysiwyg
- 一個有情懷的編輯器。Bach’s Editor
- tower用的編輯器
- summernote 編輯器
- html5編輯器
- XEditor
- wangEditor
9. 日曆
-
PC
-
移動
-
Date library
10. 綜合效果搜索平臺
11. 前端工程化
-
概述
-
Gulp
-
Grunt
-
Fis
12. 輪播圖
-
pc圖輪
-
移動端
13. 文件上傳
14. 模擬select
15. 取色插件
16. 城市聯動
17. 剪貼板
18. 簡繁轉換
19. 表格 Grid
20. 在線演示
- js 在線編輯 - runjs
- js 在線編輯 - jsbin
- js 在線編輯 - codepen
- js 在線編輯 - jsfiddle
- java 在線編輯 - runjs
- js 在線編輯 - hcharts
- js 在線編輯 - jsdm
- sql 在線編輯 - sqlfiddle
- mozilla 在線編輯器
21. 播放器
22. 粒子動畫
九. 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 加載期優化)
- 前端資源教程
-
優化工具
-
在線工具
十一. 前端架構
十二. 個人作品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. 國外大牛精品
十三. 簡歷模板
十四. 面試題
- 那幾個月在找工作（百度，網易遊戲）
- 2014最新面試題
- 阿里前端面試題
- 2016校招內推 – 阿里巴巴前端 – 三面面試經歷
- 騰訊面試題
- 年後跳槽那點事：樂視+金山+360面試之行
- 阿里前端面試題上線
- 拉勾網js面試題
- 前端面試
- Web開發筆試面試題 大全
- 前端開發面試題
- 2014最新前端面試題
- 百度面試
- 面試題
- 前端工作面試問題
- 前端開發面試題
- 5個經典的前端面試問題
- 最全前端面試問題及答案總結
- 如何面試一名前端開發工程師？
- 史上最全 前端開發面試問題及答案整理
- 前端實習生面試總結
- 史上最全 前端開發面試問題及答案整理
- BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇
- 前端開發面試題大收集
- 收集的前端面試題和答案
- 如何面試前端工程師
- 前端開發面試題
- 牛客網-筆試面經
十五. iconfont
- 中文字體
- 淘寶字庫
- 字體
- 製作教程
- zhangxinxu-icommon
- icommon
- 用字體在網頁中畫ICON圖標(推薦教程)
- 字體壓縮工具感謝初級羣 [深圳-小魚] 的推薦
十六. 開發工具類
-
前端開發工具
-
Chrome, Firebug, Filddle 調試
-
Fiddler
-
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
-
移動,微信調試
-
iOS Simulator
-
-
img
-
生成二維碼
-
瀏覽器同步
-
在線PPT製作
十七. 前端導航網站
十八. 常用CDN
- 新浪CDN
- 百度靜態資源公共庫
- 360網站衛士常用前端公共庫CDN服務
- Bootstrap中文網開源項目免費 CDN 服務
- 開放靜態文件 CDN - 七牛
- CDN加速 - jq22
- jQuery CDN
- Google jQuery CDN
- 微軟CDN
十九. Git,SVN,Github