---
title: Welcome to the Blockly Codelabs
pagination_next: null
pagination_prev: null
---

import { CodelabGrid, CodelabCard } from '@site/src/components/CodelabCards';
import Image from '@site/src/components/Image';

Blockly Codelabs provide a guided, tutorial, hands-on coding experience of Blockly.

<CodelabGrid>
  <CodelabCard
    level="beginner"
    title="Getting started with Blockly"
    href="/codelabs/getting-started/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_getting-started.png"
      srcDark="/images/codelabs/card_thumbnails_getting-started-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="beginner"
    title="Customizing a Blockly toolbox"
    href="/codelabs/custom-toolbox/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_blockly-toolbox.png"
      srcDark="/images/codelabs/card_thumbnails_blockly-toolbox-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="beginner"
    title="Customizing your themes"
    href="/codelabs/theme-extension-identifier/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_themes.png"
      srcDark="/images/codelabs/card_thumbnails_themes-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="Intermediate"
    title="Customizing context menus"
    href="/codelabs/context-menu-option/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_context-menus.png"
      srcDark="/images/codelabs/card_thumbnails_context-menus-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="Intermediate"
    title="Block validation and warnings"
    href="/codelabs/validation-and-warnings/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_validating-and-displaying.png"
      srcDark="/images/codelabs/card_thumbnails_validating-and-displaying-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="Intermediate"
    title="Use CSS in Blockly"
    href="/codelabs/css/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_css.png"
      srcDark="/images/codelabs/card_thumbnails_css-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="Advanced"
    title="Build a custom generator"
    href="/codelabs/custom-generator/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_custom-generator.png"
      srcDark="/images/codelabs/card_thumbnails_custom-generator-dark.png"
    />
  </CodelabCard>
  <CodelabCard
    level="Advanced"
    title="Build custom renderers"
    href="/codelabs/custom-renderer/codelab-overview">
    <Image
      alt="Blockly icon"
      src="/images/codelabs/card_thumbnails_custom-renderers.png"
      srcDark="/images/codelabs/card_thumbnails_custom-renderers-dark.png"
    />
  </CodelabCard>
</CodelabGrid>
