Getting ready to edit your template to make a website

In this part of our series you will start editing your template to make your website. Don’t worry, I’ll guide you every step of the way so you don’t get lost.

What do you need?

1. The BigSpaceLove template found on Free-CSS-Templates
2. A browser to open your website. (e.g. Internet Explorer, Firefox…)
3. A text editor to edit your website. Preferably one that supports syntax highlighting. Programmer’s Notepad is free and is what I’ll be using.

Start editing the template

Open up index.html using your text editor. If you remember the basic structure of a website we taught you can notice that it is the same way the html file is structured.

• The header contains “Website Title” and “Subheader, website description H2″ in this case
• The body is separated into a left section containing the content the and a right section containing the menu.
• The footer contains information about the person who created the template.

You will notice these sections are denoted with the following tag in the HTML document:

The <div> </div> tag

You can think of the div tag as a section within your HTML document. They will usually be named after the sections described above.

Finding the right template

Finding the correct template for your needs can be quite tricky. For example, I needed something clean and fresh while maintaining a level of professionalism so I decided to go with the layout found on my personal website. If you noticed, you can get a nice looking website once you find the right template.

But how did I find it first of all? I simply dug around the internet. Google for me was a great place to start but for those that need help, I’ll show you a couple of sites that will give you a head start.

Note for tutorial

For purposes of the tutorial I encourage everyone to use BigSpaceLove found on the front page of Free-CSS-Templates so you can follow me step by step. This template is fairly easy to edit.

Where to find free CSS templates

• Smashing Magazine – 100 Free High Quality XHTML/CSS Templates – Great list showing off a large variety of templates
• 1st Web Designer- 101 High Quality CSS and XHTML Free Templates and Layouts – Another great list you shouldn’t miss out on
• Itensivstation – Basic CSS Templates – For those who want to start from scratch check out these templates
• Mitch Bryson – Free CSS Templates – More basic CSS templates
• FreeCSSTemplates.org
• Free-CSS-Templates

Read more »

What is a website made out of anyways?

If you take a good look at a couple of websites, you might notice their structures share a couple of things in common. (If you are wondering why you need to know this, you’ll learn why really soon.) Each website usually contains the following basic elements:

• A header usually contains the logo of a website along with a brief description. Sometimes you may find a menu there as well.
• The main body or content which may take up most of the website which contains the content of the website.
• A sidebar which usually contains the navigation of your website.
• A footer which usually contains copyright and licensing information.

Not all websites follow this traditional structure. It all depends on what type of website you need to suit your needs.

So what is under the hood?

So, what makes a website a website? Under the hood websites are made up of different coding languages that serve different purposes. I’ll only describe the basic ones you need to be aware of and will be working with.

Don’t worry, you don’t need to know anything. I’ll help you every step of the way.

HTML

HTML stands for Hyper Text Markup Language. It consists of HTML tags that are used to mark up content and usually have a starting and ending tag. If you have worked with website development in the past, edited a profile on a social site such as MySpace you probably already are familiar with the basics of HTML. An example of HTML is below.

Read more »

Getting started on your first website

Ever wanted to create a website but had no idea where to get started? No worries, I’ll guide you through the simple process and it will require no prior experience. Is it really that easy? After you complete my series of tutorials, it sure will be. We’ll be using the template BigSpaceLove found on Free-CSS-Templates to create a simple personal website similar to my personal website.

You don’t need to know anything. I’ll even make sure you understand the fundamentals so you can continue learning more on your own afterwards. So no, you don’t need to know how to design a web page, or even how to code one.

This series will teach you how to make a similar website pictured above

Why would I need a website anyways?

First of all, a website might serve a great variety of purposes such as the following:

• You may post your resume, CV, or portfolio online to attract potential employers
• Might want to share a hobby
• Promote a product you are selling or endorsing
• Start a community
• Simply to learn!

In reality, the possibilities are endless. It’s actually quite a good skill to have and it can pay off. While I was in highschool I managed to create websites and get paid pretty darn well for it since people think its more complicated than it looks.
Read more »