JavaScript

• JavaScript 教程
• ES6 入門教程
• JavaScript 30 使用原生 JavaScript 在 30 天內(nèi)完成 30 個項目
• Codewars 和其他人一起完成真實的代碼挑戰(zhàn)胧砰，提升你的技術(shù)
• JavaScript 教程 現(xiàn)代 JavaScript 教程
• 優(yōu)秀的JS代碼規(guī)范
• 開發(fā)的寶藏項目
• TypeScript 教程：https://github.com/xcatliu/typescript-tutorial
• Node.js學(xué)習(xí) https://blog.poetries.top/node-learning-notes/
  <meta charset="utf-8">

CSS

• css的各種效果實現(xiàn) css的各種效果實現(xiàn)（尤其是動畫效果）
• CSS Inspiration 在這里找到寫 CSS 的靈感
• CSS 常用樣式 總結(jié)一些常用的 CSS 樣式
• Animate.css 開箱即用的跨瀏覽器 CSS 動畫效果
• animista 按需定制 CSS 動畫效果
• SpinKit 匯集了實現(xiàn)各種加載效果的 CSS 代碼片段
• CSS Minifier 在線 CSS 代碼極簡化/壓縮工具
• https://sass.bootcss.com/documentation Sass 是成熟伶选、穩(wěn)定超升、強(qiáng)大的 CSS 擴(kuò)展語言
• https://less.bootcss.com/ 一種將css賦予了動態(tài)語言特性的動態(tài)樣式語言
• https://stylus-lang.com/ 富有表現(xiàn)力、動態(tài)蛙埂、健壯的CSS

算法

• JavaScript 算法與數(shù)據(jù)結(jié)構(gòu)：https://github.com/trekhleb/javascript-algorithms

• leetcode解題之路：https://github.com/azl397985856/leetcode

• 五分鐘學(xué)算法：https://github.com/MisterBooo/LeetCodeAnimation

• LeetCode題目的思路 https://github.com/MisterBooo/LeetCodeAnimation 用動畫的形式呈現(xiàn)解LeetCode題目的思路。

• 極客時間 App 的《數(shù)據(jù)結(jié)構(gòu)與算法之美》

• GitHub 上 170K+ Star 的前端學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)與算法項目 https://github.com/biaochenxuying/blog/issues/43

• JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法之美 - 十大經(jīng)典排序匯總: https://github.com/biaochenxuying/blog/issues/42

• 算法可視化工具 https://github.com/algorithm-visualizer/algorithm-visualizer 算法可視化工具是一個交互式的在線平臺遮糖，可以從代碼中可視化算法绣的。

• 算法可視化來源 https://visualgo.net/en

• 觀察算法的工作方式 https://github.com/skidding/illustrated-algorithms 變量和操作的可視化表示增強(qiáng)了控制流和實際源代碼。

前端面試

• 前端面試秤耍考問題整理屡江，按模塊知識點分類：https://blog.poetries.top/FE-Interview-Questions/

• 前端開發(fā)面試題: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

• web前端面試寶典：https://github.com/h5bp/Front-end-Developer-Interview-Questions/

• 掘金前端面試題合集：https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md

• 前端面試圖譜：https://yuchengkai.cn/docs/zh/

• GitHub 上 100K+ Star 的前端面試開源項目匯總 https://github.com/biaochenxuying/blog/issues/47

技術(shù)社區(qū)

• GitHub：https://github.com/ 高質(zhì)量的內(nèi)容創(chuàng)作和分享平臺

• stackoverflow：https://stackoverflow.com/ 一個回答技術(shù)問題的網(wǎng)站

• 掘金：https://juejin.im/ 目前來看，國內(nèi)的很多優(yōu)質(zhì)前端文章赛不，都在掘金上惩嘉。

• 博客園：https://www.cnblogs.com/ 一個很純粹的技術(shù)博客平臺。

• 知乎：https://www.zhihu.com/ 很多做技術(shù)的同學(xué)也開始玩知乎了踢故，阿里的不少前端大牛在知乎上就非澄睦瑁活躍惹苗。

• CSDN：https://www.csdn.net/ 廣告太多，但奈何你這么老牌耸峭。

