This is the start of a three-part series on building a website. This will be a real website for a musician friend of mine, who’s website I happen to ruin during a routine WordPress upgrade. In part 1, we start …
I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS. I thought of about 5 more the second I was done, but I’ll spare you!…
I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I’ll show you the entire process from start to finish, as well as touch on the advantages and disadvantages.…
This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and …
This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover …
Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. …
More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Custom fields are chunks of data that travel along with posts and pages in key/value pairs. This data can …
This photo gallery will automatically build itself from a directory of images, including sub-directories and the images inside them. Images open in a nice looking jQuery lightbox.
Links from Video:
…
This is somewhat of a behind the scenes look at how I create and distribute the screencast. I go over the hardware and software I use, how it gets stitched together, and the sizes/formats it gets put into and why. …
This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for …
Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we’ll cover what that actually means, take a look at a table, the markup that creates it, quirks and …
In video #55 the end result was the FeedSmusher, which inserted content from external RSS feeds onto a page of our own. In this screencast, we will start there and use AJAX (with help from jQuery) to refresh that content …
Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four methods/players. Two use …
This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor …
The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for …
FoxyCart is a very adaptable eCommerce system. Products are built on-the-fly as part of add to cart buttons that are just simple HTML. This means that you can integrate it with just about any CMS. In this screencast, we integrate …
The “Really Simple” part of RSS is sometimes misleading. What if you want to pull in content from an RSS feed and display it on your site? Doing that from scratch would be no-so-easy, but thankfully we have wonderful SimplePie …
FLIR (Face Lift Image Replacement) bills itself as an “alternative to sIFR”. They are definitely in the same category. sIFR has some extra functionality, but is relies on more technology on both the server and client side. FLIR may be …
PayPal, love it or hate it, is easiest way to send and receive money online. In this screencast we go through how to create a Buy Now button, which uses a custom email address, has a custom header, custom thank …
My technique for building print stylesheets goes like this. 1) Start from scratch 2) Leave most defaults alone 2) Eliminate every thing on the page you don’t need with display: none; 4) Put page-breaks where appropriate. Of course, I spend …
Using SVG can be very simple, but if you start digging in, there is a lot to know about SVG. In his series you're going to learn why SVG is such an important part of building websites. From why SVG is useful and how to get your hands on it all the way to implementing it as a system and fancy stuff like animating it.
This series will take you from zero to being confident in writing and working with jQuery and JavaScript.
Over 150 videos detailing every step of the redesign process for this very website, as it was in v10 in 2012.
The complete process of designing an artist's website from a mobile-first perspective using WordPress as a CMS.