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
Blog
Terrible Zombie Jokes
What do zombies call a group of humans at night?
Midnight snack
What kind of apocalypse is it if everyone stumbles out into the light of day, aimless and moaning?
It’s not an apocalypse the Internet’s just down.
What’s scarier than a zombie in a clown suit?
Nothing
What do you call someone who tries to keep all the zombies in his basement?
A horder
What do zombies and your uncle have in common?
Both can kill you with their breath.
8 Word Stories
She smashed a <fieldset> over the zombie’s head.
“The zombie doesn’t love you. I am certain.”
She threw out <data> like zombie-killing ninjastars.
“Zombies are moaning liars.”
“But he loves me!”.
She <del>eted the zombies from her online life.
Tips, Tricks, & Zombie Hits
Block and Inline Elements
A block level element should not go inside an inline level/phrase element. There are exceptions, but generally a block level element can contain either block or inline elements, but an inline element can only hold other inline elements. The major exception is the a tag, that, since HTML5, is an inline element that is allowed to contain block elements
Choose Your Characters Carefully
When using any content management system (CMS) be careful with apostrophes. While most fields should handle them properly every once in a while you might find a field that breaks when you use an apostrophe. This is most likely because the content management system isn’t properly processing the content. Most CMSs use strings to pull in whatever you typed in the field. In computer languages though an apostrophe or single quote often signals the end of a string. The CMS is reading in the apostrophe as the closing apostrophe of the content and will then try to execute the remaining content as code. Often this just results in an error, but it can also be a source of attack if the field is public facing. A savvy person could add code after the apostrophe and access things they shouldn’t.
Blog Articles, Interviews and 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
Building Your First Website (While You 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
Building Your First Website (While You 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
Building Your First Website (While You 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
Building Your First Website (While You 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
Building Your First Website (While You 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
Building Your First Website (While You 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