用这些 HTML & CSS 实战项目，轻松提升你的前端技能

几乎每个前端新手都会遇到这堵墙。

教程看了一遍又一遍，大脑却开始一片模糊。你确实知道 div 是什么，也能勉强看懂别人的样式表。三部关于 Flexbox 的视频？看过了。但当你打开一个空白的 index.html，看着光标不停闪烁时，大脑瞬间一片空白。

再看一个教程解决不了问题。做项目才可以。

找一个足够小、能在周末搞定，并且能向朋友展示成果的项目。HTML 和 CSS 只有在你亲手敲代码、把页面写崩、然后再亲手修复的过程中，才能真正被你掌握。

在 Coddy 平台上，HTML 和 CSS 路线是最活跃的板块之一。那些坚持下来并对前端代码充满信心的人，都有一个共同点：定期完成小项目。他们不会等到自己觉得“学够了”才动手。他们边做边学，遇到困难就查资料，解决后继续前进。

这篇指南为你整理了 18 个按难度排序的 HTML 和 CSS 项目，从单页网站到纯 CSS 轮播图应有尽有。你不需要把它们全部做完。这个周末挑一个，然后把它搞定。

为什么做项目比看教程更有效

看着代码会让你产生一种学到了很多的错觉。但实际上，并没有。

哪怕看一个月的 YouTube 视频，你可能还是连一个基础的落地页（Landing Page）都搭不出来，因为“看”和“写”用的是完全不同的脑部肌肉。尤其是 CSS，必须亲手敲出来才能记住，因为其中有太多琐碎的微调，只有通过不断试错才能真正掌握。

做项目还会逼着你去查资料！前端开发的工作大约是 30% 写代码，70% 查 MDN、阅读文档以及琢磨为什么某个元素偏了两个像素。而教程把这些真实的过程都隐藏了。

此外，项目还能给你带来看得见的成果。说一句“我正在学 HTML 和 CSS”很难让人有成就感。但如果你说“我写了这个餐厅网页，这是链接”，然后发给朋友，感觉就完全不同了。这种“这是我亲手做的”成就感，正是支撑人们度过枯燥学习期的动力源泉。

如何搭建开发环境（如果你已经配好了，请跳过）

学习 HTML 和 CSS 不需要复杂的配置。只需要以下三样东西：

1. 文本编辑器。 VS Code 是大多数人的首选。它是免费的，等你写了几个项目之后，还可以安装一些实用的 CSS 插件。
2. 浏览器。 你平时用的任何浏览器都可以。开发者工具（右键点击，选择“检查”）是调试布局问题的利器。尽早养成使用它的习惯。
3. 为每个项目建一个文件夹。 刚开始只需要 index.html 和 style.css！在做第一个项目时，先不要担心构建工具、框架或所谓的“最佳实践”。

如果你想跳过配置步骤，Coddy 的 HTML 课程 和 CSS 课程 支持浏览器免安装运行。当你只想练习某个特定概念而不想新建项目时，这非常实用。否则，一个文件夹和一个文本编辑器就足够了。

初学者 HTML 和 CSS 项目

这五个项目使用了最基础的知识：标题、段落、图片、列表、链接，以及少许颜色和间距调整。学完几节 HTML 和 CSS 课程后，你只需花几个小时就能搞定其中任何一个。

1. 致敬人物专页 (Tribute Page)

挑选一个你崇拜的人（音乐家、作家、运动员、科学家），为他/她制作一个单页致敬网站。包含一个大标题、一张主视觉图（Hero Image）、一段简短的生平介绍、一个生平时间线以及一个用于了解更多信息的链接列表。整个项目只涉及标题、段落、图片、列表，以及用于排版和间距的基础 CSS。它之所以成为经典的第一个 HTML 项目，是有原因的。这里没有任何难点。

2. 个人“关于我”页面

一个介绍你自己的单页个人网站。包含照片、简短自传、兴趣爱好列表以及联系方式板块。如果你能把它部署到网上，还可以获得加分。GitHub Pages 是免费的，只需几分钟即可搞定。这样你就拥有了一个可以分享的真实链接。

3. 食谱卡片

制作一个食谱，包含菜品的主图、配料表、带编号的步骤，以及在小信息框中显示的准备时间。这个项目可以帮你掌握有序列表与无序列表的区别、图片大小调整，以及如何让内容丰富的页面看起来井井有条而不是杂乱无章。

4. 联系表单页面

一个包含表单的页面：姓名、邮箱、留言和提交按钮。表单现在不需要真正发送数据，那是 JavaScript 的工作。重点是掌握 HTML 表单元素（input、textarea、label、button），并对它们进行美化，摆脱浏览器默认的丑陋样式。表单几乎会出现在每个前端项目中，现在熟练掌握它们会让你受益匪浅。

