在
网站开发过程中前端开发人员的一项关键技能是能够将设计转化为代码。这些设计通常以静态模型的形式呈现，将浏览网站的“理想”体验可视化。在现实世界中，内容通常与设计中呈现的整洁、完美契合的内容大不相同。除此之外，在现代网络上，用户可以选择越来越多的方式来访问我们构建的网站。
在本文中，我们将介绍对文本和媒体组件进行看似简单的设计并决定如何最好地将其转换为代码的过程，同时牢记用户和内容作者的需求。我们不会深入研究如何对其进行编码 - 而是将决定我们的开发决策的因素。我们将在每一步考虑我们需要提出的问题（包括我们自己和其他利益相关者）。
我们不能再只针对“最佳”内容或浏览条件进行设计和开发。相反，我们必须拥抱网络固有的灵活性和不可预测性，并构建弹性组件。静态模型无法满足所有场景，因此许多设计决策在构建时由开发人员决定。不管你喜不喜欢，如果你是一名 UI 开发人员，你就是一名设计师——即使你不认为自己是一名设计师！
我们从一个简单的文本和媒体组件设计开始——这在产品登陆页面上很常见。它由左侧的图像或视频和右侧的列组成，其中包含一个标题、一段文本和一个号召性用语链接。此设计适用于（虚构的）初创公司，可帮助想要学习新技能的人找到导师。
