Welcome!

Hi, my name is Jim

Instructor at The Iron Yard

Developer

Father and Husband

Commitizen author

Formerly a cart pusher & corn picker

You might feel like this about programming...

We want you to feel like this...

Let's code!

Let's start with a sentence.

The big green ball bounces when I drop it.

Shamelessly obtained at:

https://mikepayne.co/2013/the-big-green-ball-analogy/

The big green

bounces when I drop it.

ball

HTML

HTML: Allows us to name items.

ball

<ball>

</ball>

An item in HTML

The basket has two eggs in it.

Nested items in HTML

<basket>

</basket>

<egg></egg>

<img src="photo.png">

Built in,

visual HTML tags

<img>

<ball>

</ball>

Special Attributes

<ball class="big">

</ball>

<ball class="big green">

</ball>

Let's try it in the browser.

The ball

bounces when I drop it.

big green

CSS

CSS: Describes the ball, visually.

big

CSS

.big

.big {

font-size: 20px;

font-weight: bold;

}

Back to the browser!

.green {

background-color: green;

}

CSS

The big green ball

bounces when I drop it.

JavaScript

Describes how the ball behaves.