2020 - 2021 年 Web 前端最新导航

国庆这几天，我收集了大量可以显著提升开发效率的前端导航链接。

这些导航链接对我很有帮助，希望对你也是如此。

这些好用的导航链接都已经部署到这个网站  https://www.kwgg2020.com  上了，在这里食用更美味哦。

★

笔者博客地址：https://github.com/biaochenxuying/blog

”

JavaScript

• JavaScript 教程^[1]

• ES6 入门教程^[2]

• JavaScript 30^[3] 使用原生 JavaScript 在 30 天内完成 30 个项目

• Codewars^[4] 和其他人一起完成真实的代码挑战，提升你的技术

• JavaScript 教程^[5] 现代 JavaScript 教程

• 优秀的JS代码规范^[6]

• 开发的宝藏项目^[7]

• TypeScript 教程：https://github.com/xcatliu/typescript-tutorial^[8]

• Node.js学习 https://blog.poetries.top/node-learning-notes/^[9]

CSS

• css的各种效果实现^[10] css的各种效果实现（尤其是动画效果）

• CSS Inspiration^[11] 在这里找到写 CSS 的灵感

• CSS 常用样式^[12] 总结一些常用的 CSS 样式

• Animate.css^[13] 开箱即用的跨浏览器 CSS 动画效果

• animista^[14] 按需定制 CSS 动画效果

• SpinKit^[15] 汇集了实现各种加载效果的 CSS 代码片段

• CSS Minifier^[16] 在线 CSS 代码极简化/压缩工具

• https://sass.bootcss.com/documentation Sass 是成熟、稳定、强大的 CSS 扩展语言

• https://less.bootcss.com/ 一种将css赋予了动态语言特性的动态样式语言

• https://stylus-lang.com/ 富有表现力、动态、健壮的CSS

算法

• JavaScript 算法与数据结构：https://github.com/trekhleb/javascript-algorithms^[17]

• leetcode解题之路：https://github.com/azl397985856/leetcode^[18]

• 五分钟学算法：https://github.com/MisterBooo/LeetCodeAnimation^[19]

• LeetCode题目的思路 https://github.com/MisterBooo/LeetCodeAnimation^[20] 用动画的形式呈现解LeetCode题目的思路。

• 极客时间 App 的《数据结构与算法之美》

• GitHub 上 170K+ Star 的前端学习的数据结构与算法项目 https://github.com/biaochenxuying/blog/issues/43

• JavaScript 数据结构与算法之美 - 十大经典排序汇总: https://github.com/biaochenxuying/blog/issues/42^[21]

• 算法可视化工具 https://github.com/algorithm-visualizer/algorithm-visualizer^[22] 算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法。

• 算法可视化来源 https://visualgo.net/en^[23]

• 观察算法的工作方式 https://github.com/skidding/illustrated-algorithms^[24] 变量和操作的可视化表示增强了控制流和实际源代码。

前端面试

• 前端面试常考问题整理，按模块知识点分类：https://blog.poetries.top/FE-Interview-Questions/^[25]

• 前端开发面试题: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions^[26]

• web前端面试宝典：https://github.com/h5bp/Front-end-Developer-Interview-Questions/^[27]

• 掘金前端面试题合集：https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md^[28]

• 前端面试图谱：https://yuchengkai.cn/docs/zh/^[29]

• GitHub 上 100K+ Star 的前端面试开源项目汇总 https://github.com/biaochenxuying/blog/issues/47

技术社区

• GitHub：https://github.com/^[30] 高质量的内容创作和分享平台

• stackoverflow：https://stackoverflow.com/^[31] 一个回答技术问题的网站

• 掘金：https://juejin.im/^[32] 目前来看，国内的很多优质前端文章，都在掘金上。

• 博客园：https://www.cnblogs.com/^[33] 一个很纯粹的技术博客平台。

• 知乎：https://www.zhihu.com/^[34] 很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃。

