[前端必看 2026 版] 前端开发必看的 100 个网站，记得收藏！

查 API 、挑组件、复现 Bug 、压缩图片、排查兼容问题……前端开发的一天里，很多时间花在寻找合适的资料和工具上。把常用入口整理好，遇到问题时就能少绕一些弯路。

这份 2026 版清单收录了 100 个网站，分成 10 类：学习文档、框架工具、组件库、在线调试、包管理与协作、测试性能、设计配色、图标字体、图片与 CSS 工具、实战练习。每个网站都附上入口和使用场景，可以按当前需求收藏。

整理时间：2026 年 11 月。

一、学习与文档类网站

知识会更新，查阅资料也需要讲究方法。理解概念时看教程，确认行为时看文档，遇到版本差异时回到对应版本的说明。

1 、npmcn.com：npm 包中文文档 https://npmcn.com/

读 npm 包的英文 README 时，可以先到这里查看已有的中文文档。网站提供包搜索、中文简介、README 和原文切换，也能浏览热门中文包与最新中文包。它适合用来初步了解一个包，再对照原文确认 API 和配置。中文内容由自动翻译流程生成，可能有措辞偏差，当前也没有覆盖所有 npm 包。

2 、MDN Web Docs https://developer.mozilla.org/

查 HTML 、CSS 、JavaScript 和浏览器 API 时，优先打开这份参考资料。它把语法、示例与相关概念放在一起，适合解决具体问题，也适合沿着学习路径补齐前端基础。

3 、web.dev https://web.dev/

页面能运行之后，怎样让它更快、更易用？这里围绕性能、无障碍和跨浏览器体验提供课程与案例，适合把零散的优化技巧整理成可以执行的开发与检查流程。

4 、JavaScript.info https://javascript.info/

适合系统学习 JavaScript 。教程从语言基础延伸到对象、异步与浏览器交互，配有练习；遇到概念理解不牢的问题，可以顺着章节补课，再用练习检验自己是否理解。

5 、TypeScript https://www.typescriptlang.org/

类型报错看不懂时，官方手册和 Playground 很有用。可以把复杂类型缩成一小段代码，观察推断结果，再核对接口、泛型与配置的正式说明，适合团队统一写法。

6 、Can I use https://caniuse.com/

准备使用一个新 CSS 属性或浏览器能力时，先查支持表。它按浏览器和版本展示兼容情况，适合评估目标用户能否使用某项特性，再决定是否增加降级方案。

7 、CSS-Tricks https://css-tricks.com/

以 CSS 和前端实践文章见长的资料站，适合在处理布局、样式细节时寻找思路。阅读历史文章时，记得同时核对发布日期与浏览器支持，避免直接照搬旧时代的兼容写法。

8 、W3C WAI https://www.w3.org/WAI/

做无障碍不能只给图片补一个说明。WAI 汇集标准、设计开发指导和评估资源，适合检查键盘操作、内容语义与辅助技术体验，让产品的可用性有明确的参考依据。

9 、freeCodeCamp https://www.freecodecamp.org/

想边写边学，可以从它的 HTML 、CSS 、JavaScript 课程与项目练习开始。适合需要练习节奏的入门者，也适合用完整项目检查自己是否真正掌握了基础知识。

10 、roadmap.sh https://roadmap.sh/

当学习资料太多、不知道下一步学什么时，用路线图梳理知识位置。它提供前端等方向的学习路径、指南与课程，适合做查漏补缺清单，不必把每个节点都当成入职门槛。

二、框架与工程化类网站

框架解决不同的问题。选型前先看它的使用方式、渲染方案和部署要求，再决定是否适合当前项目。

11 、React https://react.dev/

学习 React 时值得反复查阅的官方入口，包含教程与 API 参考。适合从组件和数据流建立理解，再对照官方示例排查状态设计问题，减少仅靠复制片段拼页面的习惯。

12 、Vue.js https://vuejs.org/

Vue 官方站把快速上手、交互教程、示例和 API 放在同一入口，还能找到路由及状态管理生态。适合开发时按问题查文档，也适合给新人安排循序渐进的学习路径。

13 、Angular https://angular.dev/

需要理解一套完整应用框架时，可以从这里查组件、依赖注入、表单和路由。官网还有浏览器内教程，适合先做小实验，再判断 Angular 的组织方式是否适合团队项目。

14 、Svelte https://svelte.dev/

想体验以编译器为核心的组件开发，可以从交互教程和 Playground 入手。它用 HTML 、CSS 与 JavaScript 编写组件，适合做小型原型，也能继续学习 SvelteKit 应用开发。

15 、Next.js https://nextjs.org/

做 React 网站时，路由、服务端渲染和数据获取往往需要一起考虑。这里提供框架文档与学习材料，适合查清客户端和服务端的边界，再选择适合项目的页面组织方式。

16 、Nuxt https://nuxt.com/

Vue 项目需要页面路由、服务端渲染和数据获取时，可以先看 Nuxt 的约定。官方教程解释目录与自动导入等机制，适合搭应用原型，也适合查清框架替你处理了哪些工作。

17 、Astro https://astro.build/

建设博客、文档或内容型网站时值得了解。官网提供文档、主题、集成与示例入口，适合先围绕内容展示组织页面，再按需要加入交互，避免一开始就堆积复杂应用结构。

18 、Vite https://vite.dev/

前端项目遇到开发服务、构建配置或插件问题时，直接查官方指南更有效。它把配置与生态入口集中起来，适合搭建项目，也适合逐项理解现有工程中的构建约定。

19 、Tailwind CSS https://tailwindcss.com/

采用工具类写样式时，官方文档是常用速查表。适合确认布局、间距、响应式与状态变体的用法，再把重复组合抽成组件；先理解 CSS 行为，类名才不会变成新的记忆负担。

20 、Sass https://sass-lang.com/

维护较大的样式代码库时，可以用官方文档查变量、嵌套、混入和函数。它也解释如何组织与复用样式，适合接手已有 Sass 工程时厘清规则，再逐步整理重复代码。

三、组件库与界面开发类网站

做后台、搭表单、实现弹窗时，成熟组件能省去不少重复工作。挑选时也要考虑项目技术栈、主题定制和交互可访问性。

21 、shadcn/ui https://ui.shadcn.com/

适合想掌握组件源码、又希望有现成起点的项目。可以查看组件、区块和示例，把代码按自己的产品需求修改扩展。接手代码后，可以继续统一主题、补充业务交互，逐步形成自己的组件集合。

22 、Radix UI https://www.radix-ui.com/

自建 React 设计系统时，可以参考它的基础组件。Primitives 处理弹窗、菜单等交互中的键盘操作和焦点管理，同时保留样式控制权，适合在可靠行为之上实现自己的视觉设计。

23 、Ant Design https://ant.design/

制作 React 管理后台或业务界面时，可以集中查看组件 API 、交互示例和设计规范。适合统一表单、数据展示与操作反馈的表达方式，也方便团队按同一套约定协作。

24 、Element Plus https://element-plus.org/

Vue 3 项目常用的组件参考入口，提供设计指南、组件演示与资源。搭建后台页面时，可以先对照示例确定交互，再查看属性和事件，减少反复摸索组件默认行为的时间。

25 、MUI https://mui.com/

React 项目采用 Material Design 风格时，可以从组件、主题和布局工具入手。它也有面向复杂场景的扩展组件，选型时要区分基础库与商业产品，再按实际需求决定组合。

26 、Vuetify https://vuetifyjs.com/

希望 Vue 项目拥有一致的 Material Design 界面，可以查看它的组件与主题体系。适合先用现成规范搭建页面，再结合属性和插槽调整细节；查资料时注意对应项目使用的版本。

27 、PrimeVue https://primevue.dev/

Vue 业务应用需要多种交互组件时，可以用它查看示例和定制方式。适合从数据展示、输入和弹层等具体需求出发比较组件能力，再选择与项目风格匹配的主题方案。

28 、Headless UI https://headlessui.com/

想自己控制界面样式，又不想从头实现菜单和弹窗行为，可以看看这套无预设样式的组件。支持 React 与 Vue 的相应组件入口，适合配合 Tailwind CSS 组织产品交互。

29 、React Bootstrap https://react-bootstrap.github.io/

团队熟悉 Bootstrap 、项目又使用 React 时，这是便于衔接的文档入口。组件使用 React 方式实现，适合参考 API 和示例迁移界面；使用前应确认 React 与 Bootstrap 的版本组合。

30 、daisyUI https://daisyui.com/

已经使用 Tailwind CSS ，却想减少按钮、卡片等常见元素的样式重复，可以了解它的语义化组件类名。适合搭建统一风格的原型，再按产品需要调整主题和具体组件组合。

四、在线编码与调试类网站

想验证一个想法，或者让别人帮忙定位问题，可以先做一个最小示例。下面这些工具适合快速试验、分享和对照结果。

31 、CodePen https://codepen.io/

验证 CSS 动效、布局或小型交互时，在线编辑与即时预览很方便。它也能展示和分享作品，适合做最小示例、交流实现思路；把实验整理清楚后，再移回正式项目。

32 、CodeSandbox https://codesandbox.io/

需要快速搭建可分享的代码实验时，可以使用它的沙箱与模板入口。平台还提供隔离环境和 SDK ，适合前端原型、教学或工具集成；先按场景选择产品，避免混淆不同服务。

33 、StackBlitz https://stackblitz.com/

想把前端问题变成别人能直接打开的复现项目，可以从官方在线开发环境与模板入手。它支持前端和 Node.js 生态，适合文档演示、教学与问题沟通，也能研究 WebContainers 的能力。

34 、JSFiddle https://jsfiddle.net/

只想快速验证一段网页代码，不一定需要完整仓库。这个在线 Playground 适合缩小问题范围、展示效果和交流复现步骤；部分私密保存与扩展功能属于 PRO 服务。

35 、JS Bin https://jsbin.com/

适合把页面故障缩成一个可以分享的最小示例。把结构、样式和脚本放在独立面板，边修改边看预览，再把链接交给同事一起定位问题，讨论布局和交互时尤其直接。

36 、Babel REPL https://babeljs.io/repl

想知道新语法经过编译后变成什么，可以在这里对照输入与输出。适合学习语法转换、检查预设影响，或在调整构建配置前，用一小段代码验证自己的判断，减少盲目改配置的次数。

37 、regex101 https://regex101.com/

处理表单规则、日志字段或文本替换时，可以边写表达式边查看匹配与捕获组，并阅读语法解释。前端使用时先选 JavaScript 模式，再补上不该匹配的样例，避免规则只在演示数据里成立。

38 、RegExr https://regexr.com/

适合学习和调试正则表达式。输入文本后能即时查看匹配结果，悬停了解符号含义，还能把正例与反例组成测试。把规则发给同事讨论时，保存和分享功能能让双方使用同一组样本。

39 、Transform https://transform.tools/

把常见格式转换集中到一个入口，例如将接口数据生成类型定义，或把矢量图与网页片段转换成组件语法。适合减少重复录入；生成后仍要核对可选字段和数据含义，再纳入项目代码。

40 、JSON Crack https://jsoncrack.com/

面对层级很深的接口响应，可以把结构化数据展开成可缩放的关系图，观察对象、数组和字段之间的关系。适合联调时理解陌生数据结构，也能导出图片，放进接口说明或团队讨论中。

五、npm 生态与协作类网站

安装依赖之前，除了看示例，还可以检查文档、维护状态、体积和风险信息。这组网站适合把选包与协作流程串起来。

41 、npm https://www.npmjs.com/

寻找脚本依赖时常用的入口，可以发现软件包，并沿着项目资料继续了解用法和维护情况。适合安装前确认包名与来源、比较候选方案；命令行安装与网站查阅配合使用，会比只复制安装命令稳妥。

42 、JSR https://jsr.io/

面向 JavaScript 和 TypeScript 的开源包注册平台。适合寻找工具库、阅读包说明和了解发布流程；遇到感兴趣的模块时，先确认它与项目运行环境的适配，再按文档安装和试用。

