Building a static website

Wild Series-1.2 Build a one page website

Thinking about Design and Purpose

Once you have your tools you need to think about what type of website you want to build.

Ask yourself:

  1. What content will it display?
  2. Who is my website for?
  3. How big will this project be?
  4. What code will I use?
  5. What will my website map look like?

For level #1:

  1. Static text and images.
  2. Ourself for learning purposes.
  3. One or more pages.
  4. Completely static with just HTML and CSS
  5. Completely flat with only one folder

Now that we have our design parameters we can build the first page.

Creating a blank template

The first step is creating a blank template. A blank template contains the minimal amount of code for valid HTML. Less code can render but may not work with older browers. Here is our template:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Name of your website or page</title> <link rel="icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="/css/styles.css" /> </head> <body> </body> </html>

Copy the template code and save into a text editor. Here are two options; If using notepad:

  1. Create a folder in C://Users/Your_Name/Documents called "My Website".
  2. The path to this folder is now C://Users/Your_Name/Documents/My Website.
  3. Open notepad
  4. Paste html exactly as shown
  5. Name file "blank.html"
  6. Save as file type "All files"
  7. The path to your html template is now C://Users/Your_Name/Documents/My Website/blank.

If using Sublime:

  1. Create a folder in C://Users/Your_Name/Documents called "My Website".
  2. The path to this folder is now C://Users/Your_Name/Documents/My Website.
  3. Open Sublime
  4. Paste html exactly as shown
  5. Name file "blank"
  6. Save as file type "html,htm, xtml, shhtml, etc..."
  7. The path to your html template is now C://Users/Your_Name/Documents/My Website/blank.

Both options will save your document as a html that will open in your default browser by double clicking it.

Creating Your First Page

Let's make our first page say,"Hello World!":

  1. Open text editor.
  2. Click file in upper left corner then select open file.
  3. Browse folders to find blank.html or type C://Users/Your_Name/Documents/My Website/blank.
  4. Once you have found blank.html open it with your text editor.
  5. Type "Hello World!" between the body tags.
  6. Press and hold ctrl + shift, while holding press s.
  7. This will open the "save as" dialog box. Save as "index".
  8. Close editor.
  9. Go to your website folder
  10. Inside your folder will be two files, blank.html, and index.html
  11. Double click index.html

Once you double click index.html a browser window will open it. You will see a blank white page saying "Hello World!". This is your first webpage, congrats!

This concludes Level #1: Building a static website. Continue to Level #1: Hosting a Website