【Udemy中英字幕】Design & Code Twitter Home Page with JavaScript, CSS & Figma

使用 JavaScript、CSS 和 Figma 设计和编写 Twitter 主页

使用 HTML、CSS、JavaScript、Lit JS 和 Figma 将 UI UX 设计转移到前端原生 Web 开发组件

讲师：Boroji Design Inc.

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

• 设计 Figma 组件并使用 JavaScript 开发它们
• 利用原生 Web 组件 API 开发可重复使用的自定义元素
• 使用 Lit JS 框架快速进行原生 Web 组件开发
• 封装您的 CSS 和 JavaScript 逻辑以开发明暗主题组件
• 使用 Figma Variants 和 Auto Layout 设计自定义组件
• 了解如何在 Figma 中为 Twitter UI 项目设置设计系统

探索相关主题

• JavaScript
• Web 开发
• 发展

要求

• 具备 HTML、CSS、JavaScript 的高级知识
• 对 Figma 有中级理解

描述

在本课程中，我们将学习如何充分利用原生 Web 组件技术。

• 使用 Figma 为 Twitter 设计漂亮的 Web 组件
• 使用 Lit JS 将所​​有这些精美的设计转移到前端代码
• 使用 JavaScript 和 Figma 为 Twitter 主页编写明暗用户界面

在我们深入前端编码之前，我们将首先从头开始设计 Figma 中的所有内容。

• 我们不仅会在 Figma 中设计组件，还会为我们的 Twitter UI 项目构建设计系统
• 我们将设计可重复使用的颜色、字体和阴影样式
• 最后，我们将 Figma 样式转换为 CSS 变量

我们将学习如何使用 Lit JS 开发原生可共享组件。

• 我们将学习如何使用 Lit JS 将 HTML 和 CSS 封装到 JavaScript 类中
• 我们将学习如何构建简单的面向未来的原生 Web 组件
• 我们仅使用纯 JavaScript 来创建可定制的组件并在每个组件内定义 CSS 样式。

前端开发的最佳实践之一是尽可能地重复使用代码。然而，将设计转化为 HTML 标记往往很复杂。

• 我们将使用 Lit JS 来简化我们的开发工作，因为它建立在原生 Web 组件 API 之上
• 由于 Lit JS 使用原生 Web 组件 API，我们的开发环境简单而强大
• 这意味着我们不必担心 Node 模块或 JavaScript 打包器将语法转换为代码

本课程适合哪些人：

• 想要将 Twitter Figma Project 添加到其作品集的设计师
• 想要将 Figma 组件转移到代码的开发人员
• 想要从头开始创建原生自定义组件的开发人员