How to make a website: the only 8 tools you need to make websites
You don’t need many tools to be a great web designer. Only 8 awesome tools are necessary. With these tools, you’ll be able to design, code, upload and debug any website!
Unlike many unorganized and unhelpful huge lists of tools, here is a special list for beginners, with only the best tools chosen!
“How to make a website” series
This article is the second of a series untitled “How to make a website”. In this series, I show you step by step how to make simple, effective, and standard compliant websites.
All the articles are short so that they are easy to digest and memorize. With a little commitment, you’ll soon be able to call yourself a web designer!
Here are the articles of the “How to make a website” series:
- The nature of web design
- The only 8 tools you need to make websites
Coding tools
Notepad++
Notepad++ is a free source code editor and Notepad replacement that supports several languages.
It’s one of the best software to write code: it’s powerful, fast, free and can be extended with many awesome plugins! (I write half of my code with Notepad++ and I really love it!)
Please also note that all my “How to make a website” series tutorials will use Notepad++, so be sure to download it.
Aptana Studio
Aptana Studio is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.
Once in a while, Notepad++ shows its limits (for instance when you need to work several hours on a big project, debug your code, or use advanced coding functions…), that’s when Aptana Studio shines!
The main problem of Aptana Studio is that it is very very slow to launch. On my computer, it takes almost 2 minutes to start this software… But, beside that, it’s an awesome (free) tool!
Design tools
Adobe Photoshop
Photoshop is the professional standard in digital imaging. Basically, Photoshop is the only tool you need to create and edit images (except vectors).
Photoshop is very powerful and easy to learn. But it is really expensive too. If you can’t afford this software you can consider using Gimp, a free alternative (powerful too, but not user-friendly at all).
Adobe Illustrator
Adobe Illustrator is the best vector editor (to make it simple a vector is an image that doesn’t lose its quality when you resize it). It will be your tool of choice when creating logo, illustrations and most of your print designs.
As for Photoshop, Illustrator is awesome but expensive. If you don’t have enough cash to buy it, you can try Inkscape, a free and nice vector editor software.
Other Tools
Wampserver 2
WampServer is a Windows web development environment. It allows you to create web applications with Apache, PHP and the MySQL database. It also comes with PHPMyAdmin to easily manage your databases.
You will need Wampserver 2 every time you need to work with PHP, and/or a MySQL database. It’s a great and free tool to make your website perfect before you put it online!
FileZilla
FileZilla is the best free FTP client. (FTP is what you use to upload your files and put your website online).
(Once you know Web Design a little more, you can also try WinSCP, an open source free SFTP client and FTP client for Windows. It offers more functionalities than FileZilla, but is also more difficult to use).
Firefox 3
Firefox 3 is the best internet browser. It is free, fast and can be extended with many add-ons.
Once you have installed Firefox 3, you should at least add the 2 following add-ons: Firebug and Web Developer.
Please note that you should NOT use Internet Explorer as your main internet browser. It is full of bugs and not standard compliant.
IE Tester
IETester is a free WebBrowser that allows you to have the rendering and JavaScript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.
As I just told you, IE (Internet Explorer) is full of bugs. IETester will help you to discover these bugs so that you can IE-proof your website.
What now?
You should download and install these 8 great tools. Then use them enough to learn their basic functions. After that, don’t miss the next “How to make a website” article.
Do you use any other tool on a daily basis? Did I miss any important tool?
Any advice welcome!
Related Posts
You may want to check out the following related posts:
Roland
November 24th
FIleZilla rules !!! :)
My webdesign tool-kit consists of:
- Adobe Creative Studio Design Premium
- Firefox with a lot of plugins
- FileZilla (I liked CuteFTP more, but it’s not for free)
- Notepad (actually I like wordpad more, but it doesn’t save in Unicode, UTF-8 and so on…)
- Safari, Google Chrome, IE8, Opera for cross-browser compatibility check
- Instant Eyedropper tool – very useful and simple eyedropper :)
- Winamp – you can’t design without an inspiration, and music is a good inspirative content :)
- Cup of coffee in the morning and lot of cups of green tea during the day – that’s for a good mental condition :)
I think that’s all :)
Like or Dislike:
1 
0
Tsedaka
November 24th
Yes, music is GREAT!!!
I keep switching between classical music and rock, depending on the mood…
Btw. I’ll by back on woobzine Friday because I’m leaving vietnam and coming back to france.
Cu soon :)
Like or Dislike:
0 
0
Martin
November 24th
Nice post.
I’m using:
- Netbeans on Subversion with TortoiseSVN
- Adobe Creative Studio Design Premium
- Firefox with some plugins
- Firefox / Chrome / Safari and IE 7 & 8 for testing
- FileZilla
- Colorpic, thats what it does ;)
- Twitter account following a bunch of guru’s in our field.
- Pencil and paper for wireframes / mock-ups (old school drawing)
These are my main tools!
Like or Dislike:
0 
0
Gjergji Kokushta
November 24th
As server environment I use XAMMP for Windows (http://www.apachefriends.org/en/xampp.html)
Editors: Notepad2 (http://www.flos-freeware.ch/notepad2.html) and I’m trying InType (Beta) (http://intype.info/)
Like or Dislike:
0 
0
ivan
November 24th
I use eclipse with PDT and JavaScript Toolkit for development. Stable, fast and free.
Like or Dislike:
0 
0
bojzi
November 25th
Maybe you should try Komodo Edit.
I’ve switched from Notepad++ to it because of it’s great dark theme (I hate coding on a white background) and support for a vast majority of languages (even code intelligence for jQuery).
Like or Dislike:
0 
0
Tsedaka
November 25th
Komodo Edit and Xammp are great, yes.
I never tried Netbeans… maybe I should :)
Like or Dislike:
0 
0
Erik
November 25th
You can easily replace Photoshop and Illustrator with Fireworks and save some money. Photoshop is for pictures, Fireworks is for websites.
Like or Dislike:
0 
0
Roland
November 25th
I like chillout dreams, ambient and pure piano :)
And when I need to do some crazy photo-manipulations, I put something like psychedelic playing in my headphones and get inspired :D
Like or Dislike:
0 
0
Sean Nieuwoudt
November 26th
This is my setup (Mac):
- Photoshop / Illustrator CS4
- Netbeans (Free)
- Coda
- Firefox
- Bitnami MAMP Stack (Free)
- Sequel Pro (Free)
S
Like or Dislike:
0 
0
Dino
November 26th
Thanks for sharing your list of tools. As for me, I use:
- XAMPP
- Notepad++
- Fireworks for web design and layout
- Photoshop for photoediting and manipulation
- Adobe Illustrator for Logos and Types
- Firefox, Safari, IE — all modern browsers for testing
- Filezilla
- pen, paper and music
That’s all that I need for web design and development!
Like or Dislike:
0 
0
chris
November 26th
Wow i didn’t know all i needed to make a website was contained in this crappy post you created just to get hits, awesome! Worthless post, seriously write better dude.
Like or Dislike:
0 
2
Tsedaka
November 26th
@chris
Dear Chris, I’m sure you are an experienced web designer, but, there are also beginners.
When you don’t know what you should use in order to start doing some web design,
a small post like this one is way better than huge lists….
And I seriously wish I’d read something like this when I started web design. Because
I don’t know how many hours I lost learning Dreamweaver, tweeking my sites without any Firefox addons, etc.
Last, if I only wanted to get “hits”, I would spend more time promoting my posts…
and up to now, I always chose to add content instead of only trying to bring people here.
(btw, Even if I could, I didn’t delete your comment. I’m honest when I write my articles,
and I’m honest too when I must face comments like yours).
Like or Dislike:
2 
0
PoundBangWhack.com
November 27th
Good article. I use 7 of the 8 tools you mentioned (don’t use Aptana Studio), depending on where/what I’m developing. Sometimes I’ll switch it up a bit, just because. Most of it depends if I’m developing on my Windows or Linux Machines. I think this is a great post for anyone beginning in web design or looking to start.
– Notepad++ (win) / vim (lin) for coding
– Photoshop for layout and comp design
– Fireworks and Illustrator for illustrations, icons, graphics, etc
– Flash for flash design/animation
– WAMP Server / Local Fedora 10 server for testing
– Firefox 3.5 / Firefox 2 / Chrome 3 / Safari 3 / Opera 10 / IETester (for 6,7,8) for browser testing
– Filezilla for FTP
– PuTTY for production server/MySQL server management via SSH
– MySQL Query Browser for remote MySQL database administration
– MySQL Administrator for remote MySQL server administration
– Synergy to share mouse/keyboard between two computers
– Classical Music (the vocals distract me to much)
Like or Dislike:
0 
0
Holger
November 27th
Hey there.
Basically I only use a few tools which are:
THE GIMP – if you know how to work with it you can do really nice stuff.
MSPAINT (dont laugh) – There’s no better way to rapidcraft various design concepts like “move the logo to the left” .. or “what would it look like in a diffent color”
(of course your basic design has to be made with photoshop or whatever)
If you know how to deal with it, it’s a wheapon.
IRFANVIEW – Small tool with various image editing functions. Perfect for rezising, color corrections and filetype transformations.
ECLIPSE PHP – Nice IDE, lot of tools, doesnt crash, supports various syntax highlightning dir different weblanguages
FILEZILLA – Fast and easy FTP Tool
COLORGRABBER a small tool that jsut shows up some HEX-ColorValues from the cursor
WWW2FTP.de – a nice onlineservice that provides secure FTP access to any server from the browser, including an editor and various functions (when you need it)
XAMPP by APACHEFRIENDS – For those of you who do NOT only code pure HTML but PHP and those who need a database.
INTERNET EXPLORER – Some who dont open their eyes to the reality still think that its not neccesary to get a page running in IE
Firefox, Safari, Opera, and some one or two PDAs to check the page on different platforms
AND YOU DO NOT NEED A MACBOOK.
Bye so far
Like or Dislike:
0 
0
pat
November 30th
hey,
thanks for this post. though i am a mac user.
just wanna point out that it’s really great for someone to post on something simple like this, makes the noobs like me to keep wanting to learn, see what the advanced guys use.
cheers
Like or Dislike:
0 
0