• segmentfault：https://segmentfault.com/ 比較低調(diào)的技術(shù)博客平臺桩蓉。

• v2ex：https://www.v2ex.com/ 一個關(guān)于分享和探索的地方

• http://cnodejs.org/ Node.js專業(yè)中文社區(qū)

• https://www.smashingmagazine.com/ 一個web技術(shù)類的博客雜志站點

• https://www.jstips.co/ 每天推出一個JS技巧的網(wǎng)站

• W3cplus：https://www.w3cplus.com/ 是一個致力于推廣國內(nèi)前端行業(yè)的技術(shù)博客

• 印記中文 - https://docschina.org/ 印記中文是最權(quán)威是技術(shù)中文文檔社區(qū)

• 收集優(yōu)質(zhì)的中文前端博客：https://github.com/FrankFang/best-chinese-front-end-blogs
  <meta charset="utf-8">

博客團(tuán)隊

• 騰訊AlloyTeam：http://www.alloyteam.com/

• 騰訊社交用戶體驗ISUX：https://isux.tencent.com/

• 淘寶FED | 淘寶前端團(tuán)隊：http://taobaofed.org/

• 阿里巴巴國際UED：http://www.aliued.com/

• 京東 | 凹凸實驗室：https://aotu.io/

• 餓了么前端:https://zhuanlan.zhihu.com/ElemeFE

• 百度前端研發(fā)部FEX：http://fex.baidu.com/

• 360 | 奇舞團(tuán)：https://75team.com/

• 美團(tuán)技術(shù)團(tuán)隊: https://tech.meituan.com/

GitHub 統(tǒng)計

• GitHub 中文排行榜、高分優(yōu)秀中文項目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts

• GitHub 全球排名：https://gitstar-ranking.com/ 這個排名很權(quán)威劳闹。如果你的項目超過 10k star院究，就能上榜，躋身全球 GitHub 項目前1000名本涕。

構(gòu)建

• NPM：https://www.npmjs.com/

• Yarn：https://yarnpkg.com/zh-Hans/

• Webpack：https://webpack.js.org/

• Gulp：https://www.gulpjs.com.cn/

• Babel：https://babeljs.io/

• ESLint：https://cn.eslint.org/ 可組裝的JavaScript和JSX檢查工具业汰。

• PostCSS：https://www.postcss.com.cn/ 用 JavaScript 工具和插件轉(zhuǎn)換 CSS 代碼的工具

部署

• GitHub Pages GitHub 提供的免費(fèi)靜態(tài)網(wǎng)站托管服務(wù)
• Netlify 30 秒內(nèi)部署你的網(wǎng)站
• Vercel 快速部署你的網(wǎng)站
• Surge 只需一個命令就可以發(fā)布你的網(wǎng)站
• Heroku 在云端構(gòu)建、運(yùn)行你的應(yīng)用

靜態(tài)站點搭建工具

• Hexo：https://hexo.io/zh-cn/

• VuePress：https://www.vuepress.cn/

• GitBook：https://www.gitbook.com/

前端代碼規(guī)范

• 騰訊的 http://tgideas.qq.com/doc/index.html

• 京東的 https://guide.aotu.io/index.html

• Bootstrap編碼規(guī)范：https://codeguide.bootcss.com/

• es6編程風(fēng)格：http://es6.ruanyifeng.com/#docs/style

• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

• ESLint 檢測偏友、修正 JavaScript 代碼的問題

• Prettier 格式化 JavaScript 代碼

調(diào)試抓包

• whistle：https://wproxy.org/whistle/ 代理抓包工具蔬胯，很好很強(qiáng)大。

• Fiddler：https://www.telerik.com/fiddler 代理抓包工具位他。

• Easy Mock：https://www.easy-mock.com

開發(fā)工具

• VS Code：https://code.visualstudio.com/

• Sublime Text：https://www.sublimetext.com/

• WebStorm：https://www.jetbrains.com/webstorm/

• Atom：https://atom.io/

在線工具

• CodePen - https://codepen.io/ 在線代碼測試工具

• Can I use - https://caniuse.com/ Web前端兼容性列表

