easybank landing page

前端导师 - EasyBank着陆页

欢迎！

感谢您检查此前端编码挑战。

前端导师挑战通过构建现实的项目来帮助您提高编码技巧。

为了应对这一挑战，您需要对HTML，CSS和JavaScript的基本了解。

挑战

您的挑战是构建此着陆页，并使它尽可能接近设计。

您可以使用您喜欢的任何工具来帮助您完成挑战。因此，如果您有一些想练习的东西，请随时尝试一下。

您的用户应该能够：

• 根据设备的屏幕尺寸查看网站的最佳布局
• 有关页面上的所有交互元素，请参见悬停状态

想要对挑战提供一些支持？加入我们的社区，并在#HELP频道中提出问题。

在哪里可以找到一切

您的任务是为/design文件夹内的设计构建项目。您会发现设计的手机和桌面版本。

设计采用JPG静态格式。使用JPG将意味着您需要使用最佳判断，例如font-size ， padding和margin 。

如果您希望设计文件（我们提供素描和无花果版本）更详细地检查设计，则可以订阅为Pro成员。

您将在/images文件夹中找到所有必需的资产。资产已经进行了优化。

还有一个style-guide.md文件，其中包含您需要的信息，例如调色板和字体。

构建您的项目

随意使用您感到舒适的任何工作流程。以下是一个建议的过程，但不觉得您需要遵循以下步骤：

1. 将您的项目初始化为GitHub上的公共存储库。如果您需要帮助，则创建回购将使与社区共享您的代码变得更加容易。如果您不确定该怎么做，请对此尝试GIT资源进行阅读。
2. 配置您的存储库将您的代码发布到网址。如果您在挑战期间需要一些帮助，这也将很有用，因为您可以与回购URL共享项目的URL。有多种方法可以做到这一点，我们在下面提供一些建议。
3. 浏览设计，以开始计划如何解决该项目。此步骤对于帮助您提前思考CSS课程以创建可重复使用的样式至关重要。
4. 在添加任何样式之前，请使用HTML构建内容。首先编写HTML可以帮助您将注意力集中在创建结构良好的内容上。
5. 写出项目的基本样式，包括通用内容样式，例如font-family和font-size 。
6. 开始在页面顶部添加样式并进行工作。只有一旦您完成了您的工作区域，才能进入下一节。

部署您的项目

如上所述，有很多方法可以免费托管您的项目。我们推荐的主人是：

• github页面
• 动词
• Netlify

您可以使用这些解决方案之一或我们其他任何受信任的提供商托管您的网站。阅读有关我们推荐和值得信赖的主人的更多信息。

创建一个自定义README.md

我们强烈建议使用自定义覆盖此README.md 。我们在此入门代码中的README-template.md文件中提供了一个模板。

该模板提供了添加的指南。自定义README将帮助您解释您的项目并反思您的学习。请随时随意编辑我们的模板。

将信息添加到模板中后，删除此文件，然后将README-template.md文件重命名为README.md 。这将使它显示为您的存储库的读数文件。

提交解决方案

在平台上提交解决方案，以供社区其他成员参观。请遵循我们的“完整指南提交解决方案”，以获取有关如何执行此操作的提示。

请记住，如果您正在寻找解决方案的反馈，请在提交问题时一定要提出问题。您的问题越具体和详细，您就会获得社区有价值的反馈的机会越高。

分享您的解决方案

有多个地方可以共享您的解决方案：

1. 在社区的＃完成项目频道中共享您的解决方案页面。
2. 推文@frontendmentor和提及@frontendmentor ，包括推文中的回购和现场网址。我们很想看看您的建造内容并帮助分享它。
3. 在LinkedIn等其他社交渠道上分享您的解决方案。
4. 博客有关您建立项目的经验。撰写有关您的工作流程，技术选择和通过代码进行交谈的方法是增强您所学到的知识的绝妙方式。很棒的写作平台是dev.to，hashnode和codenewbie。

我们提供模板以帮助您在平台上提交解决方案后共享解决方案。在寻找反馈时，请进行编辑，并包括特定的问题。

您的问题越具体，社区的另一个成员就会越有可能为您提供反馈。

得到了我们的反馈？

我们喜欢收到反馈！我们一直在寻求改善我们的挑战和平台。因此，如果您想提及任何内容，请通过电子邮件发送给hi [dot] io。

这个挑战是完全免费的。请与任何会发现对练习有用的人分享。

有有趣的建筑！