📜  初学者练习 HTML 和 CSS 技能的十大项目

📅  最后修改于: 2021-11-08 06:35:19             🧑  作者: Mango

学习编码对每个人来说总是令人兴奋和有趣,当谈到进入编程世界时,大多数人从最简单的HTMLCSS 开始。每个初学者的前端编码之旅都从这两个基本构建块开始,在设计漂亮的应用程序时,您需要具有创造性。

初学者实践 HTML 和 CSS 技能的前 10 名项目

最初,初学者喜欢制作按钮、添加链接、添加图像、使用布局以及网页设计中的许多很酷的东西,但是当涉及到仅使用 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 元素和属性来创建视差效果。您可以从视差网站获得帮助。

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 帐户上托管您的完整投资组合。在您的标题部分提及一些菜单,如关于、联系方式、工作或服务。在顶部添加您的一张图片并在那里介绍自己。在其下方添加一些工作示例,最后(页脚)添加联系信息或社交媒体帐户。您可以从个人档案袋中获得帮助。

10. 技术文件

如果您对 Javascript 有一点了解,那么您可以创建一个技术文档网页。它需要 HTML、CSS 和基本 javascript 的知识。将整个网页分成两部分。左侧创建一个菜单,其中包含从上到下列出的所有主题。在右侧,您需要提及主题的文档或描述。这个想法是一旦你点击左侧部分的主题之一,它应该加载右侧的内容。对于点击,您可以使用 javascript 或 CSS 书签选项。你不需要让它太花哨,只需给它一个简单而体面的外观,这对技术文档来说很好。您可以从技术文档中获取帮助。

有用的链接: 2019 年有效网页设计的 10 个技巧

HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。