Design & Code Twitter Home Page with JavaScript, CSS & Figma
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
-
Boroji Design Inc.
Where design & code meets
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 Video Editing Courses to Learn in March 2025
- Best Music Production Courses to Learn in March 2025
- Best Animation Courses to Learn in March 2025
- Best Digital Illustration Courses to Learn in March 2025
- Best Renewable Energy Courses to Learn in March 2025
- Best Sustainable Living Courses to Learn in March 2025
- Best Ethical AI Courses to Learn in March 2025
- Best Cybersecurity Fundamentals Courses to Learn in March 2025
- Best Smart Home Technology Courses to Learn in March 2025
- Best Holistic Health Courses to Learn in March 2025
- Best Nutrition And Diet Planning Courses to Learn in March 2025
- Best Yoga Instruction Courses to Learn in March 2025
- Best Stress Management Courses to Learn in March 2025
- Best Mindfulness Meditation Courses to Learn in March 2025
- Best Life Coaching Courses to Learn in March 2025
- Best Career Development Courses to Learn in March 2025
- Best Relationship Building Courses to Learn in March 2025
- Best Parenting Skills Courses to Learn in March 2025
- Best Home Improvement Courses to Learn in March 2025
- Best Gardening Courses to Learn in March 2025