|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/twitter-figma-javascript/
课程评论：没有评论
课程名称：使用 Lit JS、CSS 和 Figma 设计与编码 Twitter（2022） 课程概述：本课程将教您如何利用本地 Web 组件技术。我们将使用 Figma 设计 Twitter 的美丽 Web 组件，并将这些设计转化为前端代码，使用 Lit JS 编码 Twitter 主页的明亮和黑暗用户界面。在开始前端编码之前，我们将首先从零开始在 Figma 中设计所有内容。不仅会设计 Figma 组件，还会为我们的 Twitter 用户界面项目构建设计系统，设计可复用的颜色、排版和阴影样式。最后，我们将 Figma 样式转换为 CSS 变量。 课程将教授如何使用 Lit JS 开发可共享的本地组件。我们将学习如何使用 Lit JS 将 HTML 和 CSS 封装到 JavaScript 类中，构建简单的未来准备好的本地 Web 组件。我们将仅使用纯原生 JavaScript 创建可定制的组件，并在每个组件中作用域 CSS 样式。前端开发的一项最佳实践是尽可能重用代码，但将设计转化为 HTML 标记往往会很复杂。我们将使用 Lit JS 简化开发过程，因为它基于本地 Web 组件 API。这意味着我们的开发环境简单而强大，无需担心 Node 模块或 JavaScript 包装器来转换语法为代码。
In this course we will learn how to use the native web component technology to our advantage. Design beautiful web components for Twitter using FigmaTransfer all those beautiful designs to front-end code using Lit JSCode light & dark user interface for Twitter home page using JavaScript & FigmaBefore we dive right into front-end coding, we will first design everything in Figma from scratch. Not only will we design components in Figma, but also build a design system for our Twitter UI projectWe will design reusable color, typography, & shadow stylesAt the end, we transfer Figma styles to CSS variablesWe will learn how to use Lit JS to develop native shareable components.We will learn how to encapsulate our HTML and CSS into JavaScript classes using Lit JSWe will learn how to build simple future-ready native web componentsWe only use pure vanilla JavaScript to create customizable components and scope our CSS styles inside each of themOne of the best practices in front-end development is to reuse code as much as possible. However, transfering design to HTML markup tends to be complex. We will use Lit JS to make our development life easy because it is built on top of native web component APISince Lit JS uses native web component API, our development environment is simple yet powerfulThat means we do not have to worry about Node Modules or JavaScript bundlers to convert our syntax to code
