- Introduction to Workspaces 4:58
- What Is HTML? 3:07
- HTML and CSS 2 questions
- Comments and Doctype 1:48
- Write a comment in HTML 1 objective
- Comments and the DOCTYPE 3 questions
- The Head 2:57
- The Head Quiz 4 questions
- The Body 1:10
- Body, 1st level headline, and style tags 3 objectives
- Wrap up 0:24
- HTML Structure 4 objectives
Preview
Video Player
00:00
00:00
Introduction to Workspaces
4:58Students will learn how to open up Workspaces and be introduced to the idea that they can edit the code pre-loaded in the Workspace.
[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