Prototyping UI with Static Websites: How to make a website from scratch
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.
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.
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?
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.
$ 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.
Link them within the <head> of your HTML file.
The behavior.js file for the above example looks like this:
How to deploy a website!