对每个人来说, 学习编码总是令人兴奋和乐趣, 而当涉及到编程世界时, 大多数人都从最简单的 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 文档书籍教程, 需要的话都可以自行来获取下载.
来源: http://www.jianshu.com/p/419c92923a04