I also work in the same manner for my global CSS document. I keep this stylesheet semantically written and looking very tidy, grouped by the regions within the HTML markup, so, for instance ‘Header’, ‘Content’, ‘Footer’. Within a commented area at the top of the document I detail this structure and other useful document meta data such as the colours used in the design, when I wrote the document and when amendments have been made. Rather than going into too much detail on this I will instead direct you toward Jina Bolton’s extensive post on creating sexy stylesheets.

So how does this help? If you’re working alone then it means that you’ll be standardising your working convention which will help when you return to projects in the future for amendments and updates. You’ll instantly be familiar with the code and its structure. Employ this in an agency environment or within a team of designers and you can pick up each others projects safe in the knowledge that it will be familiar too.

I have been working in this way now for around 2-3 years and I wouldn’t go back. Of course there will be the odd project that breaks convention and has to be structured in a different way in order to make it behave – in these instances try to keep to the usual formatting style as closely as possible and comment your code well for the abnormalities.

Thanks to Gina Trapani from Lifehacker for the heads up on this. Watch Xobni in action.

This post will assume knowledge of building static HTML web pages and will mainly benefit those that have no prior knowledge of using PHP or ASP.NET to build a website.

Firstly take a look at a simple open source solution that can be run on Linux, Apache or other equivalent server. You do not require a database to run this, all I am going to use is some very simple PHP includes which will allow the HTML web document to be broken down into different modules so that the content of a page is separated from menus, the Head tag and other parts of the website which will be accessed by several pages. For a mini site this may only be used for one page but you will be able to see the scope for expansion.

Firstly I will separate the opening HTML tag, Head and opening Body tag into its own document. Nothing special need be done here, as soon as you write the opening Body tag save the file as header.php.

Next we will create the main menu. In a new file we begin the next line after the Body tag which we opened in header.php. I have opened up a containing Div, added in the markup for the menu and left the containig Div open in this particular file. Save this file as menu.php.

Rather than moving on to the next markup that will appear after the menu, we will now skip right down to the footer which will incorporate the copyright statement, quicklink menu items and the closing container Div, Body and HTML tags. Save this document as footer.php.

Now that we have the header, the menu and the footer that will be consistent on each page we can now call each of these elements to each new page that is created in order to complete our HTML document. This is easily done with PHP includes which are written in the following example. The header first, followed by the menu and then the markup for the particular page being worked on. This is then all closed by calling the footer. Save this file as index.php so that it becomes your home page.

This should give you a taster of how to markup a page with PHP includes. Any element that is going to be duplicated over multiple pages can be written into a separate document and called from an include. Any changes that are then made to these files will reflect site wide without unnecessary repetition.

In the next part I will take you through ASP.NET master pages and how these can be used to template a website in an even more powerful way than you have witnessed here with PHP includes.

The third camp are the self taught. They have learnt HTML and CSS off their own backs and not content with this they are hungry for more teaching themselves around graphic packages such as Photoshop and Illustrator while also dabbling in the server side programming. This is the camp I established myself in. I am in this camp at the moment. I do not wish to leave this camp for another.

There are of course some cross over and lines get blurred. I for one studied graphic communication but self taught everything web related.

We have here a wide spectrum of people that work with the web. Those that have logical minds and those that have creative minds with everything else in between. Is it possible to develop your mindset from a far more creative side to both a logical side too? This is currently what I am trying to do. To further my progression I wish to learn an object orientated language, my weapon of choice is C#. I have attempted this before but found the books I tried to learn from too much of a learning curve and demanded some prior knowledge of programming. I have now found a book that I would recommend for fledgling programmers with no previous knowledge. Visual C# Step by step, Microsoft Press. It has eased me in with the makeup of the language and familiarised the syntax in easy to understand examples. However, approaching the third section of the book I found that with the shear amount of information that I was taking in with the read so far I was unable to remember everything and then trying to look up how a particular method conducted itself quickly while following the later chapters became difficult. Instead of plodding on I began searching around the web for cheat sheets. There are some decent cheat sheets out there, but with such a sheet not everything will be detailed and of course it is all very cut down. Next I tried printing off the summaries of each chapter in the book. This wasn’t particularly manageable either. Instead, now I have begun rereading parts of the chapters and writing up C# documents with my own commenting and examples of how each method/function/whatever works. Each item is given it’s own document and saved under the name of the element I am describing. This has built up a library of easily referable documents I can call upon while reading the book and following examples.

This will be of use to others in my position so I will be making this library readily available once completed. It should be a good alternative to cheat sheets and provide just that little bit more scope when trying to learn not only a new programming language, but a new way of thinking.