• CSDN：https://www.csdn.net/^[35] 广告太多，但奈何你这么老牌。

• segmentfault：https://segmentfault.com/^[36] 比较低调的技术博客平台。

• v2ex：https://www.v2ex.com/ 一个关于分享和探索的地方

• http://cnodejs.org/ Node.js专业中文社区

• https://www.smashingmagazine.com/ 一个web技术类的博客杂志站点

• https://www.jstips.co/ 每天推出一个JS技巧的网站

• W3cplus：https://www.w3cplus.com/  是一个致力于推广国内前端行业的技术博客

• 印记中文 - https://docschina.org/  印记中文是最权威是技术中文文档社区

• 收集优质的中文前端博客：https://github.com/FrankFang/best-chinese-front-end-blogs^[37]

博客团队

• 腾讯AlloyTeam：http://www.alloyteam.com/^[38]

• 腾讯社交用户体验ISUX：https://isux.tencent.com/^[39]

• 淘宝FED | 淘宝前端团队：http://taobaofed.org/^[40]

• 阿里巴巴国际UED：http://www.aliued.com/^[41]

• 京东 | 凹凸实验室：https://aotu.io/^[42]

• 饿了么前端:https://zhuanlan.zhihu.com/ElemeFE^[43]

• 百度前端研发部FEX：http://fex.baidu.com/^[44]

• 360 | 奇舞团：https://75team.com/^[45]

• 美团技术团队: https://tech.meituan.com/^[46]

GitHub 统计

• GitHub 中文排行榜、高分优秀中文项目：https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts^[47]

• GitHub 全球排名：https://gitstar-ranking.com/^[48] 这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。

构建

• NPM：https://www.npmjs.com/^[49]

• Yarn：https://yarnpkg.com/zh-Hans/^[50]

• Webpack：https://webpack.js.org/^[51]

• Gulp：https://www.gulpjs.com.cn/^[52]

• Babel：https://babeljs.io/^[53]

• ESLint：https://cn.eslint.org/^[54] 可组装的JavaScript和JSX检查工具。

• PostCSS：https://www.postcss.com.cn/^[55]  用 JavaScript 工具和插件转换 CSS 代码的工具

部署

• GitHub Pages^[56] GitHub 提供的免费静态网站托管服务

• Netlify^[57] 30 秒内部署你的网站

• Vercel^[58] 快速部署你的网站

• Surge^[59] 只需一个命令就可以发布你的网站

• Heroku^[60] 在云端构建、运行你的应用

静态站点搭建工具

• Hexo：https://hexo.io/zh-cn/^[61]

• VuePress：https://www.vuepress.cn/^[62]

• GitBook：https://www.gitbook.com/^[63]

前端代码规范

• 腾讯的 http://tgideas.qq.com/doc/index.html^[64]

• 京东的 https://guide.aotu.io/index.html^[65]

• Bootstrap编码规范：https://codeguide.bootcss.com/^[66]

• es6编程风格：http://es6.ruanyifeng.com/#docs/style^[67]

• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript^[68]

• ESLint^[69] 检测、修正 JavaScript 代码的问题

• Prettier^[70] 格式化 JavaScript 代码

调试抓包

• whistle：https://wproxy.org/whistle/^[71] 代理抓包工具，很好很强大。

• Fiddler：https://www.telerik.com/fiddler^[72] 代理抓包工具。

• Easy Mock：https://www.easy-mock.com^[73]

开发工具

• VS Code：https://code.visualstudio.com/^[74]

• Sublime Text：https://www.sublimetext.com/^[75]

• WebStorm：https://www.jetbrains.com/webstorm/^[76]

• Atom：https://atom.io/^[77]

在线工具

• CodePen - https://codepen.io/ 在线代码测试工具

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

• TinyPNG - https://tinypng.com/ PNG/JPG 图片在线压缩利器

• CNZZ站点统计 - https://www.umeng.com/ 国内常用的站点统计工具

前端大会

