Advertise here with BSA

Icons are a very important element of web design and play a big role in a website. Designing the perfect icon is definitely a challenge and is always good to have resources and tips in this matter. Today we decided to gather a few Icon Design Tutorials to keep your ideas flowing and to increase your resource library. From new and fresh tutorials to a little bit older but still classic ones, you will find a lot of tips and inspiration in this list, enjoy.

Create a Mobile App Icon in Photoshop

Design a Detailed Audio Receiver Icon in Photoshop

Create a Detailed Camera Icon in Photoshop

How To Draw a Vintage Polaroid Camera Icon

Create an Electrical Outlet Icon in Photoshop

How to Create an Envelope Icon in Photoshop

Create an Apple Safari Icon in Photoshop

Create a Mac Style Home Icon in Photoshop

How to Draw a Shopping Bag Icon in Photoshop

How To Create a Vibrant Cloud Icon in Photoshop

Design a Sleek Google+ Icon

Create a Cardboard Box Icon in Photoshop

Carbon Fibre Style Metallic Icon Design

Learn To Create A Glowing Google Plus Icon/Illustration

Stylish Metallic Button in Photoshop

Advertise here with BSA

I doubt that I need to explain to WDL readers what responsive design is, or why it’s important. Suffice it to say that it is a big part of the future of our industry. Fortunately, making responsive layouts is easier than it was when when we first started.

The advent of LESS CSS, a CSS pre-processor, has brought with it the ability to let our browsers do the hard work of calculating percentages and such. Throw in a few media queries, and the line between the so-called “mobile web” and the “normal web” begins to blur even more. This is a good thing.

Semantic.gs (which is based on LESS CSS) is not so much a frame work as it is a “layout engine”. (I just made that up.) Before you continue reading this tutorial, you should go and read the Semantic.gs documentation. You should also know that this is not a tutorial for beginners. It would help if you had some knowledge of making WordPress themes.

Done? Good, we can begin.

Planning Your Website

For the purposes of this tutorial, you have decided to make the simplest portfolio ever. It consists of three main section:

• Portfolio (this also acts as the home page)
• About Me
• Contact

Here’s what your wire-frame of the front page looks like:

Setting Up WordPress

The Template Files

I’ve set up a brand new WordPress in my local XAMPP server install to test my layout. Now, including LESS CSS in a WordPress theme isn’t as simple as it should be. I think there’s some sort of Javascript conflict. However, there is a workaround.

The lovely people who developed Perkins (another LESS CSS-based framework) went to the trouble of making a WordPress theme that incorporates LESS CSS. Of course, they did it to get their own framework to function as part of a WP theme, but we can adapt their work to suit our needs. Here’s how I’ve set up the theme files (based on Starkers, by Elliot Jay Stocks):

Now, you’re bound to notice two atypical files in the image above. That’s because I copied class.wp-less-styles.php, functions.less-styles.php, as well ast functions.php from the WP theme that the perkins guys made (you can find the theme here).

You’ll want to open up fuctions.php and edit it until it looks something like this:

<?php

/**

* @package WordPress

* @subpackage Adaptius

*/

define('WP_DEBUG', true);

require 'class.wp-less-styles.php';

include 'functions.less-styles.php';

class AdaptiusTheme

{

public function init()

{

// Register less

wp_register_script('less', get_template_directory_uri() . '/js/less-1.1.3.min.js', array(), false, true);

// Then add to the queue

wp_enqueue_script('less');

}

}

// Init

add_action('init', array('AdaptiusTheme', 'init'));

Don’t forget to download the latest version of LESS CSS and put in the theme’s directory somewhere. Make sure that functions.php points to it.

The Header

In order to make LESS CSS, and Smeantic.gs work, you have to do a little bit of finagling with the header.

<?php

/**

* The Header for our theme.

*

* Displays all of the <head> section and everything up till <div id="main">

*

* @package WordPress

* @subpackage Adaptius

* @since Adaptius 1.0

*/

?><!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="stylesheet/less" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/reset.less" />

<link rel="stylesheet/less" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/typography.less" />

<link rel="stylesheet/less" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/layout.less" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php wp_head(); ?>

<!--[if lt IE 9]>

<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
</head>

<body <?php body_class(); ?>>

Take note of how the stylesheet links are formatted. They have to be wrtten exactly like that in order for the JS pre-processor to do its work. I’ve included jQuery because it’s a generally good thing to have, and the HTML5 Shiv script to make sure Internet Explorer displays things properly.

Speaking of Internet Explorer, I ran into a couple of problems while making this tutorial. IEs 7&8 don’t recognize media queries. Normally, you can fix this with a polyfill, like Respond.js, but in this case, it didn’t work. This means that certain things won’t change position in older versions of IE, that will change position in other browsers, depending on the size of the window.

The problem most likely has something to do with the combination of LESS CSS and WP. If someone know a fix for this problem, I’d love to hear about it.

Content is King

To truly demonstrate how semantic.gs works, and how it allows you to easily separate content and presentation, I’m going to show you the content before I start applying any styles.

I’ve created a copy of the page.php template called portfolio-page.png, and that’s what I’m going to use as the template for the home page.

So, here’s the HTML that’s in header.php:

<header id="pageheader" class="container">

<h1>Your Logo(type)</h1>

<nav><?php wp_nav_menu( array('menu' => 'Navigation' )); ?></nav>

</header>

 

And here's the code that's in portfolio-page.php:

 

<section class="container">

<h2>Check out my kick-ass websites!</h2>

</section>
<section class="container">

<ul>

<?php

// The Query

$the_query = new WP_Query( 'post_type=post&posts_per_page=8' );

// The Loop

while ( $the_query->have_posts() ) : $the_query->the_post();

echo '<li><a href="'; the_permalink(); echo'">';

the_post_thumbnail();

echo '</a></li>';

endwhile;

// Reset Post Data

wp_reset_postdata();

?>

</ul>

</section>

And lastly, here’s the output of that code:

The Fun Part (The CSS)

Finally, we get to start the fun stuff. The first order of business is to customize grid.less, which should be in your CSS folder with the other .less files. For the purposes of this tutorial, don’t bother with the bottom part of the file. All of the configuration options you need are at the top.

You want something that looks like this:

// Defaults which you can freely override

@column-width: 60;

@gutter-width: 40;

@columns: 12;

// Utility variable — you should never need to modify this

@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout

@total-width: 100%;

 

That in itself will not make any visible difference, but this code (which belongs in layout.less) will:

 

@import "grid.less";

ul, ol {

list-style: none;

}

.container {

width: 80%;

max-width: 960px;

margin: 0px auto;

overflow: hidden;

}

#pageheader {

padding-top: 36px;

height: 72px;

line-height: 72px;

}
#pageheader h1 {

.column(6);

height: 72px;

}

#pageheader nav {

.column(6);

}

#pageheader nav ul li {

display: block;

.column(4);

text-align: center;

}

h2.intro {

height: 208px;

line-height: 208px;

font-size: 48px;

text-align: center;

border-top: 1px solid #414141;

border-bottom: 1px solid #414141;

margin-bottom: 36px;

margin-top: 12px;

}

section#portfolio ul li {

list-style: none;

.column(3);

padding-bottom: 20px;

}

img {

width: 100%;

height: auto;

}

@media screen and (max-width: 800px) {

#pageheader {

height: auto;

}

#pageheader h1 {

.column(12);

}

#pageheader nav {

.column(12);

}

h2.intro {

height: 144px;

line-height: 144px;

font-size: 36px;

}

section#portfolio ul li {

list-style: none;

.column(4);

padding-bottom: 10px;

}

}

@media screen and (max-width: 480px) {

* {

float: none !important;

}

#pageheader {

height: auto;

}

#pageheader nav {

display: block;

}

h2.intro {

height: auto;

padding-top: 24px;

padding-bottom: 24px;

line-height: 24px;

font-size: 24px;

}

}

As you can see, the “columns” are nestable, and it’s all quite simple to use, once you’ve gotten the set-up out of the way. I hope you all find this useful, and, again, if anyone finds a fix for the IE/media queries problem I’d love to know about it.

Download Sample Theme

Advertise here with BSA

Icons are an important element of an effective and attractive web design. An appropriate use of icons will help you to achieve a professional and solid website design look in your client eyes. Most of the icons are small and very detailed and often it can be challenging to create the quality ones. Designing icons by listed tutorials you will learn a lot of useful and trendy techniques and you will gain a valuable experience and skills in this field.

In this post you will find 20 newest Photoshop tutorials on creating beautiful and modern icons.

Create a Realistic iMac Icon in Photoshop

In this tutorial you’ll discover how to create a realistic iMac icon in Photoshop that includes a 27-inch screen, a keyboard, and a mouse.

Radar Icon in Photoshop

This tutorial will show you how to create a Mac style radar icon in Photoshop.

Draw a Roll of Camera Film in Photoshop

Icon design can be a lot of fun. In this tutorial you will learn how to create a roll of camera film using Photoshop.

Create an Open Book Icon In Photoshop

This very detailed tutorial demonstrates you how to create an open book icon in Photoshop.

How to Draw a Classic Electric Guitar in Photoshop

In this tutorial you will see how to draw an electric guitar in Photoshop (with a bit of help from Illustrator). You will learn how to draw perfect highlights and shadows manually using the Brush Tool and the Stroke command.

Industrial Folder Style Icon

In this tutorial you will be guided through the process of creating an industrial style folder icon.

