Learn to use Codecademy and animate your name in the process!

Welcome to Codecademy!

Are you ready to start coding?

Codecademy is all about learning by doing and by coding. In this lesson, we’ll take you through the basics of how to use Codecademy and show you some of the power of learning to code! 

The section below this text contains instructions about what to do and how to proceed to the next exercise.

Now you'll use a _variable_ to quickly change your program. Variables are used to store some kind of data in a program that can be referenced elsewhere (often more than once).

Variables look different in different programming languages. In the code editor, there's a line that looks like this:
```js
message = 'Change the message!';
```
This line creates a `message` variable and stores the `Change the message!` text in it.

Later in the program, `message` is used to reference that text inside `drawName()`, meaning that the `message` text appears on the screen.

Changing Variables

Part of the power of coding is that small changes can create big impacts. Now that you've experimented with changing the color and text, it's time to experiment with the animation itself!

Change Physics!

The text is now displayed in multiple colors! There is a new variable named `letterColors` with a list of color variables inside brackets (`[]`)separated by commas (`,`).
```js
letterColors = [red, orange, green, blue, purple];
```
The displayed text in the browser panel will cycle through the values in `letterColors` in order when `drawName()` is called with `letterColors`.

Learning to code is all about experimentation&mdash;trying out new code and observing the result! As you experiment, you may want to reset your code to the starting state. This can be done with the reset button at the bottom of your code editor:

<img src="https://content.codecademy.com/courses/welcome/reset-code.png" style="width:50px"/>



Multiple Colors

Congratulations, you're ready to take on your next Codecademy lesson!

<TBD depending on next steps in onboarding flow....>


Onward

The code in the editor panel is written in a programming language known as JavaScript, but that detail isn't too important right now&mdash;it's time to start writing your own code!

When you run your code in this exercise, we'll run some tests to make sure that you've added or changed the code correctly. If something's not right, you'll see an error message at the bottom of the code editor. If everything is good, you'll be able to move on!

Write some code!

Okay, time to make this animation more interesting!

In the code editor, `drawName()` now has two items between the parentheses, `message`, and `red`. The text in the browser panel has also turned red!

 `drawName()` is a set of repeatable code that we've defined elsewhere called a _function_. We can _call_ the function, or ask the program to run that code, and pass in different values to see different responses. You already did this when you changed the value of the variables that you used to call `drawName()`. When you call `drawName` with two different values, you can set the message and the display color.

In addition to `red`, we've defined variables that represent some other colors for you to use.