5 个很棒的 HTML 和 CSS 项目（附 Codepen 预览）

编码是一种有趣且令人兴奋的练习，但您如何衡量学习过程中的进步？

这里有一些很酷的想法，你可以用它来测试你的技能。

1. 调查表

调查表单是新手入门非常流行的项目，也是测试你 HTML 表单验证技能的绝佳方式。此外，创建调查表单还能在一个表单中测试不同的表单元素（单选框、复选框、文本框等）。

您可以从这样的简单表格开始：

然后转到具有更多样式和响应能力的表单，例如此调查表：

2. 致敬页面
致敬页面是初学者可以创建的最简单的网页之一，因为它只需要 HTML 和 CSS 的基本技能

您可以尝试 CSS 中的不同概念，例如添加图片、链接、段落，然后使用 CSS 来美化页面。这是一个简单的响应式致敬页面的示例：

……这是迈克尔·施耐德 (Michael Schneider)创作的充满活力的致敬页面的一个例子：

3. 登陆页面

创建落地页的过程令人愉悦。你可以尽情发挥你的想象力。此外，你还可以测试一些 HTML 和 CSS 技能，例如页面内容定位、页脚、创建列和部分、调色板等等。

你可以从一些简单的东西开始，比如布拉德·特拉弗西的视频登陆页面

然后挑战你的技能来构建更复杂的页面，例如这个产品登陆页面：

4.技术文档

即使没有 JavaScript，仅使用 HTML 和 CSS 即可创建技术文档页面。您可以自由地进行创作。

要构建技术文档，您可以使用freeCodeCamp 提供的这个示例。

5. 个人作品集

你可能只想在积累了更多技能或学习了更多技术之后才想要创建作品集。好消息是，你无需等待未来的某个时间。现在就可以开始，只需使用 HTML 和 CSS 即可。

如果您有疑问，这里有一些其他人建立的令人惊叹的投资组合......

图片来源：Thomas Vaeth

结论

边学习边做项目绝对有助于掌握知识和技能，还能学习你可能忽略的其他内容。以下是我在学习 HTML 和 CSS 时做过的一些项目。希望它们能像帮助我一样帮助到你。

祝你编码愉快！🌱

附言：我没有提到的所有钢笔都是我的。

                                                      Babi💞