Blog

Changes are <tfoot> at the Undead Institute

As I’ve continued writing my zombie themed web development books, I’ve grown as a writer, a teacher, and… zombie fighter. While I’ve made changes along the way, I recently made some larger changes in my books and curriculum that I think are worth enumerating. If you have an old version of one of these books... Read More

Pop(over) the Balloons Article on CSS Tricks

I had an article published in CSS Tricks discussing the new Popover API and using it to build a game. Here’s the article. And here’s the game: See the Pen Pop(over) the Balloon – Final by Undead Institute (@undeadinstitute) on CodePen.... Read More

Excerpt – Advanced CSS: Zombie in a Ballgown

Shaping the Undead CSS shapes allow you to cut different shapes out of text to illustrate a point or to allow more interesting layouts. It doesn’t draw or create shapes—it flows text around them. The element you’re creating the shape around must be floated either right or left, and the text only flows around it... Read More

Excerpt – Even Further Expand Your First Website (And Thwack those Zombies Into the Next Apocalypse with HTML and CSS)

Grab the starter files and follow along. Transitions and Fades In mug.html we have a CSS and HTML only image gallery. We could punch zombies in the gullet more effectively if the images faded into each other as we transitioned from one to the next. We can do this by adding a transition property, which... Read More

Excerpt – Modern CSS Layout: Decking Zombies with Style

Dividing the Horde (into Columns) CSS columns are a simple way to add flexible text columns to your pages. This is useful when using responsive design because the width of your container element can change. Manual solutions require that the text be a certain length and stay in one element, artificially splitting the text into... Read More

Pop Up, Pop Down, PopOver: Using the new PopOver API

A new API is now available for creating pop ups and modal windows. It’s called the popover API and lets you create a pop up with just HTML. It’s dead simple (or should that be undead simple?). First, create an element that will be your pop up. Give it an id attribute and a boolean... Read More

Excerpt – CSS Animation: De-animating the Undead Horde

Transitioning to Zombiehood The place to start in CSS animation is with transitions. A zombie infection transitions a property from one state (human) to a second state (zombie). In CSS, transitions can generally animate any mathematical value, such as a width or even a color. The easiest way to start working with animations/transitions is to... Read More

Excerpt – Scalable Vector Graphics: How to Draw Zombie-Smashing Images with Code

To understand the zombie-smashing power of Scalable Vector Graphics (SVGs), you need to know the difference between vector and raster graphics. You’re probably familiar with raster graphics—even if you’ve never heard the word “raster”. These graphics use small individual dots (pixels) to create an image. With lots and lots of small dots, you can get... Read More

Excerpt – An Introduction to Website Performance: How to Outrun the Zombie Hordes

Reducing What’s Sent to the User Gzip Resources Most, if not all, servers can deliver content that is compressed into a smaller file size. Gzip is a compression algorithm that takes the files that are part of your website and smushes (technical term) them. It’s like sending a zombie horde through a gate. The horde... Read More

Excerpt – Search Engine Optimization: How to Make your Site Stand Out from the Apocalyptic Horde

Search Engine Optimization Search engine optimization is a zombie-fighting profession unto itself. The majority of the work is finding the keywords that describe your product/service/thing and sprinkling them throughout your pages, plus removing anything that makes it harder for search engines to read your page. This book lays out a base level of how search... Read More

Interview with Jack McCloy

Job Title: Engineering Manager Place of Work: Snowflake Industry or specialization: I work at B2B SaaS companies and specialize in building infrastructure and tooling that helps product teams move faster and ship higher quality software What got you into Web Design/Development/working on the web? I’ve always enjoyed hacking and building simple tools for myself. I... Read More

Excerpt – Further Expand Your First Website (And Thwack those Zombies Further with HTML and CSS)

Add a Sidebar We want to do is add a sidebar to the home, contact, and bio pages. Joseph “Highway” Rhobberee, Dr. Boople’s one-time grad student turned executor of his unliving will and sole beneficiary of the zombie-fighting charities the site donates all profits to, wants to make sure no one misses the merchandise offered.... Read More

Interview with Seth McLellan

Job Title: Marketing Wrangler Place of Work: Automattic (specifically, the WordPress.com product) Industry or specialization: Automattic is the umbrella company for many different publishing and ecommerce products. WordPress.com is in the website and blog space. What got you into Web Design/Development/working on the web? I would never have guessed I’d end up here. Degree in aerospace... Read More

Interview with Eva Lovisa Nelson

Job Title: Designer Industry or specialization: I’m an independent graphic and UX/UI designer. My speciality isn’t confined to a specific industry but rather in delivering versatile designs that cater to the unique needs of diverse clients. From corporations to solopreneurs, I’ve worked across the spectrum, and I enjoy the challenge each project brings. Rather than... Read More

Excerpt – An Introduction to Programming in JavaScript: Stomping Zombies with Variables, Loops, Functions and More

Buckets and Buckets of Zombie Guts One of the first things to understand is a concept called variables. Variables are like buckets you store things in. You can put water in a bucket or your lunch or a mannequin head or the rookie cards of the 2037 Los Angeles Zombie-Dodgers Human Resistance Cell. You can... Read More

Refreshingly Frustrating

The Zombie: While developing a site, forgetting to refresh the page after you make a change Always a Zombie? Yes Severity: Medium to High, Depends on how long it takes you to realize and how much troubleshooting you do before you realize Why is it a Zombie: You can’t see any of the updates you... Read More

Hovering Over Your Phone

The Zombie: Hover on a touch screen Always a Zombie? Yes Severity: High, if hover imparts information or is required for progress through the site. Why is it a Zombie: You can’t hover on a touch screen so any user who’s on a phone, tablet. etc cannot access that part of your website. Cure the... Read More

Get Out the Way

The Zombie: Moving the element you’re hovering over via hover Always a Zombie? Almost Always Severity: Varies Why is it a Zombie: If you move the element the mouse is over far enough that the mouse is no longer on top of it, the animation resets. Which puts the mouse back on top of the... Read More

Excerpt – Expand Your First Website: Thwacking Zombies With HTML & CSS Again

Add a Contact Form Unfortunately, this graduate student of Dr. Boople’s, Joseph “Highway” Rhobberee, isn’t as interested in helping humanity—or even zombianity—as he is in making a fast buck. While most people would have a contact form asking for name, email, comment, and so on, he wants more information: net worth, whether they’ve won an... Read More

Day 31 – All the Horde

They all came by to wish you a happy un-afterlife.... Read More

Day 30 – Zombie Mania

This is absolutely real and not part of a story…... Read More

Low Contrast like Reading Mud

The Zombie: Light text on a light background/dark text on a dark background Always a Zombie? Yes Severity: Varies. Medium to high Why is it a Zombie: It makes reading really difficult Cure the Zombie by: Ensure there’s enough contrast that everyone should be able to read your text. https://webaim.org/resources/contrastchecker/... Read More

The Undead Institute