Blog

Semi-Forgetful Colons

The Zombie: Forget a CSS semicolon Always a Zombie? No Severity: Varies from none to high depending on where semicolon is missing. Why is it a Zombie: If properties and values come after it in the declaration block, they will be ignored. If it’s the only or last declaration in the declaration block, the semicolon... Read More

Terrible Zombie Jokes

A vampire, a ghost, and a zombie walk into a bar. Who walks out?

Two vampire zombies and a still very lonely ghost.

Why did the zombies stalk the Abe Lincoln impersonator?

Mmmm, delicious tall braaains…

What type of arithmetic are zombies great at?

Multiplying

How do you beat a zombie in an IQ test?

Braaains

What do zombies call a group of humans in the morning?

Breakfast

See More Jokes

8 Word Stories

“The zombies are ruining our Christmas!”
“Ya think?”

He slapped the zombie with an <hr> lawsuit.

The zombies got to Santa, then every child…

She roundhoused zombies from <h1> up to <h6>

The illiterate zombie ate a lot of grains.

See More 8 Word Stories

Tips, Tricks, & Zombie Hits

Shorthand Properties Gotcha

Shorthand properties overwrite any value that isn’t set in the shorthand. For instance, if I set a background-image and then use background: no-repeat to prevent the image from tiling you’ve actually canceled the background image because the background short hand reset it to its default value.

Promise Low. Deliver High.

It is far better for both your short term and long term career to promise low and deliver high rather than to promise high and deliver low. And even if you promise high and deliver high, you’ll be killing yourself just to meet the client’s minimal expectations.

See More Tips

Blog Articles, Interviews and More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 3

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 2 The Prerequisites for the JavaScript Monetization API Let’s first discuss the parts the user needs to... Read More

Voiding the Pseudo

The Zombie: Using pseudo elements on a void tag Always a Zombie? Yes Severity: medium – never works, but won’t break things Why is it a Zombie: pseudo elements (::before and ::after) are slotted in after the opening tag and before the closing tag. Without those tags the pseudo-element cannot be slotted in. Cure the... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 2

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Continued from Part 1 Merchandising requires literal user buy-in—that is, users buying products or services from you. Again, this can be... Read More

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 1

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle. Important Notes Full disclosure: The author received a grant to support the writing of this book, as well as two other... Read More

Giant Website Zombies

The Zombie: So what if my site is the size of the zombie hoard, it’s pretty. Always a Zombie? No, if band width is sufficiently high some won’t notice Severity: Varies. More severe on low bandwidth connections. Why is it a Zombie: Average site visitors rarely wait for a page to load more than a... Read More

Undead Domains

When building a new website that you want to be publicly available, you need two things: (1) a domain name (e.g., undead.institute or 8wordstories.com) and (2) a place to host it and put it on the web so people can access it. Domain Names Domain names must be unique and come in all shapes and... Read More

Interview with Paul Rosen

Job Title: Frontend Engineer Place of Work: Sight Reading Factory Industry or specialization: We do music education software. I also have an open source project, abcjs, that puts standard sheet music in a browser. What got you into Web Design/Development/working on the web? In the ’90s I created a few simple html sites for personal... Read More

Interview with GeP T. HeToMaLandCeSS

Editor’s Note: This is an interview with ChatGPT. I think it’s interesting to see its answers synthesized from its data set. I have only lightly edited the exchange, but you can read the unedited version. “Interview” was conducted on 7/16/23 using ChatGPT May 24 Version. And, yes, the name I gave it is stupid. Please... Read More

Interview with Deena Warner

Job Title: Managing Member Place of Work: Deena Warner Design LLC Industry or specialization: We cater to the book publishing industry. Most of our clients are authors and publishers. What got you into Web Design/Development/working on the web? The public library! Around 1994, I took a seminar at the Charlotte Mecklenburg Library on HTML, even... Read More

Interview with Geoff Graham

Job Title: Whatever my clients want to call me, which is usually “the blond guy that keeps our website working.” But I also do plenty of work in design and technical writing. Place of Work: I’m an independent contractor but spend most of my time blogging at Smashing Magazine. So, where I work might be... Read More

No Centering For You

