Website Design for Beginners

Macromedia Dreamweaver Code View

I just thought I would write a mini guide on useful resources and links for creating your first website. Over at the HGP forum on Overclockers UK a common question is what sort of software and resources somebody needs to design and make attractive websites. This includes the software they need to make a website, as well as good places for learning (X)HTML, CSS and web standards.

There are quite a lot of WYSIWYG editors available to rapidly produce websites; some obvious ones are Dreamweaver, Frontpage and Nvu. These will have all the tools you need to make a website built in: code editor, design view, link management, site management and FTP.

If you are building a one off website, and don’t have the time to learn to hand code a website, then one of these programs might be the best option for you. If, however, you want to make professional, attractive and accessible websites, then learning to hand code (X)HTML and CSS would be the better option. This way you will learn some skills that you can transfer to any web development program, rather than limiting yourself to one.

Some good free text editors for hand coding are:

If you need a separate FTP program as well, then I would recommend FileZilla. It may also be useful to download various web browsers, as you will need to test how your websites are rendered in each one. You will soon find out that not all web browsers will render your website the same way.

The main browsers you will need are Firefox, Opera, Internet Explorer, Safari and Netscape. Obviously, if you don’t have a Mac you won’t be able to install and run Safari. You can test how your website is rendered in various different browsers and operating systems thanks to Browser Shots. This free website will take screenshots of your website in different browsers, very useful.

I would recommend that you develop and test your website in Firefox, then test it in other browsers and make any alterations needed. Using the Web Developer Extension with Firefox is also a particularly useful tool for testing and developing your websites.

Once you have your development area set up you can start to look at some tutorials on (X)HTML and CSS. The following websites are good places to learn these:

I also recommend that you read about Developing with Web Standards and the Semantics and Structure of (X)HTML.

The following websites are also useful resources for the design and development of websites:

You may also need some inspiration for ideas on design, graphics and interaction. The following CSS showcases should give you an idea of what can be achieved:

Hopefully this should provide you with a good starting point, as well as the resources you need to start making your first website.