Course overview

A quick introduction to the course and an overview of what we will and won't be covering.

Configure your development environment with VSCode, Live Server, and the Figma for VSCode plugin to streamline your design-to-code workflow. Learn how to test your setup and prepare for building your first web page.

Build your first HTML page using fundamental elements like headings, paragraphs, images, links, and buttons. Understand how HTML serves as the structural foundation of every web page and how it relates to the layers you work with in Figma.

Explore three approaches to styling: inline styles, CSS classes, and utility frameworks like Tailwind. Discover how applying styles in code mirrors the design panel in Figma, making the transition from design to development more intuitive.

Learn to read Figma designs as technical blueprints by using Dev Mode to extract spacing, typography, and color values. Translate these design tokens into Tailwind classes to recreate your designs in code.

Understand how Auto Layout in Figma directly translates to Flexbox in CSS, enabling you to create responsive layouts that adapt to different screen sizes. Master alignment, spacing, and positioning techniques that work across both design and code.

Build a blog post header component inspired by The Verge, incorporating breadcrumbs, typography hierarchy, and author information. Practice using Flexbox to create complex layouts with proper spacing and alignment.

Create the Verge's Storystream item component with custom SVGs, YouTube embeds, and complex nested layouts. Learn to work with z-index, absolute positioning, and aspect ratios to achieve precise visual results.

Master CSS pseudo-classes like :hover and :focus to create interactive elements that provide clear user feedback. Learn to implement smooth transitions between states while maintaining accessibility standards.

Learn mobile-first design principles and how Tailwind's breakpoint system allows your layouts to adapt seamlessly across devices. Master techniques for showing, hiding, and rearranging elements based on screen size.

Adapt the story header component for different screen sizes by adjusting typography scales and maintaining readability across breakpoints. Apply responsive classes to ensure your design looks polished on both mobile and desktop.

Transform the storystream item layout for mobile by repositioning elements, rotating indicators, and reorganizing content flow. Practice using conditional visibility and flex direction changes to create adaptive layouts.

Learn JavaScript fundamentals including variables, functions, arrays, and objects to add interactivity to your pages. Understand how to create event listeners that respond to user actions, similar to prototyping interactions in Figma.

Discover how reactive frameworks solve the complexity of managing state and updating multiple elements when values change. Get introduced to AlpineJS, a lightweight framework that makes building interactive interfaces more intuitive.

Build the same reactive counter prototype in both Figma using variables and in code using AlpineJS to understand how reactive concepts translate between design and development. See how Alpine's x-data and x-text directives mirror Figma's variable system.

Add a copy-to-clipboard feature with a confirmation toast that appears and disappears automatically. Learn to use boolean states, setTimeout for delays, and Alpine's x-transition for smooth animations.

Design a complete component system in Figma with buttons, navigation, and pricing cards that use variants and properties for different states. Learn to structure components that translate efficiently to code.

Design a complete landing page with hero section, navigation, and pricing cards across multiple breakpoints. Apply mobile-first principles and use Auto Layout throughout to ensure your design translates smoothly to code.

Create an interactive prototype using Figma variables to manage plan selection states and smooth scroll animations. Define the functionality you'll need to implement in code before building.

Translate your Figma designs into HTML and CSS, building the navigation, hero section, and pricing cards from scratch. Practice reading designs as technical specifications and implementing complex layouts with proper spacing and typography.

Adapt your landing page for desktop breakpoints by adjusting typography scales, repositioning elements, and reorganizing layouts. Learn to use Tailwind's responsive modifiers to create designs that work beautifully at any screen size.

Implement the pricing plan selection interaction using AlpineJS, allowing users to click cards and see visual feedback. Learn to use conditional classes, smooth scrolling, and state management to create engaging user experiences.

Prepare your site for deployment by adding meta tags, Open Graph tags, and favicons for proper social sharing. Learn to publish your project to the web using GitHub and Vercel, making it accessible to anyone with an internet connection.