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 on CSS galleries, 90% will have validation errors – Most of which are easy and simple fixes. Let’s look at some of the most common errors that appear time and time again, and how to correct them to really finish off your sites with high quality code.
Posts from November, 2010
Last week we went through the process of designing a detailed website design for Pinewood Forest. This week we’ll code up the Photoshop concept into a working web page. See how the design is exported into individual images, how the HTML skeleton is put together and how the CSS coding replicates the styling from the concept.
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’.
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!
Last week we went through the step by step process of building a simple yet stylish single page portfolio site concept in Photoshop. This week we’re going to code up the design into a complete working HTML and CSS website and add the finishing touches in the form of super duper jQuery effects.