You’re trying to center the following element With the following CSS: But like a zombie barista, it’s not working. Other than changing the way you center the element (e.g. via flexbox or grid) how can you fix this code and center the element? Play with it on codepen: https://codepen.io/undeadinstitute/pen/dygaZMr?editors=1100 Answer Span is an inline element.... Read More

Interview with Len Porzio

Job Title: Retired Software Developer What got you into Web Design/Development/working on the web? Long time software developer and engineer eventually led to DOD web support role. What does a typical day or week look like for you? What sort of things do you do? Worked on multiple web systems in multiple computer languages using... Read More

Announcing the Post-Apocalyptic HTML Shooting Gallery

When I teach HTML, one of the things that students often struggle with is matching opening and closing tags, particularly because there are so many exceptions and weird rules. Plus when you’re first learning or when code is poorly formatted it can be difficult to match up tags within a page worth of code. To... Read More

For a Zombie Time, Click Here

The Zombie: Click here language Always a Zombie? Yes Severity: medium – An annoyance for sighted users, but can be detrimental to a screen reader user’s experience. Can also inhibit your search engine optimization. Why is it a zombie: No one knows what’s behind the link without reading the context. Almost no one who uses the internet reads the full... Read More

Interview with Debra Weiss

Job Title: Owner, drw Design, LLC Industry or specialization: drw Design builds websites for a diverse group of local, national and international clients. What got you into Web Design/Development/working on the web? I got on the internet early in the 1990s through my corporate job as a game show producer for an interactive TV network.... Read More

Excerpt – Responsive Design: An Undead Introduction to Mobile Web Development

Bringing a Toothpick to a Web Fight I know you think that you kill zombies with a nice baseball bat to the brainpan, but that’s all Hollywood smoke and mirrors. What really stops the zombie hordes is websites. Websites communicate information, entertainment, inspiration, art, beauty, and all that is good in humanity’s soul—everything zombies hate.... Read More

Improper element nesting

The Zombie: Improper element nesting Always a Zombie? Yes, however, some browsers may interpret it the way it’s intended rather than the way it’s written, but you never know which browser might do it correctly or not Severity: Varies Why it’s a Zombie: Browsers are pretty good at interpreting what you intended, but they might get... Read More

Interview with Lauren McSwain-Starrett

Job Title: Director of Content Management Place of Work: The Center for Creative Leadership (CCL) Industry or specialization: I direct SEO strategy and manage website content for CCL (which is a top-ranked, global nonprofit that delivers leadership training and is based in Greensboro, NC). What got you into Web Design/Development/working on the web? I would... Read More

Excerpt – Intermediate CSS: Zombie in a Cocktail Dress

You know something about websites, do you? Already conquered that “HTML” thang, huh? Got a grasp on CSS? Good. Well did you know that a properly formed website could beat the unliving tar out of a horde of the undead? Did you know that websites accounted for ninety-seven percent of zombie second-deaths in the last... Read More

Padding: none; & Margin: none;

The Zombie: padding: none; and margin: none; Always a Zombie? Yes (it doesn’t work) Severity: medium–low (a few margins/paddings that aren’t set to 0 probably won’t break your site, just make it look funky. That said, there are times when this kind of error could make a layout unusable and send users running for the post-apocalyptic hills.) Why it’s a zombie: None is... Read More

Interview with Joe Nasevich

Job Title: Web Developer Place of Work: University of Virginia Industry or specialization: Higher education What got you into Web Design/Development/working on the web? I created my first website as a graduate student circa 1993 while working at a Government research lab. The World Wide Web was new, and I wrote all the HTML using Microsoft... Read More

Excerpt – HTML Forms & Interactive Elements: Or How to Poke a Zombie in the Eye

While you won’t need a deep understanding of HTML in order to stop the zombie hordes with this book, you will need to know at least the basics of how an HTML tag works, understand attributes, and be familiar with the most used tags. If you’re feeling like you’ve arrived at the zombie fight with... Read More

Underlining non-links

The Zombie: Underlining non-links Always a Zombie? Yes (except for a very specific case below) Severity: medium-high Why is it a zombie: Causes a large user experience issue where users try to click on something that isn’t clickable. That can frustrate visitors and send them running for post-apocalyptic cover. Cure the Zombie by: Only underline links. Never use underlines on... Read More