• Vue.js开发者大会  https://fequan.com/ Vue.js开发者大会中国

• 中国JS开发者大会 https://jsconfchina.com/  一场专注于JavaScript和Node.js技术的国际性大会

• 中国CSS开发者大会 https://css.w3ctech.com/ 提高css开发姿势的大会

• D2前端技术论坛 http://d2forum.alibaba-inc.com/  阿里巴巴举办，分享技术的乐趣，探讨行业的发展

图标

• Font Awesome：http://www.fontawesome.com.cn/^[78] 网站开发最流行的图标集

• Feather^[79] 简洁美观的开源图标

• Ionicons^[80] 精心绘制的开源图标

• Simple Icons^[81] 常见品牌的 SVG 图标

• Material Design Icons^[82] 轻快、精美的符号图标，包括常见操作和事项

• Tabler Icons^[83] 681 枚可定制的开源 SVG 图标

色彩

• Material Design Colors^[84] Material Design 色彩

• Flat UI Colors 2^[85] 14 组配色、280 种颜色

• Color Hunt^[86] 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感

• Color Space^[87] 配色方案、CSS 颜色渐变生成工具

• uiGradients^[88] 美观的颜色渐变

• Colors and Fonts^[89] 色彩和字体工具

• Coolors^[90] 配色方案生成工具

插画

• Undraw^[91] 持续更新的精美的 SVG 插画集

• manypixels^[92] 免费插画集

• IRA Design^[93] 通过调配渐变色、搭配手绘组件定制插画

• Free Illustrations by Lukasz Adam^[94] 免费 SVG 插画

• Blobmaker^[95] 在线 SVG 形状生成器

• Get Waves^[96] 在线 SVG 波形生成器

图片

• Unsplash^[97] 可供免费使用的图片

• Pexels^[98] 精美的免费图片和视频

• Burst^[99] 免费高分辨率图片，可用于网站和商业用途

• ISO Republic^[100] 使用 CC0 许可的免费高分辨率图片和视频

• Pixabay^[101] 令人惊叹的免费（公共领域）图片和视频站点

• StockSnap.io^[102] 精美的免费图片，同样使用 CC0 许可

• Photopea^[103] 在线图片编辑工具，支持大量高级功能

• Online Image Compressor^[104] 在线图片压缩工具，一次可以压缩多达 20 张图片

• Bulk Resize Photos^[105] 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器）

其他

• 单元测试：https://github.com/goldbergyoni/javascript-testing-best-practices^[106]

• web.dev^[107] 评测网站性能（基于 Lighthouse）

• Shape Divider^[108] 定制各种形状的网站分区 SVG 的工具

• GTmetrix^[109] 网页性能分析工具

• Can I Use^[110] 前端技术的浏览器支持情况

• Carbon^[111] 代码转图片工具

• Wappalyzer^[112] 检测某个网站使用的技术栈

设计工具

• 墨刀：原型设计工具。网址：https://modao.cc/^[113]

• 蓝湖：一款产品文档和设计图的在线协作平台。网址：https://lanhuapp.com^[114]

• PxCook（像素大厨）：高效易用的自动标注工具。软件下载链接：https://www.fancynode.com.cn/pxcook^[115]

★

前端导航网站地址：https://www.kwgg2020.com

”

★

笔者博客地址：https://github.com/biaochenxuying/blog

”

参考资料

[1]

JavaScript 教程: https://wangdoc.com/javascript/

[2]

ES6 入门教程: https://es6.ruanyifeng.com/

[3]

JavaScript 30: https://javascript30.com/

[4]

Codewars: https://www.codewars.com/

[5]

JavaScript 教程: https://zh.javascript.info/

[6]

优秀的JS代码规范: https://github.com/ryanmcdermott/clean-code-javascript

[7]

开发的宝藏项目: https://github.com/dexteryy/spellbook-of-modern-webdev

[8]

https://github.com/xcatliu/typescript-tutorial: https://github.com/xcatliu/typescript-tutorial