43 、npms https://npms.io/

一个面向模块发现的开源搜索入口，背后会收集和评估软件包信息。适合在不知道确切包名时扩大候选范围，再回到上游文档检查功能与维护情况；搜索排名可以提供线索，但不替代实际试用。

44 、npm trends https://npmtrends.com/

选库时可以把几个候选包放在一起，比较下载趋势、体积及仓库关注度。适合观察长期变化，为技术选型补充依据；下载量也包含自动化安装，因此应结合功能、维护状态和项目约束一起判断。

45 、Bundlephobia https://bundlephobia.com/

引入依赖前先估算它可能带来的体积成本，查看包的组成与导出信息。适合比较实现同一功能的候选库，尽早发现偏重的依赖；最终增量还取决于实际导入方式，应结合项目构建结果复核。

46 、Socket https://socket.dev/

安装陌生依赖或审查依赖更新时，可以查看软件包的安全分析与风险信号，并把检查接入代码协作流程。适合关注恶意代码、可疑安装行为和供应链问题，帮助团队决定哪些变更值得进一步审查。

47 、GitHub https://github.com/

前端选库时可以查看源码、问题讨论和变更记录，遇到故障也能搜索别人已经报告的情况。团队开发则可以利用 Pull Request 、代码审查和自动化流程，把实现、讨论与验证记录放在同一处。

48 、GitLab https://gitlab.com/

适合把代码托管、团队协作与持续集成放进统一流程。前端项目可以在提交后执行检查、构建与发布任务，让合并过程留下可追溯的结果；选用前先按团队需要核对部署方式和相关方案。

49 、UNPKG https://unpkg.com/

做演示页面或检查包内文件时，可以直接通过地址访问软件包资源，减少搭建完整构建工程的步骤。适合快速验证一个库的浏览器用法；正式项目应固定具体版本与文件路径，避免资源随更新改变。

50 、jsDelivr https://www.jsdelivr.com/

为开源项目提供资源分发，可按软件包或仓库地址引用脚本、样式等文件。适合制作示例、文档页面和轻量原型；上线时固定版本，并在目标用户所在网络实测资源可达性与加载表现。

六、测试、兼容与性能类网站

页面能跑起来之后，还要确认功能是否稳定、不同浏览器表现如何、用户等待了多久。测试和性能工具可以帮你把问题具体化。

51 、Playwright https://playwright.dev/

适合把登录、搜索、下单等关键操作写成浏览器自动化测试，并跨多个浏览器引擎验证。自动等待和断言有助于减少时序问题，出现失败时再借助跟踪记录，查看是哪一步偏离了预期。

52 、Vitest https://vitest.dev/

适合为函数、模块和组件补充自动化测试，尤其方便复用已有开发工具的配置与转换流程。修改代码后可以只重跑相关测试，再结合断言、快照和覆盖率，检查重构是否改变了预期行为。

53 、Testing Library https://testing-library.com/

写组件测试时，它鼓励从用户看到的文字、标签和控件角色出发寻找元素，再模拟实际操作。适合验证表单、按钮与反馈信息，减少测试对组件内部实现的依赖，也让可访问性问题更容易暴露。

54 、Cypress https://www.cypress.io/

适合在浏览器里编写和调试交互测试，将用户操作与页面结果连起来检查。可视化调试有助于定位失败步骤，团队还可按需要使用云端测试管理与分析能力，把反复出现的问题纳入回归检查。

55 、Jest https://jestjs.io/

为脚本项目提供断言、模拟函数、快照和覆盖率等测试能力。适合验证工具函数、模块边界和已有业务逻辑；接手老项目时，可先为关键行为补测试，再利用失败信息定位重构引入的变化。

56 、BrowserStack https://www.browserstack.com/

本地设备不够时，可以使用云端真实浏览器和设备排查兼容问题，也能接入自动化测试。适合验证特定系统上的布局与交互差异，减少只在自己电脑上验收的盲区；相关测试方案包含收费服务。

57 、Chrome Platform Status https://chromestatus.com/