Interview with Jordan Leven

Job Title Senior Software Engineer Industry your in or any specialization you’ve done I work on APIs and web services in the financial technology industry. What got you into Web Design/Development? In high school, I built my first website for my parents’ veterinary hospital. As part of this first website experience, I built a web application... Read More

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

Useful Zombies You can’t put the kibosh on zombies as a web developer without knowing some code, but you also have to understand how a user will approach your website. We’re so used to looking at websites that we often take for granted the little things that make them easy to navigate and smack zombies... Read More

The Selector With No Class

What does this selector select? Answer It selects a span element within an element that has a class of “label” as long as that span element does not have a class attribute.... Read More

Interview with Lana Boyle

Job Title: Web Developer Place of Work: University of Virginia Industry or specialization: Higher Education What got you into Web Design/Development/working on the web? Finished my degree in Graphic Design and found it difficult to find work in the field. Applied those skills to web design and found web development was a good fit for... Read More

Excerpt – Beginner CSS: Like Putting Lipstick on a Zombie

You can be forgiven for not knowing this. The news and movies and media tell you that shotguns and baseball bats are the way to kill zombies, but that’s not true. Violence and gore sell films, but websites are the path to infinite knowledge and having the world at your fingertips. That’s how you fight... Read More

Margin: auto Challenges

The Zombie: Margin: auto without setting a width or display: block Always a Zombie? Yes Severity: medium-low Why is it a zombie: It won’t work, but it won’t break your site either. Cure the Zombie by: Ensure the element you’re centering with margin: auto; is set to display: block; and that a width has been set. If neither of those things... Read More

Interview with Sakib Ahmed

Job Title: Web Developer and Marketing Technologist Place of Work: UVA McIntire School of Commerce Industry or area of focus: I focus on web development and technology within the MarTech [Marketing Technology] stack to help organizations reach audiences and expand engagement. What got you into Web Design/Development/working on the web? I started my career as... Read More

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

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... Read More

Empty headings

The Zombie: Empty headings i.e. headings (<h1> through <h6>) with no content or no useful content. Always a Zombie? Yes Severity: serious for screen readers; less serious for others Why it’s a Zombie: Just like sighted users screen reader users often scan through headings. If a heading is empty the screen reader will say there’s... Read More

Interview with Eric Newsome

Job Title: Web Manager Place of Work: UVA Engineering Industry or Specialization: I worked in higher education communication. What got you into Web Design/Development? Leading up to my current role, I worked in communications support and administrative support in higher ed. In hindsight, even in prior non-technical roles, there was always some web or digital... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 6

Let’s add some space above and below the <nav> to help the site look great. We can do this with the margin-top and margin-bottom properties. While we’re working with the navigation, let’s set the color of nav a elements to orangered, and let’s remove the underline beneath the links by setting text-decoration to none. We... Read More

Leaving off units

The Zombie: Leaving off unitsAlways a Zombie? No (some things shouldn’t have units)Severity: medium-high Why is it a zombie: It can prevent the property from workingCure the Zombie by: Add units to all dimensions unless they are 0 or you are using line-height. Line-height is at its most robust and flexible when used as a multiplier. A unit-less number is ideal for line-height.... Read More

Interview with Patricia Searl

Job Title: Acting manager, Rotunda Digital Imprint Place of Work: University of Virginia Press (book publisher) Industry your place of work utilizes: I work in academic publishing. We create digital editions and web interfaces to interact with databases for research in history, literature and architecture. My relevant background is in graphic design, web development and... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 5

ApocalyptiCSS To add CSS, we need one more HTML element, the <style> element. The <style> element can technically go anywhere on your page, but within the head element is a good choice, since the CSS code is not so much what is being displayed as how it’s being displayed. So, we’ll add a style element... Read More

Humanity’s First Child, Not!

What does this selector select? Answer It selects any direct descendant of .humanity that is its first-child and does not have the class of zombie. Play with it at https://codepen.io/undeadinstitute/pen/LYBrWBZ... Read More

Interview with Billy Hylton

