在学习编程时，人们可能会遇到两个不同的阶段
-
学习基础知识：您开始探索计算机程序的解剖结构，学习如何用逻辑单元思考简单的问题，并开始将这些单元形式化为代码指令。在这个阶段，您将学习抽象主题和简单的练习。如果做得正确并给予适当的时间，任何人都能够使用所选语言牢牢理解和编写简单的逻辑程序。
-
第二阶段，大多数人觉得有点令人畏惧，包括学习开发生态系统：获得简单的编程知识后，自然的下一步是选择一个编程子领域（Web 开发、移动应用程序开发、嵌入式系统和类似的领域） ）并开始了解如何使用该特定平台解决问题。这里的困难在于，它不再是涵盖一组基础知识、练习每个概念并重复的问题。通常不可能涵盖所有工具、所有技术并遵循所有原则。正确的方法是进行大量的实验和研究。您很可能只需要掌握少量技能，并使用多种工具即可开始执行简单的任务。一旦您适应了这个级别，您就可以尝试扩展到一组新的工具并稳步发展。遵循这种方法，我们将尝试通过探索用于构建简单登陆页面的技术和工具，在 Web 开发领域打下坚实的基础。
在这篇博文中，我们将简要探讨前端 Web 开发前景，重点是登陆页面开发。我们将浏览一系列资源，建议您查看这些资源以了解您可能遇到的开发的不同部分。读完本文后，您将对如何构建登陆页面有更清晰的了解。请观看此配套视频 以获取实际示例。
登陆页面开发景观
登陆页面是数字营销专家最初使用的术语，指用于营销和广告活动目的的独立网页。这个概念相当简单：对公司提供的产品或服务感兴趣的访问者点击该产品的链接，然后“登陆”到一个网页，该网页具有丰富的描述，结合了产品的文本、图像等，或者服务。该页面包含一个购买按钮，称为“CTA”（号召性用语），以便将访问者转换为付费客户。正如您所料，创造良好的用户体验对于获得良好的转化率至关重要。
在本文中，我们将了解许多方法和工具，使我们能够构建发挥其作用的登陆页面。值得一提的是，在构建与 SEO（搜索引擎优化）相关的登陆页面时，还有其他考虑因素。 SEO 将在未来的研讨会 中讨论。
设计灵感
无论您在构建登陆页面方面经验丰富还是刚刚开始，您都会发现通常很难准确地确定您希望网站的外观。在与客户合作时，经常出现的情况是，他们并不确切地知道他们想要什么样的网页设计。通常，设计模型和原型会由专门从事此类工作的网页设计师交给开发人员。拥有可靠的网页设计来源会很有帮助。这些资源将使您能够跟上最新的设计趋势，激发您的创造力，并且……帮助您入门。您可以用来为下一个项目获取设计灵感的两个最佳资源是 Dribbble 和 Behance。
运球
Dribbble 可能是网页设计领域最受欢迎的资源。这是一个设计师社区，他们分享自己的作品，以提高技能、互相帮助并获得建设性反馈。它包含来自世界各地的创意人士在几乎任何主题或领域制作的各种设计以及社区反馈，使其成为获取灵感的理想场所。
行为
Behance 是另一个可以帮助您寻找灵感的流行设计社区。该网站提供高级搜索功能，使您可以使用关键字、字段和调色板轻松访问您感兴趣的特定作品。还需要注意的是，Behance 是 Adobe 的一部分，并且与 Adobe 创意云完美集成。
Dribbble 和 Behance 都是网页设计灵感的绝佳平台，两者都不会出错。我们鼓励您开始探索设计并提出自己的设计！
设计原型
现在您已经从才华横溢的设计师的作品中获得了灵感，现在是时候开始对着陆页的设计进行原型设计了。原型设计是构建登陆页面的重要阶段。它可以定义为将想法实施到可见结构中的实验过程，以便您可以与团队或客户一起完善和验证它们。在原型设计阶段结束时，您将拥有一个可以在您的登陆页面上实现的设计。
有大量的软件解决方案可用于构建设计原型。事实上，工具太多，评估、比较和选择一种工具很快就会变得具有挑战性。我们将使用 Figma，因为它是 ux/ui 设计师 常用的。如果您想学习如何使用 Figma 进行原型设计，您可以在 YouTube 上查看我们的速成课程 此处。
菲格玛
Figma 是一款一体化设计工具，让用户体验设计师和开发人员可以轻松地在基于浏览器的云托管平台上构建设计原型并进行协作。 Figma 强调简单性和易用性。
Figma 的界面允许您通过控制页面上文本、网格和其他组件的外观来创建元素并设置它们的样式。它提供了广泛的补充插件，例如用于展示用户流程的 Autoflow、用于动画的 Figmotion 等等。
图标和字体
版式和样式图标是用于提升任何网页外观的一些最简单的功能。您希望在目标网页上使用正确的字体和图标来匹配您想要传达的总体想法。幸运的是，使用 Font Awesome 或 Google Fonts 可以轻松查找并应用大量字体和图标。
字体真棒
Font Awesome 是一个基于 CSS 和 Less 的字体和图标工具包。截至 2020 年，38% 的使用第三方字体脚本的网站使用了 Font Awesome，仅次于 Google Fonts（维基百科）。
Font Awesome 受到许多前端库的支持，例如它最初是为 Bootstrap 而制作的。 Font Awesome 使网页中字体和图标的集成就像包含 CDN 链接一样简单。这种易用性以及大量的字体和图标选择使其成为该领域最受欢迎的解决方案。
谷歌字体
Google Fonts 是 Google 提供的一项免费开源网络服务，用于在网站中嵌入字体。它提供无缝集成以及高水平的灵活性和定制化。
部署您的登陆页面
现在您已经构建了目标网页，是时候与大家分享了！最后一步是使用托管提供商解决方案部署您的登陆页面。 Github Pages 和 Vercel 是我们的首选。它们是最受欢迎且最易于使用的。 Vercel 是我们的研讨会 中介绍的工具，但 Github Pages 的工作方式类似。
Github 页面
如果您目前正在学习编码，您很可能听说过 Github。 Github 是一个作为开源社区一部分共享和托管代码的平台。它提供了一项名为 GitHub Pages 的功能，这是可供个人和组织使用的公共网页的托管服务。所有页面都免费托管在 GitHub 的 github.io 域上，或者托管在自定义域名上（如果您碰巧拥有一个域名）。如果您已经在使用 Github 进行版本控制，则 GitHub Pages 是一种简单而高效的免费托管项目的方法。
韦尔塞尔
Vercel 是 Github Pages 的替代方案，提供广泛的功能和配置。它有一个免费版本。我们向任何拥有复杂项目的人推荐 Vercel，因为它可以带来出色的开发人员体验，并提供强大的支持。 Code Labs Academy 将其用作其开发过程的一部分。
＃＃ 结论
本文介绍了开发登陆页面的有用工具。再次！最好的学习方式就是实践，因此我们强烈鼓励您在自己的个人项目中尝试使用这些工具！开发人员工作的很大一部分是研究他们遇到的问题的现有解决方案，并避免重新发明轮子。编程社区的伟大之处在于它的协作性质。我们鼓励您利用他人分享的工作成果并贡献自己的成果！
