Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Workspace Basics and Setting Up Your HTML

2:22 with Joy Kesten

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