Designers spend hours carefully crafting every little detail in the design of their website, but the quality of their coding often comes up short. For proof, just look at the sites showcased in CSS galleries, 90% will have validation errors – Most of which are easy and simple fixes. Let’s look at some of the most common validation errors that appear time and time again, and how to correct them to really finish off your sites with high-quality code.
Year: 2010
Design a Textured Outdoors Website in Photoshop
Learn how to design a textured outdoors website in Photoshop, by following this easy, step by step tutorial. Check it out and start learning!
In part one of this website build project, we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’.
Using CSS Text-Shadow to Create Cool Text Effects
Learn how to use the CSS text-shadow to create cool text effects, by following this easy, step by step tutorial. Check it out and start learning!
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!
Basic Beginners’ Guide to Installing a jQuery Lightbox
Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning!
Have you always wanted to add those cool Javascript lightbox galleries to your website, but haven’t the first clue about how to do so? This guide is aimed at the Javascript coding noob and will take you through the step by step process of linking up the jQuery library, installing the lightbox script and getting everything working.
Post-Install Plugins to Enhance & Protect WordPress
WordPress is a fantastic, easy to install application that’s packed full of useful features. It’s all ready to rock straight out of the box, but there’s a few easy customisations you can make with a cocktail of plugins that will enhance the functionality as well as offer crucial protection. This is my collection of post-install plugins that I immediately add to every WordPress install I work on – There’s no fancy gallery plugins here, just back-to-basics additions to improve speed, SEO and security.
Coding a Stylish Blog Design Layout in HTML & CSS
Last week we went through the process of designing a stylish blog layout in Photoshop. Now let’s take our visual concept and cut it into slices for use with neat HTML and CSS code. All our browser testing will be done on this coded concept before converting the design into a full WordPress theme.
Super Cool CSS Flip Effect with Webkit Animation
There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.
Designing an Infographic with HTML, CSS & jQuery
Learn how to design an infographic with HTML, CSS and jQuery, by following this easy, step by step tutorial. Check it out and start learning!
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.
Coding Up a Web Design Concept into HTML & CSS
Learn how to code a web design concept into HTML and CSS, by following this easy, step by step tutorial. Check it out and start learning!
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.
Design & Code a Cool iPhone App Website in HTML5
HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial, we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.
