Design & Code Twitter with Lit JS, CSS & Figma (2022)

Design a sidebar in Figma using an incremental design system, creating styles, colors, typography, and icons with plugins like Styler and Contrast, and building components and hover and active states.

Design and implement a twitter-style sidebar in Figma, building icons and buttons, applying hover and active states, and creating dark and light modes with components, variants, and prototypes.

Design and implement a sidebar profile in figma by adding a menu icon, avatar, and typography, then apply hover states and a dark theme with auto layout and components.

Design and implement a sidebar dropdown in Figma by organizing icons, refining colors and borders, building topic items, and prototyping open and close interactions in light and dark variants.

Design and organize a home header in Figma, building sidebar icons, creating variants for analytics, events, and images, and testing hover, active, and size states for a polished header.

Create a full tweet component in figma, including header, icons, and variants. Build tweet footers, image layouts, and dark and light themes with component sets and auto layout.

Create and organize a twitter-like news feed in Figma by designing a tweet component, ad variants, a news feed sidebar, and dark mode with hover states.

Design an explore page in Figma by refining the newsfeed and left sidebar. Reuse buttons, apply auto layout and borders to create tabs and a responsive dark and light mode.

Design and implement a reusable notification component in Figma by copying and adapting a base component, adjusting text, layout, and dark mode variants for likes and retweets.

Design the message page in Figma by building a message component with profile, username, and chat bubbles, including normal, hover, and active states, plus search and send features.

Designs the bookmark component in Figma by duplicating the notification module, simplifying content, and adding a bookmark header, icon, and hover states for a clear bookmark manager prototype.

Design and implement a list component in Figma, building on the bookmark workflow, adding list icons, Unsplash images, hover interactions, and responsive alignment with auto layout.

Design and implement a complete profile component in Figma for a Twitter-like app, including header, profile image, bio, location, link, followers and following, and an editable profile.

Explore setting up a JavaScript development environment with Visual Studio Code, LED web components, and lit, using Live Server, extensions, keyboard shortcuts, and a Figma plugin for CSS color variables.

Learn how to set up Visual Studio Code preferences, including keyboard shortcuts, settings.json, and user snippets for JavaScript, with tips on copying commands and using snippet generators.

Build a reusable sidebar home component in JavaScript with lit-html, featuring a render method, a custom tag, static styles, CSS variables, and proper imports in a components directory.

Explore how adding css inside a custom element scopes styles with a host selector, override classes, and implement default, hover, and active states across light and dark themes.

Refine typography across the project by switching from Roboto to the Barlow font, applying 20px regular (400) and bold (700) weights, and syncing styles with the Figma design.

Render icons conditionally by toggling a boolean and using a ternary operator, with static properties, attributes, and a click-driven switch to swap svg icons in a Lit JS context.

Learn to extract shared styles into dark and default modules, import them across sidebars and buttons, and render CSS templates for lean, reusable lit-js interfaces.

Design & code Twitter with lit js, css & figma (2022) demonstrates extracting sidebar styles, applying dark and default themes, renaming components like sidebar explorer, and updating svg icons.

Design a sidebar that reuses styles with an active state that bolds text, ensure 48-pixel pill buttons via host and paragraph rules, and implement an svg logo and icon button.

Design a reusable primary button component with default and dark states, supporting two sizes and dynamic labels, and organize styles into base, sizes, and theme files for a Twitter UI.

Implement a sidebar username component for the Twitter-like UI, reusing and renaming an existing bookmark item to include image, username, and account, with dark and default styles.

Refactor SVG rendering by extracting outline and filled icons into separate methods, enabling conditional SVG rendering and neater, performance-oriented DOM updates.

Learn to build a nested typography component in JavaScript by extracting type styles, using lit boilerplate, and reusing typography across the sidebar for cleaner, faster user interface.

Develop a finalized CSS sidebar layout using flexbox and grid, with header, items, and footer, and implement a light/dark theme toggle with smooth transitions.

Create reusable dropdown components for the Twitter layout by matching Figma styles, hover effects, and dark mode, importing dropdown styles, and refining padding, border radius, and layout in CSS.

Design a sidebar dropdown with CSS, duplicating the component, swapping icons and switches, and applying absolute positioning, 320px width, and a background color with shadows for light and dark themes.

Apply CSS techniques to build a responsive sidebar dropdown with absolute positioning, overflow clipping, hover interactions, cursor pointers, and SVG icons, including border styles and theme switching.

Fix and organize border styles for horizontal and vertical borders, then implement a sidebar dropdown with a click event listener and hover behavior to show or hide items.

Fix overlapping event listeners by attaching events to the more option and username dropdown, replacing mouseover with click handlers, and refine absolute positioning for dropdowns in dark and light modes.

Modularize the sidebar’s JavaScript, import the theme switch, and refactor CSS into a colors and layout reset folder, ensuring dark and light themes and all listeners work.

Refactor and organize JavaScript modules by encapsulating component styles, updating import paths with Visual Studio code search and replace, and creating generic styles to ensure all sidebar components render correctly.

Refactor the JavaScript logic by creating a reusable is_visible function and applying it across dropdown and username events with two arguments, ensuring clean imports and consistent behavior.

Reuse component patterns to design and refactor the news feed sidebar, adjusting hover states, image sizes, and typography with primary and secondary styles.

Explore building and styling a trending info component in JavaScript by reusing a base card, updating images, time stamps, and hashtags, and aligning with Figma designs.

Design a responsive newsfeed layout with CSS by stacking items with 16px padding and 16px gaps, wrapping content into columns, and implementing article and newsfeed sections.

Fix scrollbar style with css by implementing sticky sidebars, creating a fake scrolling area, and applying cross-browser scrollbar customization for light and dark themes.

The lecture shows making a newsfeed responsive using css, including overflow adjustments, min/max sidebar widths, flex wrap, and a media query to make the primary button full width.

adjusts the sidebar border radius for responsive design by setting the host to 16px and enabling 60px on smaller devices, removing redundant overrides to improve wrapping and consistency.

Fix sidebar layout issues by correcting icon spacing, preventing clipping with z-index and overflow tweaks, and prepare a data folder with image assets for dynamic rendering in the next video.

Learn to dynamically render follow and trending feeds by mapping data arrays, importing data modules, and updating the dom with innerHTML, while ensuring responsive images and theme switching.

Learn to build the home feature by creating icon button components and theming them with gray, primary, success, and alert variants in light and dark modes, with in-app testing.

Create six icons—image, analytics, emoji, event, location, and star—by copying from Figma and updating imports, with consistent naming. Leverage reusable styles so icons adapt to dark themes and button components.

Develop and style the home component using Lit JS, CSS, and Figma concepts by implementing dark and light variants, typography styles, and class chaining to control color, spacing, and layout.

Design and integrate svg icons for tweet actions, creating comment, like, retweet, and share buttons with theme variants in gray and green, and wire them into the home UI.

Create a tweet card layout using CSS and flexbox, featuring four rows with an image, icons, avatar, and like, retweet, and share actions, tuned for spacing and alignment.

Split the tweet content into a dedicated tweet card and refine its header, dev, content, and footer with flex alignment, borders, and padding for readable, dark-and-light theme layouts.

Add and render a dynamic tweet card with profile image, user name, content, and images, while removing the horizontal border and adopting 16px body text.

Map tweet data to a dynamic card component, updating profile image, text, time, and metrics; conditionally style like and retweet states and render svgs based on data.

Explore how to break designs into reusable components in Figma, export styles to JavaScript, and translate a Twitter-like UI into code using shareable styles and custom components.