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>

  <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.

HTML

CSS

 

JavaScript

 

Copy of deck

By jimthedev

Copy of deck

  • 1,169