Kumail.H.T`s Blog

As we all see it, the web is growing exponentially and more users find the need to learn to design and maintain their own website, so in this post i would like to guide you through all the tools and resources you will need to start and maintain your own website using open source and free software.

I will try not to repeat what others have already done very well, instead i will lead you through all the websites you will need in your learning process. Most of the software’s i will mention are compatible on different operating systems, if not you can use the websites i mention to search for alternatives. This is my first post and i would love to hear any suggestions which i could use to further improve the blog.

You might be under the impression that free software is free for a reason, while the reason being lack of quality and features. Well that’s NOT the case. Most open source software is at times better than its counterparts.

Learning to design and create a website can become overwhelming. If you get exhausted, take a break and do something completely different to take your mind off the subject.

Getting Ready

before we start you will need to ‘learn how to learn’. You will have to understand the fact that all you will ever need to know is usually available on the internet, to use that information you will need to search for it using google.com. think of Google as your teacher. if you have a question, just ask and you shall get an answer.

You will also need a few services which will help you a lot in the future. Sign up for a Google account,  and start using gmail for your email and dump whatever you use. The reason is that gmail is fast, reliable, has a lot of storage and does NOT annoy you with pop-up adverts etc.

[and by the way Google is NOT paying me for advertising its service, it is without doubt the best free service you can get and that is why i recommend it strongly]

Start using google reader to view your RSS feeds. For those who have no idea what RSS is then check this out . If you like my blog you can subscribe here

Most of you already use Firefox, but those of you who don’t should get Firefox. There is no reason for anyone to use Internet explorer. We will be using Firefox Add-ons in this guide which will make your life easier, so please trust me on this one and get Firefox, you wont regret it.

Get rid of fake software

I am not an anti piracy freak, all I am saying is that using open source software can help you greatly.

If you are using a fake copy of windows xp or vista, then you should definitely give Ubuntu Linux a try.

If you don’t want to risk installing a new o.s then you can boot from the CD and use it without effecting your computer.

You can also use Fedora Linux, or even better you can run it from a usb drive and carry our o.s around with you.

Open Source alternative

There is an open source alternative for almost all software, and you can find some really good software on the sites below. Try not to download everything at once and learn one step at a time.

http://www.osalt.com/

http://www.opensourcewindows.org/

http://www.opensourcewindows.com

http://downloadpedia.org/Open_Source_Windows

Learn how to code in HTML/CSS

This is not as hard as it sounds, it took me 4 days to finish the lesson on the site below and it was totally worth it.

http://www.html.net/

Get the required software

I will now list the software you will need and its use.

Website Development

kompzer

kompozer is an excellent substitute for adobe`s dreamweaver. You can use this to do the HTML/css coding for your site , [you can learn HTML and css on the site mentioned above html.net], the interface is pretty easy and you might find it easy if you have worked with frontpage.

notepad++

you will need to work with css and HTML files, and i would recommend using notepad++ , you can use this if you want to edit css, HTML in pure text.

Image editors

Gimp [Gnu Image Manipulation Program]

It wouldn’t be appropriate to say that Gimp is better than photoshop but it can fulfill most needs as a designer, I think Gimp has its own advantages. It is free and does a very good job at most tasks.

Inkscape

I love inkscape, in fact i like it so much i have done most of my designs for the past few months using only Inkscape. Inkscape allows you to create vector graphics – that means if you change the dimensions or zoom in or out , you will not reduce the quality of your image. Inkscape is best for logo`s as they usually need to scaled to fit your needs. I would die without this and i would recommend this to all.

Paint.NET [windows]

This is a pretty good image manipulation app which is easy to use and looks pretty good too.

FTP Client

FireFTP [Firefox add on]

This is a life saver , it really is. it will save you the headache of opening a new software to FTP to your site, you can use it right from firefox, and if you don’t have firefox please get it.

Filezilla

If you need more control or don’t have firefox then you can use Filezilla.

Office

Open Office

If you ever feel the need to share data through a spreadsheet , document or a presentation , Open Office will get the job done.

Foxit Reader

What if you want to open a PDF file without crashing your PC with adobe reader , use foxit reader and save your PC now .

Testing

Xenu Link Checker

This will test all the links on your website to see if dead links exist, very useful.

Browser Shots

Check how your site looks on different Operating Systems and different browsers.

Designing and coding the website

‘Help Developer’ has done an amazing job explaining how to design, slice and code your website.

Design and code a website in The Gimp, HTML and CSS

what you will learn in this tutorial is how to design your website in Gimp , once you are familiar with Gimp you can design your own website from scratch.

Then he slices the image and codes it in HTML and CSS. If you missed it you can learn HTML and CSS at html.net

once you get your site ready , test the website for broken links with xenu link checker.

Now you should have a home page and link to the other pages from your home page using your navigation.

Uploading your site

After doing so, you will need to use fireftp or filezilla to upload your website to a server.

Make sure that you rename your home page HTML file to index.html , this is the file that your browser will open when you enter your website.

You will need a domain and hosting which you can get for free at 50webs.com or awardspace.com .  If you need more features or space you should check out this webhosting site.

Once you sign up for a free hosting account here you can then use the ftp user name and password to connect to your website through your FTP client. Once you have opened your FTP client you will see the files on your desktop and the files on your server. Now you should transfer your index.html and the other files that relate to it to your root folder on your server. It is usually done by right clicking and selecting upload.

You have just uploaded your website , go to your domain and check if your website shows up.

Test and see if it all looks good and the images are showing up etc, also check your website on different browsers at browsershots.org to finalize it.

If its all good, you can now jump in joy.

Similar Posts:

• 35 Awesome Gimp brushes
• Top 10 websites that suck but shouldn’t
• Freebie: Vector cell phone icon
• Would you buy Photoshop if released on Linux – Cast your vote
• Whats wrong with this button in Google reader