前端开发资源合集：47k Star 的学习导航站

前端开发资源合集：47k Star 的学习导航站

做前端开发，最头疼的不是写代码，是不知道学什么、去哪学。框架更新快，工具链复杂，新手容易迷失方向，老手也经常遗漏好资源。

GitHub 上有一个项目叫 frontend-dev-bookmarks，Star 数超过 47000，专门解决这个问题。它是一份人工整理的前端开发资源清单，涵盖从视觉设计到工程化部署的各个环节。

这个项目的特点是分类细致。它把前端开发涉及的知识拆成了几个大板块，每个板块下再细分具体方向。

Appearance（外观）负责页面的视觉呈现，包含动画、排版和数据可视化三个方向。动画部分收录了 CSS 动画和 JavaScript 动画库的资料；排版部分关注字体选择和文字排版规则；可视化部分则汇集了 D3.js 等图表库的学习资源。

Architecture（架构）讲的是前端代码的组织方式。里面涵盖了算法基础、设计模式、事件驱动编程、函数式编程和函数响应式编程。这些内容对写出可维护的代码很重要，尤其是项目规模变大之后。

Compatibility（兼容性）处理的是跨环境适配问题。跨浏览器兼容、移动端适配、响应式设计、键盘交互、打印样式、无障碍访问，这些都在里面。做实际项目时，兼容性问题往往是最耗时的，这个分类能提供不少现成的解决方案。

Ecosystem（生态）收录的是社区资源，包括围绕知名开源项目的社区、前端新闻站点、播客、行业组织和知名开发者。想了解前端圈子在聊什么、关注谁，看这个分类就够了。

Languages, Protocols, Browser APIs是技术栈的核心。CSS、HTML、JavaScript、DOM、HTTP、JSON、SVG、WebAssembly、Service Workers、模板引擎，前端用到的语言和协议基本都覆盖了。每个子分类都有专门的资源列表，内容比较系统。

User Interface Components（UI 组件）收录了常用的界面组件实现方案。按钮、表单、代码编辑器、图片轮播、栅格系统、富文本编辑器、音视频播放器，这些都是日常开发会用到的。想找某个组件的实现方案或第三方库，直接翻这个分类就行。

Workflow（工作流）覆盖的是开发工具链。自动化测试、构建工具、CSS 工具、代码编辑器、文档生成、包管理、Source Map、版本控制，前端工程化相关的工具基本都在这里。

这个项目还有一个特点：它不只是列链接，每个资源都附带了简短的说明，告诉你这个资源是干什么的、适合什么场景。这比单纯的 Awesome 列表更实用，省去了逐个点开判断的时间。

项目的维护者持续更新内容，旧版本的链接已经标记为过时，当前版本保持活跃。资源按主题拆分成了多个小文件，浏览起来比较方便，不会像某些 Awesome 列表那样一打开就是几千行。

如果你是前端新手，这个项目可以当作学习路线图，按分类逐步学习。如果你是有经验的开发者，可以用它查漏补缺，看看自己有没有遗漏的领域。

47000 多个 Star 说明这个项目确实帮到了很多人。前端领域变化快，有一份整理好的资源清单，学习效率会高不少。

很多人。前端领域变化快，有一份整理好的资源清单，学习效率会高不少。