Free · 10 Lessons · Complete Course

Learn OrbLayout
From Zero to Hero

Master the modern static site builder in 10 hands-on lessons. Build with layouts, components, props, loops, filters — and ship pure HTML.

Start Learning → ⭐ Star on GitHub
index.orb 
<layout src="main.layout">
  <content>
    <use component="hero"
      heading="Hello World" />

    {{#each features}}
      <use component="card"
        title="{{ name }}"
        description="{{ desc }}" />
    {{/each}}
  </content>
</layout>
10
Lessons
25+
Features
50+
Code Examples
0
Cost ($)

Your Learning Path

From first install to deploying a real website. Each lesson builds on the last.

Lesson 01

Getting Started

Install OrbLayout, scaffold your first project, and understand the file structure.

Beginner Lesson 02

Layouts & Page Structure

Create reusable page templates with layouts, content slots, and named slots.

Beginner Lesson 03

Components & Props

Build reusable UI blocks, pass data with props, and nest components.

Beginner Lesson 04

Data & Variables

Define page data, use variables, and leverage built-in @page.* meta.

Beginner Lesson 05

Loops & Iteration

Iterate over arrays with {{#each}}, use @index, @first, @last, @count helpers.

Intermediate Lesson 06

Conditionals

Show and hide content with {{#if}}, {{else}}, and {{#unless}} blocks.

Intermediate Lesson 07

Pipe Filters

Transform data inline with 12 built-in filters and chain them together.

Intermediate Lesson 08

Advanced Features

Markdown blocks, {{#with}} scoping, partials, imports, :class directives.

Advanced Lesson 09

CLI & Dev Server

Master every CLI command, dev server, live reload, and programmatic API.

Advanced Lesson 10

Build a Real Website

Put it all together — build a complete portfolio site from scratch and deploy it.

Advanced

Ready to Build?

Start with Lesson 1 and you'll be shipping static sites in under 30 minutes.

Begin Lesson 1 →