Screencasts

There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in …

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to “nudge” and leaves the element’s original position in the page flow. Absolute and fixed allow for exact placement of elements and …

In this screencast I move my own personal website from my old live FTP editing ways to a proper version controlled system including deployment. I haven’t had much experience with this, so forgive me if it’s a bit rough.

We …

Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It’s as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out …

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to …

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive …

In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed …

Just save the website from the browser (in Firefox, you get an .html file and all the resources), drop it in your Public folder, and use the right-click contextual menu to grab the public URL.…

The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn’t …

In which I show and explain the very basics of what “responsive web design” has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.…

You are probably pretty aware of why using version control is a good thing. In case you aren’t, I quickly go through that in this video. Then we get into the most basic thing we can possibly do: put a …

We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don’t …

HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it …

Putting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don’t scroll away as the page scrolls? …

Animations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can use it, which allows you to specify values …

HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This …

Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way.

View Demo…

Pseudo elements are visible elements on a web page that aren’t “in the DOM” or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo …

Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized …

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy …