Prototyping UI with Static Websites: How to make a website from scratch

3 min readOct 21, 2015

In this article, you’ll learn how to create a website with behavior and animation. You’ll also learn how to setup a local server so that you can view your interactive site in the browser on your machine.

I want to make a website.

Great! Websites are a great way to prototype a UI.

Do I need a web framework? Do I need git? Do I need a css pre-processor? Do I need a post-processor? Do I need a task runner? Do I need javascript? What about Markdown?

No! All you need is an HTML file, eg. index.html and a CSS file eg. main.css.
You can link your CSS file to your HTML by inserting the following into the head of your HTML file.

<link rel="stylesheet" href="main.css" type="text/css">

How can I view my work?

Open the file with a browser or drag it in and you’ll be able to view your parsed, static HTML with your CSS styles applied.

What’s in the URL bar?

That’s the path of your HTML file.

The URL Bar is like the command line. The command line can be used to navigate to files on your machine.

cd, ls and other command line tricks

How do I use cd and ls?

cd (change directory) takes you to a directory, or folder, on your machine.

ls (list) reveals the filenames within your current directory.

Is this any different from using Finder?

It’s exactly the same!

mkdir (make directory) creates a directory.
touch creates a new file.
cp copies a file to a specific location.
mv moves a file without copying it to a new location.

Using the Command Line to create a directory, copy and move our files.

Why do I need to know this stuff? I’m a well dressed designer not a greasy nerd!

Because then you can setup your own local server to make really cool effects within your static website!

What is jQuery?

jQuery is a JavaScript library. jQuery selectors enable you to select HTML elements and use them as jQuery objects. This is useful because then you can write really simple code that produces neat animations and effects.

Why do I need to setup a local server?

Adding behavior to a website adds complexity. Since we’re endeavoring to do more than just viewing styled markup as we did before, it’s helpful to setup a local server to get our development environment closer to reality.

How do I setup a local server on my machine?

From the command line, cd to your project directory. Make sure you have Apple’s Command Line Tools installed on your machine.
Then run:

$ python -m SimpleHTTPServer

This will automatically serve your site at local port 8000. You can also specify a port by appending the argument to the end of the above command.

How do I add jQuery and JavaScript to my project?

Link them within the <head> of your HTML file.

In this example, my JavaScript file with my jQuery code is called behavior.js

The behavior.js file for the above example looks like this:

$(document.ready(function(){
    $('body').click(function(){
        if ($('.poem').is(':visible')){  
             $('.poem').fadeOut('slow');
             return;
        }
    $('.poem').fadeIn('slow');
    });
});

Next Up

How to deploy a website!

Prototyping UI with Static Websites: Deployment!

I want to share a website.

medium.com

Special Thanks

Thanks to Michelle Kang, Matt Rothenberg and Jared Cosulich for their feedback on this article.