My First Webpocalypse: Beginner HTML, CSS, and Usability (Virtual Boxed Set): Undead Institute

By John Rhea

Get your boring technical books somewhere else. This virtual boxed set is a 1, 2, 3 punch of web development goodness. It'll have you stopping the apocalyptic horde with your HTML, CSS and Usability skills in no time.

The My First Webpocalypse: Virtual Box Set includes the books

• 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

How You'll Learn to Smack Zombies Around

You won't just passively take in the view, like a zombie shuffling across the mainland. You'll have plenty of combat practice with analogies, examples, and code tutorials you can build, break and fix again. Working with your hands and your head you'll craft code that pleases the eye and knocks a zombie into last Tuesday.

All the code and directions are provided as both codepen tutorials and downloadable html files, so you can fight the apocalypse how and where you like. You can work with them on the codepen site or on your own device.

And later you'll bring those skills together in a final project that cements those skills into zombie smashing muscle memory.
 

Why Zombies?

Are zombies just a gimmick? Why would this be any better than a straight-laced book that sticks to the facts?

 

Straight-laced books are often straight boring. And if you have insomnia problems go buy that book. The author, John, has read the boring books and knows that staying awake and engaged are also important for learning. But this book uses zombie references and analogies not just to make you smile, but to help the material stick. If a tough technical concept is related in silly terms you understand, like a zombie trying to buy gum at a super market, it's much more likely to stay in that brain those zombies are intent on eating.

• Language: English
• Publisher: John Rhea
• Release date: Sep 11, 2020
• ISBN: 9781393409380

Book preview

My First Webpocalypse

A Beginner’s Guide to HTML, CSS, and Usability

by John Rhea

Published by The Undead Institute

Table of Contents

Front Matter

Title Page

Copyright

Content Warning (for Silliness)

Four Word

Free Zombie HTML Cheat Sheet

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

HTML: A Zombified Definition

Zombie Nests

Shuffling Your Way through a Document

Zombie Headings Will Roll

Listing the Undead

Descriptively Defining the Undead List

Deadly Attributes

Connecting Zombies

A Picture Is Worth a Thousand Moans

Audio/Visual Domination

Structural Zombies

Going Beyond Content

Use Your Head

Symbolizing Braaains

Taking a Table to the Face

Merge and Flow with the Horde

Assembling the Undead Monster

Beginner CSS: Like Putting Lipstick on a Zombie

Zombie Lipstick

Stopping the Spread of the Contagion

Selecting Your Target

Painting the Zombie Town Red

Hitting the Zombie in the Font

Boxing the Zombies Out

Zombie Photo Backgrounds

Zombie-Chopping Layouts

Killer Browser Differences

Checking Your Lipstick in the Mirror

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

Useful Zombies

Apocalyptic Expectations

The Frustration Index

Frustration 1: Color by Zombie

Frustration 2: Standing out from the Horde

Frustration 3: Click the Zombie

Frustration 4: Kill the Click Here

Frustration 5: Scaling the Undead Walls (of Text)

Frustration 6: Contagion is Too Small to See

Frustration 7: Improper Apocalyptic Alignment

Frustration 8: Suffocated Text Shouldn't Live on

Frustration 9: A Busy, Busy Horded Mess

Frustration 10: The Inconsistent and the Undead

Frustration 11: Tag, Zombie, You're It

Frustration 12: Undead Images

Frustration 13: A Zombie’s Alternate Text

Frustration 14: Horde Structure

Frustration 15: Can't Find it on the Post-Apocalyptic Map

Frustration 16: Zombie Placement

Frustration 17: Anonymous, Erroneous Zombies

Frustration 18: Proofread, Proofundead, Proofread

Maintaining the Apocalypse

Lowercase Letters and Lower Class Zombies

Undead Special Characters

The Zombie Files

(In)Denting Zombies

Crash Test Zombies

The Next Zombie Offensive

Appendices

Resources

Glossary

About the Author

Preview of Intermediate CSS: Zombie in a Cocktail Dress

