2020 – 2021 年 Web 前端最新导航

由 Deepseek提供支持
广告

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://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
广告
广告图片
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/2020-2021-web-front-end-latest-navigation.html
二维码
请先登录才能参与答题
距本场结束剩 00天 00时 00分 00秒
轻量应用服务器 2核2G
200M峰值带宽，适用于网站搭建、Web应用、容器环境、电商独立站等
立即前往
扫码进入
扫描二维码购买
文澜千文

文澜千文

请登录以使用此功能。

热门搜索

公告

为了保障用户和本站点的合法权益，本网站制定了多项条例。点击同意即表示您遵守这些条例: 网站政策。

美心（Meixin）原味鸡蛋卷448g 中国香港特产休闲零食饼干礼盒企业送礼团购 美心（Meixin）原味鸡蛋卷448g 中国香港特产休闲零食饼干礼盒企业送礼团购
Loading...