创建视觉吸引力和功能性卡组件可能是一项具有挑战性的任务，尤其是对于那些新的Web开发人员而言。但是，有了正确的工具和一些创造力，这绝对是可行的。最近，我必须使用HTML和SCSS设计和构建订单摘要卡。如果您在网络开发方面有新手甚至经验丰富，可以从我的经验中学习。
挑战是创建一个响应式设计，该设计在不同的屏幕尺寸上可以很好地工作，并确保遵循样式指南并匹配所提供的设计。为了实现这一目标，我决定专注于创建一个带有Flexbox的简单主网格和位置内部容器元素。
我在该项目工作时面临的主要挑战之一就是正确地布局。我想确保每个元素的间距和大小都匹配设计与像素，因此我花了很多时间尝试不同的布局和设计。最后，我定居在一个设计的设计上，该设计为图像上的图像和下面的订单详细信息的容器。这种设计非常普遍，有充分的理由。它使产品脱颖而出并使其成为卡的焦点，同时仍然使用户可以轻松查看有关其订单的重要细节。
我面临的另一个挑战是确保该卡响应迅速，并且在不同的屏幕尺寸上看起来不错。我必须确保布局足够灵活，以适应不同的设备，同时仍然看起来不错。因此，在设计中，我注意到卡的高度没有更换屏幕的变化，但宽度略有变化，背景模式也发生了变化。因此，我只需要实施设计而不会偏离太多。尽管我做出了一些风格的选择来改进设计。
我真正喜欢这个项目的一件事是有机会与SCSS，here's a link合作，让您开始使用SCSS。它是CSS预处理器，可让您使用变量，嵌套规则和其他高级功能，使编写和维护CSS更容易。让我解释。 SCSS或Sassy CSS扩展了传统CSS的功能。它允许开发人员通过添加变量，混音和嵌套规则等功能来以更有条理和可维护的方式编写代码。
在订单摘要卡项目的上下文中，SCSS特别有用，因为它使我可以轻松地跟踪整个项目中使用的各种样式和尺寸。使用变量意味着我可以将诸如颜色和字体大小之类的值存储在一个地方，然后在整个项目的多个位置中引用它们。这使对设计进行更改变得更加容易，因为我只需要在一个地方进行更新，而不必在整个CSS文件中进行搜索。
Mixins，尽管我没有将它们用于这个项目，但也是救生员。它们使您可以在整个项目中重复使用多个位置的样式，从而使您的代码保持干燥更加容易（不要重复自己）。这对于要在项目的不同部分重复使用的复杂样式特别有用，因为它消除了在多个位置复制和粘贴相同代码的需求。要了解有关变量和Mixins here's a video的更多信息，这些变量解释了这些概念。
嵌套规则是SCSS的另一个重要功能。它们允许您为其他元素中包含的HTML元素编写样式，而不必编写长时间复杂的选择器。例如，您可以为所有
编写样式特定
中的元素，样式仅适用于那些特定的元素。这使得编写和维护CSS变得容易得多，因为您不必担心矛盾的风格。
我在半天内完成了这一挑战，因为它很简单，并且我在CSS方面的经验使您可以更轻松地看到大多数元素应如何样式的样式。尽管这是一项简单的任务，但它使我反思了我在设计组件时想提醒自己的一些基本要点：
- 第一件事，保持简单：卡组件应该简单易懂。避免使用过多的颜色，字体或图像。如果您因选择而陷入困境，请坚持两种字体和单色调色板。
- 有效地使用空格：使用whitespace将卡中的不同元素分开，并创建一个干净且吸引人的设计。
- 有效地使用字体：选择正确的字体是制造或断开的，因此请选择易于阅读并适合卡的整体设计的字体。
- 使其响应：确保卡组件响应迅速，并且在不同的屏幕尺寸和设备上看起来不错。
- 测试，测试，测试：在不同设备和屏幕尺寸上测试卡组件，以确保其看起来不错并且效果很好。 Chrome Dev工具为您提供有用的工具，可以在浏览器中进行此操作。
总的来说，前端导师挑战赛对我来说是一次很棒的学习经历。我必须锻炼CSS技能，双关语的意图，现在我对创建在不同设备上看起来很棒的响应设计的能力更有信心。如果您是Sass的新手，here's a youtube video可以为您提供训练轮，以使您启动并运行。
总而言之，构建订单摘要卡是将您的前端技能提升到新水平的好方法。使用HTML，SCSS和一些创造力，您可以创建一个可以在各种项目中使用的视觉吸引力和功能性卡组件。通过使用SCSS，您可以编写有组织的，可维护和可重复使用的代码，以节省您的时间，并使您更轻松地更改设计。本文的关键要点是，SCSS是造型网页的强大工具，通过构建订单摘要卡，您可以开始了解它如何帮助您提高前端技能并成为更自信，更有效的开发人员。无论您是初学者还是经验丰富的开发人员，我希望本文启发您为SCSS尝试并开始构建自己的惊人订单摘要卡。
感谢您的阅读。希望您发现这篇文章很有帮助。如果您有任何疑问或反馈，请在下面发表评论，或在Twitter上与我联系。我很想听听您的来信，并回答您可能遇到的任何问题。