• TinyPNG - https://tinypng.com/ PNG/JPG 圖片在線壓縮利器

• CNZZ站點統(tǒng)計 - https://www.umeng.com/ 國內(nèi)常用的站點統(tǒng)計工具

前端大會

• Vue.js開發(fā)者大會 https://fequan.com/ Vue.js開發(fā)者大會中國

• 中國JS開發(fā)者大會 https://jsconfchina.com/ 一場專注于JavaScript和Node.js技術(shù)的國際性大會

• 中國CSS開發(fā)者大會 https://css.w3ctech.com/ 提高css開發(fā)姿勢的大會

• D2前端技術(shù)論壇 http://d2forum.alibaba-inc.com/ 阿里巴巴舉辦氛濒，分享技術(shù)的樂趣，探討行業(yè)的發(fā)展

圖標(biāo)

• Font Awesome：http://www.fontawesome.com.cn/ 網(wǎng)站開發(fā)最流行的圖標(biāo)集
• Feather 簡潔美觀的開源圖標(biāo)
• Ionicons 精心繪制的開源圖標(biāo)
• Simple Icons 常見品牌的 SVG 圖標(biāo)
• Material Design Icons 輕快鹅髓、精美的符號圖標(biāo)舞竿，包括常見操作和事項
• Tabler Icons 681 枚可定制的開源 SVG 圖標(biāo)

色彩

• Material Design Colors Material Design 色彩
• Flat UI Colors 2 14 組配色、280 種顏色
• Color Hunt 分享色彩搭配的自由開放平臺窿冯，包括成千上萬人工選取的配色骗奖，可以從中獲取配色的靈感
• Color Space 配色方案、CSS 顏色漸變生成工具
• uiGradients 美觀的顏色漸變
• Colors and Fonts 色彩和字體工具
• Coolors 配色方案生成工具

插畫

• Undraw 持續(xù)更新的精美的 SVG 插畫集
• manypixels 免費(fèi)插畫集
• IRA Design 通過調(diào)配漸變色醒串、搭配手繪組件定制插畫
• Free Illustrations by Lukasz Adam 免費(fèi) SVG 插畫
• Blobmaker 在線 SVG 形狀生成器
• Get Waves 在線 SVG 波形生成器

圖片

• Unsplash 可供免費(fèi)使用的圖片
• Pexels 精美的免費(fèi)圖片和視頻
• Burst 免費(fèi)高分辨率圖片执桌，可用于網(wǎng)站和商業(yè)用途
• ISO Republic 使用 CC0 許可的免費(fèi)高分辨率圖片和視頻
• Pixabay 令人驚嘆的免費(fèi)（公共領(lǐng)域）圖片和視頻站點
• StockSnap.io 精美的免費(fèi)圖片，同樣使用 CC0 許可
• Photopea 在線圖片編輯工具芜赌，支持大量高級功能
• Online Image Compressor 在線圖片壓縮工具仰挣，一次可以壓縮多達(dá) 20 張圖片
• Bulk Resize Photos 最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無需上傳到服務(wù)器）

其他

• 單元測試：https://github.com/goldbergyoni/javascript-testing-best-practices
• web.dev 評測網(wǎng)站性能（基于 Lighthouse）
• Shape Divider 定制各種形狀的網(wǎng)站分區(qū) SVG 的工具
• GTmetrix 網(wǎng)頁性能分析工具
• Can I Use 前端技術(shù)的瀏覽器支持情況
• Carbon 代碼轉(zhuǎn)圖片工具
• Wappalyzer 檢測某個網(wǎng)站使用的技術(shù)棧

設(shè)計工具

• 墨刀：原型設(shè)計工具缠沈。網(wǎng)址：https://modao.cc/

• 藍(lán)湖：一款產(chǎn)品文檔和設(shè)計圖的在線協(xié)作平臺膘壶。網(wǎng)址：https://lanhuapp.com

• PxCook（像素大廚）：高效易用的自動標(biāo)注工具。軟件下載鏈接：https://www.fancynode.com.cn/pxcook
  前端導(dǎo)航網(wǎng)站地址： https://www.kwgg2020.com