quick tips

» Organize your files in the same folder. Don't have images and files floating all over your computer.

» It's easy to overwork your design, so take a step back once in a while and evalutate your work.

So you want to learn how to make a website?
then start with design!

This 'how to' website will teach you how to recreate this website: http://www.mariasurawska.com/tea
It will go over the html, css and javascript needed to create the same look and effect.


Start with gathering your content. Take photos or find photos of the subject you want. Do research so that all of the information on your site is correct. Site your sources where needed.


Bust out Photoshop and start desiging! Start your design from the bottom up. Making the backgrounds first and the content last.
Once you have a rough idea of how the site should look, start pieceing it apart and making new documents from the main file.
Save each piece into gifs using the "Save for Web" feature in Photoshop. This keeps the quality of the image, but reduces the size, allowing for faster loading times.

a typical design process

Here is the process that went along with designing this particular website.
You can see that compared to the live website, many changes have been made along the way. You don't have to be trapped in what you make.

right left