前端資料大全（一）
文章目錄
前端資料大全（一）
學習程式設計專欄連載的練手專案篇，如有興趣可以訪問前三篇：
有哪些適合新手練手的Java專案？ - 學習程式設計 - 知乎專欄
有哪些適合新手練手的Java Web專案？ - 學習程式設計 - 知乎專欄
有哪些適合新手練手的Python專案？ - 學習程式設計 - 知乎專欄
本篇文章分享五篇關於前端資源彙總的帖子，希望可以幫助到你。同時你可以去看一看前端技能樹喔：前端技能
第一篇
前端收藏夾 ，以及他們的github地址：GitHub - w3ctrain/w3ctrain.github.io: w3ctrian前端收藏夾
以下是目錄，更多資訊請訪問他們的主頁：
前端工具
自動化： Gulp 、 Grunt 、百度Fis 、Ant、Yeoman、Codekit、Koala、Webpack
預編譯： Slim、Haml、Coffeescript、Sass、BabelJs、
查詢工具：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 使用標籤的簡易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