Beginner Articles

Debugging CSS Keyframe Animations

Creating CSS animations may be about learning the syntax, but mastering a beautiful and intuitive-feeling animation requires a bit more nuance. Since animations command so much attention, it's important to refine our code to get the timing right and debug things when they go wrong. After tackling this problem myself, I thought I'd collect some of the tools that exist to aid in this process.

(more…)

Beginner Concepts: How CSS Selectors Work

Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting.

(more…)

Abbr’s for Web Nerd Acronyms

I'm really lazy about using <abbr></abbr> tags for acronyms. Most people who read a techy blog like this probably understand them, but surely there are some visitors who don't where a simple tooltip explanation would be beneficial. Maybe with this easy copy-and-paste resource to reference I'll actually start doing it. This is an education blog, after all. (more…)

CSS is to HTML as a CMS is to… HTML

From the desk of important beginner concepts:

You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. You don't need to edit each of those pages individually. That's the core benefit behind CSS: abstracting the design away from the markup.

Now you want to make another change to those 100 pages. You'd like to include the publication date underneath the title of each of the pages. That is something you'll need to edit the HTML to do. If those 100 pages are based on a template, as they would be when using a CMS (Content Management System), you can make one adjustment to the template file and the date adjustment will be reflected across all 100 pages. That's the core benefit behind a CMS: abstracting the content away from the markup.

The point is that once a website is any more than one page, there are going to be shared resources and it's time to use a CMS. Just as the zen garden taught us that using CSS is vital to allow design freedom and make redesigns easier, the ultimate freedom comes from also using a CMS where we also aren't locked to any specific HTML. HTML isn't for content these days, it's for describing content. Databases are for content.

I have made this scientific chart to drive home the awesomeness of this all.

All About Floats

Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap".

Web Nerd Terminology (Explained)

As happens with any weird niche societal group, us web nerds have developed some language of our own. Some of this language is perfectly acceptable English, but still sounds weird to an outsider. I thought I'd throw together a list of these words and attempt to explain them in plain English as a reference for non-nerds.

Browser - A browser is a software application that is used to visit websites. Firefox, Internet Explorer, Safari, etc. If you think this is obvious, think again.

(more…)

Removing The Dotted Outline

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link).

(more…)

The Difference Between ID and Class

We need ways to describe content in an HTML/XHTML document. The basic elements like h1, p, and ul will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and classes.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag