理解任何过程的最好方式就是从头自己时间一遍。 今天，我们来实践 Email 设计，从头建立一个 HTML Email 模板。

在本教程中，我们将从零开始学习如何构建响应式垂直时间线。 首先，创建基本的标记结构，然后应用CSS伪元素魔法。 接着，使用JavaScript添加向下滚动页面时的过渡效果。

你学会了基本的id，class类选择器和descendant后代选择器，然后就觉得完事了吗？如果这样，你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3，并且只能在现代的浏览器中使用，但学会这些是大有好处的。

在本教程中，我们将使用CSS Grid来帮助我们创建一个“分散式不规则网格布局”，这种布局使用传统的CSS布局方法一直很难实现。

谷歌的AMP是可以帮助你优化网站的一个非常有用的即插即用的代码集。但是有时候你可能想单干。 在我们的新课程，不用AMP就能优化你的网站，你将学到为什么在某些情况下你可能会决定不使用AMP，以及如何使用其他技术一样优化好工作。

在前一篇文章中，我向你展示了如何从头开始创造一条响应式的垂直时间线。今天，我将介绍创建相关水平 时间线的过程。

AMP（Accelerated Mobile Pages）项目是谷歌为提升访问网页的速度而开发的一个即插即用的网站优化包。

在本教程中，我们将探讨CSS排斥 (Exclusions)。初一看，CSS排斥好像和CSS形状相似，因为它们都是将内容环绕于一个元素。但在技术上，它们的目的是不同的。

当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击了按钮之后需要确认自己没点错时，又或是带图片和字幕的复活节彩蛋，提示框是用来增强用户界面的绝佳手段。现在，让我们来做几个动画提示框，没有别的，只有HTML和CSS。

让内容水平居中没有什么特别的，我们从来都是这么做的。 但有没有想过让高度不固定的内容垂直居中呢？ 在我的视频课程《Web 设计人员的 6 个 Flexbox 项目》中，您将学习如何利用 Flexbox 轻松解决这一问题。

在前一个教程中，我们了解了如何生成CSS形状，从此我们就可以定义一个元素的真正形状了。 我们接触了一些基础知识；生成一个圆，并让几行文字环绕于它。 现在，我们可以探索更复杂的形状了，让我们的页面布局更加丰富，让呆板的盒子更少一些。

在本篇文章中，我们将广泛了解一下前端，学习前端是怎样融入设计师更广阔的前景。