[9]

https://blog.poetries.top/node-learning-notes/: https://blog.poetries.top/node-learning-notes/

[10]

css的各种效果实现: https://lhammer.cn/You-need-to-know-css/#/zh-cn/

[11]

CSS Inspiration: https://github.com/chokcoco/CSS-Inspiration

[12]

CSS 常用样式: https://github.com/QiShaoXuan/css_tricks

[13]

Animate.css: https://animate.style/

[14]

animista: http://animista.net/

[15]

SpinKit: https://tobiasahlin.com/spinkit/

[16]

CSS Minifier: https://cssminifier.com/

[17]

https://github.com/trekhleb/javascript-algorithms: https://github.com/trekhleb/javascript-algorithms

[18]

https://github.com/azl397985856/leetcode: https://github.com/azl397985856/leetcode

[19]

https://github.com/MisterBooo/LeetCodeAnimation: https://github.com/MisterBooo/LeetCodeAnimation

[20]

https://github.com/MisterBooo/LeetCodeAnimation: https://github.com/MisterBooo/LeetCodeAnimation

[21]

https://github.com/biaochenxuying/blog/issues/42: https://github.com/biaochenxuying/blog/issues/42

[22]

https://github.com/algorithm-visualizer/algorithm-visualizer: https://github.com/algorithm-visualizer/algorithm-visualizer

[23]

https://visualgo.net/en: https://visualgo.net/en

[24]

https://github.com/skidding/illustrated-algorithms: https://github.com/skidding/illustrated-algorithms

[25]

https://blog.poetries.top/FE-Interview-Questions/: https://blog.poetries.top/FE-Interview-Questions/

[26]

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions: https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

[27]

https://github.com/h5bp/Front-end-Developer-Interview-Questions/: https://github.com/h5bp/Front-end-Developer-Interview-Questions/

[28]

https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md: https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md

[29]

https://yuchengkai.cn/docs/zh/: https://yuchengkai.cn/docs/zh/

[30]

https://github.com/: https://github.com/

[31]

https://stackoverflow.com/: https://stackoverflow.com/

[32]

https://juejin.im/: https://juejin.im/

[33]

https://www.cnblogs.com/: https://www.cnblogs.com/

[34]

https://www.zhihu.com/: https://www.zhihu.com/

[35]

https://www.csdn.net/: https://www.csdn.net/

[36]

https://segmentfault.com/: https://segmentfault.com/

[37]

https://github.com/FrankFang/best-chinese-front-end-blogs: https://github.com/FrankFang/best-chinese-front-end-blogs

[38]

http://www.alloyteam.com/: http://www.alloyteam.com/

[39]

https://isux.tencent.com/: https://isux.tencent.com/

[40]

http://taobaofed.org/: http://taobaofed.org/

[41]

http://www.aliued.com/: http://www.aliued.com/

[42]

https://aotu.io/: https://aotu.io/

[43]

https://zhuanlan.zhihu.com/ElemeFE: https://zhuanlan.zhihu.com/ElemeFE

[44]

http://fex.baidu.com/: http://fex.baidu.com/

[45]

https://75team.com/: https://75team.com/

[46]

https://tech.meituan.com/: https://tech.meituan.com/

[47]

https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts: https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts

[48]

https://gitstar-ranking.com/: https://gitstar-ranking.com/

[49]

https://www.npmjs.com/: https://www.npmjs.com/

[50]

https://yarnpkg.com/zh-Hans/: https://yarnpkg.com/zh-Hans/

[51]

https://webpack.js.org/: https://webpack.js.org/

[52]

https://www.gulpjs.com.cn/: https://www.gulpjs.com.cn/

[53]

https://babeljs.io/: https://babeljs.io/

[54]

https://cn.eslint.org/: https://cn.eslint.org/

[55]

https://www.postcss.com.cn/: https://www.postcss.com.cn/

[56]

