Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn the basics of Workspaces and how to set up an HTML document.
-
0:00
The language we're gonna focus on in this stage is HTML.
-
0:04
HTML stands forHyperText Markup Language, and
-
0:07
it will build the foundation of our website.
-
0:11
HTML is just used for content, so it'll help us build the structure of
-
0:15
our game but it won't allow us to customize the look or functionality.
-
0:20
I'll start by showing you how to open Workspaces.
-
0:23
Don't worry if what you're seeing is different than what I'm about to show you.
-
0:27
It's only because you're seeing the latest and greatest version of the website.
-
0:32
All right, the first thing you're gonna wanna do is launch the Workspace, and
-
0:36
press Launch It.
-
0:39
Once it loads, we're gonna wanna set it up so it's easy to use.
-
0:44
For this course, you can close the console cuz we're not gonna be needing it.
-
0:49
And if for some reason the preloaded code doesn't show up or
-
0:53
you have a welcome message instead, and it looks something like this, you can just
-
0:59
press the index.html file over here in the file tree, and it will open up.
-
1:04
Now that we have everything working,
-
1:07
let's take a look at the code in the browser, and see what we're about to make.
-
1:14
I bet you're sitting at the computer shocked and offended, huh?
-
1:18
Because this course is only about HTML.
-
1:21
I've deleted the paths and files for the CSS and JavaScript.
-
1:26
So you can just look at the HTML by itself.
-
1:30
I know it's not very pretty, but if we've gotten over how terrible it looks,
-
1:35
well let's break down what we have.
-
1:38
There's an image at the top and
-
1:40
a paragraph that gives us directions on how to play.
-
1:44
And then the paragraph that doesn't make any sense and
-
1:48
I'll show you why in just a minute.
-
1:50
Underneath that I have three columns each with the title at the top, and
-
1:55
four text inputs underneath.
-
1:59
And last we have a button that says Tell My Fortune, but it's not gonna work yet.
-
2:04
And that's it.
-
2:05
It's gonna start out nice and easy like this, and there'll be a lot to edit.
-
2:09
But as we get into the CSS and
-
2:11
JavaScript, be prepared because things will ramp up fast.
-
2:15
For now, test your knowledge by taking the quiz then come back for
-
2:19
more as we start to dive into the code.
You need to sign up for Treehouse in order to download course files.
Sign up