Skip to content
Write a review
UdemyJavaScriptPaid courseExpert levelCertificate

Design & Code Twitter with Lit JS, CSS & Figma (2022) (Udemy.com)

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

4.7
29 reviews

Created by: Hossein Boroji

Last updated April 2025

icon
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

How it compares

Against the other 239 rated Udemy courses in JavaScript on CourseDuck:

  • Rating4.7 out of 5higher than 84% of them
  • Reviews29#236 of 240 by number of reviews
  • Length11.7 hourslonger than 76% of them
  • Last updatedApril 2025more recently than 78% of them

icon
Course 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
Read More Expert Expert Level product length iconTime: 11.7h

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Get the Udemy discount

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Hossein Boroji

Hossein is an instructor who founded Boroji Design Inc. He has experience working with large enterprises such as TD Bank of Canada, Statistics Canada, and Public Service Canada in his design career. He has 3 academic degrees in Graphic Design, Interactive Media Design, and User Experience Design.


What sets Hossein apart is his unique blend of design and coding expertise. With a deep understanding of how designers and developers think, he can effectively teach design and code to his students.

Read More

icon
More courses by Hossein Boroji

$94.99

$59.99

All courses by Hossein Boroji

icon
More JavaScript courses

Free

Free

Free

$24.99

Free

$79.99

All JavaScript courses

icon
Reviews

4.7

29 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

Write a review

By Pål Hellesnes on 11/3/2025

Ok, but lacking engagement

By Shayne Meyer on 9/29/2022

Excellent course starting with the design using Figma and then translating that into working code.

By Hassan on 8/6/2022

I love designing the dark and light components for Twitter in Figma. I also like how Lit JS is simple enough to create native HTML components

By Reyhaneh on 5/22/2022

Twitter UI course was really interesting because I used to combine Figma and JavaScript to create clean interface

By Alireza on 5/22/2022

I love Lit JS because it’s just looks like vanilla JavaScript. It’s cool to combine Figma styles with plain HTML CSS code.

By Zahra Noun on 5/22/2022

Dark and light mode theme is easy to create with native web components. I didn’t realize using plain JavaScript can create complex interface

By Aram lilaghan on 5/4/2022

I love this course; I think I am learning a tons of design tips and tricks as well as coding front-end.

By Gholam shiari on 5/4/2022

At first Figma was quite intimidating for me, but I learned how to use nested components to create a robust prototype.

By Hani Bagheri on 4/13/2022

This course was awesome ! I learnt a lot and all parts are very nicely explained. Everything was to the point and concisely explained. Definitely recommend this course :)

By Bagher on 4/10/2022

I like the teaching style, it goes straight to the point. Not only I manage to design components in Figma, but I managed to develop them using JavaScript. It is so satisfying to take your design and turn it into code

Showing all 10 reviews on CourseDuck

Read all 29 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 94 / 100

Design & Code Twitter with Lit JS, CSS & Figma (2022)
Visit course on Udemy Write a review
  • Video Duration: icon 11.7h
  • Price: See price on Udemy
  • Provider: icon Udemy
  • Updated: icon April 2025
  • Level: Expert Expert
  • Language: icon English
  • Certificate: icon Yes
30-day money-back guarantee on most paid courses

Udemy Coupon Price Tracker

Udemy price history

For any issues or feature requests please email CourseDuck's Co-Founder at mkuhlman12@gmail.com