5. 简易餐厅菜单

为一家虚构的餐厅制作单页菜单。划分不同的类别（前菜、主菜、甜点），每道菜配有名称和简短描述。在顶部加上一个横幅（Hero Banner），在底部加上一个写有营业时间的小页脚。这可以练习将内容分组到不同的区块、重复布局，以及选择一个看起来和谐的配色方案。

中级项目（Flexbox、Grid 与布局）

在这个阶段，你需要合理地布局页面，处理多个板块，并最终做出一个看起来像真实网站的页面。这些项目大多依赖 Flexbox 或 CSS Grid，这正是你需要锻炼的核心技能。

6. 虚构产品的落地页

挑选一个产品（一款 App、一个 SaaS 工具、一家香薰蜡烛公司等），并制作一个类似其官网首页的落地页。包含带有标题和呼吁行动（CTA）按钮的主视觉区域、下方的三个功能特性板块、客户评价以及带有链接的页脚。整个项目是对 Flexbox 和 Grid 的极佳锻炼，同时也能让你学会如何处理间距和视觉层级。

7. 个人作品集网站

一个展示你作品的多板块页面，即使你现在的“作品”只有两个致敬页面和一个食谱卡片。包含带有导航栏的页眉、主视觉区域、项目网格、关于我板块和联系板块。使用 Grid 来布局项目网格，使用 Flexbox 来布局导航栏和主视觉区域。

即使你觉得现在还不需要作品集，这个项目也非常有用。一旦你开始申请工作或接私活，你就已经有一个现成的作品集了。

8. 价格表

并排布局三个价格档位，每个档位都有自己的卡片，包含名称、功能列表和 CTA 按钮。在中间的卡片上添加“最受欢迎”的突出显示。价格表看似简单，实则暗藏玄机：等高卡片、对齐的列表、按钮的悬停状态（Hover States）。这是极好的 Flexbox 练习。

9. 博客首页

一个博客索引页：带有导航和搜索框的页眉、顶部的精选文章、下方的最新文章网格、带有分类和最新评论的侧边栏，以及底部的页脚。这个项目能教会你如何处理包含多个区域的内容布局，这更接近实际生产环境中的前端开发。

10. 登录和注册页面

两个关联的页面（一个是登录，一个是注册），包含居中的表单、品牌页眉以及在两者之间切换的链接。挑战在于如何在不过度设计的前提下，做出精致的外观。最优秀的登录页面往往对齐工整，且比用户预期的要稍微精致一些。这是一个常被低估的审美练习。

11. 仪表盘原型 (Dashboard Mockup)

一个静态的仪表盘布局：左侧是侧边栏导航，顶部是包含用户信息的状态栏，主内容区域包含几个数据卡片、一个图表占位符和一个最近活动列表。目前不需要任何交互。这纯粹是一个布局项目，Grid 将承担大部分工作。做完这个项目，你就会明白为什么 CSS Grid 如此重要，以及为什么那些没用过它的人总是在抱怨布局难写。

CSS 动画与特效项目

现在来到了有趣的部分。这些项目规模较小，但更侧重于 CSS。非常适合用来掌握过渡（Transitions）、关键帧（Keyframes）、转换（Transforms）以及 :hover 和 :focus 等伪类。

12. 加载动画 (Loading Spinner)

一个纯 CSS 实现的加载动画。尝试几种不同的变体：旋转的圆环、三个弹跳的小点、脉动的圆圈、循环填充的进度条。每个变体大约只需要 15 行 CSS 代码，能让你学会 @keyframes、animation 和 transform。

13. 带有悬停特效的图片画廊

一个照片网格，当鼠标悬停在照片上时，会通过平滑的过渡效果显示文字说明。尝试不同的效果：滑动遮罩层、图片放大、滤镜淡出。对大多数人来说，这个项目能让你真正理解 transition 的妙处。你还将学会如何使用 position: absolute 来进行元素分层。

14. 动态导航栏

一个左侧为 Logo、右侧为菜单项的导航栏。当鼠标悬停在菜单项上时，会通过滑动动画出现下划线，且当前活动页面的下划线保持常亮。在移动端，菜单会折叠成一个汉堡按钮，点击可打开下拉菜单。这是一个你会受用终身的设计模式：交互元素的动画状态，以及跨屏幕尺寸的响应式行为。

15. CSS 卡片翻转

一个在鼠标悬停时会翻转的卡片，翻转后会显示背面的内容（一句名言、一个定义或一些额外细节）。使用 transform: rotateY 和 backface-visibility，这两个属性虽然不常用，但第一次成功运行的时候会让你感觉像在变魔法。项目虽小，但能极大地提升你的信心。

