In this course we will learn how to use the native web component technology to our advantage.
- Design beautiful web components for Twitter using Figma
- Transfer all those beautiful designs to front-end code using Lit JS
Before 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 project
- We will design reusable color, typography, & shadow styles
- At the end, we transfer Figma styles to CSS variables
We will learn how to use Lit JS to develop native shareable components.
- We will learn how to build simple future-ready native web components
One 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 API
- Since Lit JS uses native web component API, our development environment is simple yet powerful
Who this course is for:
- Designers who want to add Twitter Figma Project to their portfolio
- Developers who want to transfer Figma components to code
- Developers who want to create native custom components from scratch
- Intermediate understanding of Figma
Last Updated 4/2022