GitHub Pages: https://pages.github.com/

[57]

Netlify: https://www.netlify.com/

[58]

Vercel: https://vercel.com/

[59]

Surge: https://surge.sh/

[60]

Heroku: https://www.heroku.com/

[61]

https://hexo.io/zh-cn/: https://hexo.io/zh-cn/

[62]

https://www.vuepress.cn/: https://www.vuepress.cn/

[63]

https://www.gitbook.com/: https://www.gitbook.com/

[64]

http://tgideas.qq.com/doc/index.html: http://tgideas.qq.com/doc/index.html

[65]

https://guide.aotu.io/index.html: https://guide.aotu.io/index.html

[66]

https://codeguide.bootcss.com/: https://codeguide.bootcss.com/

[67]

http://es6.ruanyifeng.com/#docs/style: http://es6.ruanyifeng.com/#docs/style

[68]

https://github.com/airbnb/javascript: https://github.com/airbnb/javascript

[69]

ESLint: https://eslint.org/

[70]

Prettier: https://prettier.io/

[71]

https://wproxy.org/whistle/: https://wproxy.org/whistle/

[72]

https://www.telerik.com/fiddler: https://www.telerik.com/fiddler

[73]

https://www.easy-mock.com: https://www.easy-mock.com/

[74]

https://code.visualstudio.com/: https://code.visualstudio.com/

[75]

https://www.sublimetext.com/: https://www.sublimetext.com/

[76]

https://www.jetbrains.com/webstorm/: https://www.jetbrains.com/webstorm/

[77]

https://atom.io/: https://atom.io/

[78]

http://www.fontawesome.com.cn/: http://www.fontawesome.com.cn/

[79]

Feather: https://feathericons.com/

[80]

Ionicons: https://ionicons.com/

[81]

Simple Icons: https://simpleicons.org/

[82]

Material Design Icons: https://material.io/resources/icons/

[83]

Tabler Icons: https://tablericons.com/

[84]

Material Design Colors: https://www.materialui.co/colors

[85]

Flat UI Colors 2: https://flatuicolors.com/

[86]

Color Hunt: https://colorhunt.co/

[87]

Color Space: https://mycolor.space/

[88]

uiGradients: http://www.uigradients.com/

[89]

Colors and Fonts: https://colorsandfonts.com/

[90]

Coolors: https://coolors.co/

[91]

Undraw: https://undraw.co/illustrations

[92]

manypixels: https://gallery.manypixels.co/

[93]

IRA Design: https://iradesign.io/gallery/illustrations

[94]

Free Illustrations by Lukasz Adam: https://lukaszadam.com/illustrations

[95]

Blobmaker: https://www.blobmaker.app/

[96]

Get Waves: https://getwaves.io/

[97]

Unsplash: https://unsplash.com/

[98]

Pexels: https://www.pexels.com/

[99]

Burst: https://burst.shopify.com/

[100]

ISO Republic: https://isorepublic.com/

[101]

Pixabay: https://pixabay.com/

[102]

StockSnap.io: https://stocksnap.io/

[103]

Photopea: https://www.photopea.com/

[104]

Online Image Compressor: https://imagecompressor.com/

[105]

Bulk Resize Photos: https://bulkresizephotos.com/en

[106]

https://github.com/goldbergyoni/javascript-testing-best-practices: https://github.com/goldbergyoni/javascript-testing-best-practices

[107]

web.dev: https://web.dev/measure/

[108]

Shape Divider: https://www.shapedivider.app/

[109]

GTmetrix: https://gtmetrix.com/

[110]

Can I Use: https://caniuse.com/

[111]

Carbon: https://carbon.now.sh/

[112]

Wappalyzer: https://www.wappalyzer.com/

[113]

https://modao.cc/: https://modao.cc/

[114]

https://lanhuapp.com: https://lanhuapp.com/

[115]

https://www.fancynode.com.cn/pxcook: https://www.fancynode.com.cn/pxcook