Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Students will learn how to open up Workspaces and be introduced to the idea that they can edit the code pre-loaded in the Workspace.
Code For Copy/Paste:
<!DOCTYPE html>
<html>
<head>
<title>Argh</title>
<meta charset="utf-8">
<style>
h1 {text-align: center; color: green}
h2 {text-align: center; color: pink}
</style>
</head>
<body>
<h1>Peg Leg</h1>
<h2>By Joy Kesten</h2>
<p> Well everything was fine I woke up this morning though and my leg was completely numb. I didn't think much of it so I sat up on the side of my bed, leaned over to grab the nearest pair of pants off the ground, opened them up and began to put my legs in when I realized that one if my legs had fallen off in my sleep. This wasn't the first time, so I kept cool used a broom handle and some random sticky substance I found under my work bench and began to fashion a peg leg. </p>
<p>I hobbled into my pants and scurried off to work cause I didn't want to be late. I use the word scurry loosely, as it proved to be more challenging than I had anticipated to get to work on time. I sat in my car and attempted in vain to start the motor until the battery gave out to the last few churns of the engine. Feeling a bit defeated, I turned it around and looked at it as an opportunity to go green to work today. </p>
<p>I put on my running shoes and began jogging to work, in an effort to make this as an opportunity to get to work and stay in shape at the same time! I was turning the first corner when I heard a dog barking behind me. By looking at the measure of his mouth and the blood lust in his eyes the 200 lb behemoth didn't look as though he wanted to lick my face.</p>
<p>This is when I took to testing the limits of my physical capacity. I couldn't for the life of me think while I was frantically running away why this giant creature would be trying to devour my bones. Then suddenly dog after dog began to follow suite until I literally had a dog parade in pursuit of me. Luckily I was in peak physical condition and made it to work and through the doors just quick enough to slam it behind me only to watch the glass get covered in a slimy layer of slobber. As I held the door closed with my makeshift peg leg against the door I realized that my broom handle wasn't a broom handle at all but in my sleepy fog I had mistakenly fashioned a peg leg out of the nearest dog bone. As I lay there attempting to catch my breath and laughing at the stupidity of my mistake to fashion a peg leg so carelessly. I figure I ought to make an appointment to see a doctor.</p>
</body>
</html>
[MUSIC]
0:00
[SOUND] Hi, my name is Joy.
0:04
And in this course you're going to be
learning how to chain some code to
0:06
begin building your own webpage.
0:10
I'll begin by introducing you to a cool
programming tool we have here at
0:13
Treehouse, called Work Spaces.
0:17
And then show you what we're going to be
building.
0:20
Let's take a look.
0:22
Before moving into the code, the first
thing you're gonna wanna know how to do,
0:24
is open up workspaces.
0:28
You do that by clicking here, next to the
video, and press Launch It.
0:31
Don't worry if this page looks a little
different than what you're seeing now.
0:36
It's only because you're seeing the newest
version of the website.
0:40
In your workspace, you'll find some pre
loaded code, ready for you to work with.
0:44
If for some reason, when you open it up
and it looks like this,
0:48
just press on the index.html file, and the
code will appear right away.
0:52
While you're coding, keep in mind that
computers don't have ears, and
0:59
can't hear you.
1:02
However, you can talk to computers, if you
speak in a language they can understand.
1:04
You do this through computer code, such as
HTML or CSS [SOUND].
1:10
While your computer may never hear your
voice,
1:15
[SOUND] you will be able to transfer your
thoughts through writing.
1:17
[BLANK_AUDIO]
1:21
This is what the code looks like in
workspaces, and
1:23
this is what the code looks like when you
preview it in the browser.
1:26
The code in your workspace is for you to
do whatever you want.
1:31
While it may look foreign at first, you'll
be pleasantly surprised that
1:35
nearly everything is written in plain
English, and means exactly what it says.
1:38
Here at the top is the head section.
1:44
And below that is the body section.
1:47
You will also notice that it says text
align, and then center.
1:50
I bet you're savvy enough to think this
bit of code is going to
1:55
align some text in the center.
1:58
And you'd be absolutely correct.
2:00
You can also expect the color to be green,
which in fact it is.
2:02
Amazing.
2:07
Things here are logical.
2:08
I can assure you, they continue to be
logical all the way through.
2:10
One thing that may not have occurred to
you yet, is to save your work, and
2:15
do it frequently.
2:19
Whenever you make changes in your
workspace, it's important to save your
2:21
changes by using the shortcut keys, Cmd +
S on a Mac, or Ctrl + S on a PC.
2:26
Or you can always go to the File menu, and
then scroll down to Save.
2:31
After you save,
2:35
you can view your changes in the browser,
by using the Preview button.
2:36
Be sure to save and view your changes
frequently during the editing process.
2:40
If at any time you feel like you want to
start again, you can copy and
2:48
paste a fresh version of the code into
your workspace, by selecting the code from
2:52
the teachers notes, and pasting it back
into the workspace.
2:56
I'll show you what I mean.
3:01
I'll delete these lines of code here.
3:02
But now my page doesn't look very good,
and I decide I want them back.
3:05
All you have to do, is copy and
3:09
paste the code in the teachers notes, back
into the workspace, and start again.
3:11
I'll use the shortcut keys to make it
faster.
3:16
On a Mac, you can use Cmd+C to copy, and
Cmd+V to paste.
3:20
On a PC, it's very similar.
3:25
Only use Ctrl+C and Ctrl+V.
3:28
Don't forget to save and refresh the
browser, to see your changes.
3:30
Okay.
3:35
One more structural feature I'll point out
before leaving you to experiment.
3:36
HTML code needs opening and closing tags
around nearly everything you'll do.
3:41
You can think of these tags as explaining
your writing.
3:46
In school, you're often taught to put the
title at the top of the page, and
3:50
your name somewhere in the upper right
hand corner.
3:54
HTML documents work much in the same way.
3:56
These headlines tags tell it to be a big
bold headline.
4:01
And here I did the same thing for the
author.
4:05
Around each paragraph, I used a paragraph
tag.
4:08
Try editing the content between each pair
of tags.
4:12
Like changing my name to your name.
4:15
And we'll learn more about tags and HTML
structure in the next few videos.
4:18
Okay, enough talk, let's get started.
4:23
Try and change anything and everything
preloaded into your workspace.
4:26
You might wanna start by changing the
content of the page,
4:30
such as my name to your name, and the
title.
4:33
But you could also see what each feature
does, and
4:36
if it still works when you delete or
duplicate parts of the code.
4:38
When you're done, or if you need help at
any time,
4:42
the next series of videos will walk you
step by step through each line of code.
4:45
Dont worry if you've never written a
single line of code before.
4:50
Just enjoy, have fun, and keep in mind if
you haven't broken it,
4:52
you're not playing hard enough.
4:56
Good luck.
4:57
You need to sign up for Treehouse in order to download course files.
Sign up