Launching a webserver
It seems like an extra hurdle, but getting a little web server running goes a long way towards being able to test out your code before you upload it to a real web server.
Step 0: Start to organize the files that you’re putting on Digital Storage into a single directory so you can keep track of them.
Step 1: Enable New Terminal at Folder
Step 2: Navigate to the folder that contains your HTML files. Right click on the folder in your Finder window and select “New Terminal at Folder” — it might be in a “Services” sub-menu.
Step 3: Check your directory with
pwd (Just type
pwd at the command prompt and hit return)
Step 4: Launch Python’s Simple HTTP Server with
python -m SimpleHTTPServer
Now you can visit http://localhost:8000 and see your html files served over a little local web server.
Bonus: in another terminal window try running
python --help — see if you can figure out what the
-m flag is doing.
Read the error messages you see and think about what they’re saying. If you see
Firefox can't establish a connection to the server at localhost:8000. that means there’s no server running on port 8000. You might have the port number wrong, or SimpleServer might have stopped running. Luckily, it is easy enough to restart. If you see :
Error code 404.
Message: File not found.
Error code explanation: 404 = Nothing matches the given URI.
that is a clue that either you tried to open a page that doesn’t exist (check the spelling?) or your web server is running from the wrong folder.
The secret truth is that you can load Bootstrap’s CSS library without a web server, but getting used to testing things over a server will pay off in the long run. I promise.
The reason we’re doing it now is so we can include script and CSS files with protocol-relative URLs. Protoco-huh? For now, just trust me. Brocolli is better for you than brownies even though brownies won’t kill you. Drink lots of water, get plenty of sleep and at least a little vigorous exercise, even if you don’t really understand.
body of your page. You need a valid doctype definition and a few particular
Get started with my template, and remember to keep an eye on the heirarchy. Everything but the doctype goes in either the
head or the
body belong inside of
html tags). The
head includes a few
meta tags, a
title and any
link tags that call style sheets. Sometimes you’ll put
script tags in the
head, sometimes you want them right before the closing
body tag. Why? That’s complicated. Almost everything else will go inside the
If you’re using Bootstrap, start by putting everything inside a container div:
(stuff goes here)
You can start adding other elements — paragraphs, a jumbotron or a set of tabs — inside that container.
Quickfloats are handy for pullquotes. You can let them find their own size or use the grid to set their width.
Bootstrap does a lot of fancy footwork to customize layouts on tiny, small, medium and large screens. For now, I suggest that you stick to the
col-md- classes. They’re the most universal. Our goal here is to tell good stories, not master the finer points of CSS layout, with or without Bootstrap.
We didn’t talk much about
anchors, but you’ll need them if you don’t want your content to run together in a great heap. You can wrap paragaphs in
<p> tags manually, but if you want some help with the basic pieces, I’m a huge fan of Mou. You can compose in Markdown, a heavily simplified syntax, and then copy the resulting HTML into a Bootstrap template. Markdown is a very basic language — you can’t do a lot with it, so you can focus on the basics.