Design & Code Twitter Home Page with JavaScript, CSS & Figma

Transfer UI UX Design to Front-End Native Web Development Components with HTML, CSS, JavaScript, Lit JS, & Figma

Ratings: 4.76 / 5.00




Description

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

  • Code light & dark user interface for Twitter home page using JavaScript & Figma


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 encapsulate our HTML and CSS into JavaScript classes using Lit JS

  • We will learn how to build simple future-ready native web components

  • We only use pure vanilla JavaScript to create customizable components and scope our CSS styles inside each of them


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

  • That means we do not have to worry about Node Modules or JavaScript bundlers to convert our syntax to code

What You Will Learn!

  • Design Figma components & develop them using JavaScript
  • Utilize native web component API to develop reusable custom elements
  • Fast-track native web component development using Lit JS framework
  • Encapsulate your CSS & JavaScript logic to develop light & dark theme components
  • Design custom components using Figma Variants & Auto Layout
  • Learn how to set up a Design System in Figma for the Twitter UI Project

Who Should Attend!

  • 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