Website development and design blog, tutorials and inspiration

HTML/CSS

My Web Design Tutorials contains resources to help you get started in web design and useful tips for designing an effective, high-quality website. The tutorials cover technical coding as well as graphic design, colour theory, typography and performance.

 

Getting Started with the Google Maps API
18th April 2010HTML/CSS
In this tutorial series, I am going to show you how to incorporate Google Maps into your website, add pins to locations with balloon pop-ups, set waypoints and even add routes. We'll also see how you can get latitude and longitude coordinates in Google Maps.
What is XML?
26th February 2010HTML/CSS
XML has become so integrated with the web, and even Microsoft Office, that XML is hardly a buzzword anymore. XML forms the core of Microsoft's .Net Framework as well as being an accepted format for data exchange across multiple platforms.
Embed Google Maps on your Website
8th February 2010HTML/CSS
Google offers a multitude of methods for adding rich interactive maps to your websites from basic copy and paste code to a full API for a completely custom user experience. This tutorial gives you an overview of the methods and shows you how to get started adding maps.
XHTML Transitional Skeleton
25th January 2010HTML/CSS
I'm always creating basic HTML pages by hand, writing out the same skeleton code time and time again. I've decided to create a page with some basic HTML which I can now use to copy & paste to save time. Here is the most basic XHTML framework where you can just fill in the blanks.
Top 10 Online Developer Tools
23rd December 2009HTML/CSS
A top ten list of online developer tools that are my most used online resources and tools for web development and design. This list is in no particular order.
CSS Message Notification Bars
27th May 2009HTML/CSS
Quick CSS Snippet to show a pretty message notification bar/box with an icon. These message bars are commonplace nowadays, and I use them quite a bit in my designs because they are an important way to attract user attention.
CSS Conditional Comments
19th May 2009HTML/CSS
Using Conditional Comments to detect browser versions and avoid those nasty CSS hacks for Internet Explorer or Firefox.
CSS Table Free Layouts
20th April 2008HTML/CSS
In a pure CSS based layout, it is often necessary to create a section that resembles a table, i.e. an image on the left and text on the right. Without using tables this can be a little tricky, however with these templates it is as simple as copy & paste.