# Tutorial

This tutorial takes you from a first Markdown file to a themed, exported deck published in a
documentation site. Most steps rely on an **interactive demo**: read, then play with the deck right
in the page (click it, then ← →).

<TutorialSteps>
  <TutorialStep title="Create your first deck" duration="5 min">
    Install the CLI, scaffold a deck with `recit init` and run it locally. → [Quickstart](/documentation/getting-started/quickstart)
  </TutorialStep>
  <TutorialStep title="Write slides" duration="10 min">
    Separators, front matter, speaker notes, code, math, diagrams and steps. → [Slides](/documentation/writing/scenes)
  </TutorialStep>
  <TutorialStep title="Lay out content" duration="10 min">
    Grids, columns, image left / right, background image, cover and section slides. → [Layouts](/formats/deck/layouts)
  </TutorialStep>
  <TutorialStep title="Customize the theme" duration="10 min">
    `recit.config.ts`: colors, radius, fonts, footer, transitions. → [Theme](/theme/overview)
  </TutorialStep>
  <TutorialStep title="Move to MDX" duration="10 min">
    Built-in components, custom React components and expressions. → [MDX](/documentation/writing/mdx)
  </TutorialStep>
  <TutorialStep title="Present and export" duration="5 min">
    Presenter console, smartphone remote, static site, single HTML file and PDF. → [Exporting](/formats/deck/exporting)
  </TutorialStep>
  <TutorialStep title="Publish in a site" duration="10 min">
    Embed decks in a documentation site with per-slide search, like this one. → [Stories in a site](/documentation/integrations/site-stories)
  </TutorialStep>
</TutorialSteps>

Looking for complete decks to start from? The gallery on [presentation.recit.dev](https://presentation.recit.dev)
shows every example with its source.