2020 - 2021 年 Web 前端最新导航 - 前端学习资源分享&前端面试资源汇总

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

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

这些好用的导航链接都已经部署到下面的网站上了，在那里食用更美味哦。

Web 前端最新导航 www.kwgg2020.com/

笔者博客地址：github.com/biaochenxuy…

JavaScript

• JavaScript 教程
• ES6 入门教程
• JavaScript 30 使用原生 JavaScript 在 30 天内完成 30 个项目
• Codewars 和其他人一起完成真实的代码挑战，提升你的技术
• JavaScript 教程 现代 JavaScript 教程
• 优秀的JS代码规范
• 开发的宝藏项目
• TypeScript 教程：github.com/xcatliu/typ…
• Node.js学习 blog.poetries.top/node-learni…

CSS

• css的各种效果实现 css的各种效果实现（尤其是动画效果）
• CSS Inspiration 在这里找到写 CSS 的灵感
• CSS 常用样式 总结一些常用的 CSS 样式
• Animate.css 开箱即用的跨浏览器 CSS 动画效果
• animista 按需定制 CSS 动画效果
• SpinKit 汇集了实现各种加载效果的 CSS 代码片段
• CSS Minifier 在线 CSS 代码极简化/压缩工具
• sass.bootcss.com/documentati… Sass 是成熟、稳定、强大的 CSS 扩展语言
• less.bootcss.com/ 一种将css赋予了动态语言特性的动态样式语言
• stylus-lang.com/ 富有表现力、动态、健壮的CSS

算法

• JavaScript 算法与数据结构：github.com/trekhleb/ja…

• leetcode解题之路：github.com/azl39798585…

• 五分钟学算法：github.com/MisterBooo/…

• LeetCode题目的思路 github.com/MisterBooo/… 用动画的形式呈现解LeetCode题目的思路。

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

• GitHub 上 170K+ Star 的前端学习的数据结构与算法项目 github.com/biaochenxuy…

• JavaScript 数据结构与算法之美 - 十大经典排序汇总: github.com/biaochenxuy…

• 算法可视化工具 github.com/algorithm-v… 算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法。

• 算法可视化来源 visualgo.net/en

• 观察算法的工作方式 github.com/skidding/il… 变量和操作的可视化表示增强了控制流和实际源代码。

前端面试

• 前端面试常考问题整理，按模块知识点分类：blog.poetries.top/FE-Intervie…

• 前端开发面试题: github.com/markyun/My-…

• web前端面试宝典：github.com/h5bp/Front-…

• 掘金前端面试题合集：github.com/shfshanyue/…

• 前端面试图谱：yuchengkai.cn/docs/zh/

• GitHub 上 100K+ Star 的前端面试开源项目汇总 github.com/biaochenxuy…

技术社区

• GitHub：github.com/ 高质量的内容创作和分享平台

• stackoverflow：stackoverflow.com/ 一个回答技术问题的网站

• 掘金：juejin.cn 目前来看，国内的很多优质前端文章，都在掘金上。

• 博客园：www.cnblogs.com/ 一个很纯粹的技术博客平台。

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

• CSDN：www.csdn.net/ 广告太多，但奈何你这么老牌。

• segmentfault：segmentfault.com/ 比较低调的技术博客平台。

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

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

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

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

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

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

• 收集优质的中文前端博客：github.com/FrankFang/b…

博客团队

• 腾讯AlloyTeam：www.alloyteam.com/

• 腾讯社交用户体验ISUX：isux.tencent.com/

• 淘宝FED | 淘宝前端团队：taobaofed.org/

• 阿里巴巴国际UED：www.aliued.com/

• 京东 | 凹凸实验室：aotu.io/

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

• 百度前端研发部FEX：fex.baidu.com/

• 360 | 奇舞团：75team.com/

• 美团技术团队: tech.meituan.com/

GitHub 统计

• GitHub 中文排行榜、高分优秀中文项目：github.com/kon9chunkit…

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

构建

• NPM：www.npmjs.com/

• Yarn：yarnpkg.com/zh-Hans/