Create a Cute Twitter Bird Icon in Photoshop

This tutorial will demonstrate you how to create a cute Twitter bird icon in Photoshop.

Learn To Create A Safe Illustration

In this tutorial you’ll see all the process of creating a Safe Illustration. Number of tools used in this tutorial so there’s plenty to be learned.

New iMac Mini Icon Design Tutorial

In this detailed tutorial you will find out how to create a realistic looking new iMac mini, you’ll be able to use the iMac as an illustration or an icon.

Photoshop Tutorial: Create A HD Television Icon

In this Adobe Photoshop tutorial you will learn to create a HD Television icon.

Create a Download Folder Icon in Photoshop

In this tutorial you will find how to create a download folder icon using different shapes and reflections in Photoshop.

How To Design a Realistic Takeout Coffee Icon

This tutorial will show you how to design a realistic takeout coffee cup icon in Adobe Photoshop.

How to Create a Beautiful Printer Icon in Photoshop

Learn how to create this beautiful printer icon with reflections and shadows all within Photoshop.

Speedometer Design From Scratch Tutorial

In this detailed tutorial you’ll discover how to create a speedometer from scratch, you’ll learn such things as text on a path, using the pen tool, working with shape layers and much more.

3D Glassy RSS Icon Tutorial

This tutorial will help you to create a huge, glassy 3D RSS icon in Photoshop.

Create a Photo Realistic iPhone in Photoshop

This tutorial will show you how to create a photo realistic image of Apple iPhone4.

How to Create a Battery Icon in Photoshop

In this tutorial you will learn to draw a battery icon with 3D look in Photoshop.

Create a Microchip Icon Using Photoshop

In this Photoshop tutorial you will see how to create an isometric microchip icon using basic drawing tools and transformations.

Blog Writing Professional Icon Tutorial

Very detailed and beautiful icon tutorial in Photoshop. Lots of useful and modern techniques used.

Create a Camera Lens Icon in Photoshop

This tutorial will demonstrate you how to create a camera lens icon using Photoshop.

Advertise here with BSA

The popularity of jQuery continues to grow. This means that we’re seeing it used on more websites these days, and there are more developers coming up with new ways to use it. The great thing about that is many of these developers are sharing what they learn though tutorials and plugins. We’re always on the look out for this new jQuery stuff. So for this post, I’ve gathered 10 tutorials and plugins that will help you learn and implement some fresh jQuery effects in your projects.

Beautiful Background Image Navigation

This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position.

Quovolver

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

Lettering.js

Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography.

imgAreaSelect

imgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

An HTML5 Slideshow w/ Canvas & jQuery

This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Tiny Carousel

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

jQuery Panel Gallery 2.0

jQuery Panel Gallery is a plugin that converts a set of images into a slideshow with fancy transitions.

Collapsing Site Navigation

Learn how to create a collapsing menu that contains vertical navigation bars and a slide out content area.

Style my Tooltips

Style my Tooltips is a simple jQuery plugin to better style native browser tooltips.

jQuery Mega Select List

The jQuery Mega Select List is a plugin that converts a long select-list into a mega-menu style display, which makes it easier to find and select the right option.

Advertise here with BSA

Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build a tab navigation with jQuery, here are 11 tutorials and plugins to help you get going.

Create A Tabbed Interface Using jQuery

A tutorial and plugin for creating an animated tabbed area.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.

Create a Slick Tabbed Content Area using CSS & jQuery

This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Feature List

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Fancy Sliding Form with jQuery

This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

Create A Tabbed Interface Using jQuery

This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.

Tabify

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.

Accessible-Tabs

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

idTabs

idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

jQuery Moving Tab and Sliding Content Tutorial

Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.

Advertise here with BSA

jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential.

It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.

Form validation from scratch

Develop a simple and powerful jQuery script for common HTML form validation.

Incredible jQuery Login Form

Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.

Creating a Digg Style Signup Form

Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.

Color jQuery & CSS3 Sliders

Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.

Working with Events – Part 1

Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.

Ajax-based Form Submission

Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.

jQuery Fade-in Spoiler

Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.

Dynamic Page Content Replacement

Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.

Simplify Ajax development with jQuery

Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

Simple Toggle with CSS & jQuery

jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.

Create a unique Gallery with z-index

jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.

Design Skype-style buttons with jQuery

As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.

Apple-style Slideshow Gallery

Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.

From PHP & XML into jQuery

Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.

Manipulating the DOM(code snippits)

Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.

Semantic Blockquotes with jQuery

In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.

jQuery Basics with Google Maps

In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.

Create a Live Updating List

Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.

Flickr CSS Menu Design

Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.

Advertise here with BSA

Last year we posted a collection of jQuery slider techniques and plugins. In a years time the trend of using these types of sliders or slideshows to display featured content has only grown more popular. This means more sites are using jQuery sliders and more people are coming up with new ways to create them. If you’ve yet to try implementing this on a site, here are 10 more techniques and plugins that will help get you started.

