---
permalink: 'codelabs/index.html'
title: Codelabs
section: guides
tags:
  - guides
  - guide
---

# Codelabs

Codelabs are step by step tutorials. They teach a specific topic through practical examples you can follow along, where each step is explained in depth.

## Web components: basics

A quick primer on the basics of web component. Great if you're just getting started, or just want to learn a bit about what web components are.

<a href="./basics/web-components.html?index=/codelabs/" target="_blank">
  > Go to the codelab
</a>

## lit-html & lit-element: basics

A kickstart to building web components with lit-html and lit-element. Goes through the process of building a simple application, explaining in detail each step along the way.

<a href="./basics/lit-html.html?index=/codelabs/" target="_blank">
  > Go to the codelab
</a>

## lit-html & lit-element: intermediate

A further deep dive into lit-html and lit-element. Handles data fetching, loading states and complex templating.

<a href="./intermediate/lit-html.html?index=/codelabs/" target="_blank">
  > Go to the codelab
</a>
