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

对每个人来说，学习编码总是令人兴奋和乐趣，而当涉及到编程世界时，大多数人都从最简单的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个背景图像，对齐不同部分的文本，设置边距和内边距，添加背景位置和其他CSS元素和属性以创建视差效果。您可以从Parallax网站获得帮助。4.登陆页面登陆页面是您可以使用HTML和CSS进行的另一个很好的项目，但是它需要对这两个构建块有扎实的知识。制作目标网页时，您将使用大量的创造力。您将练习如何添加页脚和页眉，创建列，对齐项目，划分各节以及许多其他事情。您将必须谨慎使用CSS，同时要记住不同的元素不会相互重叠。您还将注意颜色组合，填充，边距，节，段落和框之间的间距。对于不同的部分或背景，颜色组合应相互配合良好。您可以从下面给出的链接获取帮助。全屏登陆登陆页面5.餐厅网站展示您扎实的HTML和CSS知识，为餐厅创建漂亮的网页。与以前的项目示例相比，为餐厅进行布局会有些复杂。您将使用CSS布局网格对齐不同的食物和饮料。您将要添加价格，图像，并且还需要使用颜色，字体样式和图像的适当组合使其具有漂亮的外观。您可以为不同的食物添加图片库，也可以添加滑动图像以获得更好的外观。添加用于重定向到内部页面的链接。使用媒体查询和网格使其响应性地设置视口。您可以从“ 餐厅网站”获得帮助。6.活动或会议网页您可以制作一个静态页面来举行活动或会议。有兴趣参加会议的人为他们创建一个注册按钮。在标题部分的顶部提到发言人，地点和时间表的不同链接。描述会议的目的或可以从会议中受益的人的类别。在您的网页上添加演讲者的简介和图像，会场详细信息以及会议的主要目的。将页面分为几部分，添加显示菜单的页眉和页脚。使用适当的背景色，以使各个部分相互配合。选择与您的网页主题相匹配的体面的字体样式和字体颜色。它需要深入的HTML / HTML5和CSS知识。您可以从样式会议中获取帮助。7.音乐商店页面如果您是音乐爱好者，则可以为其制作网页。它需要HTML5 / CSS3知识。添加适当的背景图像，以描述目的或页面的全部内容。在标题部分中，添加不同的菜单。添加按钮，链接，图像以及有关可用歌曲收集的一些描述。在底部提到购物，商店，职业或联系方式的链接。您还可以在网页上添加其他功能，例如试用选项，礼品卡或订阅。使它响应式设置视口或使用媒体查询和网格。您可以从myTunes寻求帮助。8.摄影网站如果您对HTML5和CSS3有深入的了解，则可以建立一个一页响应式摄影网站。使用flexbox和媒体查询来提高响应速度。在顶部（着陆页）上添加带有图片（与摄影相关）的公司名称。在该下方，展示了您添加多个图像的工作。在底部（页脚）提及摄影师的详细联系信息。添加一个按钮以查看您的工作。此按钮将直接带您进入图像部分。您需要注意页边距，填充，颜色组合，字体大小，字体样式，图像大小和按钮样式。您可以从Acme Photography获得帮助。9.个人投资组合有了HTML5和CSS3的知识，您还可以创建自己的投资组合。用您的名字和图片展示您的工作样本和投资组合中的技能。您也可以在此处添加简历，并将完整的投资组合托管在GitHub帐户上。在标题部分中，提及一些菜单，例如关于，联系方式，工作或服务。在顶部添加一张图片，并在那里进行自我介绍。在此之下添加一些工作样本，最后在（页脚）添加联系信息或社交媒体帐户。您可以从“ 个人档案夹”中寻求帮助。10.技术文件如果您对Java语言有一点了解，那么可以创建一个技术文档网页。它需要HTML，CSS和基本javascript的知识。将整个网页分为两部分。左侧创建一个菜单，所有主题从上到下列出。右侧，您需要提及主题的文档或描述。这个想法是，一旦您单击左侧部分中的主题之一，就应该在右侧加载内容。对于单击，可以使用javascript或CSS书签选项。您不需要太花哨，只需给它一个简单而又体面的外观即可，这对于技术文档来说不错。您可以从技术文档中获取帮助。我目前是在职前端开发，如果你现在也想学习前端开发技术， 在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题， 你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者 裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题， 前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

本文章由javascript技术分享原创和收集