Write introduction

# Example document

## CodeLab Overview

Duration: 0:02:00

Are you trying to create easy to use, visually appealing content for the tech community? This CodeLab will show you how to quickly create your own Google CodeLab just like the one you're using right now.

When creating a Codelab you have two authoring options:

1. Using a Google Doc

1. Using a markdown file

In this codelab we are going to use the second option and author our codelab using a markdown file. This gives us the flexibility of using our markdown file for other things and also storing it in our github repo with any code that might be used for a tutorial.

Here is an example image of another CodeLab that I created:


**Resources:**

* This codelab's original home is located here: [Link to Codelab](https://www.marcd.dev/codelab-4-codelab)

* The markdown for the original codelab is located here: [codelab.md](https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md)

* [Google CodeLabs Tools Github](https://github.com/googlecodelabs/tools) - The repo that contains the claat tool we'll be using today

* [Google Group for CodeLab Authors](https://groups.google.com/forum/#!forum/codelab-authors) - great forum for asking questions about codelabs and discussing future functionality

* [A blog that I used when getting started with Google Codelabs](https://medium.com/@mariopce/tutorial-how-to-make-tutorials-using-google-code-labs-gangdam-style-d62b35476816)

## Environment Setup

Duration: 0:04:00

In order to create a CodeLab you need *Go* and *claat* (the codelabs command line tool) installed.

The instructions below are what worked for me on Mac, but you can also find instructions [here](https://github.com/googlecodelabs/tools/tree/master/claat)

#### Install Go

Install [Go](https://golang.org/dl/) if you don't have it.

You can use Homebrew if you have it on mac

``` bash

$ brew install go

```

More Markdown Parser examples can be found [here](https://github.com/googlecodelabs/tools/tree/master/claat/parser/md).

## Export and Serve

Duration: 0:02:00

Now that you have an initial codelab defined in your markdown file let's go ahead and generate the static site content.

We can export and serve the content locally using the `claat` command that we installed earlier.

``` bash

$ claat export codelab.md

$ claat serve

```

* Your browser should have opened (if it doesn't then try going to localhost:9090 in your browser).

* Choose the directory that matches your "id" that you put in the headers.

* Viola! You should have your first codelab!

## Host Your CodeLab

Duration: 0:01:00

When you ran the `claat export` command you created the static web content needed to host your codelab.

It placed static web content in a directory specified by your unique "id" and you can view it locally by opening the index.html page.

Negative

: Note that when you view it locally by opening index.html some of the graphics may not show up (such as access_time, Next, Back), but they work once online.

Now that you have the static content you can host it however you want.

One option is pushing it to github and serving it up from Netlify.

If you'd like to create your own landing page for codelabs, [like this one](https://codelabs.developers.google.com), there is a tool to do that as well!