P1xt Guides 前端开发 Speedrun 实战清单：21 个练习项目与完整配套资源解析

• 教程
• 文档

本文以 frontend-dev.md 为蓝本，系统解析 P1xt Guides「Practice Speedrun」系列中前端 Web 开发方向的速刷训练方案：21 个可直接上手的前端练习项目、5 类核心项目模式，以及覆盖学习、素材、部署与工程化的完整配套资源。读完本文，你将理解如何用一个到两个月时间高强度刷完这批项目，产出可放进作品集（portfolio）的实战成果，并学会合规使用开源素材、用纯前端方式消费公开 API、以及借助本仓库其他指南（AI 挑战、前端专精路线）把练习持续滚动下去。

Speedrun / Practice：前端速刷练习是什么

在 P1xt Guides 仓库中，speedrun-practice是一个专门用于「主题化练习」的子章节，与算法、Android、全栈、游戏开发等方向并列，入口见 deprecated/speedrun-practice/README.md 与 deprecated/README.md 的 Practice Speedrun 一节。

原文档 frontend-dev.md 在开篇 Notes 中明确了它的定位与使用方法：

• 练习项目的用途：作为作品集（portfolio）项目创意来源，或在特定领域积累额外经验；
• 速刷（speedrun）玩法：留出一到两个月时间，在这个时间段内尽可能多地刷完清单中的项目，形成一次高强度的动手实践；
• 版权红线：无论是克隆还是参考别人的作品，始终寻找或自制开源素材，并标注素材来源，避免版权侵权。

根据 CHANGELOG.md 的记录，Speedrun/Practice 章节于 2017 年 10 月 23 日加入仓库；该目录目前位于deprecated之下，意味着它不再维护、外部链接可能出现失效，但其项目清单与训练方法论本身仍然完整可用，适合作为练习弹药库长期取用。仓库根目录的 README.md（v6.1）在多个 Tier 中反复强调的「always be practicing / 始终保持练习」理念，与本清单的设计意图一脉相承。

21 个前端练习项目完整清单

以下完整继承原文档 Projects 一节的全部 21 个条目（对应 frontend-dev.md）。原清单以- [ ]复选框形式组织，天然就是一份可勾选、可追踪进度的任务清单。

统计一下即可看出本清单的构成逻辑：100 Days of CSS 类 9 次、模板灵感还原类 5 次、API 驱动纯前端应用类 5 次、CSS Zen Garden 类 1 次、多页面博客克隆类 1 次，合计 21 项。反复出现的同一类项目并非重复——每一次都应挑战新的实例（新的 CSS 挑战、新的模板、新的 API），通过「重复同类但不断换新题目」实现刻意练习。

五类项目模式逐一拆解

CSS 极限挑战：100 Days of CSS（9 项）

这是清单中出现频率最高的项目类型，原文档要求「从 100 个挑战中挑选 1 个并实现」，每一次挑选都应换一个不同的挑战。这类练习聚焦纯 CSS 能力：

• 像素级还原：对照参考图还原布局、间距、配色与细节；
• 布局技术：Flexbox 与 Grid 的熟练运用；
• 动效与过渡：hover 状态、过渡（transition）、关键帧动画（keyframes）；
• 响应式：在不同视口宽度下保持视觉一致性。

建议每完成一个挑战，把代码放进独立的小项目目录，并在 README 中记录实现思路与完成时间，为后续作品集挑选素材。

模板灵感还原（5 项）

原文档给出了三类免费模板来源（免费 PSD 网站模板、免费 CSS 模板、免费网站模板站），要求「以模板为灵感实现网站前端，但不要使用它的素材」。

关键约束是只借用版式与布局结构，不复制图片、字体、文案等素材。这既是版权合规的要求，也是对前端工程师「照着设计稿还原页面」真实工作场景的模拟。练习要点：

• 分析模板的视觉层级与栅格系统，用语义化 HTML 重建结构；
• 用 CSS 重建排版、配色与间距系统；
• 自行寻找或制作替代素材（参考下文素材资源清单）；
• 记住原文档的提醒：始终寻找或自制开源素材并标注来源，避免版权侵权。

API 驱动的纯前端应用（5 项）

要求从公开 API 列表（如 Todd Motto 的 public-apis 聚合列表）中挑选一个 API，构建仅由前端代码驱动的应用。这类项目把练习重点放在数据消费层：

• 使用 fetch/XHR 发起异步请求，处理 loading、成功、失败三种状态；
• 将 API 返回的 JSON 数据渲染为页面内容（列表、卡片、详情页）；
• 处理分页、过滤、搜索等常见交互；
• 把 API key 等敏感配置与界面逻辑解耦，注意 CORS 与调用限额。

由于是纯前端应用，完成后可以低成本部署到静态托管平台（见下文部署部分），直接得到可在线访问的作品集条目。

CSS Zen Garden 设计赛（1 项）

