Skip to content

Instantly share code, notes, and snippets.

@jdx
Last active August 29, 2015 14:09
Show Gist options
  • Save jdx/0ec85c3ec9a8014d2146 to your computer and use it in GitHub Desktop.
Save jdx/0ec85c3ec9a8014d2146 to your computer and use it in GitHub Desktop.
Santa Monica TV part 2

In this first section, I will be building the HTML and CSS for the application to create a non-functional mockup.

To begin, I'll start with the structure of the app and write all of the HTML.

HTML is made up of 'tags'. A tag has 3 parts, a beginning and closing tag with any text in the middle. This is an h1 or header tag. It is used to title pages.

<h1>Welcome to our game!</h1>

There are other types of header tags, h1, h2, through h6. As the number increases, the text gets smaller. If I change it to h3, you can see it get a bit smaller.

Now let's add a p or paragraph tag for the help text.

<p>Guess a number</p>

Now add an input tag which is a textfield for the user to enter their guess.

<input></input>

And we need to give the user a button they can click on when they make a guess.

<button>Guess!</button>

Our HTML is now complete, but it doesn't look very pretty. Let's add some color and personality to the game with CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment