The humble table

Introduction ... I’m going to tell you a story, its about love, death and re-birth... Or something In the beginning there was a young html element called <table>. He had one purpose in life, to display data and life was good. But before long though he had been corrupted, his masters used him to define layout and structure. Things he was not originally designed to do, and so began the dark ages of web design. Then one day, there came a young knight called CSS, and with him he brought light to designers...
read more

Recreating the Developer Drive logo with just CSS, no Javascript or Images

I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS. In this snippet we'll cover CSS3 transitions and using @font-face to import some custom fonts. The first thing we need to do is import out fonts, I wasn't sure what the current 'd' font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts...
read more

A basic Database Abstraction Layer

Introduction ... In a previous tutorial, we created an abstract class for basic SCRUD database operations. Today we're going to build on that to create a generic database abstraction layer (DAL). The aim of this is to allow you to connect to any database type without having to worry about changing your Data Layer classes. We're also going to be introducing 2 of the most common design patterns. Factory Singleton First download the previous tutorial source code from here. We'll be creating 2 new classes...
read more

A quick and simple CSS3 accordion menu!

Introduction ... Building on my previous tutorial, I thought it would an idea to show how to apply what we learned to the most basic of website features, the menu! I would strongly suggest reading my previous tutorial as we'll be jumping in at the deep end here. Once again, no JavaScript was used in the making of this tutorial! Every website has a menu, and there are lots of different styles that you can use. One style that is quiet popular in web applications and mini-sites is the accordion menu. The accordion...
read more

A basic database SCRUD class using abstract and generic modifiers

Introduction ... SCRUD is short for Select, Create, Read, Update and Delete. These are the general actions that any program will perform when working with databases. Yes, there are plenty of ORM applications ( http://en.wikipedia.org/wiki/Object-relational_mapping ) out there that can replace this, but as a general introduction to abstract or generic classes and general development I still think this is worth a read. I should also explain why I have used an abstract class instead of an interface....
read more

HTML5 and the introduction of <nav> versus <menu> elements

HTML5 introduced two new elements with seemingly identical roles ... <nav> ( http://www.w3.org/TR/html-markup/nav.html ) <menu> (http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element ) Their use is actually quite different and you're unlikely to see both used at the same time. The <nav> element is actually for grouping <a> elements for navigating a website, and the <menu> element is for grouping both <a>, <input>, <button>...
read more

An introduction to HTML5, CSS3 and responsive design

In this tutorial we'll be dealing with some basic HTML5 additions and their uses. We'll also be creating a simple animated gallery using just CSS3 and HTML5 In making the gallery, we'll also try and deal with responsiveness and scaling the gallery for different resolutions and devices. Throughout this tutorial JavaScript will not be used! Step 1: Understanding the HTML5 additions ... http://www.w3.org/TR/html51/ There are lots of new tags in HTML5; today we'll be dealing with the some of the most...
read more

15 Online resources for learning web design

There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don't know where to start? Don't worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML,...
read more
Load more