鏈接：https://zhuanlan.zhihu.com/p/22229868
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
昨天寫的文章，一大早發出去點開預覽的時候發現格式都錯亂了。又急着去上班就把文章給刪除了。本來是週一更的習慣也就打破，放到週二去更新了。今天週二，度過了煩人的週一，又開始一個新的工作日。
這篇文章起初是想做：有哪些適合新手練手的前端項目？但是我發現我一個人沒法整理，於是正在邀請幾位大大朋友在幫忙。所以這個主題暫時空缺一週或是兩週，在下週或是下下週的時候可能會補上來。也歡迎各位朋友在學習過程中碰到不錯的練習項目可以積極的推薦。
學習編程專欄連載的練手項目篇，如有興趣可以訪問前三篇：
有哪些適合新手練手的Java項目？ - 學習編程 - 知乎專欄
有哪些適合新手練手的Java Web項目？ - 學習編程 - 知乎專欄
有哪些適合新手練手的Python項目？ - 學習編程 - 知乎專欄
本篇文章推薦分享五篇關於前端資源彙總的帖子，希望可以幫助到學習前端的你。同時你可以去看一看前端技能樹喔：前端技能
第一篇：前端收藏夾 ，以及他們的github地址：GitHub - w3ctrain/w3ctrain.github.io: w3ctrian前端收藏夾
以下是目錄，更多信息請訪問他們的主頁：
前端工具
自動化： Gulp 、 Grunt 、百度Fis 、Ant、Yeoman、Codekit、Koala、Webpack
預編譯： Slim、Haml、Coffeescript、Sass、BabelJs、Jade、Less、Stylus、Pleeease、PostCSS、
查找工具：CssTriggers、screensiz.es、友盟指數、javascripting、builtwith、thetoolbox、stylesheets
版本控制：Github、GitCafe、GitLab、Bitbucket、Sourcetree、Cornerstone、版本控制之道、ProGit、廖雪峯的git教程、svn教程
編輯器：Sublime Text、Atom、HBuilder、WebStorm、MacDown、UltraEdit、ace、Brackets、LightTable、Visual Studio Code
在線編輯：Jsfiddle、Codepen、Jsbin、Runjs、sassmeister
調試/測試：Firebug、YSlow、IEDeveloperToolbar、Fiddler、ChromeDevTools、JSLint、JSHint、CSSLint、HTML Validators、UnitJS、Jasmine、BrowserStack、Testem、Dalekjs、NightWatch、Hardy
部署流程：YUI Compressor、UglifyJs、CleanCss、JSDoc
其它：CodeIf、H5Viewer、anvil、cssmixins、JSON Server、ngrok、Glyphter、CSSStats、spritegen、placehold.it、MWeb、browsersync.io、kjson.com、strut.io、Reveal.js、iconverticons.com、智圖、longshadows、cubic-bezier、browserhacks、tool.oschina.net、Pagespeed、icomoon.io、circulus、Mock.js
博客/社區/資訊
國內綜合：w3ctech、w3cplus、w3cfuns、前端亂燉、前端觀察、segmentfault、html5tricks、騰訊ISUX、百度EFE、奇舞團、淘寶UED、前端裏、div.io、慕課網、Codecademy、極客標籤、InfoQ中國、WEB前端開發、前端開發博客、愛奇舞——H5.vc、看雲、匯智網、伯樂在線
國外綜合：tutsplus、CSSAnimation、TeamTreehouse、SmashingMagazine、CodyHouse、Echojs、Codeschool、codewars、Html5Rocks、SpeakerDeck、Alistapart、Lynda、DigitalTutors、Ponyfoo.com、tutorialzine
前端資訊：CSS-Tricks、WebDesignerNews、FrontEndFont、Sidebar.io、DesignerNews
前端大牛：Hugo Giraudel、Philip Walton、David Walsh、Sara Soueidan、Paul Irish、玉伯、廖雪峯、阮一峯、勾三股四、張鑫旭、餘果、Sofish、糖餅、Evan You、Darren_聶微東、司徒正美、CSS魔法
各類插件
滑動/視差：fullPage、swiper、Slick、sliderjs、hammer.js、unslider、Superscrollorama、ScrollMagic、WOW、skrollr、stellar.js、multiscroll.js、iscroll、dragula、waypoints
動畫/效果：popmotion、velocity、GreenSock-JS、Snapsvg、sketch.js、impress、blast.js、sticky、Colorify.js、nprogress、Mojs、skrollr、typed.js、Effeckt.css、Hover.css、Animatable、Animate.css、CSS3 Animation Cheat Sheet、pagePiling.js、headroom.js、hint.css、SpinKit、CircularProgressButton、css-loaders、pace、two.js、Sequence、ElasticProgress、CSSgram
兼容：Modernizr、bowser、retinajs、picturefill、Normalize.css、Respond、html5shiv、box-sizing-polyfill、elementQuery、css-element-queries
Chrome：clear-cache、EditThisCookie、Full Page Screen Capture、HTML5 Outliner、JSONView、Postman、User-Agent Switcher for Chrome、Window Resizer、頁面自動刷新、Chrome Sniffer Plus
模板工具：Handlebars、Mustache、artTemplate、nunjucks、transparency、doT
其他：zxcvbn、Validation、moment、primer、Please.js、qrcode、dynamics.js、smartcrop.js、lazyload、imagesloaded、unveil、fastclick、jQuery Form Plugin、jQuery-File-Upload、sweetalert、toolbar、tooltipster、video.js、Font-Awesome、minigrid、bricks.js
主流框架
綜合：React、Bootstrap、Foundation、SemanticUI、Purecss、UIKit、妹子 UI、Alice、materialize、material-design-lite、Html5Boilerplate、Material design、Lightning Design System、Vux
MVVM：AngularJS、Vue.js、Backbone、Avalon、knockout
JavaScript：JQuery、Zepto、prototypejs、emberjs、MooTools、Dojo、meteor、Domcom
Hybrid：React-Native、Nativescript、Phonegap、Ionic、Crosswalk、Meteor、Electron
遊戲：Construct 2、ImpactJS、CreateJS、Three.js、PlayCanvas、Pixi、Hilo
手冊/書籍
書籍：《JavaScript高級程序設計（第3版）》、《單頁Web應用:JavaScript從前端到後端》、《JavaScript語言精粹》、《JavaScript DOM編程藝術 （第2版）》、《編寫可維護的JavaScript》、《Web全棧工程師的自我修養》、《深入淺出Node.js》、《響應式Web設計》、《精通CSS》、《高性能JavaScript》、《You-Dont-Know-JS》
快速入門：學習CSS佈局、Learn to Code HTML & CSS、Learn to Code AdvancedHTML & CSS、前端技能樹
精選文章：如何跟上前端開發的最新前沿、移動H5前端性能優化指南、那些過目不忘的H5頁面、玩轉HTML5移動頁面、MobileWeb 適配總結、搞定這些疑難雜症，向css3動畫說yes
手冊/規範：前端開發者手冊、前端開發筆記本、Material Design 中文版、CSS規範、JavaScript Style Guide、Sass規範、ECMAScript3/5、ECMAScript6、W3C、CommonJS Modules
翻譯文章：學習flexbox屬性、使用Velocity.js改善用戶體驗
設計/交互
靈感來源：Dribbble、SiteInspire、Httpster、設計達人、PhotoshopLady、站酷、UI中國、uiparade、365psd、Behance、Naldz Graphics、mobile-patterns、wa.design、pinterest、花瓣、堆糖、覓處、視覺中國
學點設計：TutsplusDesign、優設網、PSDFAN、Envato、abduzeedo、Interactive Guide to Blog Typography、24Ways
交互體驗：Navnav、Codyhouse、騰訊ISUX、淘寶UED、阿里巴巴中文站、阿里巴巴國際站、阿里媽媽UED、百度移動用戶體驗部、百度搜索用戶體驗中心、騰訊TGideas、騰訊MXD、騰訊UED、騰訊CDC、新浪UDC、迅雷CUED、uxbooth、tympanus
配色工具：Adobe color、FLATUI、Thedayscolor、colrd、Nipponcolors、Nolourlovers、中國傳統色、日本傳統色、Fashiontrendsetter
第二篇：github上值得關注的前端項目 以及他們的github地址，歡迎關注：GitHub - hawx1993/github-FE-project: A collection about github front-end project
一小部分目錄
綜合/資源
frontend-dev-bookmarks 一個巨大的前端開發資源清單。star:15000
front-end-collect 分享自己長期關注的前端開發相關的優秀網站、博客、以及活躍開發者。star:860
Front-end-Interview-questions 史上最全前端開發面試問題及答案
f2e-hub 包含Animation，UI，dialog，Carousels，color，image，workflow等。star:100
awesome-javascript 一系列很棒的javascript 庫，資源。star:3100
fks 前端技能彙總，包含前端知識架構，後端知識，linux，書籍推薦等。star:4000
node123 node.js中文資料導航。star:1200
mobile-web-favorites 移動端web開發收藏夾。star:200
gulp-book Gulp 入門指南
Front-end-tutorial 最全的資源教程-前端涉及的所有知識體系。（12.25更新）
canvas/數據可視化
echarts 基於Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。star:6900
Chart.js 使用<canvas>標籤的簡易HTML5圖表。star:14600
sketch.js 跨平臺JavaScript創意編碼框架，gzip壓縮後僅有2kb。star:1500
d3 一個基於數據操作文檔的js數據可視化框架，最流行的可視化庫之一。star:38000
zrender 一個輕量級的Canvas類庫，MVC封裝，數據驅動，提供類DOM事件模型，讓canvas繪圖大不同！star:850
c3 一個基於 D3.js 的可重用 JavaScript 圖表庫。幾乎零學習曲線。star:4.5K（6.28更新）
img2css 將圖片轉爲純css代碼。（11.3更新）
第三篇：網站：『引』最全前端資源彙集（更新網址），github地址：GitHub - JacksonTian/fks: 前端技能彙總 Frontend Knowledge Structure （github地址），號稱最全的資源教程－前端涉及的所有知識體系。
部分目錄（此處所有目錄鏈接到主頁），詳細信息請訪問具體網址和github
1 · 綜合類
2 · 入門類
3 · 工具類
4 · 綜合效果搜索平臺
5 · 團隊Blog|週報類
6 · 開發中心
7 · Nodejs
8 · 綜合API
9 · Ecmascript
10 · Js template
11 · HTML5(HTML)
12 · CSS3(CSS)
13 · Angularjs
14 · React
15 · vue
16 · 移動端API
17 · jQuery
18 · D3
19 · Requriejs
20 · Seajs
21 · Less,sass
22 · Markdown
23 · 兼容性
24 · UI相關
25 · 其它API
26 · 圖表類
27 · 正則
28 · 前端規範
29 · PHP
30 · 各大公司開源項目
31 · 常用
32 · 算法
33 · 移動端
34 · JSON
35 · 焦點圖
36 · Ext, EasyUI, J-UI 及其它各種UI方案
37 · 頁面 社會化 分享功能
38 · 富文本編輯器
39 · 前端概述
40 · Gulp
41 · Grunt
42 · Fis
43 · pc圖輪
44 · 移動端圖輪
45 · 文件上傳
46 · 模擬select
47 · 取色插件
48 · 城市聯動
49 · 剪貼板
50 · 簡繁轉換
51 · 表格 Grid
52 · 在線演示
53 · 常規優化
54 · 優化工具
55 · 在線工具
56 · 前端架構
57 · 推薦作品
58 · 簡歷模板
59 · 面試題
60 · iconfont
61 · Fiddler
62 · Chrome
63 · Firebug
64 · 移動,微信調試
65 · iOS Simulator
66 · Image
67 · 瀏覽器同步
68 · 在線PPT製作
69 · 前端導航網站
70 · 常用CDN
71 · Git
72 · 各種日期日曆
73 · Date library
74 · 其它
75 · 效果類
76 · 彈出層
77 · 優秀JavaScript項目
第四篇： 網站Github資源收集 ，此篇沒有找到github地址，作者整理了自己在Github中的starred項目可以直接在此網站進行訪問。
部分目錄：
Github資源收集 -- HTML/CSS
Github資源收集 -- Shim/Polyfill
Github資源收集 -- 可能是常用的工具庫
Github資源收集 -- 代碼處理工具
Github資源收集 -- 移動端
Github資源收集 -- 測試框架和斷言庫
Github資源收集 -- Node.js
Github資源收集 -- 模板引擎
Github資源收集 -- 數據可視化
Github資源收集 -- React及相關庫
Github資源收集 -- Angular.js
Github資源收集 -- 其他優秀js框架
Github資源收集 -- 函數式編程相關 ..............
第五篇：maybe你得英語水平比較高，你可以看這裏：史上最全GitHub前端開發集錦。同樣，他的github地址：GitHub - sindresorhus/awesome: Curated list of awesome lists