---
pagination_prev: null
description: Overview of the "Getting started with Blockly" codelab.
---

import Image from '@site/src/components/Image';

# Getting started with Blockly

## 1. Codelab overview

### What you'll learn

This codelab will teach you how to modify a simple web app to include the [Blockly](/blockly) visual programming library.

### What is Blockly?

Blockly is a library for building block programming apps.

Block programming allows users to create scripts and programs by using visual blocks, even if they do not know any programming language.

Blockly includes everything you need for defining and rendering blocks in a drag-n-drop editor. Each block represents a chunk of code that can be easily stacked and translated into code.

### What you'll build

MusicMaker, a web app where you can program buttons to play different sounds, using Blockly.

<Image
  src="/images/codelabs/getting-started/play_mode.png"
  alt="image"
  className="codelabImage"
/>

<Image
  src="/images/codelabs/getting-started/d4_three_times.png"
  alt="image"
  className="codelabImage"
/>

### What you'll need

- A browser
- A text editor
- Basic knowledge of HTML, CSS and JavaScript

This codelab is focused on Blockly. The app structure, non-relevant concepts and code are glossed over and are provided for you to simply copy and paste.
