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
2020 - 2021 年 Web 前端最新导航相关推荐
- 2020 - 2021 年 Web 前端最新导航 - 前端学习资源分享前端面试资源汇总
前端javascriptvue.jses6typescript 发布于 10月9日 国庆这几天,我收集了大量可以显著提升开发效率的前端导航链接. 这些导航链接对我很有帮助,希望对你也是如此. 这些好用 ...
- 2020年Web前端最新导航（常见前端框架、前端大牛）
前言 本文列出了很多与前端有关的常见网站.博客.工具等,整体来看比较权威.有些东西已经过时了,我就不列出来了. 学是一方面,也是最主要的方面:但还有一个作用,比如,"这个前端框架你都不知道啊 ...
- 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
- 2021年web前端发展方向有哪些
一年转瞬即逝,仅仅一年的时间,就能发生很多事情,近几年web前端行业越来越受到大家的关注,很多人都想看看2021年web前端发展方向有哪些?下面来看看小编详细的介绍. 2021年web前端发展方向有哪 ...
- 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
- 5G 带来的万物互联，2020年，web前端工程师在未来发展的惊人表现！
5G时代来临,各行各业对产品的用户体验需求空前大增.人们在享受互联网带来的便捷也给互联网产品提出了新的需求,这意味着前端开发人员也有了更多的机会和挑战.无论是大小公司,对前端开发工程师的需求都是在快速 ...
- 2020年武汉Web前端开发前景怎么样？就业薪资如何？
在过去的2019年,Web前端行业发展势头火热,无论是市场需求还是从业人员薪资,都在不断的增加.那么,2020年武汉Web前端开发前景怎么样?就业薪资如何?下面,我就给大家预测一下. 1.Web前端人 ...
- 网易游戏雷火2020春招web前端工程师笔试卷0425
网易游戏雷火2020春招web前端工程师笔试卷0425 考试信息 笔试题型 详情 单选 不定项 编程题 问答题 考试信息 招聘单位:网易游戏雷火事业群校园招聘 岗位:前端开发工程师 回复时间:2020 ...
- 【Web前端二级导航栏】
简单的Web前端二级导航栏示例: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
最新文章
- Sql语句在线转java bean https://www.bejson.com/othertools/sql2pojo/
- python dataframe取一列_python - 从pandas DataFrame列标题中获取列表
- OneVPL与FFmpeg/GStreamer硬件编解码器
- c语言 输入若干字符串 用指针和一位数组 冒泡排序,C 语言作业 - 1 - 指针使用与冒泡排序...
- 手动生成function 对应的ABAP class
- mysql查询没有权限试图_MySQL迁移后提示查询view权限不足的处理
- 【Git/Github学习笔记】Git分支管理（一）
- java socket 异常处理_java.net.SocketException四大异常解决方案
- 2022-2027年（新版）中国钢铁行业产量趋势及供需形势预测报告
- 腾讯云服务器到期续费流程
- 什么叫泛域名ssl证书
- CAN总线学习笔记（1）- CAN基础知识
- AI之路最近的一些思考
- 简述oracle_sid,环境变量 ORACLE_SID 简述
- 浅析部分物化以及冰山立方体的计算方法Star-Cubing
- Effective Approaches to Attention-based Neural Machine Translation
- VB.net 移动文件夹去另一个地址，删除文件夹里某种类型的文件
- edge通常不会下载xxxx确保信任xxx怎么解决
- 消防审批时限减了一半
- Java和go加密，解密，Base64失败
热门文章
- 利用XGBoost特征选择和堆叠集成分类器提高蛋白质-蛋白质相互作用预测精度
- vue中关键字的搜索，输入关键字列表和分页一起刷新
- MFC动态创建Picture Control
- BPF入门1：BPF技术简介
- js Deferred的使用
- Alexnet详解以及tesnsorflow实现alexnet；什么是alexnet alexnet能做什么；alexnet教程
- RSA密钥BEGIN CERTIFICATE、BEGIN RSA PRIVATE KEY和BEGIN PRIVATE KEY的区别
- Vuze--Java路径配置
- 无人驾驶--实时定位与地图构建（SLAM）仿真与实战（附源码）
- 国产最强负载均衡器LVS（理论+实战）