Tuesday, June 8, 2010

Creating websites like Grandma, from scratch

There are so many different ways to create websites. You could download dreamweaver, go to a template site and download a template, or use a service like Google Sites. Personally I don't use any of them. Not because they are poor products, all of these options are legitimate tools for creating websites. I rather build my website from scratch. I've found that starting with no templates, or fancy programs helps me to have a better of understanding of whats going on in my sites. This concept becomes more and more important as the sites you work on become larger.

This post is definitely intended for a person who is interested in playing with webdesign, or a hobbyist that has never built a site from the ground up on their own. I'll go over the tools that I use and have used, what worked for me, and some of my mistakes.

Development Environment - kind of a fancy way of saying the program that you will use to write your code in. All the files that I use and mention in this post can be opened in notepad, emacs, vim, or whatever other text editor you may have. That being said I use notepad++. Its an easy to use text editor that will color your code making it easier to read as well as tons of other features. Its free and lightweight, so it won't suck at your system resources.

A lot of people like one browser in particular. It could be chrome, firefox, safari, or IE8. This is totally fine when you browsing. When it comes to writing a website from scratch, or in any other way, you need to make sure it looks the same on all browsers. Every browser interprets code differently. I never checked IE7 when developing a site for a club, and found out a month later that everything was a disaster!

Languages - There are two necessary languages that you'll need to familiarize yourself with. Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS). I highly advice running through the tutorial at w3schools. After taking the time to run through these tutorials you will probably already able to create good looking functional websites. There is another optional piece to the pie. In order to create movement and fancy bells and whistles on your site look into javascript. Run through the tutorial for it on the w3schools site. Once you understand javascript you'll be able to add photo albums, hide and expand elements, and have things "pop out" of the page when you click on them. One of the most useful things about javascript is that tons of people have already written tons of different functions that you can take advantage of. There are multiple libraries of code such as: JQuery, MooTools, and tons more. Getting to the point where you can use all these different technologies together and create the website you have in your head takes a lot time, effort, and trail and error. Don't give up!

Helpful Hints:
-Google Search everything! There are tons of tutorials and examples out there.
-Color Lovers - a website that has patterns and color templates to help you choose colors for your site