Free Zombie HTML Cheat Sheet

© 2018-2019 by John Rhea. All rights reserved. This book or any portion thereof may not be reproduced or used in any manner whatsoever without the express written permission of the publisher except for the use of brief quotations in a book review.

Distributed by the Undead Institute a division of StoryLab LLC

Note: If you’re reading this on an e-ink screen you may want to set it to update on each page load, otherwise artifacts from previous pages may remain and be visible within some of the images.

You Know What Else Kills Zombies?

Honest feedback. Enjoyed the book? Found an error or an omission? Still confused about something? Want to complement the author’s sense of humor (or lack thereof)? Email John directly at [e-mail]

Content Warning

(for Silliness)

This book contains a large amount of information, zombies, silliness, and a sense of humor that some would call terrible. If you’re looking for straight technical information or a cure to your insomnia, this is not the book for you.

If you’re looking for a book that’s accessible to those without technical training or inclination and/or don’t mind laughing a bit while you’re learning, this book is for you. We at the Undead Institute believe that getting braaains should be fun. Join us and let’s stop those smelly zombies once and for all! (No, seriously. Their breath is terrible.)

Four Word

Hey! Stop that Horde!

Get a Free Zombie HTML Cheat Sheet

Zombie HTML Cheat Sheet

When you sign up for Webpocalypse Weekly, our email newsletter. This printable cheat sheet covers the most used and useful HTML tags, giving you explanations and examples of how, when and where to use each element. Write HTML easily with your very own Zombie HTML Cheatsheet

https://undd.link/htmlcheatsheet

A Beginner’s Guide to Learning HTML

(and Smacking Zombies Upside the Web Development)

by John Rhea

Published by The Undead Institute

You’ve seen zombies on TV and the Internet before, but I bet you also saw people hitting them with baseball bats or using shotguns. I’m here to tell you, the only real way to kill zombies is with websites. Crazy, you wonder? Yes. Crazy true.

Like my grandmother used to say, The only way to stop a horde of people shuffling through life, moaning about inconsequential problems, and trying to infect you with their apathy is a well placed cane to the kneecaps. Well... that and ideas. Websites are a bundle of code and images and interactivity. What better way is there to communicate ideas?

HTML: A Zombified Definition

Without a skeleton even the best human-resistance fighter would be a puddle of color and wasted life, and so would your web page. Hypertext Markup Language (HTML) is that skeleton. It provides the structure for your web page. It builds the relationship between the parts of your page and allows you to identify and categorize the pieces of content on your page.

HTML provides this structure through tags. Dog tags identify a particular soldier in the resistance. Toe tags designate a dead body or, more likely, a future zombie. HTML tags identify a type or format of content such as a paragraph, heading, bolded text, list, and so on.

Note: There are two words used in this book and throughout web development for a unit of HTML: tag and element. Tags specifically means the opening and/or closing piece of an HTML element. Whereas an element includes the opening tag, any attributes set on the opening tag, the content between the opening and closing tags, and the closing tag itself. While these terms are not interchangeable, being so closely related, they are often used interchangeably or seemingly interchangeably. For instance, when speaking about what an HTML paragraph does, the difference between the tag and element is unimportant and could even be called splitting hairs, however, when looking at them in a document they designate different things and shouldn't be conflated.

Let's look deeper at the four pieces of an HTML element:

Opening Tag

Attributes

Content

Closing Tag

Opening Tag

The opening tag uses angle brackets (the less than and greater than signs) to designate the beginning and end of the tag.

<

>

A paragraph opening tag looks like:

Attributes

Attributes appear between the name of the opening tag and its closing angle bracket. They are most often used to provide additional information, identification, or options—and to beat the snot out of zombies.

The class attribute helps define a class, or group, of elements that have something in common. (They need not be the same type of element.) An opening p tag with a class attribute looks like:

learning>

Content

The content is whatever appears between the opening and closing tags. Generally this is text and/or other elements.

Some elements have limitations on what elements can be inside them, depending on the element, its job, and whether it's been tainted by the