Course overview

A comprehensive journey that helps you navigate uncertainty and make choices aligned with your values and goals.

8 modules
23 lessons
0 min
Part 1

Introduction & Set-up

Get started with the course and set up your workspace.

  1. Introduction0

    Welcome to the course and overview of what you'll learn.

    0
  2. Workspace Setup0

    Set up your development environment and tools.

    0
Part 2

The Basics

Learn the fundamentals of web development.

  1. Our first web page0

    Create your first HTML page and understand the basics.

    0
  2. Styling content0

    Learn how to style your web pages with CSS.

    0
  3. From Figma to Front-end0

    Convert Figma designs into working web pages.

    0
  4. Auto Layout and Flexbox0

    Master layout techniques using Flexbox.

    0
Part 3

Hands-on Practice

Apply what you've learned with practical exercises.

  1. Story Header0

    Build a story header component.

    0
  2. Storystream Item0

    Create a storystream item component.

    0
Part 4

Element States & Responsive Styling

Learn about interactive states and responsive design.

  1. Element states0

    Understand hover, active, and other element states.

    0
  2. Responsive design basics0

    Make your designs work across different screen sizes.

    0
Part 5

Hands-on Practice

Practice responsive design techniques.

  1. Responsive Story Header0

    Make the story header responsive.

    0
  2. Responsive Storystream Item0

    Make the storystream item responsive.

    0
Part 6

JavaScript & Reactive Frameworks

Add interactivity with JavaScript and reactive frameworks.

  1. JavaScript basics0

    Learn the fundamentals of JavaScript programming.

    0
  2. Reactive applications & frameworks0

    Understand reactive programming and modern frameworks.

    0
  3. Reactivity in Figma and AlpineJS0

    Apply reactive concepts using AlpineJS.

    0
Part 7

Hands-on Practice

Build interactive components with reactivity.

  1. Reactive Storystream Item0

    Add interactivity to the storystream item.

    0
Part 8

Final Project

Build a complete project from design to deployment.

  1. Component Design0

    Design reusable components in Figma.

    0
  2. Landing Page Design0

    Create a complete landing page design.

    0
  3. Prototyping0

    Create interactive prototypes in Figma.

    0
  4. Layout Build0

    Build the layout structure in code.

    0
  5. Responsive Build0

    Make the layout responsive across devices.

    0
  6. Interactivity0

    Add interactive features and animations.

    0
  7. Publishing0

    Deploy your project to the web.

    0