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

  • CategoryOther
  • TypeTutorials
  • LanguageEnglish
  • Total size6 GB
  • Uploaded Bytutsnode
  • Downloads53
  • Last checkedMay. 06th '22
  • Date uploadedMay. 04th '22
  • Seeders 15
  • Leechers10
Your ISP and Government can track your torrent activity! Hide your IP with a VPN!

Infohash : 2ECC4C467FF3C39423EDD6BEB71B62B6878CE80F


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

Who 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

Requirements

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

Last Updated 4/2022

Files:

Design & Code Twitter Home Page with JavaScript, CSS & Figma [TutsNode.com] - Design & Code Twitter Home Page with JavaScript, CSS & Figma 5. Twitter Home Component
  • 6.1 49-CSS Layout Clean Up.mp4 (268.8 MB)
  • 9. Final Thoughts.srt (6.8 KB)
  • 6. CSS Layout Clean Up.srt (15.1 KB)
  • 1. Figma Variants - JavaScript.mp4 (171.6 MB)
  • 7. Tweet Card Data.srt (1.7 KB)
  • 5. Tweet Card Layout - CSS.mp4 (154.3 MB)
  • 1. Figma Variants - JavaScript.srt (25.0 KB)
  • 5. Tweet Card Layout - CSS.srt (20.2 KB)
  • 8. Dynamic Tweet Card - JavaScript.srt (11.4 KB)
  • 2. Icon Button - JavaScript.srt (11.1 KB)
  • 3. Home Component - HTML.srt (10.9 KB)
  • 4. Tweet Icon Buttons - SVG.srt (10.0 KB)
  • 6. CSS Layout Clean Up.mp4 (99.6 MB)
  • 2. Icon Button - JavaScript.mp4 (92.4 MB)
  • 8. Dynamic Tweet Card - JavaScript.mp4 (88.1 MB)
  • 4. Tweet Icon Buttons - SVG.mp4 (83.3 MB)
  • 3. Home Component - HTML.mp4 (73.7 MB)
  • 9. Final Thoughts.mp4 (44.7 MB)
  • 7. Tweet Card Data.mp4 (12.2 MB)
  • 8.1 51- Dynamic Tweet Card - JavaScript.zip (4.4 MB)
  • 7.1 50-Tweet Card Data.zip (4.4 MB)
  • 4.1 47-Tweet Icon Buttons - SVG.zip (2.3 MB)
  • 5.1 48-Tweet Card Layout - CSS.zip (2.3 MB)
  • 2.1 45-Icon Button - JavaScript.zip (2.2 MB)
  • 3.1 46-Home Component - HTML.zip (2.2 MB)
  • 1.1 44-Figma Variants - JavaScript.zip (2.2 MB)
