Tutorial – Nightfall – Intro


[Note:] This tutorial is for people who have already been making websites. It is not for beginners. For this tutorial I will assume that you understand the basic uses of tags, images, fonts, can use a text editor (I recommend PSPad), and have overall general experience in web design. This first step will not get into the advanced topics, so webmasters with only mild experience should feel at ease. This tutorial does assume no knowledge of web standards or CSS. [End Note.]

Web Developers have been coding in various ways for a long time. If you are reading this, then perhaps you’ve decided that you are ready to make the transition to web standards. While there are plenty of tutorials that start with the bare basics of how to code following standards, many seasoned web developers/masters want to know what actually applies to their sites. I’m going to attempt to do that in a step-by-step fashion.

This tutorial will walk you through the steps needed to actually take an existing web page that is not following standards, show you where the problems are so that you can find them in your own sites, explain what the substitutions are from the old way to the new way, and let you learn to start coding to standards on a beginning level.

The First Project

Codename: Nightfall

We will be doing our first project using the free version of a template that was available online from Pegaweb.com. I am providing this template to you in a zip file, and we’ll be taking that webpage, and actually turning it into a standard following piece of beauty.

I’m going to explain quite a lot as we move along, but the first thing that you should do is download the template by going to this page and grabbing ‘Nightfall – Intro Starting Files.’

Now, some of you may wonder if I’m using this template because I hate the design and I want to make an example of it. That is absolutely not the case. The designer at Pegaweb is actually a very good graphic artist, but like many people who are good artists, the code behind the page is not up to par. That’s perfectly fine. Artists do not need to know how to code wonderfully. Coders do. I am most definitely not an artist, and I have a great amount of respect for people who can work magic with computer art. This template has managed to do something that is very hard – use a lot of colors without them clashing, and still focus the eye on the main content part of the page. Additionally, this design has a very lively and playful design that I found relatively unique and perhaps good for a business that sells crafts or curious objects. So, I picked the template not because it was bad, but because it was worth making up to standards.

So, without further ado… let’s start by unzipping that download into a folder. Then move on to the next step.