15 个提升你技能的 HTML 和 CSS 项目

学习HTML和CSS后，最好的学习方法就是搭建一些网站。但你也需要掌握一些技巧，这些技巧可以通过跟随Brad Traversy和Wes Bos等顶尖老师学习编程来获得。

我们可以通过构建这 15 个项目来实现这一点。以下是列表。所有这些项目的 Github 链接可以在这里找到。

所有这些也都由 netlify 在此链接中托管。

兵团

一个为虚构网页设计公司打造的简洁、响应式、移动友好的HTML5网站。该网站基于Traversy Media的YouTube视频制作。

我的音乐

一个简洁易用的响应式 HTML5 流媒体服务网站。其布局和内容均效仿 iTunes 网站。网站使用了 HTML5、CSS3 和少量 jQuery 代码。该网站基于Traversy Media 的 YouTube 视频创建。

模糊着陆

一个响应式的移动友好型Langing Page，带有模糊效果。它使用网格系统、媒体查询和过渡效果。本网站使用Traversy Media的YouTube视频创建。

摄影网站

一个响应式单页摄影网站，采用移动优先的理念，仅使用HTML5和CSS3。该网站基于Traversy Media的YouTube视频制作。

全屏登陆

一个小型的简洁的Langing Page，仅使用HTML5和CSS3。我们稍微用了一点弹性框样式。本网站是根据Traversy Media的YouTube视频制作的。

Pluralsight 登录

Pluralsight 登录页面的克隆版本，使用 HTML5 和 CSS3 编写。我们少量使用了 Flexbox 样式。我们使用 Flexbox 进行样式设置，并使用媒体查询实现响应式设计。此网站基于Traversy Media 的 YouTube 视频创建。

视差网站

使用 HTML 和 CSS 实现的视差网站，滚动时图片不会移动。此网站基于Traversy Media 的 YouTube 视频制作。

视频背景网站

一个使用 HTML 和 CSS 制作的全屏视频背景的落地页。该网站使用Traversy Media 的 YouTube 视频制作。

CSS 网格响应式网站

一个使用 CSS 网格布局的“移动优先”单页网站布局。我们使用了一些现代技术，包括相对 em 单位、媒体查询，甚至还运用了一些弹性布局。此网站是根据 Traversy Media 的 YouTube 视频制作的。

视频形式

使用 Wes Bos 弹性盒子课程学习内容创建的单行表单。链接如下。

专辑布局

使用 CSS 网格创建的相册布局。本项目使用Wes Bos CSS 网格课程的单元创建。

砌体图片库

使用 CSS 网格创建的 Masonary 图片库。本项目使用Wes Bos CSS 网格课程中的单元创建。

风格化会议

一个使用纯 CSS 创建的会议网站。该项目基于Shay Howe 课程创建。

Codepen 克隆

使用 CSS 网格创建的 Codepen 克隆版本。该项目使用Wes Bos CSS 网格课程中的这个单元创建。

餐厅网站

使用 CSS 网格布局创建的响应式餐厅。本项目使用Wes Bos CSS 网格布局课程中的单元创建。