3. Twitter Sidebar Component
  • 10.1 23- Button Component - JavaScript.zip (120.4 KB)
  • 9.1 22-Sidebar Logo - JavaScript.zip (109.8 KB)
  • 5.1 18-Fix Typography Styles.zip (68.8 KB)
  • 14.1 27-Sidebar Finalized Layout - CSS.zip (257.0 KB)
  • 11.1 24-Sidebar Username - JavaScript.zip (216.2 KB)
  • 17. Sidebar Profile - CSS.mp4 (182.2 MB)
  • 16. Sidebar Dropdown - CSS.srt (9.6 KB)
  • 8.1 21-Sidebar Button Components - JavaScript.zip (104.1 KB)
  • 7.1 20- Shared CSS in JavaScript.zip (78.0 KB)
  • 11. Sidebar Username - JavaScript.mp4 (174.6 MB)
  • 19.1 32-Fixing Event Listener - JavaScript.zip (333.2 KB)
  • 20.1 33-CSS and JavaScript Clean Up.zip (328.5 KB)
  • 6.1 19-Render Conditionally - JavaScript.zip (71.6 KB)
  • 14. Sidebar Finalized Layout - CSS.mp4 (155.8 MB)
  • 12.1 25-SVG Method Refactoring.zip (226.5 KB)
  • 18.1 31-Sidebar Event Listener - JavaScript.zip (320.3 KB)
  • 2.1 15-VS Code Preference Set Up.zip (307.1 KB)
  • 17.1 30-Sidebar Profile - CSS.zip (299.9 KB)
  • 15.1 28-Sidebar Padding Fix - CSS.zip (264.2 KB)
  • 3. Sidebar Home in JavaScript.srt (11.6 KB)
  • 16.1 29-Sidebar Dropdown - CSS.zip (289.6 KB)
  • 13.1 26-Nested Typography Component - JavaScript.zip (254.3 KB)
  • 4.1 17-Static CSS Host.zip (58.8 KB)
  • 3.1 16-Sidebar Home - JavaScript.zip (55.0 KB)
  • 17. Sidebar Profile - CSS.srt (23.3 KB)
  • 14. Sidebar Finalized Layout - CSS.srt (22.9 KB)
  • 11. Sidebar Username - JavaScript.srt (22.3 KB)
  • 18. Sidebar Event Listener - JavaScript.srt (14.5 KB)
  • 13. Nested Typography Component - JavaScript.mp4 (147.8 MB)
  • 13. Nested Typography Component - JavaScript.srt (21.4 KB)
  • 10. Button Component - JavaScript.srt (20.0 KB)
  • 1. JavaScript Development Set Up.srt (17.0 KB)
  • 8. Sidebar Button Components - JavaScript.srt (16.9 KB)
  • 4. Static CSS Host.srt (16.5 KB)
  • 15. Sidebar Padding Fix - CSS.srt (16.2 KB)
  • 9. Sidebar Logo - JavaScript.srt (14.2 KB)
  • 7. Shared CSS in JavaScript.srt (13.7 KB)
  • 2. VS Code Preference Set Up.srt (10.7 KB)
  • 20. CSS and JavaScript Clean Up.srt (10.0 KB)
  • 6. Render Conditionally - JavaScript.srt (9.1 KB)
  • 19. Fixing Event Listener - JavaScript.srt (7.9 KB)
  • 12. SVG Method Refactoring.srt (6.5 KB)
  • 5. Fix Typography Styles.srt (3.5 KB)
  • 10. Button Component - JavaScript.mp4 (138.0 MB)
  • 8. Sidebar Button Components - JavaScript.mp4 (131.6 MB)
  • 18. Sidebar Event Listener - JavaScript.mp4 (100.3 MB)
  • 1. JavaScript Development Set Up.mp4 (94.8 MB)
  • 15. Sidebar Padding Fix - CSS.mp4 (93.8 MB)
  • 4. Static CSS Host.mp4 (92.1 MB)
  • 9. Sidebar Logo - JavaScript.mp4 (89.9 MB)
  • 16. Sidebar Dropdown - CSS.mp4 (77.9 MB)
  • 7. Shared CSS in JavaScript.mp4 (74.8 MB)
  • 20. CSS and JavaScript Clean Up.mp4 (67.9 MB)
  • 3. Sidebar Home in JavaScript.mp4 (58.2 MB)
  • 6. Render Conditionally - JavaScript.mp4 (54.6 MB)
  • 19. Fixing Event Listener - JavaScript.mp4 (54.1 MB)
  • 2. VS Code Preference Set Up.mp4 (50.2 MB)
  • 12. SVG Method Refactoring.mp4 (40.7 MB)
  • 5. Fix Typography Styles.mp4 (23.3 MB)
1. Course Overview & Materials
  • 1. Design Section Overview.srt (2.8 KB)
  • 2. Coding Section Overview.srt (2.4 KB)
  • 5. Download Course Material Bundled.html (0.1 KB)
  • 4. List of Plugins.srt (1.6 KB)
  • 5.1 Course Materials.zip (149.1 MB)
  • 3. Common Shortcuts Before We Start.srt (6.3 KB)
  • 3. Common Shortcuts Before We Start.mp4 (40.8 MB)
  • 1. Design Section Overview.mp4 (18.7 MB)
  • 2. Coding Section Overview.mp4 (18.6 MB)
  • 4. List of Plugins.mp4 (12.6 MB)
  • 4.1 List of Plugins.zip (1.3 MB)
2. Twitter UI - Figma
  • 10. Message Component - Figma.srt (36.4 KB)
  • 6. Tweet Component - Figma.mp4 (245.4 MB)
  • 8. Explore Component - Figma.mp4 (192.3 MB)
  • 13. Profile Component - Figma.mp4 (186.4 MB)
  • 10. Message Component - Figma.mp4 (181.4 MB)
  • 8. Explore Component - Figma.srt (34.8 KB)
  • 4. Sidebar Dropdown - Figma.mp4 (174.3 MB)
  • 7. News Feed - Figma.srt (21.0 KB)
  • 6. Tweet Component - Figma.srt (49.4 KB)
  • 2.1 2-Sidebar Navigation - Figma.fig (62.3 KB)
  • 1.1 1-Sidebar Buttons - Figma.fig (43.8 KB)
  • 9. Notification Component - Figma.mp4 (149.4 MB)
  • 4. Sidebar Dropdown - Figma.srt (32.6 KB)

  • Code:

    • udp://open.stealth.si:80/announce
    • udp://tracker.tiny-vps.com:6969/announce
    • udp://fasttracker.foreverpirates.co:6969/announce
    • udp://tracker.opentrackr.org:1337/announce
    • udp://explodie.org:6969/announce
    • udp://tracker.cyberia.is:6969/announce
    • udp://ipv4.tracker.harry.lu:80/announce
    • udp://tracker.uw0.xyz:6969/announce
    • udp://opentracker.i2p.rocks:6969/announce
    • udp://tracker.birkenwald.de:6969/announce
    • udp://tracker.torrent.eu.org:451/announce
    • udp://tracker.moeking.me:6969/announce
    • udp://tracker.dler.org:6969/announce
    • udp://9.rarbg.me:2970/announce