CSS Zen Garden 的规则极具挑战性：HTML 完全固定、不允许修改，参赛者只能通过编写 CSS 来彻底改变页面的视觉呈现。原文档要求「实现你自己的 CSS 设计方案」，它强制你：

• 深入理解 CSS 的级联（cascade）、层叠上下文与选择器优先级；
• 只用样式表完成全部视觉设计，包括布局、装饰、响应式与打印样式；
• 学会在约束条件下做设计决策——这正是高级前端工作的常态。

多页面博客模板克隆（1 项）

最后一项要求克隆一个博客模板，并特别强调该模板包含多个页面。与前面单页式还原不同，这一步把复杂度提升到站点层面：

• 规划多页面间的信息架构与统一导航；
• 设计可复用的页面组件（文章卡片、侧边栏、页脚、分页）；
• 处理文章列表页、文章详情页、关于页等不同页面类型；
• 为后续全栈方向（如 fullstack-dev.md 中的「克隆 Medium」）打下前端基础。

配套学习资源全清单

原文档 Helpful links 一节（frontend-dev.md）提供了完整的配套资源，涵盖版本控制、部署、学习路径、素材与官方文档。以下按类别完整继承其条目与用途说明（原始链接均保存在原文档中，可打开对照取用；注意 deprecated 目录下的链接可能随时间失效）。

版本控制与部署

HTML/CSS 学习路径

JavaScript 与数据可视化

素材与灵感资源

这些素材正是「模板灵感还原」类项目合规替换素材的直接弹药。

官方文档

这套文档组合基本覆盖了一个前端练习项目从编码、测试、打包到自动部署的完整工具链：写代码时用 MDN 查语法、ESLint/Prettier 管质量；复杂交互交给框架与 Redux；交付前用 Webpack/Babel 构建、用测试框架验证；最后用 Travis 实现提交即部署。

与仓库其他指南的联动：把练习持续滚动起来

速刷清单的定位是「项目弹药库」，而 P1xt Guides 仓库还提供了让练习永不枯竭的配套机制：

• RequestingChallengesFromAI.md：该文档系统讲解了如何向 ChatGPT 请求练习挑战。它给出的提示词模板（如「我是初级 Web 开发者，给我布置一个初级前端项目，要求给出详细需求、参考链接、样式指南」）可以直接生成一份完整的项目规格书，正好弥补速刷清单「刷完就没题目」的缺口。文档还给出了进阶提示词写法：指定技术栈（React、Redux、TypeScript、Storybook）、要求提供 API 设计文档、数据模型与测试用例——这些都与本清单中的「API 驱动纯前端应用」项目高度互补。
• v4/specializations/frontend.md：v4 时代的前端专精路线，要求选定 Angular/React/Vue 之一并配套 TypeScript、NgRx、Redux 等生态完成多个项目，可作为速刷之后「往框架方向纵深」的升级路线。
• deprecated/speedrun-practice/README.md：同系列的算法、Android、全栈、游戏开发清单，前端刷完后可按同一方法论横向扩展。

从源码结构看，本仓库是纯文档型课程仓库（无业务代码），因此上述文件即是最直接的「实现证据」：速刷清单在 deprecated/README.md 中被正式索引，其维护状态与迭代历史记录在 CHANGELOG.md 中。

一次前端速刷的执行建议

结合原文档的 Notes 与仓库其他指南，给出可落地的执行方案：

1. 定好时间盒：按原文档建议，预留一到两个月；每天保持一定时长的专注实现时间，把「做项目」作为主线，把学习资源当作查漏补缺的支线。
2. 用复选框追踪进度：直接 fork 仓库后勾选- [ ]清单；参照主 README.md Notes 中关于 Status / Evidence 列的建议，为每个项目记录开始与完成时间，并把成品链接放进 Evidence 栏，形成自己的学习日志。
3. 严格区分「克隆」与「抄袭」：模板还原、博客克隆项目一律不挪用他人素材；图片、图标、字体从素材清单中挑选开源资源并标注出处。
4. 每个项目都要「看得见」：纯前端项目用 surge.sh 这类静态托管一键部署，让作品集条目全部可在线访问；多页面项目注意部署后的路由与相对路径配置。
5. 同类项目换新题：9 次 CSS 挑战不要重复做同一个；每次选新的挑战、新的模板、新的 API，保持难度递增。
6. 刷完不等于结束：21 项完成后再配合 RequestingChallengesFromAI.md 的提示词向 AI 索取新项目，或转入 v4/specializations/frontend.md 的框架专精路线，让练习持续滚动。

综上，这份清单的价值不在于「题目本身有多难」，而在于它用可复制的项目模式 + 高重复频率，把前端核心技能（CSS 还原、数据消费、多页面架构）压缩进一到两个月的密集训练中——这正是 Speedrun 方法论的精髓，也是它至今仍值得从 deprecated 目录中挖出来使用的理由。

• 教程
• 文档