Introduction: How to Get All the Website Designing/coding Tools You Need - for Free!

Picture of How to Get All the Website Designing/coding Tools You Need - for Free!

Interested in learning how to code or build your own website but don't want to spend your hard earned cash on books and software? Nowadays coding and website building is so common you can find resources all over the place, and hundreds of useful and free software to make your HTML building a breeze.  I’ve put together a list of tools, software and resources all website designers should know and have.  And they’re all free!  I’ve also included some alternative (not free) resources if you have some cash to burn (and enjoy spending money - after all some folks like to shop!)

Step 1: Learn How to Code

Picture of Learn How to Code one of the ultimate free learning resources of the coding world, W3Schools has tutorials on HTML, CSS, JavaScript, PHP, SQL and more.  Basically anything you want to know about coding, you can learn it here!  They also give you the code for each lesson and let you edit yourself right on the website so you can get a feel for what it does.  If you’re a beginner looking to learn HTML and the basics of coding, start here.

Alternative: if books are more your style, check out “Build Your Own Website The Right Way Using HTML & CSS ” by Ian Lloyd.  This is the book I first used when learning to code and I have nothing but praises for it, he sets everything out very simply and clearly – you can literally learn in just days. For under $20 that ain’t bad!

Step 2: Get Yourself a Code Editor

Picture of Get Yourself a Code Editor

Notepad++ is a nifty little free program for code editing that has a wide variety of features that will help your coding.  The most useful feature is the code highlighting – to activate it, open up Notepad++ once you’ve installed it and select language > H > HTML.  You’ll find your text is color coded and that makes it much easier to work with.  Unfortunately Notepad++ only works on Windows, if you have a Mac try out TextWrangler, which is supposed to work similarly (I haven’t tried it myself as I don’t have a Mac).

Alternative: if you’ve got a few extra hundred dollars lying around, think about getting Dreamweaver.  It’s my default coding program and has some really nice features, is available for both windows and mac, and if you’re a student or teacher you can get a nice discount for the program.  Everyone else, however, has to pay a bundle for it (sad face). I personally don’t think you need to get the latest version for it to work well; my own copy is from back when walkmen were still cool, lol (okay so it’s from 2005, I still had a walkman back then!). So if you can find an older, working copy on eBay for cheap buy it!  And save that $400 for more important things.  Like food. Check out the screen shot of Dreamweaver (picture 3) and compare it to Notepad++ (picture 2).  There are a lot of extra windows and tabs, but the main function you need is the code highlighting, and Notepad++ does it for free.

Step 3: Get a Good Art Program

Picture of Get a Good Art Program

I’m sure you probably already know about this free little gem but I’m adding it anyway.  Gimp can do pretty much everything that other art programs can do without the huge price tag.  Unless you want your website to be dull text and borders, you need a good art and image editing program, and Gimp fits the bill.  I use it to create everything from header images to backgrounds to touching up photos, as well as a bunch of other art projects.  The web is also abound with  free tutorials to do everything with Gimp from touching up photos to making GIFs and siggies.

Alternative: you can also check out Macromedia Fireworks, and depending on the version you get you’ll pay anywhere from $50 to $300.  I do have a copy of Fireworks (like my Dreamweaver it is oooold) and I use it for about a third of my web graphic needs, simply because I sometimes find the interface easier to use than Gimp.  However I don’t think it’s really necessary for making a good website.  Fireworks can also do a bunch of really fancy web graphic stuff like roll-over menus or something (just what I’ve heard, I only use the basic functions of mine) but you can do cool menus using CSS as well.

Step 4: Dress Up Your Site With Images and Pictures

Picture of Dress Up Your Site With Images and Pictures

Once you have an art program you’ll need something to use with it.  You'll find the web is abound with free images and pictures, but make sure that they're actually free to use!  Some good sites to find royalty images and pictures are: (good place to get vectors) (random pictures of pretty much EVERYTHING)

Step 5: Don't Forget the Font!

Picture of Don't Forget the Font!

While we’re still on the subject of graphics, let’s talk about font.  Nothing says “Newbie!” on a website like a nicely done header in an overly done, default font.  It just looks amateurish.  AbstractFonts has hundreds of cool fonts and they’re free! You need to pay attention to the copyright license for each font though – some fonts are free to use even for commercial uses, but others can only be used for personal, non-commercial use.  And remember that unless someone has the font installed already on their computer that they won’t be able to see it, so don’t go making your entire website out of a font you downloaded – use these fonts only for graphics and images.

Step 6: Get Your Own Testing Server

Picture of Get Your Own Testing Server

Say hello to XAMPP and praise the coding gods for this one, as it will make your life so much easier.  Once you’ve mastered HTML and CSS and want to move on to using something more advanced like PHP (a must for larger, more complex sites) you’ll need to have a personal testing host installed on your computer, and that’s where XAMPP comes in.  XAMPP is actually a bundle of programs including the Apache webserver (it’s how you use your own computer as a host to test out your files on) and MySQL, PHP and Perl.  They’re all bundled and configured together and will save you HOURS of time and plenty of tears.

Step 7: Get Ready to Upload!

Picture of Get Ready to Upload!

My default file-transfer program, Filezilla is clean-cut and easy to use. This is what you need this to upload your finished website files to your online host.  You’ll want to download the client version (you won’t need the server just for uploading your files to your host).

Step 8: Add a Blog

Picture of Add a Blog

You probably know this one already, but is the place to go if you want to add a snazzy, professional blog to your site.  Just download the blog files, upload to your domain and you’re good to go!  It’s just like having a blog on your own site, but with WAY more options.

There you go! With these tools and resources you can learn how to code and make a fantastic website without spending a dime ;)


LesleyH1 (author)2015-08-21

As for me Weebly and Wix - are the best for this. Check how many beautiful templates Wix offers and what customization options are available on Weebly. Only a few website builders can offers such advantages.


Lesley Haught

tscardina (author)2013-07-20

Just a tip. There is a free PHP based file management system that you can easily install on your web server and do all of the coding from there... I use it when I am doing all my coding and even has hypertext markup like dreamweaver and notepad++. Check out eXtplorer and you will never use a local coding program again... Edit straight on your server and hit save and it's live... Very handy.

dchall8 (author)2012-06-10

I agree. Website coding is not that hard. Certainly it does not require a secondary crutch program that writes code for you. With all the bloat those design programs build into their code, it is a wonder they work at all.

gbarrett3 (author)2012-06-07

Looks Good!

About This Instructable




Bio: I'm a crafty country girl with a slight Star Wars obsession :) I craft, cook, garden, sew, doodle, homestead, crochet, knit, weight lift (obstacle race ... More »
More by CreativeTiffany:How to Recolor Sprites in Gimp for BeginnersCrocheted Flower Case for Kindle eReadersCute Eraser Charm Jewelry
Add instructable to: