HOT
blank

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

Development

Rating4.8
Enroll Now

Design & Code Twitter Home Page with JavaScript, CSS & Figma, available at $74.99, has an average rating of 4.8, with 58 lectures, based on 28 reviews, and has 1237 subscribers.

You will learn about 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 This course is ideal for individuals who are Designers who want to add Twitter Figma Project to their portfolio or Developers who want to transfer Figma components to code or Developers who want to create native custom components from scratch It is particularly useful for Designers who want to add Twitter Figma Project to their portfolio or Developers who want to transfer Figma components to code or Developers who want to create native custom components from scratch.

Enroll now: Design & Code Twitter Home Page with JavaScript, CSS & Figma

Summary

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

Price: $74.99

Average Rating: 4.8

Number of Lectures: 58

Number of Published Lectures: 58

Number of Curriculum Items: 58

Number of Published Curriculum Objects: 58

Original Price: $19.99

Quality Status: approved

Status: Live

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

Target Audiences

  • 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

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

Course Curriculum

Chapter 1: Course Overview & Materials

Lecture 1: Design Section Overview

Lecture 2: Coding Section Overview

Lecture 3: Common Shortcuts Before We Start

Lecture 4: List of Plugins

Lecture 5: Download Course Material Bundled

Chapter 2: Twitter UI – Figma

Lecture 1: Sidebar Buttons – Figma

Lecture 2: Sidebar Navigation – Figma

Lecture 3: Sidebar Profile – Figma

Lecture 4: Sidebar Dropdown – Figma

Lecture 5: Home Header Component – Figma

Lecture 6: Tweet Component – Figma

Lecture 7: News Feed – Figma

Lecture 8: Explore Component – Figma

Lecture 9: Notification Component – Figma

Lecture 10: Message Component – Figma

Lecture 11: Bookmark Component – Figma

Lecture 12: List Component – Figma

Lecture 13: Profile Component – Figma

Chapter 3: Twitter Sidebar Component

Lecture 1: JavaScript Development Set Up

Lecture 2: VS Code Preference Set Up

Lecture 3: Sidebar Home in JavaScript

Lecture 4: Static CSS Host

Lecture 5: Fix Typography Styles

Lecture 6: Render Conditionally – JavaScript

Lecture 7: Shared CSS in JavaScript

Lecture 8: Sidebar Button Components – JavaScript

Lecture 9: Sidebar Logo – JavaScript

Lecture 10: Button Component – JavaScript

Lecture 11: Sidebar Username – JavaScript

Lecture 12: SVG Method Refactoring

Lecture 13: Nested Typography Component – JavaScript

Lecture 14: Sidebar Finalized Layout – CSS

Lecture 15: Sidebar Padding Fix – CSS

Lecture 16: Sidebar Dropdown – CSS

Lecture 17: Sidebar Profile – CSS

Lecture 18: Sidebar Event Listener – JavaScript

Lecture 19: Fixing Event Listener – JavaScript

Lecture 20: CSS and JavaScript Clean Up

Chapter 4: Twitter Newsfeed Component

Lecture 1: Organize JavaScript Modules

Lecture 2: Refactor JavaScript Logic

Lecture 3: Reuse Component – JavaScript

Lecture 4: Trending Info Component – JavaScript

Lecture 5: Newsfeed Layout – CSS

Lecture 6: Fixing Scrollbar Style – CSS

Lecture 7: Newsfeed Responsive – CSS

Lecture 8: Minor Fix Sidebar – CSS

Lecture 9: New Data Folder

Lecture 10: Dynamic Content – JavaScript

Chapter 5: Twitter Home Component

Lecture 1: Figma Variants – JavaScript

Lecture 2: Icon Button – JavaScript

Lecture 3: Home Component – HTML

Lecture 4: Tweet Icon Buttons – SVG

Lecture 5: Tweet Card Layout – CSS

Lecture 6: CSS Layout Clean Up

Lecture 7: Tweet Card Data

Lecture 8: Dynamic Tweet Card – JavaScript

Lecture 9: Final Thoughts

Chapter 6: Bonus Lecture

Lecture 1: Bonus

Instructors

Rating Distribution

  • 1 stars: 0 votes
  • 2 stars: 0 votes
  • 3 stars: 0 votes
  • 4 stars: 4 votes
  • 5 stars: 24 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Best Ethical AI Courses to Learn in March 2025

Best Software Testing Courses to Learn in March 2025

Best Quantum Computing Courses to Learn in March 2025