PFC Wiggins's Unofficial Commissary: An Undead Institute HTML & CSS Workbook: Undead Institute, #6.5

By John Rhea

Put those zombie fighting skills to the test with this workbook featuring PFC Wiggins's side hustle and skills you've learned in the first six books from the Undead Institute.

 

You'll build a website for PFC Wiggins's Unofficial Commissary, a source of cheese, "meat" and other goods for humanity's compulsory, post-apocalyptic armed forces. With nothing but your wits and web skills you'll take the website from a blank page through creating a fully functional, responsive website.

 

You'll be guided step by step through creating the underlying HTML, using CSS to add color and design and layout, addressing some usability issues, building forms, adding a CSS "boss" mode and converting the site into a responsive design so that it'll work in any size browser.

 

While anyone possessing a penchant for silliness and zombies with HTML and CSS knowledge should be able to build this website, the six books this workbook was made to accompany are

• A Beginner's Guide to Learning HTML (and Smacking Zombies Upside the Web Development)
• Beginner CSS: Like Putting Lipstick on a Zombie
• Beginner Usability: A Novice's Guide to Zombie Proofing Your Website
• HTML5 Forms & Interactive Elements: Or How to Poke a Zombie in the Eye
• Advanced CSS: Zombie in a Cocktail Dress
• Responsive Design: An Undead Introduction to Mobile Web Development

Or if you bought them in their boxed set versions  (same books, packaged differently) they go along with

• My First Webpocalypse: A Beginner's Guide to HTML, CSS, and Usability
• Humanity's Second Chance: HTML Forms, Advanced CSS, and Responsive Design

So get off your keister and let's start taking down some zombies!

• Language: English
• Publisher: John Rhea
• Release date: Jan 1, 2021
• ISBN: 9781386049142

Book preview

Before You Start The Zombie Beat-Down

This workbook is a companion to six books from the Undead Institute, but can be accomplished by anyone with knowledge of HTML and CSS.

The six books include

A Beginner’s Guide to Learning HTML (and Smacking Zombies Upside the Web Development)

Beginner CSS: Like Putting Lipstick on a Zombie

Beginner Usability: A Novice’s Guide to Zombie Proofing Your Website

HTML5 Forms & Interactive Elements: Or How to Poke a Zombie in the Eye

Intermediate CSS: Zombie in a Cocktail Dress

Responsive Design: An Undead Introduction to Mobile Web Development

You can find out more about these books at https://undead.institute or grab a virtual boxed set of the first three, My First Webpocalypse: A Beginner’s Guide to HTML, CSS, and Usability, and/or the second three Humanity’s Second Chance: HTML Forms, Intermediate CSS, and Responsive Design.

Welcome to the Zombie Fight

While the military, post zombie apocalypse, has done a good job of providing their drafted recruits with some of the comforts of home, they’ve left plenty of necessities off the list (and not just because zombies have overrun most manufacturing centers). PFC Wiggins set up his shop to fill this gap among the citizen militia, offering potted meats; gags; comic books; and, for the adventurous, canned cheese.

His inventory has grown too large to keep in his footlocker, so he wants a website to display his products and make it easier for him to sell to the new recruits.

Your mission is to build a website that facilitates his contact with customers while not implicating him in the site, should an officer see it.

Download the starter files

Case Study #1 - Smacking Zombies: Creating the Index Page

Based on: A Beginner’s Guide to Learning HTML (and Smacking Zombies Upside the Web Development)

Download the starter files so that you have the images and other files referenced throughout these case studies.

Let’s start with the basics. Open your favorite text editor. If it doesn’t open a new, blank file automatically, create one, and save it as index.html.

Night of the Living Tip:

Some good, cross-platform, free editors are Visual Studio Code and Atom, but any plain text editor will work. Look for one with code highlighting, though. It color codes different parts of code and makes it easier to catch errors.

In the text editor, add an HTML5 Doctype and an html element. Inside the HTML element, place a head element and a body element. Add a title tag in the head with the text The Unofficial Commissary – Home (sans quotation marks, in fact you can ignore all quotation marks unless)

In the body element, add a header element and a h1 element within it. Within the h1 tags, add the text "The Unofficial