工欲善其事必先利其器，在技術快速更新的時代，我們不要閉門造車，要借助的現有的資源提高我們的效率，以下是我整理出來比較實用的網址，會持續更新......

學習的網站

• 納米學習[http://1nami.com/]

工具網址

• GTmetrix，輸入任何你想測評的網址，就可以得到優化建議了。[https://gtmetrix.com/ ]
• 圖片壓縮[https://tinypng.com/ ]
• 加私有前綴[ https://autoprefixer.github.io/ ]
• 快速生成柵格化 [ http://grid.guide/ ]
• code pen [ https://codepen.io/ ]
• 阿里巴巴矢量圖標 [ http://www.iconfont.cn/ ]
• 有字庫 [https://www.youziku.com/ ]
• 字體下載 [https://www.fontke.com/font/10728033/ ]
• ico轉換工具 [http://www.bitbug.net/ ]
• 查詢兼容的網站 [ http://caniuse.com/ ]
• 升級各大瀏覽器的網站 [ https://browsehappy.com/ ]
• 富文本 [http://www.wangeditor.com/index.html ]
• 大前端 [http://www.daqianduan.com/nav ]
• Javascript ES2015 特性 [https://segmentfault.com/a/1190000011867361 ] [ http://overapi.com/javascript ]
• Javascript 正則表達式 [https://www.debuggex.com/cheatsheet/regex/javascript ]
  -React[ https://devhints.io/react ]
• Vuejs [https://vuejs-tips.github.io/cheatsheet/ ]
• Vuex [ https://vuejs-tips.github.io/vuex-cheatsheet/]
• Angular 4 [ https://angular.io/guide/cheatsheet ]
• Flexbox [ https://yoksel.github.io/flex-cheatsheet/ ]
• SCSS [ https://devhints.io/sass ]
• 好用神器網址 [ http://www.lxweimin.com/p/058671d37f4d ]
• h5大綱查詢 http://h5o.github.io/
• 驗證會html結構是否書寫規范 https://validator.w3.org/
• css重置樣式1 https://meyerweb.com/eric/tools/css/reset/
• css重置樣式2 http://necolas.github.io/normalize.css/
• 騰訊瀏覽器服務 http://x5.tencent.com/tbs/guide.html
• ui框架 http://www.lxweimin.com/p/7df8ca2f8846
• 圖表 http://echarts.baidu.com/index.html
• 圖片轉換工具 https://jinaconvert.com/cn/
• 前端工具導航 http://www.daqianduan.com/nav
• git學習網站 https://learngitbranching.js.org/
• 有趣的js和css庫 https://mp.weixin.qq.com/s/pktKzPJWQ1gtdFXxnGHMtQ
• 移動工具箱 http://www.nicetool.net/
• gitbook https://gitbook.cn/
• h5視頻 http://chimee.org/#demo
• sgv+vue+ts https://github.com/seanyujc/sgv-cli

動效網站

• loading加載動畫[ https://loading.io/ ]
• 按鈕動畫[ http://www.17sucai.com/pins/demoshow/25581]
• 白鷺時代[https://www.egret.com ]
• canvas-echart圖表[http://echarts.baidu.com/ ]
• jquery 插件 [http://www.unheap.com/ ]
• 有關動畫網站 [ https://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html ]

插件

• pcikadate 響應式的時間插件
• Magnific-Popup
• 彈幕插件 http://yaseng.org/jquery.barrager.js/

插件工具

• 谷歌瀏覽器的幾款插件
  1、JSONview插件，將json數據美化；
  2、Wappalyzer插件，查看網站用了那些技術；
  3、Vue Devtools插件，可以查看vue整體的結構；

設計網站

• website [ http://reeoo.com/ ]
• seeseed [https://www.seeseed.com/ ]
• bwg [ https://bestwebsite.gallery/ ]
• 天空之城 [ https://www.skypixel.com/ ]
• 500px [https://500px.com/popular ]
• 國外優秀的UI設計資源庫 [http://www.w3cplus.com/source/ui-design.html ]
• 20個免費下載PSD設計網站 [ http://www.w3cplus.com/source/20-great-websites-to-download-free-psd-files.html ]
• https://www.iloveimg.com/ 壓縮圖片
• 設計素材導航 http://hao.shejidaren.com/

設計神器

• logo、背景圖快速生成 https://shapefactory.co/
• 炫光生成器 http://weavesilk.com/
• 萬箭啟發 https://wangyasai.github.io/Stars-Emmision/

書籍

• 《JavaScript DOM編程藝術》
• 《JavaScript權威指南》
• 《javaScript DOM高級程序設計》
• 《JavaScript設計模式》
• 《鋒利的jquery》

國外的

• 解決方案 https://stackoverflow.com/
• 可以買賣代碼的 http://codecanyon.net

其他

• GitHub最全的前端資源匯總倉庫（包括前端學習、開發資源、求職面試等）[https://github.com/helloqingfeng/Awsome-Front-End-learning-resource ]
• 關于js的學習方法 [ https://www.sitepoint.com/projects-can-sometimes-be-the-worst-way-to-learn-javascript/ ]
• 9 個常見錯誤阻礙你進步 [ https://juejin.im/post/59bb4a7c6fb9a00a53274cd7 ]
• 如何優雅的編寫 JavaScript 代碼 [ https://zhuanlan.zhihu.com/p/28910636 ]
• 12個免費學編程的網站[ http://www.csdn.net/article/2015-09-09/2825663 ]
• 源碼分享網站 [ http://www.zuidaima.com/]
• 編程中國 [ https://www.bccn.net/ ]
• js收藏夾[ https://www.zhihu.com/collection/174332512 ]
• 納米學習 [http://1nami.com/]
• 打造全滿分網站 [ https://segmentfault.com/a/1190000011867361]
• 10 個獨特的 CSS 背景視覺效果 [ http://svgtrick.com/tricks/dc4f73cd7193fff5f61dfdb1d36a4b6c]
• git的使用 https://www.imooc.com/article/35753
• js代碼常見技巧 https://www.imooc.com/article/35552
• web學習路線 https://www.imooc.com/article/261756

你們的支持，是讓我保持更新的動力......
git下載地址 [ https://github.com/galyean-gong/note.git ],記得打星哦！