• Webpack：webpack.js.org/

• Gulp：www.gulpjs.com.cn/

• Babel：babeljs.io/

• ESLint：cn.eslint.org/ 可组装的JavaScript和JSX检查工具。

• PostCSS：www.postcss.com.cn/ 用 JavaScript 工具和插件转换 CSS 代码的工具

部署

• GitHub Pages GitHub 提供的免费静态网站托管服务
• Netlify 30 秒内部署你的网站
• Vercel 快速部署你的网站
• Surge 只需一个命令就可以发布你的网站
• Heroku 在云端构建、运行你的应用

静态站点搭建工具

• Hexo：hexo.io/zh-cn/

• VuePress：www.vuepress.cn/

• GitBook：www.gitbook.com/

前端代码规范 

• 腾讯的 tgideas.qq.com/doc/index.h…

• 京东的 guide.aotu.io/index.html

• Bootstrap编码规范：codeguide.bootcss.com/

• es6编程风格：es6.ruanyifeng.com/#docs/style

• Airbnb Javascript Style Guide：github.com/airbnb/java…

• ESLint 检测、修正 JavaScript 代码的问题

• Prettier 格式化 JavaScript 代码

调试抓包

• whistle：wproxy.org/whistle/ 代理抓包工具，很好很强大。

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

• Easy Mock：www.easy-mock.com

开发工具

• VS Code：code.visualstudio.com/

• Sublime Text：www.sublimetext.com/

• WebStorm：www.jetbrains.com/webstorm/

• Atom：atom.io/

在线工具

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

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

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

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

前端大会

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

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

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

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

图标

• Font Awesome：www.fontawesome.com.cn/ 网站开发最流行的图标集
• Feather 简洁美观的开源图标
• Ionicons 精心绘制的开源图标
• Simple Icons 常见品牌的 SVG 图标
• Material Design Icons 轻快、精美的符号图标，包括常见操作和事项
• Tabler Icons 681 枚可定制的开源 SVG 图标

色彩

• Material Design Colors Material Design 色彩
• Flat UI Colors 2 14 组配色、280 种颜色
• Color Hunt 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感
• Color Space 配色方案、CSS 颜色渐变生成工具
• uiGradients 美观的颜色渐变
• Colors and Fonts 色彩和字体工具
• Coolors 配色方案生成工具

插画

• Undraw 持续更新的精美的 SVG 插画集
• manypixels 免费插画集
• IRA Design 通过调配渐变色、搭配手绘组件定制插画
• Free Illustrations by Lukasz Adam 免费 SVG 插画
• Blobmaker 在线 SVG 形状生成器
• Get Waves 在线 SVG 波形生成器

图片

• Unsplash 可供免费使用的图片
• Pexels 精美的免费图片和视频
• Burst 免费高分辨率图片，可用于网站和商业用途
• ISO Republic 使用 CC0 许可的免费高分辨率图片和视频
• Pixabay 令人惊叹的免费（公共领域）图片和视频站点
• StockSnap.io 精美的免费图片，同样使用 CC0 许可
• Photopea 在线图片编辑工具，支持大量高级功能
• Online Image Compressor 在线图片压缩工具，一次可以压缩多达 20 张图片
• Bulk Resize Photos 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器）

其他

• 单元测试：github.com/goldbergyon…
• web.dev 评测网站性能（基于 Lighthouse）
• Shape Divider 定制各种形状的网站分区 SVG 的工具
• GTmetrix 网页性能分析工具
• Can I Use 前端技术的浏览器支持情况
• Carbon 代码转图片工具
• Wappalyzer 检测某个网站使用的技术栈

设计工具

• 墨刀：原型设计工具。网址：modao.cc/

• 蓝湖：一款产品文档和设计图的在线协作平台。网址：lanhuapp.com

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

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

笔者博客地址：github.com/biaochenxuy…

参考文章：前端开发常用免费资源，显著提升工作效率

推荐阅读：

• 通过10个实例小练习，快速入门熟练 Vue3 核心新特性

支持一下下👇