This course will be retired on January 24, 2020. We recommend "Introducing JavaScript" for up-to-date content.

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

MASH Introduction with HTML

1:52 with Joy Kesten

Learn about the basics of HTML, forms, and working with JavaScript and CSS in mind. 

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">

  <title>MASH</title>
  <link href="" rel="stylesheet">
  <link href="" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="img/mash-logo.svg" /></h1>
  <p class="description">Fill in the blanks and your future will be foretold.</p>

<form action="" method="post" id="mash">

<div id="answers" class="hide">
  <p>Your home is in <span id="location"></span> with a <span id="pet"></span> as you are a <span id="profession"></span> who owns a <span id="home"></span>.
 </div>
<div class="bucket">

 <div class="choice-bucket">
   <h4 class="highlight">Where will you live?</h4>
    <input name="location[]">
    <input name="location[]">
    <input name="location[]">
    <input name="location[]">
  </div>

  <div class="choice-bucket">
    <h4 class="highlight">Your future profession?</h4>
      <input name="profession[]">
      <input name="profession[]">
      <input name="profession[]">
      <input name="profession[]">
  </div>

 <div class="choice-bucket">
    <h4 class="highlight">What's your future pet?</h4>
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
      <input name="pet[]">
  </div>

</div>

 <input type="submit" value="Tell my fortune">
</form>  
<script src=""></script>
</body>
</html>
  • 0:00

    [MUSIC]

  • 0:04

    Hi, my name is Joy, and

  • 0:06

    I'm excited to show you a little game I built called Mash.

  • 0:10

    It's a future telling game you can play again and again.

  • 0:13

    As usual in club courses, the code works beautifully already, but

  • 0:17

    it's up to you to mash it up and make it your own.

  • 0:21

    In this stage, you'll learn a bunch of new HTML code and

  • 0:24

    prepare the HTML to be used with CSS and JavaScript.

  • 0:29

    Let's take a look at the code and figure out what to do first.

  • 0:33

    For those of you that have never played Mash before,

  • 0:36

    here's a little preview of the game.

  • 0:38

    Mash stands for Mansion, Apartment, Shack, and

  • 0:41

    House, and if you fill in the blanks, your future will be foretold.

  • 0:46

    Now at the top of each column, there's a question, and

  • 0:49

    below are some text inputs for you or a friend to put your answers.

  • 0:55

    Then you press this button here at the bottom, and

  • 0:58

    your future will be told in a sentence at the top.

  • 1:03

    Now let's dive into the code and see what this looks like.

  • 1:07

    We'll start by changing the content, questions, and

  • 1:10

    number of input in each category.

  • 1:13

    So all the stuff in gray, and then how many text areas you want in each column.

  • 1:20

    Next, you'll play with some new HTML tags like form, div and span.

  • 1:26

    And lastly, we'll talk about how to set up our HTML so

  • 1:30

    it'll be ready when we want to add style and functionality.

  • 1:33

    Now, in this course, we're not going to worry about style and functionality.

  • 1:37

    So, not to disappoint and I hope you're ready, but

  • 1:40

    this is what the code is gonna look like at the end of this project.

  • 1:45

    This is just the HTML.

  • 1:48

    Stay tuned for all three courses and build a fun game for you and your friends.

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

Sign up