| 0 | 307.2 B | ||
| 1. Bonus.html | 512 B | ||
| 1. Design Section Overview.mp4 | 18.7 MB | ||
| 1. Design Section Overview.srt | 2.8 KB | ||
| 1. Figma Variants - JavaScript.mp4 | 171.6 MB | ||
| 1. Figma Variants - JavaScript.srt | 25 KB | ||
| 1. JavaScript Development Set Up.mp4 | 94.8 MB | ||
| 1. JavaScript Development Set Up.srt | 17 KB | ||
| 1. Organize JavaScript Modules.mp4 | 50.4 MB | ||
| 1 | 409.6 B | ||
| 1. Organize JavaScript Modules.srt | 8.9 KB | ||
| 1. Sidebar Buttons - Figma.mp4 | 80.6 MB | ||
| 1. Sidebar Buttons - Figma.srt | 19.2 KB | ||
| 1.1 1-Sidebar Buttons - Figma.fig | 43.8 KB | ||
| 1.1 34-Organize JavaScript Modules.zip | 357.9 KB | ||
| 1.1 44-Figma Variants - JavaScript.zip | 2.2 MB | ||
| 2 | 102.4 B | ||
| 10. Button Component - JavaScript.mp4 | 138 MB | ||
| 10. Button Component - JavaScript.srt | 20 KB | ||
| 10. Dynamic Content - JavaScript.mp4 | 121 MB | ||
| 10. Dynamic Content - JavaScript.srt | 19.4 KB | ||
| 10. Message Component - Figma.mp4 | 181.4 MB | ||
| 10. Message Component - Figma.srt | 36.4 KB | ||
| 10.1 10-Message Component - Figma.fig | 10.7 MB | ||
| 10.1 23- Button Component - JavaScript.zip | 120.4 KB | ||
| 10.1 43-Dynamic Content - JavaScript.zip | 2.2 MB | ||
| 11. Bookmark Component - Figma.mp4 | 110.8 MB | ||
| 11. Bookmark Component - Figma.srt | 17.6 KB | ||
| 11. Sidebar Username - JavaScript.mp4 | 174.6 MB | ||
| 11. Sidebar Username - JavaScript.srt | 22.3 KB | ||
| 11.1 11-Bookmark Component - Figma.fig | 10.7 MB | ||
| 11.1 24-Sidebar Username - JavaScript.zip | 216.2 KB | ||
| 12. List Component - Figma.mp4 | 142.3 MB | ||
| 12. List Component - Figma.srt | 22.3 KB | ||
| 12. SVG Method Refactoring.mp4 | 40.7 MB | ||
| 12. SVG Method Refactoring.srt | 6.5 KB | ||
| 12.1 12-List Component - Figma.fig | 11 MB | ||
| 12.1 25-SVG Method Refactoring.zip | 226.5 KB | ||
| 13. Nested Typography Component - JavaScript.mp4 | 147.8 MB | ||
| 13. Nested Typography Component - JavaScript.srt | 21.4 KB | ||
| 13. Profile Component - Figma.mp4 | 186.4 MB | ||
| 13. Profile Component - Figma.srt | 32.4 KB | ||
| 13.1 13-Profile Component - Figma.fig | 11.1 MB | ||
| 13.1 26-Nested Typography Component - JavaScript.zip | 254.3 KB | ||
| 14. Sidebar Finalized Layout - CSS.mp4 | 155.8 MB | ||
| 14. Sidebar Finalized Layout - CSS.srt | 22.9 KB | ||
| 14.1 27-Sidebar Finalized Layout - CSS.zip | 257 KB | ||
| 15. Sidebar Padding Fix - CSS.mp4 | 93.8 MB | ||
| 15. Sidebar Padding Fix - CSS.srt | 16.2 KB | ||
| 15.1 28-Sidebar Padding Fix - CSS.zip | 264.2 KB | ||
| 16. Sidebar Dropdown - CSS.mp4 | 77.9 MB | ||
| 16. Sidebar Dropdown - CSS.srt | 9.6 KB | ||
| 16.1 29-Sidebar Dropdown - CSS.zip | 289.6 KB | ||
| 17. Sidebar Profile - CSS.mp4 | 182.2 MB | ||
| 17. Sidebar Profile - CSS.srt | 23.3 KB | ||
| 17.1 30-Sidebar Profile - CSS.zip | 299.9 KB | ||
| 18. Sidebar Event Listener - JavaScript.mp4 | 100.3 MB | ||
| 18. Sidebar Event Listener - JavaScript.srt | 14.5 KB | ||
| 18.1 31-Sidebar Event Listener - JavaScript.zip | 320.3 KB | ||
| 19. Fixing Event Listener - JavaScript.mp4 | 54.1 MB | ||
| 19. Fixing Event Listener - JavaScript.srt | 7.9 KB | ||
| 19.1 32-Fixing Event Listener - JavaScript.zip | 333.2 KB | ||
| 2. Coding Section Overview.mp4 | 18.6 MB | ||
| 2. Coding Section Overview.srt | 2.4 KB | ||
| 2. Icon Button - JavaScript.mp4 | 92.4 MB | ||
| 2. Icon Button - JavaScript.srt | 11.1 KB | ||
| 2. Refactor JavaScript Logic.mp4 | 34.9 MB | ||
| 2. Refactor JavaScript Logic.srt | 6.6 KB | ||
| 2. Sidebar Navigation - Figma.mp4 | 104.5 MB | ||
| 2. Sidebar Navigation - Figma.srt | 19.5 KB | ||
| 2. VS Code Preference Set Up.mp4 | 50.2 MB | ||
| 2. VS Code Preference Set Up.srt | 10.7 KB | ||
| 2.1 15-VS Code Preference Set Up.zip | 307.1 KB | ||
| 2.1 2-Sidebar Navigation - Figma.fig | 62.3 KB | ||
| 2.1 35-Refactor JavaScript Logic.zip | 360.7 KB | ||
| 2.1 45-Icon Button - JavaScript.zip | 2.2 MB | ||
| 20. CSS and JavaScript Clean Up.mp4 | 67.9 MB | ||
| 20. CSS and JavaScript Clean Up.srt | 10 KB | ||
| 20.1 33-CSS and JavaScript Clean Up.zip | 328.5 KB | ||
| 3. Common Shortcuts Before We Start.mp4 | 40.8 MB | ||
| 3. Common Shortcuts Before We Start.srt | 6.3 KB | ||
| 3. Home Component - HTML.mp4 | 73.7 MB | ||
| 3. Home Component - HTML.srt | 10.9 KB | ||
| 3. Reuse Component - JavaScript.mp4 | 140.6 MB | ||
| 3. Reuse Component - JavaScript.srt | 22.6 KB | ||
| 3. Sidebar Home in JavaScript.mp4 | 58.2 MB | ||
| 3 | 307.2 B | ||
| 3. Sidebar Home in JavaScript.srt | 11.6 KB | ||
| 3. Sidebar Profile - Figma.mp4 | 85.9 MB | ||
| 3. Sidebar Profile - Figma.srt | 19.5 KB | ||
| 3.1 16-Sidebar Home - JavaScript.zip | 55 KB | ||
| 3.1 3-Sidebar Profile - Figma.fig | 10 MB | ||
| 3.1 36-Reuse Component - JavaScript.zip | 374.7 KB | ||
| 3.1 46-Home Component - HTML.zip | 2.2 MB | ||
| 4. List of Plugins.mp4 | 12.6 MB | ||
| 4. List of Plugins.srt | 1.6 KB | ||
| 4. Sidebar Dropdown - Figma.mp4 | 174.3 MB | ||
| 4. Sidebar Dropdown - Figma.srt | 32.6 KB | ||
| 4. Static CSS Host.mp4 | 92.1 MB | ||
| 4. Static CSS Host.srt | 16.5 KB | ||
| 4. Trending Info Component - JavaScript.srt | 20.1 KB | ||
| 4 | 204.8 B | ||
| 4. Trending Info Component - JavaScript.mp4 | 146.7 MB | ||
| 4. Tweet Icon Buttons - SVG.mp4 | 83.3 MB | ||
| 4. Tweet Icon Buttons - SVG.srt | 10 KB | ||
| 4.1 17-Static CSS Host.zip | 58.8 KB | ||
| 4.1 37-Trending Info Component - JavaScript.zip | 400.4 KB | ||
| 4.1 4-Sidebar Dropdown - Figma.fig | 10 MB | ||
| 4.1 47-Tweet Icon Buttons - SVG.zip | 2.3 MB | ||
| 4.1 List of Plugins.zip | 1.3 MB | ||
| 5. Fix Typography Styles.srt | 3.5 KB | ||
| 5. Home Header Component - Figma.mp4 | 138.5 MB | ||
| 5. Home Header Component - Figma.srt | 30.7 KB | ||
| 5 | 512 B | ||
| 5. Download Course Material Bundled.html | 102.4 B | ||
| 5. Fix Typography Styles.mp4 | 23.3 MB | ||
| 5. Newsfeed Layout - CSS.mp4 | 69.7 MB | ||
| 5. Newsfeed Layout - CSS.srt | 9 KB | ||
| 5. Tweet Card Layout - CSS.mp4 | 154.3 MB | ||
| 5. Tweet Card Layout - CSS.srt | 20.2 KB | ||
| 5.1 18-Fix Typography Styles.zip | 68.8 KB | ||
| 5.1 38-Newsfeed Layout - CSS.zip | 390.7 KB | ||
| 5.1 48-Tweet Card Layout - CSS.zip | 2.3 MB | ||
| 5.1 5-Home Header Component - Figma.fig | 10 MB | ||
| 5.1 Course Materials.zip | 149.1 MB | ||
| 6. CSS Layout Clean Up.mp4 | 99.6 MB | ||
| 6. CSS Layout Clean Up.srt | 15.1 KB | ||
| 6. Fixing Scrollbar Style - CSS.mp4 | 104.2 MB | ||
| 6. Fixing Scrollbar Style - CSS.srt | 16.5 KB | ||
| 6. Render Conditionally - JavaScript.mp4 | 54.6 MB | ||
| 6. Render Conditionally - JavaScript.srt | 9.1 KB | ||
| 6. Tweet Component - Figma.mp4 | 245.4 MB | ||
| 6. Tweet Component - Figma.srt | 49.4 KB | ||
| 6 | 921.6 B | ||
| 6.1 19-Render Conditionally - JavaScript.zip | 71.6 KB | ||
| 6.1 39-Fixing Scrollbar Style - CSS.zip | 413.8 KB | ||
| 6.1 49-CSS Layout Clean Up.mp4 | 268.8 MB | ||
| 6.1 6-Tweet Component - Figma.fig | 10.1 MB | ||
| 7. News Feed - Figma.mp4 | 113.2 MB | ||
| 7. News Feed - Figma.srt | 21 KB | ||
| 7. Newsfeed Responsive - CSS.mp4 | 69.7 MB | ||
| 7. Newsfeed Responsive - CSS.srt | 9.6 KB | ||
| 7. Shared CSS in JavaScript.mp4 | 74.8 MB | ||
| 7. Shared CSS in JavaScript.srt | 13.7 KB | ||
| 7. Tweet Card Data.mp4 | 12.2 MB | ||
| 7. Tweet Card Data.srt | 1.7 KB | ||
| 7.1 20- Shared CSS in JavaScript.zip | 78 KB | ||
| 7.1 40-Newsfeed Responsive - CSS.zip | 412.8 KB | ||
| 7.1 50-Tweet Card Data.zip | 4.4 MB | ||
| 7.1 7-News Feed - Figma.fig | 10.2 MB | ||
| 8. Dynamic Tweet Card - JavaScript.mp4 | 88.1 MB | ||
| 8. Dynamic Tweet Card - JavaScript.srt | 11.4 KB | ||
| 8. Explore Component - Figma.mp4 | 192.3 MB | ||
| 8. Explore Component - Figma.srt | 34.8 KB | ||
| 8. Minor Fix Sidebar - CSS.mp4 | 24.2 MB | ||
| 8. Minor Fix Sidebar - CSS.srt | 4.1 KB | ||
| 8. Sidebar Button Components - JavaScript.mp4 | 131.6 MB | ||
| 8. Sidebar Button Components - JavaScript.srt | 16.9 KB | ||
| 8.1 21-Sidebar Button Components - JavaScript.zip | 104.1 KB | ||
| 8.1 41-Minor Fix Sidebar - CSS.zip | 416.2 KB | ||
| 8.1 51- Dynamic Tweet Card - JavaScript.zip | 4.4 MB | ||
| 8.1 8-Explore Component - Figma.fig | 10.7 MB | ||
| 9. Final Thoughts.mp4 | 44.7 MB | ||
| 9. Final Thoughts.srt | 6.8 KB | ||
| 9. New Data Folder.mp4 | 27.2 MB | ||
| 9. New Data Folder.srt | 5.2 KB | ||
| 9. Notification Component - Figma.mp4 | 149.4 MB | ||
| 9. Notification Component - Figma.srt | 22.7 KB | ||
| 9. Sidebar Logo - JavaScript.mp4 | 89.9 MB | ||
| 9. Sidebar Logo - JavaScript.srt | 14.2 KB | ||
| 9.1 22-Sidebar Logo - JavaScript.zip | 109.8 KB | ||
| 9.1 42-New Data Folder.zip | 2.2 MB | ||
| 9.1 9-Notification Component - Figma.fig | 10.7 MB | ||
| TutsNode.com.txt | 102.4 B | ||
| [TGx]Downloaded from torrentgalaxy.to .txt | 614.4 B | ||
| 7 | 102.4 B | ||
| 8 | 1.1 KB | ||
| 9 | 1.1 KB | ||
| 10 | 307.2 B | ||
| 11 | 614.4 B | ||
| 12 | 1.2 KB | ||
| 13 | 512 B | ||
| 14 | 81.5 KB | ||
| 15 | 745.5 KB | ||
| 16 | 382.8 KB | ||
| 17 | 470.1 KB | ||
| 18 | 44.3 KB | ||
| 19 | 420.4 KB | ||
| 20 | 30.5 KB | ||
| 21 | 825.6 KB | ||
| 22 | 168.1 KB | ||
| 23 | 562.3 KB | ||
| 24 | 768.4 KB | ||
| 25 | 720.9 KB | ||
| 26 | 374.2 KB | ||
| 27 | 223.7 KB | ||
| 28 | 238.2 KB | ||
| 29 | 652.8 KB | ||
| 30 | 871.3 KB | ||
| 31 | 109.4 KB | ||
| 32 | 941.6 KB | ||
| 33 | 90.5 KB | ||
| 34 | 672.8 KB | ||
| 35 | 383.4 KB | ||
| 36 | 90.4 KB | ||
| 37 | 249.5 KB | ||
| 38 | 258.8 KB | ||
| 39 | 324.5 KB | ||
| 40 | 328.7 KB | ||
| 41 | 73 KB | ||
| 42 | 771.7 KB | ||
| 43 | 417.8 KB | ||
| 44 | 911.9 KB | ||
| 45 | 599.4 KB | ||
| 46 | 782.5 KB | ||
| 47 | 349.6 KB | ||
| 48 | 217.6 KB | ||
| 49 | 338.7 KB | ||
| 50 | 56.6 KB | ||
| 51 | 816.4 KB | ||
| 52 | 827.5 KB | ||
| 53 | 665.8 KB | ||
| 54 | 322 KB | ||
| 55 | 397.6 KB | ||
| 56 | 426 KB | ||
| 57 | 846.9 KB | ||
| 58 | 906.2 KB | ||
| 60 | 287.4 KB | ||
| 61 | 311.7 KB | ||
| 62 | 346 KB | ||
| 63 | 358 KB | ||
| 64 | 862.9 KB | ||
| 65 | 895.1 KB | ||
| 66 | 993.4 KB | ||
| 68 | 43.2 KB | ||
| 69 | 570.8 KB | ||
| 70 | 616.8 KB | ||
| 71 | 751.9 KB | ||
| 72 | 757.2 KB | ||
| 73 | 783.8 KB | ||
| 74 | 791.9 KB | ||
| 75 | 806.6 KB | ||
| 76 | 817 KB | ||
| 77 | 840.3 KB | ||
| ▲ 244 total files | |||
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
| torrent name | size | uploader | age | seed | leech |
|---|---|---|---|---|---|
| 656.6 MB | freecoursewb | 7 months | 2 | 0 | |
| 849.1 MB | freecoursewb | 7 months | 5 | 0 | |
|
[Oreilly] AI for Everyone Leveraging Generative AI Tools to Write Design Code, and More 2024 VO 720p WEB x264 Posted by
FranceGallForever in Other
|
552.41 MB | FranceGallForever | 1 year | 11 | 0 |
|
Udemy - Design No Code Websites With Wix Drag and Drop Website Builder Posted by
freecoursewb in Other
|
974.9 MB | freecoursewb | 2 years | 0 | 0 |
| 1.8 GB | fcs0310 | 2 years | 0 | 0 |
All Comments