Tutorials, Snippets, Resources, and Articles for Web Design and Web Development

SVG Draws Itself And Fades In Fill – JavaScript Plugin

This JavaScript plugin for SVG combines an SVG draw animation effect with a stroke fadeout / fill fadein animation for effect.

Add & Remove Classes With JavaScript Property classList

The classList JavaScript property ships with four methods that allows us to add, remove, toggle, and check for classes easily with plain JavaScript.

Getting Started With Inline SVG

This tutorial serves as an in depth look at inline SVG, basic implementations, element creation, and attribute manipulation.

Cross Browser Transition & Animation Events With Modernizr

This snippet uses Modernizr to detect transition and animation events with cross-browser compatibility.

Memory Game

A game of memory, built for fun using strictly front end technologies – HTML, CSS, and JavaScript.

Force Favicon Refresh

Save yourself a few grey hairs with this force favicon refresh snippet, and make all the browsers be at peace with your favicons.

JavaScript Objects & Building A JavaScript Component – Part 2

Here’s part 2 of a 2-part tutorial that dives into JavaScript objects, prototype programming, and building a simple reusable JavaScript component.

HTML5 Video Jumpstart With Examples

This tutorial serves as an introduction to the HTML5 video element, with examples including custom controls, background and fullscreen video.

More CSS Spinners & Loaders

In this tutorial, we look at the creation of four more css spinners and loaders using a single element in our markup, and CSS3 animations.

Advanced Parallax Scrolling Effect

In this tutorial, we take a look at a more advanced parallax scrolling effect with a background image moving at a different speed to the content above it.