跟踪浏览器平台功能及版本变化的官方入口。准备使用新接口或新样式能力时，可查看对应条目、规范链接和发布说明，判断是否需要兼容方案；浏览器升级后也可用它排查行为变化的来源。

58 、WebPageTest https://www.webpagetest.org/

分析页面为什么慢时，可以结合请求瀑布图、逐帧画面和性能指标，还原资源加载与页面呈现过程。适合比较优化前后的差异，并选择不同地点与连接条件测试，把等待时间对应到具体环节。

59 、GTmetrix https://gtmetrix.com/

输入页面地址后，可查看性能分析、资源请求瀑布图和优化建议。适合排查大文件、服务器响应与页面结构造成的加载问题，也可跟踪变化；比较结果时应保持测试地点、设备和网络条件一致。

60 、DebugBear https://www.debugbear.com/

适合持续关注页面速度，把模拟测试、真实用户体验和核心性能指标放在一起观察。版本发布后可以检查指标是否退步，再从详细报告定位瓶颈，让性能优化有连续记录，而不只保留一次跑分。

七、设计、原型与配色类网站

写页面之前，把布局、交互和颜色讨论清楚，能减少后续返工。这里既有协作设计工具，也有轻量画图和配色入口。

61 、Figma https://www.figma.com/

前端与设计师协作时，可用它查看界面稿、交互原型和组件规范，并围绕同一份设计讨论实现细节。适合在编码前理清页面状态、间距和复用关系，减少设计交付之后反复通过截图确认的沟通。

62 、Penpot https://penpot.app/

支持团队协作与自行部署的开源设计平台，提供界面设计、原型和共享组件能力。布局与代码检查围绕开放网页标准展开，适合希望设计表达更贴近前端实现，或需要掌握部署环境的团队。

63 、Excalidraw https://excalidraw.com/

需要解释组件关系、接口流程或页面草图时，可以用手绘风格白板快速表达。支持实时协作、分享链接及图片导出，适合技术讨论和文档配图，把复杂关系画清楚后，再进入详细设计与编码。

64 、tldraw https://www.tldraw.com/

适合在无限画布上用形状、文字、箭头和图片整理想法，画页面草稿或流程讨论图。前端开发者也可以顺着它的开发文档研究画布交互；如果要嵌入产品，应另外核对开发工具包的授权方案。

65 、diagrams.net https://app.diagrams.net/

当草图需要整理成正式技术图时，可以用它绘制流程图、网络关系图、实体关系图或 UML 图。适合记录接口流程、系统边界和数据库关系，让评审与交接有清晰、可持续修改的图示。

66 、Coolors https://coolors.co/

做个人项目或活动页时，可以快速生成配色、浏览现成方案，也能从图片提取颜色并检查对比度。适合先确定主色与辅助色的搭配，再带回真实界面检验层级；部分高级工具与导出能力收费。

67 、Color Hunt https://colorhunt.co/

提供人工挑选的配色组合，可按颜色、风格和主题浏览。适合缺少视觉起点时寻找灵感，例如为博客、图表或活动页挑选基础色组；选定后仍要在实际界面检查文字对比度和状态区分。

68 、Realtime Colors https://www.realtimecolors.com/

调整文字、背景和强调色后，直接在示例网页中预览效果，再导出配色。适合给个人站或产品落地页定视觉基调，比只看孤立色块更容易发现搭配问题。

69 、uiGradients https://uigradients.com/

集中浏览社区贡献的多色渐变，找到合适组合后查看对应的样式代码。适合为横幅、按钮和页面背景寻找起点，选好颜色后仍要在实际文字上检查对比度。

70 、CSS Gradient https://cssgradient.io/

通过颜色节点、透明度和角度调整线性或径向渐变，并复制生成的样式代码。适合还原设计稿背景，也能边调参数边理解渐变语法，减少反复手写试错。

八、图标与字体类网站

统一的图标和字体能让界面更清楚。选素材时关注风格、文件体积与可读性，使用前查看具体资源的许可。

71 、Iconify https://iconify.design/

把多套开源图标放进统一的检索与使用体系，适合给组件库或后台页面选图标。注意框架许可不等于图标许可，最终应核对所选图标集的授权要求与视觉风格。

72 、Lucide https://lucide.dev/

提供风格一致的线性图标，可调整大小、颜色和描边，并按需引入。适合统一导航、工具栏和表单控件的视觉语言；接入项目时保留所需许可说明，避免整包引入。

73 、Heroicons https://heroicons.com/

提供适合界面操作的矢量图标，并有 React 与 Vue 组件库。适合在按钮、列表和导航中保持一致风格，选型时结合图标尺寸检查辨识度，并遵守项目许可。

74 、Tabler Icons https://tabler.io/icons

可搜索轮廓与填充图标，调整尺寸、颜色和描边，适合快速搭建后台与设计系统。开源图标和付费成品包需要区分，下载时核对具体格式、套餐以及对应许可。

75 、SVG Repo https://www.svgrepo.com/

按风格和主题寻找矢量图标或插画，还能进行基础编辑，适合制作空状态和功能入口。素材来自不同集合，使用前查看具体条目的许可，不把可下载等同于无限制使用。

76 、Simple Icons https://simpleicons.org/

集中提供品牌标志的矢量文件与相关信息，适合技术栈展示、集成列表和社交入口。品牌图标仍可能受商标规则与单独许可约束，使用前应核对对应品牌指南。

77 、Iconoir https://iconoir.com/

提供线条风格的开源图标，并支持多种框架和设计工具，适合网页与移动端保持一致的操作符号。可以按尺寸和描边调整效果，纳入项目时也要保留相应许可说明。

78 、Font Awesome https://fontawesome.com/

为常见界面动作和品牌入口提供图标，可通过字体或矢量方式接入。适合维护已有图标体系的项目；免费库与付费图标并存，选用前核对所需款式及授权范围。

79 、Google Fonts https://fonts.google.com/

寻找网页字体，并通过官方样式接口选择字族和字重，适合调整标题与正文的排版层次。接入时控制请求数量、设置后备字体，同时查看所选字体的具体许可。

80 、Fontshare https://www.fontshare.com/

提供经过筛选的字体，适合为作品集、品牌页和英文标题寻找不同于默认字体的选择。站内开放源码与闭源免费字体采用不同许可，下载后仍应阅读具体授权条款。

九、图片处理与 CSS 生成类网站

压缩图片、优化 SVG 、生成背景和试排布局，都是开发中的高频小任务。把这些工具放在一起，临时需要时更容易找到。

81 、Squoosh https://squoosh.app/

在浏览器本地压缩图片，调整参数并对比画质与体积，适合上线前处理首屏配图和文章插图。图片处理不离开设备，可先找到合适质量，再决定最终使用的资源大小。

82 、TinyPNG https://tinypng.com/

把网页图片拖入即可压缩，也提供格式转换与开发接口，适合批量整理页面素材。免费使用有数量和大小限制，大批处理前核对当前方案，并检查压缩后的细节表现。

83 、SVGOMG https://svgomg.net/

导入 SVG 或粘贴源码，逐项控制元数据清理、精度和路径优化，适合给图标与装饰图减重。压缩后应对照原图检查显示效果，尤其留意渐变、引用和尺寸信息。

84 、CloudConvert https://cloudconvert.com/

在浏览器中转换图片、音视频和文档格式，也提供可串联任务的接口。适合处理设计交付中格式不统一的文件；批量接入前核对费用、输出参数和文件保留规则。

85 、remove.bg https://www.remove.bg/

自动移除图片背景，适合准备商品卡片、人物介绍和活动页面的透明素材。能减少手工抠图时间，但边缘与半透明区域仍要检查，下载前也应确认当前方案的清晰度限制。

86 、Unsplash https://unsplash.com/

按主题寻找摄影图片与视觉素材，适合做落地页配图和文章封面。站内有不同类型的内容与许可，使用时核对具体条目，不能把免费图片直接打包成相似素材服务。

87 、Pexels https://www.pexels.com/

提供照片和视频素材，适合补充演示网站、博客或产品介绍页的视觉内容。使用前阅读素材许可，不把图片中的人物或品牌描述成产品代言，也不要原样转售素材。

88 、Haikei https://haikei.app/

通过波浪、斑点和网格等生成器制作抽象背景，可调整画布与配色后导出。适合登录页、横幅和文章封面，先用品牌色试出几种变化，再挑不会干扰正文阅读的一版。

89 、Get Waves https://getwaves.io/

专门生成网页设计用的波浪形矢量装饰，适合连接首屏与下方内容区，让分区边界更自然。官网已说明它属于 Haikei 产品体系，适合只想快速制作分区波浪的场景。

90 、CSS Grid Generator https://cssgrid-generator.netlify.app/

设置行列数量与单位，在网格内拖出内容区域，再取得基础布局代码。适合先搭后台或展示页的结构草图，帮助理解元素如何跨格，但复杂响应式行为仍需自行完善。

十、实战练习与面试提升类网站

看懂教程之后，最好亲手做一遍。可以从一个布局小游戏或一个小页面开始，再逐步练习组件、交互和更完整的项目。

91 、Flexbox Froggy https://flexboxfroggy.com/

用 CSS 布局代码把青蛙送到荷叶上，在即时反馈中理解对齐、间距和换行。适合刚接触弹性布局时练手，完成关卡后再把同样思路用到导航、按钮组和卡片排列中。

92 、Grid Garden https://cssgridgarden.com/

通过给胡萝卜浇水的关卡学习网格布局，逐步理解行、列和区域定位。适合把抽象的网格属性变成可见结果，学完后可以尝试自己拆解一个带侧栏的页面结构。

93 、Frontend Mentor https://www.frontendmentor.io/

根据设计稿与需求完成网页项目，再通过提交作品和反馈发现问题。适合从跟着教程转向独立实现；免费挑战与付费权益并存，挑选前确认设计文件和评审的可用范围。

94 、CSSBattle https://cssbattle.dev/

用样式代码复现目标图形，通过日常挑战练习定位、几何形状和视觉拆解。适合短时间集中训练细节，不过竞赛追求的极短写法不一定适合生产项目的维护需求。

95 、Codewars https://www.codewars.com/

通过按难度组织的小题练习编程，在浏览器中运行测试，并比较其他人的解法。适合补强字符串、数组等基础处理能力，做完后分析不同思路，比只累计题数更有价值。

96 、LeetCode https://leetcode.com/

用题目与学习计划补充编程基本功，前端也可从官方 JavaScript 入门计划开始。适合面试前建立练习习惯，重点理解题解与边界条件，并把练习和真实页面开发结合。

97 、devChallenges https://devchallenges.io/

提供从响应式页面到交互应用的项目挑战，需要提交代码仓库与在线演示。适合逐步积累作品集，也能通过审阅别人的实现学习取舍，选择任务时留意所需技能和权益。

98 、JavaScript30 https://javascript30.com/

用三十个原生 JavaScript 小项目练习页面交互与浏览器能力，提供视频、起始文件和参考实现。适合已了解基础语法、却不知道做什么的人，通过动手把知识串起来。

99 、Frontend Practice https://www.frontendpractice.com/

选择真实网站作为重建练习，借助配色与资源提示训练布局、交互和响应式实现。适合检验独立还原能力；作品展示时注明非官方练习，原站素材不因此获得商用授权。

100 、GreatFrontEnd https://www.greatfrontend.com/

围绕界面组件、JavaScript 函数和系统设计提供前端面试练习，并有浏览器内编码与测试环境。适合按薄弱环节分专题训练，写完结合测试边界复盘，而不是直接背答案。

收藏之后，先挑几个用起来

刚入门，可以从 MDN 、JavaScript.info 和 freeCodeCamp 开始；正在做项目，优先收藏所用框架的官网、一个合适的组件库和一个在线复现工具；准备上线，再补上端到端测试和性能检测。

100 个入口不需要同时用熟。下次遇到问题，试着从对应分类里挑一个工具解决它，逐渐形成适合自己的工作流。

你还有哪些经常用、但这份清单里没有的网站？欢迎在评论区补充，也欢迎指出入口变化或介绍中需要修正的地方。