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,154