Disclosure: when you buy through links on our site, we may earn an affiliate commission.

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
(16 reviews)
98 students
Created by


CourseMarks Score®







Platform: Udemy
Video: 11h 38m
Language: English
Next start: On Demand

Top JavaScript courses:

Detailed Analysis

CourseMarks Score®

10.0 / 10

CourseMarks Score® helps students to find the best classes. We aggregate 18 factors, including freshness, student feedback and content diversity.

Freshness Score

10.0 / 10
This course was last updated on 4/2022.

Course content can become outdated quite quickly. After analysing 71,530 courses, we found that the highest rated courses are updated every year. If a course has not been updated for more than 2 years, you should carefully evaluate the course before enrolling.

Student Feedback

10.0 / 10
We analyzed factors such as the rating (5.0/5) and the ratio between the number of reviews and the number of students, which is a great signal of student commitment.

New courses are hard to evaluate because there are no or just a few student ratings, but Student Feedback Score helps you find great courses even with fewer reviews.

Content Score

9.6 / 10
Video Score: 9.4 / 10
The course includes 11h 38m video content. Courses with more videos usually have a higher average rating. We have found that the sweet spot is 16 hours of video, which is long enough to teach a topic comprehensively, but not overwhelming. Courses over 16 hours of video gets the maximum score.
Detail Score: 9.4 / 10

The top online course contains a detailed description of the course, what you will learn and also a detailed description about the instructor.

Extra Content Score: 9.9 / 10

Tests, exercises, articles and other resources help students to better understand and deepen their understanding of the topic.

This course contains:

2 articles.
52 resources.
0 exercise.
0 test.

Table of contents


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

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


• Advance knowledge of HTML, CSS, JavaScript
• Intermediate understanding of Figma

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

How much does the Design & Code Twitter Home Page with JavaScript, CSS & Figma course cost? Is it worth it?

The course costs $14.99. And currently there is a 25% discount on the original price of the course, which was $19.99. So you save $5 if you enroll the course now.

Does the Design & Code Twitter Home Page with JavaScript, CSS & Figma course have a money back guarantee or refund policy?

YES, Design & Code Twitter Home Page with JavaScript, CSS & Figma has a 30-day money back guarantee. The 30-day refund policy is designed to allow students to study without risk.

Are there any SCHOLARSHIPS for this course?

Currently we could not find a scholarship for the Design & Code Twitter Home Page with JavaScript, CSS & Figma course, but there is a $5 discount from the original price ($19.99). So the current price is just $14.99.

Who is the instructor? Is Hossein Boroji a SCAM or a TRUSTED instructor?

Hossein Boroji has created 3 courses that got 596 reviews which are generally positive. Hossein Boroji has taught 6,026 students and received a 4.7 average review out of 596 reviews. Depending on the information available, Hossein Boroji is a TRUSTED instructor.
UX Developer
I am a UX UI Design Lead working at TD Bank. I have a Bachelor’s in Graphic Design, and 2 Graduate Certificates in both Interactive Media Design, and User Experience Design. I also have a Diploma in Mathematics which taught me how to Design with precision.

Bad UX is everywhere, and I am here to fix them with my multidisciplinary design background. In my design tool kit, aesthetics plays a big role because I love to make boring information visually pretty. I love solving problem by creating UX flows and UI prototypes.

Enhancing user experience is my main area of expertise. Everything has to be pixel perfect otherwise I go crazy.


CourseMarks Score®







Platform: Udemy
Video: 11h 38m
Language: English
Next start: On Demand

Students are also interested in

Review widget (for course creators):

Design & Code Twitter Home Page with JavaScript, CSS & Figma rating
Code for the widget (just copy and paste it to your site):
<a href="https://coursemarks.com/course/design-code-twitter-home-page-with-javascript-css-figma/" target="_blank" title="Design & Code Twitter Home Page with JavaScript, CSS & Figma on Coursemarks.com"><img border="0" src="https://coursemarks.com/widget/100.svg" width="200px" alt="Design & Code Twitter Home Page with JavaScript, CSS & Figma rating"/></a>