Fancy Sliding Form with jQuery

Automatic Image Slider w/ CSS & jQuery

Animate Panning Slideshow with jQuery

s3Slider

How to Create a Simple iTunes-like Slider

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

A Bullet-Proof Content Viewer

Automatic Infinite Carousel

Nivo Slider

loopedSlider

Advertise here with BSA

Part of being a designer is keeping your skills sharp and up-to-date. Skills may span a broad range of tools, but probably the most used tool of all designers is Photoshop. In this post, we’ve collected 15 fresh and useful Photoshop tutorials to help you brush up on your skills and learn new techniques. The types of tutorials in this collection include text effects, photo manipulation, interface design, and more.

Simple Underwater Scene in Photoshop

In this tutorial I will show you how to create a underwater scene with some bubbles and light effects. We will use the Brush Tool to create the bubbles and basic tools and filters for the rest of the effects. The whole process won’t take more than 45 minutes and as usual you can download the Photoshop file in the end of the tutorial.

Creating Retro Folded Typography

In this Photoshop tutorial, we’re going to create retro-looking text that seems like it’s constructed using folded strips of paper. We’re going to step away from the computer a little bit and use a real model as a reference for our project.

How to Create a Photo Realistic Camera

In this tutorial we will demonstrate a powerful combination of vector shapes, layer styles, and manual drawing to create a photorealistic camera. So realistic you’ll think it’s just an ordinary photo.

Making a Book of Magical Playground Scene

This tutorial will show how to create a fantasy book scene. We will be using various advanced Photoshop techniques to make the composition as realistic as possible.

3D Water Text Effect with Repoussé in Photoshop CS5

In this tutorial I will show you how to create a water text. Even though it might look complex it’s a very simple effect. We will be using the new Repoussé then some stock photos to create the effect.

Elegant 3D Text Effect in Photoshop

In this tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths.

Design a Multimedia Website Layout in Photoshop

In this tutorial you’ll learn how to use photos, brushes, and textures, and 3D objects to design a creative multimedia website layout in Photoshop.

Hexagon Bokeh Effect in Photoshop

In this tutorial I will show you how to create a digital bokeh effect with hexagons. We will use the brush engine, patterns, blend modes and basic filters to achieve this effect.

3D Layered Text Effect

In this Photoshop tutorial, you’ll learn how to create a 3D text effect using actions, basic transform operations and filters.

Design a Multimedia Website Layout in Photoshop

In this tutorial, you’ll learn how to create a isometric microchip icon using basic drawing tools and transformations.

Create a Distressed Vector Typographic Poster Design

Starting with custom made type in Illustrator, we’ll move our vector graphics into Photoshop for some serious distressing with Photoshop brushes, blending modes and more!

The Creation of “Lost in Memory” Epic Fantasy Artwork

In this tutorial, you’ll learn the the steps taken to create this epic Fantasy Style artwork “Lost in Memory” in Photoshop. It’s a combination of a meteor effect, some matte-painting tricks plus lighting effect in this tutorial.

Create Abstract Fake 3D Objects in Photoshop

This tutorial will demonstrate how we can use the Pen tool to create abstract vector shapes that form into a beautiful piece of fake 3D artwork.

Create a Sleek and Stylish MP3 Player

In this tutorial you’ll learn how to create a sleek, stylish, and simple MP3 interface in Photoshop to play audio files for your Flash projects.

Create a Photo Realistic USB Cable

In this tutorial you’ll learn how to draw a photo realistic USB cable using Photoshop’s pen tool.

Advertise here with BSA

We all know that JavaScript allows us to do great things when it comes to user interfaces, but with a little imagination and creativity, the same types of effects can be created with only CSS. Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done.

How To Create a Pure CSS Polaroid Photo Gallery

Creating a Bubble Coda Style with CSS3

Accordion using only CSS

How to Create a Fancy Image Gallery with CSS3

CSS3 Hover Tabs without JavaScript

Create a JQuery Content Slider Using Pure CSS

How to Create a Valid Non-Javascript Lightbox

Pure Css Data Chart

Bubble Effect with CSS

CSS Image Switcher

Pure Css Line Graph

CSS Image Switcher

Pure CSS Timeline

Advertise here with BSA

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, we’ve rounded up 15 useful HTML5 tutorials and cheat sheets.

Tutorials

How to Make an HTML5 iPhone App

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Design & Code a Cool iPhone App Website in HTML5

Coding A HTML 5 Layout From Scratch

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Have a Field Day with HTML5 Forms

Designing a blog with html5

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Structural Tags in HTML5

Coding a CSS3 & HTML5 One-Page Website Template

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

Cheat Sheets

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML 5 Pocket Book