Tutorials
I’m currently working on a new WordPress theme called ♥grid, which lives up to its name with a clear grid based design. Follow this step by step walkthrough of the design and build process, right from the initial Photoshop concept, through to writing the HTML structure, styling up with CSS then adding clever functionality with the jQuery library.
The good old background property is one of the core elements we can play around with in our web designs. Here’s an overview of the four most common approaches to styling your web page body, from the basic solid colour through to large detailed background images. If you’re just starting out in web design, you’ll find some basic CSS techniques for you to put into practice into your future projects.
I’ve been wanting to get stuck into a creative infographic for quite some time, so recently I started work on a personal project that involved the design and build of a graphic to portray the stats and figures of Line25. To mix things up a little and to take it a step further, I decided to have a shot at building the whole infographic as a complete web page. Here’s a walkthrough of the project, showing how resources like Cufon and jQuery’s ScrollTo plugin were used to add some flair and interactivity to the design.
We’re all used to making the most of the plain old web font stacks that have been around for the past 10+ years, everyone who’s designed a website will have no doubt written out Helvetica or Georgia hundreds of times in their stylesheets. Nowadays however, we have the option of embedding a whole new range of fonts into our designs. Let’s look at how the CSS @font-face rule allows us to get fancy with our future website projects.
Image slideshows are a popular method of displaying numerous sequential photographs in web design. By making use of the handy Cycle plugin for jQuery, we can easily create a slideshow of our own, complete with previous and next navigation controls. Not a master of Javascript? Don’t worry, the Cycle plugin makes it a breeze to add slideshow functionality to your site, with only a few lines of code required to get things up and running.
You don’t need to be a PHP whizz to be able to put together your very own custom WordPress theme. If you’re clued up with your general web design and development skills and can easily put together a HTML/CSS based website, you’re ready to move onto WordPress theme development to give your blog its very own design.
I’ve recently been working on a design concept for a WordPress theme as part of a personal project. In this walkthrough we’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.