The Chicago Hot Dog Tutorial

Today we're going to learn how to build a basic HTML page. This workflow is much more complicated and sophisticated on bigger sites, but we're going for the foundations. If you want to learn more, see the last steps of this tutorial for recommendations.

Step Zero: Getting set up to work

A. Set up a project folder

Create a new folder called "Chicago-Dog-Site" and save it to your Desktop for today. (Or grab the Step 0 folder from the example files.)

B. Open your text editor

C. View your page: Let the browser translate your site

Opening the file from Finder (or Windows Explorer) will work well enough for today, or whenever you are trying to do something simple with basic HTML and CSS, but it is not a good long term practice in the world of web development. See Step 8 for directions on how to run a simple web server off of your computer.

  1. Navigate to your new index.html in Finder.
  2. Open index.html with Chrome.


Step 0 (zip)


Step One: Basic HTML tag structure

Basic web page structure

This sets up your HTML page and is about as basic as a web page can be.

Note the <head> which contains information related to your site that you don't see in the browser, and <body> which contains the stuff you DO see.

1. Copy and paste in the basic structure for your page into index.html. You'll want to overwrite the "Hello, world!" that you typed in earlier.

<!doctype html>
<html lang="en">

    <!-- 
        Documentation Comment 
    -->

    <head>
        <title>The Chicago Dog</title>
        <meta charset="utf-8">
        <meta name="description" content="This 50-60 character description is what will appear under your link in search engines.">
    </head>

    <body>
        <div id="container">
            <h1>Hello, world!</h1>
        </div>
    </body>

</html>

2. Now fill in your name, date and any other relevant information where it says Documentation Comment. Anything between the <!-- and the --> is a comment and will only be seen by you in the code, and will not appear on the screen.

3. Save index.html and refresh your browser.



Step 1


Step Two: Markup text with HTML tags   ➳

0 | 1 | 2 | 3 | 4 | 5-6 | 7-8