由笔者遴选的优质社区、优质文章，提升效率的开发工具，助力高效学习、高效工作！

优质前端资源整合（强烈推荐！）

一、学习类

1、CSS

• CSS Flexbox 属性演示（超实用），实时演示每个 Flexbox 属性的作用，让初学 Flexbox 的前端人员能快速了解它的作用，绝对值得收藏。链接：Flexbox playground (codepen.io)

• Flex属性演示器，github star1.2k，与上一个类似，不够后者有详细的属性说明，仓库：yoksel/flex-cheatsheet: 📖 Flexbox cheatsheet (github.com)

• 学习最新CSS技术的（国外）社区，链接：CSS Snippets - 30 seconds of code。文章不错，介绍的技术新且实用！例如这篇：CSS - Responsive image mosaic - 30 seconds of code

• CSS learn article合集，github start 2.9k，仓库：micromata/awesome-css-learning: A tiny list limited to the best CSS Learning Resources (github.com)

• CSS使用指南，star：25.2k，仓库：AllThingsSmitty/css-protips: ⚡️ A collection of tips to help take your CSS skills pro 🦾 (github.com)

2、社区

• 设计达人，原创和手工收集国内外高质量UI设计、网页设计、创意设计文章、优秀设计素材源文件，内容经过精心筛选，质量高！适合积累前端设计的灵感。不足之处是部分板块感觉已经停更了。链接：前端开发 | 设计达人 (shejidaren.com)

• 30 seconds of code，优秀的前端社区，内容包括：JS、CSS、Git、Node.js，甚至包括Python。没事多逛逛它，一定会有收获的！

3、规范

• Airbnb CSS / Sass 指南
• Airbnb JavaScript 风格指南

二、VSCode插件

1. Auto Rename Tag —— 自动完成另一侧标签的同步修改。对于经常要修改标签名的选手来说，终于不用改完头标签，再费劲移到结束标签修改了！省事，更省心
2. Codeium，Github Copilot的免费平替版

三、第三方库

• 网页语法高亮库，为网页（html）中的代码提供语法高亮，链接：Getting highlight.js (highlightjs.org)