初学者练习 HTML 和 CSS 技能的 10 个最佳项目
学习编码对每个人来说总是令人兴奋和有趣，当谈到进入编程世界时，大多数人从最简单的HTML和CSS开始。每个初学者的前端编码之旅都是从这两个基本构建块开始的，在设计漂亮的应用程序时，您需要发挥创造力。
最初，初学者喜欢制作按钮、添加链接、添加图像、使用布局以及网页设计中的许多很酷的东西，但是当涉及到仅使用 HTML 和 CSS 制作项目时，他们会卡住并混淆他们应该做什么练习所有这些东西。毕竟他们的知识仅限于 HTML 和 CSS。无论如何，在学习完所有内容之后，您会意识到制作项目对于练习 HTML 和 CSS 技能很重要。您需要检查 HTML 和 CSS 如何协同工作来设计一个漂亮的前端应用程序。所以问题是你可以构建哪些适合初学者的项目来练习你所学的一切……让我们讨论一下。
1. 致敬页面
作为初学者，您可以制作的最简单的网站是您一生中敬佩的人的致敬页面。它只需要 HTML 和 CSS 的基本知识。制作一个关于该人添加他/她的图像的网页。在网页顶部，添加人员的图像和姓名，并在下方添加其余详细信息的布局。您可以使用带有 CSS 的段落、列表、链接、图像来给它一个下降的外观。在您的网页上添加合适的背景颜色和字体样式。您可以使用 HTML 制作大部分部分，但使用一些 CSS 使其看起来更好。从下面给出的链接中获取帮助。
- 我的致敬页面
- 向史蒂夫乔布斯致敬页面
- 向阿尔伯特爱因斯坦致敬页面
2. 包含表单的网页
表单始终是任何项目的重要组成部分，您将在大多数应用程序中使用大量表单，所以为什么不早点练习并测试您的知识。一旦您熟悉了 HTML 中的输入字段或基本标签以创建表单，就可以使用所有这些标签创建项目。如何在单个表单中使用文本字段、复选框、单选按钮、日期和其他重要元素。您将学习如何在创建表单时为网页提供适当的结构。了解 HTML/HTML5 就足够了，但您可以使用一些 CSS 来使项目看起来更好。从下面给出的链接中获取帮助。
- 调查表格
- 良好的共鸣形式
- 调查表格
3.视差网站
视差网站在背景中包含固定图像，您可以将其保留在适当的位置，并且您可以向下滚动页面以查看图像的不同部分。借助 HTML 和 CSS 的基本知识，您可以为网站添加视差效果。在网页设计中使用视差效果非常流行，它给网页带来了美丽的外观和感觉。试一试，将整个页面分成三到四个不同的部分。设置 3-4 个背景图片，对齐不同部分的文本，设置边距和填充，添加 background-position 和其他 CSS 元素和属性以创建视差效果。您可以从Parallax 网站获得帮助。
4.登陆页面
登录页面是另一个可以使用 HTML 和 CSS 制作的好项目，但它需要对这两个构建块有扎实的了解。在制作登陆页面时，您将使用大量的创造力。您将练习如何添加页脚和页眉、创建列、对齐项目、划分部分和很多事情。您必须小心使用 CSS，记住不同的元素不会相互重叠。您还将处理颜色组合、填充、边距、部分、段落和框之间的空间。对于不同的部分或背景，颜色组合应该相互配合。您可以从下面给出的链接中获得帮助。
- 全屏登陆
- 登陆页面
5. 餐厅网站
展示您对 HTML 和 CSS 的扎实知识，为餐厅创建漂亮的网页。为餐厅制作布局将比之前的项目示例复杂一些。您将使用 CSS 布局网格对齐不同的食物和饮料。您将添加价格、图像，并且您需要使用颜色、字体样式和图像的正确组合来赋予它美丽的外观和感觉。您可以为不同的食物添加图片库，还可以添加滑动图像以获得更好的外观。添加链接以重定向到内部页面。使用媒体查询和网格使其响应设置视口。您可以从餐厅网站获得帮助。
6. 活动或会议网页
您可以制作一个举办活动或会议的静态页面。有兴趣参加会议的人会为他们创建一个注册按钮。在标题部分的顶部提及演讲者、地点和时间表的不同链接。描述会议的目的或可以从这次会议中受益的人群。在您的网页上添加演讲者的介绍和图片、场地细节和会议的主要目的。将页面分成几个部分，添加页眉和页脚来展示菜单。使用适当的背景颜色，可以很好地适应各个部分。选择与您的网页主题相匹配的下降字体样式和字体颜色。它需要深入的 HTML/HTML5 和 CSS 知识。您可以从Style Conference获得帮助。
7. 音乐商店页面
如果你是一个音乐爱好者，你可以为它制作一个网页。它需要 HTML5/CSS3 知识。添加合适的背景图片来描述目的或页面的全部内容。在标题部分添加不同的菜单。添加按钮、链接、图像和一些关于可用歌曲集合的描述。在底部提及购物、商店、职业或联系方式的链接。您还可以在网页上添加其他功能，例如试用选项、礼品卡或订阅。使其响应设置视口或使用媒体查询和网格。您可以从myTunes 获得帮助。
8.摄影网站
如果您对 HTML5 和 CSS3 有深入的了解，您可以制作一个单页响应式摄影网站。使用 flexbox 和媒体查询来提高响应能力。在顶部（登陆页面）添加带有图片（与摄影相关）的公司名称。下面展示了您添加多个图像的工作。在底部（页脚）提及摄影师的联系方式。添加一个按钮来查看您的工作。此按钮将直接将您带到图像部分。您需要注意按钮的边距、填充、颜色组合、字体大小、字体样式、图像大小和样式。您可以从Acme Photography获得帮助。
9. 个人作品集
借助 HTML5 和 CSS3 的知识，您还可以创建您的作品集。用你的名字和照片在你的作品集中展示你的工作样本和技能。您还可以在那里添加您的简历，并在 GitHub 帐户上托管您的完整作品集。在标题部分提及一些菜单，例如关于、联系方式、工作或服务。在顶部添加您的一张图片并在那里介绍自己。在其下方添加一些工作示例，最后（页脚）添加联系信息或社交媒体帐户。您可以从Personal Portfolio获得帮助。
10. 技术文档
如果您对 Javascript 有一点了解，那么您可以创建一个技术文档网页。它需要 HTML、CSS 和基本的 javascript 知识。将整个网页分成两个部分。左侧创建一个菜单，所有主题从上到下列出。您需要在右侧提及主题的文档或描述。这个想法是，一旦您单击左侧部分中的某个主题，它应该加载右侧的内容。对于点击，您可以使用 javascript 或 CSS 书签选项。你不需要让它太花哨，只要给它一个简单的和下降的外观，这对于技术文档来说看起来不错。您可以从技术文档中获得帮助。
有用的链接： 2019 年有效网页设计的 10 个技巧
HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照本 HTML 教程和 HTML 示例从头开始学习 HTML。
CSS 是网页的基础，通过样式化网站和 Web 应用程序用于网页开发。您可以按照本 CSS 教程和 CSS 示例从头开始学习 CSS。