Job Title: IT Program Manager Place of Work: NC Government – Dept. of IT – Environmental Quality Industry your place of work utilizes: I work in North Carolina state government for the Department of Information Technology and focus on modernizing how the state does environmental permitting. What got you into Web Design/Development? In the late 90s... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 4

Of Zombies and Page Skeletons Next, let’s add some page-wide structural elements (a page’s skeleton). These won’t initially change how the page looks, but they will provide some semantic information about the types of content we’re using; provide spaces for us to add things the page needs, such as a header and a footer; and... Read More

Background-repeat: none

The Zombie: Background-repeat: none Always a Zombie? Yes Severity: medium-low (it doesn’t work, but a repeating background is unlikely to make or break your site Why is it a zombie: Does nothing. The background image continues to repeat Cure the Zombie by: Use background-repeat: no-repeat. I’m not sure the exact origin of why this goes against the typical CSS... Read More

Interview with Christina Meyer

Job Title: IT Web Developer Place of Work: University of Virginia, Custom Applications and Computing Services (CACS) Industry your place of work utilizes or any specialization you’ve done: I specialize in building websites in the Drupal CMS for the University of Virginia. We have over 400 websites that we have built over the years and... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 3

Thwacking That First Zombie Go ahead and open the file content.txt. In it, you’ll find Dr. Boople’s essay, followed by a short bio about him and a list of “Steps to Resisting a Zombie’s Frieeendship.” This is the content you’ll use to build your site. Open index.html. You can do the next part directly in... Read More

Using the background-color property for a background gradient

The Zombie: Using the background-color property for a background gradientAlways a Zombie? YesSeverity: medium – (It doesn’t work, but its unlikely to break the site)Why is it a zombie: The gradient won’t show up at all.Cure the Zombie by: Despite gradients being literally colors, they are treated as images. Move the gradient to the background-image property and everything works.... Read More

Interview with Justin Schroeder

Job Title: Founder, Braid LLC, Founder FormKit Inc., Senior Full Stack Engineer. Place of Work: FormKit & Braid Industry your place of work utilizes: What got you into Web Design/Development? I started around the turn of the millennium. I was a bored 12 year old in 1999 and when I typed those first few lines... Read More

Zombie Client/Zombie Server Model

Clients and Servers The web, and thereby the human resistance plans, has always been based on the client/server model. In this model, you have one centralized store of knowledge (the server)—much like the commander of your human resistance cell—and many different computers asking that server for information, like you and your apocalyptic colleagues asking the... Read More

Toggle Checkbox

What does this code do? HTML: CSS: Answer When the trigger input is checked, the spin animation is started on the z element and continues to run infinitely in one second intervals. You can see a form of this in action on any of my 60 days of animation as it’s how I set it up for... Read More

Interview with John Loy

Job Title: Senior Software Engineer Place of Work: DreamWorks Animation Industry your place of work is in: I build custom web-based software for internal use at DreamWorks Animation in their animation production pipeline. Example applications include a 3D model/assets catalog browser and software launching console. What got you into Web Design/Development? I studied graphic design... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 2

Anatomy of an HTML Tag 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 and marks up that skeleton using elements. There are four parts to an HTML... Read More

No alt text attribute on images

The Zombie: No alt text attribute on images Always a Zombie? Yes Severity: medium – has accessibility and SEO implications Why is it a zombie: Search Engines and Screen Reader Users won’t be able to access/understand the content. Cure the Zombie by: Adding a blank alt attribute to decorative images and a short, clear description to all other images. No need... Read More

Interview with Ben Walter

Job Title: Solutions & Web Developer Place of Work: UVA Alumni Association Industry your place of work utilizes or any specialization you’ve done: I work at a higher ed non-profit focused on alumni engagement. What got you into Web Design/Development? A friend and I built a website for a History Day project on the Cuban... Read More

Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 1

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...... Read More

Scavenger Hunt

Ready for an Easter Egg hunt? Within this website I have hidden eight pieces of a coupon code. If you can find all eight pieces you can put them together for $5 off any order of $5 or more (that’s a free eBook!). Also, the coupon will work if you only spend $4.99. I’m giving... Read More

Free Sticker Pack!

Terrible Zombie Jokes

8 Word Stories

Tips, Tricks, & Zombie Hits

Blog Articles, Interviews and More