• Tweet
• Sharebar

When you’re new to website building, web design can be a very intimidation process. But here are some tips and tricks to help get you started.

Before you start…

• Learn your way around a Web Editor
  There are many different editors available and they are all good (and bad) in their own different ways. It’s important to find out what works best for your needs and stick with that.
  If you don’t want to spend too much try Nvu. It’s free and recommended by many Webmasters.
• Learn the essentials of CSS
  CSS (aka Cascading Style Sheets) is simply a sheet of attributes that assigns various styles to your website. Don’t be put off by how confusing it all looks, It’s relatively easy to learn and a very handy function if you just learn the basics.
• Find a Design Template
  There are plenty o sites that offer templates and you can even get some for free. I’d recommend you choose a template that comes with CSS, unless you plan to make your own style sheet from scratch.
  Once you’ve got a template you’d like to use, open it up in the editor you’ve chosen. Always save a backup copy of the template in case you want to start over.
• Learn Basic File Management
  Websites are basically a series of files organised on a particular server. Whatever editor you decided to use, you should organize your website files so they are easy to find and manage.
  Don’t just throw all your files in one folder. Organize them into logical sub folders and always store your images in a separate folder.
  Keeping your file structure well organised is helpful, especially if you’re using a Web editor. Not only is it easier for you to find files, it will be so much easier internally linking the pages and adding images because you know where everything is.
• Find a Graphic/Image Editing Program
  You don’t have to be a world class graphic designer to make a good looking site, but it does help to know how to resize and touch up graphics. If you want to create images from scratch Paint Shop Pro and PhotoShop are two popular programs used for this.

What tools are best?

Cascader is invaluable for cleaning up your code if you use a HTML editor like Kompozer: it tidies up your divs, spans, and tables into classes and puts them into a separate CSS file.

HTML Colour Codes – gives you the hex codes for colours, which is brilliant when working on applications programs such as forums and blogs and you want to change the colours of the background and text.

IE NetRenderer displays pages as various versions Internet Explorer would, giving you an sneak preview of how they look in those browsers. Browser Shots does the same for all pretty much all browsers – except IE, so if you use both, you’ve got them all covered.

Web Page Size gives you a great range of views of the page you have created at different sizes and screen resolutions. Given the variety of screen sizes and resolutions, this is an essential tool.

This is a guest post from Roxanne from link building service site SEO-Doctor.co.uk.