送給前端的你，推薦幾篇前端彙總文章。(來自知乎專欄)

來源：https://zhuanlan.zhihu.com/p/22229868

 

做者：路人甲
連接：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

高效工具：Dash、奇妙清單、Omnigraffle

其它：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

問答社區：StackOverflow、Quora、知乎

每日鮮：稀土掘金、開發者頭條、極客頭條、開發頭條

前端大牛：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

模塊化：Require.js、Sea.js

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