Level Up Your Code Weapons Archives

Nested Zombie Rules

A new weapon has arrived in our zombie-smacking CSS arsenal: Nested selectors. (True, it’s been available with SASS and other pre processors for a long time, but it’s now available natively in all modern browsers.) Instead of writing: You can now write While not saving much space, it more importantly shows a clear relationship between... 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

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

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

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

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