2020 – 2021 年 Web 前端最新导航

文章目录

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
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：3.128.198.90，归属地:俄亥俄州Dublin ，欢迎您的访问!
文章链接：https://www.lilianhua.com/2020-2021-web-front-end-latest-navigation.html
二维码

公告

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

Popup Image

通知

卡密兑换正式上线，并且网站不定时发放免费卡密,先到先得！卡密兑换界面：前往

Loading...