Introduction to Workspaces

4:58 with Joy Kesten

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.

Teacher's Notes
Video Transcript
Downloads

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>

0:00
[MUSIC]
0:04
[SOUND] Hi, my name is Joy.
0:06
And in this course you're going to be learning how to chain some code to
0:10
begin building your own webpage.
0:13
I'll begin by introducing you to a cool programming tool we have here at
0:17
Treehouse, called Work Spaces.
0:20
And then show you what we're going to be building.
0:22
Let's take a look.
0:24
Before moving into the code, the first thing you're gonna wanna know how to do,
0:28
is open up workspaces.
0:31
You do that by clicking here, next to the video, and press Launch It.
0:36
Don't worry if this page looks a little different than what you're seeing now.
0:40
It's only because you're seeing the newest version of the website.
0:44
In your workspace, you'll find some pre loaded code, ready for you to work with.
0:48
If for some reason, when you open it up and it looks like this,
0:52
just press on the index.html file, and the code will appear right away.
0:59
While you're coding, keep in mind that computers don't have ears, and
1:02
can't hear you.
1:04
However, you can talk to computers, if you speak in a language they can understand.
1:10
You do this through computer code, such as HTML or CSS [SOUND].
1:15
While your computer may never hear your voice,
1:17
[SOUND] you will be able to transfer your thoughts through writing.
1:21
[BLANK_AUDIO]
1:23
This is what the code looks like in workspaces, and
1:26
this is what the code looks like when you preview it in the browser.
1:31
The code in your workspace is for you to do whatever you want.
1:35
While it may look foreign at first, you'll be pleasantly surprised that
1:38
nearly everything is written in plain English, and means exactly what it says.
1:44
Here at the top is the head section.
1:47
And below that is the body section.
1:50
You will also notice that it says text align, and then center.
1:55
I bet you're savvy enough to think this bit of code is going to
1:58
align some text in the center.
2:00
And you'd be absolutely correct.
2:02
You can also expect the color to be green, which in fact it is.
2:07
Amazing.
2:08
Things here are logical.
2:10
I can assure you, they continue to be logical all the way through.
2:15
One thing that may not have occurred to you yet, is to save your work, and
2:19
do it frequently.
2:21
Whenever you make changes in your workspace, it's important to save your
2:26
changes by using the shortcut keys, Cmd + S on a Mac, or Ctrl + S on a PC.
2:31
Or you can always go to the File menu, and then scroll down to Save.
2:35
After you save,
2:36
you can view your changes in the browser, by using the Preview button.
2:40
Be sure to save and view your changes frequently during the editing process.
2:48
If at any time you feel like you want to start again, you can copy and
2:52
paste a fresh version of the code into your workspace, by selecting the code from
2:56
the teachers notes, and pasting it back into the workspace.
3:01
I'll show you what I mean.
3:02
I'll delete these lines of code here.
3:05
But now my page doesn't look very good, and I decide I want them back.
3:09
All you have to do, is copy and
3:11
paste the code in the teachers notes, back into the workspace, and start again.
3:16
I'll use the shortcut keys to make it faster.
3:20
On a Mac, you can use Cmd+C to copy, and Cmd+V to paste.
3:25
On a PC, it's very similar.
3:28
Only use Ctrl+C and Ctrl+V.
3:30
Don't forget to save and refresh the browser, to see your changes.
3:35
Okay.
3:36
One more structural feature I'll point out before leaving you to experiment.
3:41
HTML code needs opening and closing tags around nearly everything you'll do.
3:46
You can think of these tags as explaining your writing.
3:50
In school, you're often taught to put the title at the top of the page, and
3:54
your name somewhere in the upper right hand corner.
3:56
HTML documents work much in the same way.
4:01
These headlines tags tell it to be a big bold headline.
4:05
And here I did the same thing for the author.
4:08
Around each paragraph, I used a paragraph tag.
4:12
Try editing the content between each pair of tags.
4:15
Like changing my name to your name.
4:18
And we'll learn more about tags and HTML structure in the next few videos.
4:23
Okay, enough talk, let's get started.
4:26
Try and change anything and everything preloaded into your workspace.
4:30
You might wanna start by changing the content of the page,
4:33
such as my name to your name, and the title.
4:36
But you could also see what each feature does, and
4:38
if it still works when you delete or duplicate parts of the code.
4:42
When you're done, or if you need help at any time,
4:45
the next series of videos will walk you step by step through each line of code.
4:50
Dont worry if you've never written a single line of code before.
4:52
Just enjoy, have fun, and keep in mind if you haven't broken it,
4:56
you're not playing hard enough.
4:57
Good luck.

You need to sign up for Treehouse in order to download course files.

Treehouse Club: HTML

Introduction to Workspaces

Code For Copy/Paste:

Sign in