16. 纯 CSS 图片轮播图

一个带有“上一张/下一张”控制按钮的水平滚动图片轮播图，完全用 CSS 构建，不使用任何 JavaScript。这个技巧利用了隐藏在屏幕外的单选按钮（Radio Buttons）和 :checked 选择器来切换显示的图片。这是一个非常聪明的模式，它能让你明白在动用 JavaScript 之前，单靠 CSS 就能实现多少功能。即使你平时习惯用 JavaScript 来写轮播图，这个项目也值得尝试一次。

高级 HTML 和 CSS 项目

最后这几个项目适合那些已经对基础知识驾轻就熟、想要迎接真正挑战的人。虽然依然是纯 HTML 和 CSS（不需要 JavaScript），但它们会在布局、精准度和耐心方面对你提出极高的要求。

17. 克隆知名网站首页

挑选一个真实的网站（Netflix 首页、Spotify 落地页，或 Apple 某个具体设备的展示页），并尽可能精确地用 HTML 和 CSS 重建其可见部分。不需要实现任何实际功能，只需完美还原其布局、排版、间距和配色。

你会花上几个小时琢磨他们是如何实现那种精准内边距（Padding）的，然后明白为什么网格要这样测量，接着你会开始注意到你访问的每个网站的布局设计。前端开发者们多年来一直在谈论这种练习的价值。

18. CSS 艺术画

仅使用 div 元素和 CSS 来画画。许多人通过这种方式创作出了令人惊叹的精致插画：卡通人物、风景、动物甚至肖像。你可以从简单的东西开始，比如一杯咖啡、一个笑脸或一个基础机器人。

在你亲自动手之前，这听起来可能有些滑稽。但一旦开始，它就会变成一堂关于 position、border-radius、box-shadow、渐变（Gradients）和 transform 的生动课程。仅仅是通过尝试在矩形里画一个圆，你对 CSS 的理解就能达到大多数初学者难以企及的高度。

Coddy 能为你提供什么帮助

Coddy 的 HTML 课程 和 CSS 课程 专为填补“我想学这个”与“我能做项目”之间的鸿沟而设计。每节课大约只需 5 分钟，你可以在浏览器中编写真实的代码。当你卡在诸如“为什么 margin: auto 无法让元素垂直居中”之类的问题时，课程内的 AI 助手 Bugsy 会随时为你提供解答。

整个学习体系都围绕着日常练习展开。这里花五分钟，那里花五分钟，这种就像每天早上打开语言学习 App 一样的模式，现在被应用到了编程学习中。如果你曾经在自学课程进度达到 30% 左右时放弃，那么这种微型学习模式可能正是你所欠缺的。

HTML 和 CSS 的所有课程都属于免费级别，无需任何配置。这常常让人感到惊喜。你绝对不会在学 Flexbox 学到一半时遇到付费墙！

几个大有裨益的好习惯

在你挑选项目之前，有三个小习惯能带来意想不到的巨大改变：

善用浏览器开发者工具。 在任何元素上右键点击，选择“检查”，然后查看样式面板。你可以在浏览器中实时编辑 CSS 以查看效果。这是你用过的最棒的调试工具，而且每个浏览器都免费自带。

采用移动端优先（Mobile-First）的开发方式。 先针对小屏幕编写 CSS，然后添加媒体查询（Media Queries）使其在大屏幕上也能完美显示。反过来做会困难得多。这是大多数现代前端代码采用的模式，现在养成这个习惯意味着以后可以少走弯路。

先做出一个“能用但丑”的版本。 先用占位内容和粗糙的样式让页面跑起来，后续再进行精细化调整。许多初学者常犯的错误是花三个小时去雕琢一个完美的按钮，最后却发现整个页面布局根本行不通，结果不得不全部重来。

下一步该做什么

如果你完成了一个项目，并且很清楚下一个该做什么，这是一个好兆头。说明你已经准备好了！

从这个列表中挑选下一个项目并开始吧。不要等到你觉得“准备得足够充分了”才动手，因为那种感觉永远不会到来。你只会在某一天突然发现，自己已经做了六个项目，而第七个看起来也完全不在话下。

如果你不知道下一步该选什么，那就默认选择那个让你感到有些畏惧的项目。技能的飞跃发生在舒适区的边缘，而不是舒适区的中心。

如果你在基础知识上遇到了瓶颈（选择器不起作用、布局塌陷、Flexbox 毫无反应），不妨先放下项目，花点时间通过一些针对性的课程来查漏补缺。

Coddy 的 HTML 和 CSS 路线正是为此设计的：针对你卡壳的概念进行简短、有针对性的练习，然后重新投入到你的项目中。