Know how files work already? Skip to the Project Overview
A Horde of Files
Before we talk about code, let’s talk about files. You can think of a computer file as a single zombie. That zombie has some information, like which horde he’s in and perhaps a poem or two if he’s a more artistic zombie. Each zombie is part of a zombie nest (i.e., the group of zombies that shuffles after humans together). A nest is kind of like a computer folder. It’s a way of structuring and gathering zombies together to make them easy to find.
For example, if you’re Bob the supreme zombie commander in charge of shuffleboard tournaments and defeating humanity, you need to know where you can find Jamal, Fred, and Maria. If you know which nest they are in, it’s much easier to narrow your search to that particular nest. You’ll search through twelve or fifteen zombies for Jamal, Fred, and Maria rather than searching through 12.5 million zombies for Jamal, Fred, and Maria (plus you’re less likely to find the same or similarly named zombies in the nest).
Now, if you had a powerful zombie search tool that could quickly and easily pull up Jamal, Fred, or Maria out of the 12.5 million zombies, you wouldn’t need to narrow your search to a nest or folder. While these types of search tools make life much easier for Bob (and for you when you’re trying to find a file), in web development, we don’t usually have the luxury to search like that on a page-by-page level.
A web page itself is like a zombie nest commander who can only find the zombies/files in his nest/folder. If the zombie isn’t a part of his nest, he can’t find it. So too are the files of a web page. They can easily find other files in their same folder, and they can even look for files/zombies in a different folder/nest as long as you tell them what folder/nest to look in, but unless you localize the search to a particular folder/nest, they won’t know how to find it.
Apocalyptic Code Editors
Let’s talk for a second about code editors. You don’t need anything fancy to write HTML or CSS code. You can use Notepad in Windows or TextEdit on your Mac (in plain-text mode). Any plain-text editor will work, but one that color codes your code can be really useful in finding errors and getting an idea of the different types of code involved. Great free options are Notepad++ (Windows only), Atom (any system), and Visual Studio (VS) Code (any system). You can also do most of this work with a free website, codepen.io. I say most because you can do all the internal page stuff (everything inside the body), but because you’re already within a web page, you can’t do all the page level stuff (e.g., head, body, etc.).
Night of the Living Tip:
If you choose to do this in CodePen: (If you’re not doing this in CodePen, just move along, nothing to see here.)
- Register for a free CodePen account so you can save your work
- Skip the DOCTYPE, html, head, and body elements
- Put your CSS in the CSS box instead of a style element
- Create individual CodePens for the index and bio pages
- Use the urls of the bio and index page CodePens in your navigation
Building Your First Website
In this book, we’ll create a simple website using HTML and CSS (and smash the snot out a few zombies while we’re doing it).
You’ll find a zip file with a starter HTML file, the content, and the image we’ll be using at https://undead.institute/files/byfw/starter.zip
or grab them individually:
(If you load the individual files you will need to go to File -> Save As on each one and save them to your computer.)
Our website will consist of two pages and will feature an essay by professor and zombopsychologist Dr. Alistair Boople entitled “No, Zombies Are Not Your Friends, and Do Not Believe Them Even If They Say They Are.” The essay will be on the main page, and the second page will be a short bio for Dr. Boople and will include his Steps to Resisting a Zombie’s Frieeendship™. The final site will look like this:
and
We’ll start by creating the HTML of each page (the structure or skeleton of the page). We’ll then add some CSS, which you can think of as the design or the flesh and clothes of the web page. It’s the look and feel, colors, fonts, layout, and more.
To Be Continued in Part 2
