3 Simple Ways to
Share What You Make

With Instructables you can share what you make with the world — and tap into an ever-growing community of creative experts.

PhotosPhotos

Share one or more photos of a project, recipe, or whatever you've made, quickly and easily.

Step by StepStep-By-Step

Share your step-by-step photos with text instructions of what you made so others can do it too!

VideoVideo

Share your how-to video. You'll need your embed code from a video site such as YouTube.

Making your first website from scratch

Making your first website from scratch
«
  • gimp.bmp
  • gimp.bmp
This instructable will show you how to make your very own website, completely from scratch without learning virtually any html, and completely free, although some skill in a paint program is needed, but if you don't have that skill you can search the internet for what your going to do in paint pre-made.

the list of things needed.
  • Internet access (chances are if your reading this you've got this one)
  • A paint program
  • About an hour of time (even shorter depending on your skill)
  • And a few downloads which of course are free ware.

The first download is called gimp which is basically a watered down version of photo shop, or a bulkier version of windows paint you decide. Gimp this program also has versions for linux and mac users.

Next is something that i really like it's a HTML editor, which is. you guessed it Free ware. this is what makes it so you dont have to learn html. but if you want to do the coding you can do that in this program to. NVU

Got all that, Good now where ready to take the step into the world of the interweb.
 
Remove these adsRemove these ads by Signing Up
 

Step 1Making the pictures

making the pictures
«
  • all.PNG
  • banner.png
  • armour.png
  • adventure.png
  • links.png
This is the step where you make all the pictures for your site, of course you'll have to have a name for your site by this stage.

A tried and true method is to make a 1000x600 picture make everything your site will be, take the instructables site for example all it really is is a banner at the top, the orange bar with the buttons, and a few menu bars.

Just make the entire thing as a single image (just leave out the content area, i.e. where the text is on the middle page, just leave that spot blank) and don't make a background,just fill the background with a solid color that goes well with your page.

I'm not going to tell you paint tips or anything you can look at that on your own. once you have what you want your main page to look like. once your done. cut and paste everything that can be clicked, including the banner and buttons individually into a new window, and save it separately make sure to save them as a .png, look at the pictures for an example of mine. The point here is to separate everything so you can code it.

  • Another hint is to make a new folder to save them in, not needed but for organization.
« Previous StepDownload PDFView All StepsNext Step »
28 comments
Mar 16, 2008. 3:18 PMlittlechef37 says:
Is there something other than nvu I am looking for more of a drag and drop interface.
Sep 6, 2008. 9:29 AMxACIDITYx says:
Yeah, Kompozer, which is build off of NVU but NVU has stopped development.
Jun 18, 2008. 11:19 AMAwesome Possum says:
It only costs money if you don't know how to steal things from the internets ;D.
Mar 9, 2009. 7:24 PMfwjs28 says:
exactly!
May 28, 2008. 7:36 PMA good name says:
Don't add a 2 onto the end, it's stupid.
Mar 25, 2008. 8:24 AMaki12345 says:
I think you made this instructable back in the time when freewebs interface looked like that... now you can simply downgrade to html your account from "my account" page that's linked from the first page you see when u log in
Oct 27, 2007. 3:24 PMelectrick says:
I think you should know, your link to NVU no longer functions.
Jan 5, 2008. 2:26 PMBriguy9 says:
electrick is right, it's now http://nvudev.com/download.php and not http://nvu.com/download.php
Jun 18, 2007. 2:30 PMspike shadows (secret agent man) says:
can i use ms paint instead of gimp?
Jun 18, 2007. 10:14 PMspike shadows (secret agent man) says:
i just cant figure out gimp lol. thanks
Jun 15, 2007. 10:22 PMspike shadows (secret agent man) says:
how the hell do you use gimp!??????
Jun 18, 2007. 2:25 PMspike shadows (secret agent man) says:
well at least im not the only one
Jun 15, 2007. 8:06 PMzachninme says:
I can't believe that you compared your single-imaged site to instructable's. I'm sorry, but thats way out of line. Also, what ever happened to hand-coded stuff? I don't recall seeing anyone giving the aspects of "How to [actually learn the terms and syntax] make a web page". (I did see some flash ones, and some non-web ones, but thats different) I think this is just a bad topic. Instructables is not a good method for teaching someone HTML, PHP, ASP, JS, etc. I wouldn't learn Spanish from an instructable. (Maybe a few key phrases, however)
Jun 16, 2007. 12:18 PMzachninme says:
Okay then, but its not true. Yes, for a nice screenshot of a website, all you need is nice images. But for the actual functionality of a website, you need to do more than just create a background image. Those cause all sorts of problems with various browsers, and it is completely inaccessible.
Jun 16, 2007. 9:56 AMzachninme says:
Can this be removed from Computer Programming group? You didn't program at all...
Jun 14, 2007. 4:06 PMpleasedontspamme says:
Both GIMP and NVU don't really count as Freeware. they are really OSS. And GIMP can do anything that photo shop can do, it just doesn't support PS plugins. I use both, and NVU is the best wysiwyg web editor I've used (and I've used both Frontpage and Dreamweaver)
Jun 14, 2007. 4:20 PMerfonz says:
I preference Dreamweaver to Nvu.
Jun 14, 2007. 4:42 PMTonamel says:
You're neglecting the fact that Dreamweaver is $400, as opposed to NVU's free. Of course, you get what you pay for (especially with GIMP. I would have recommended Paint.net) Of course, I'm one of those uber-nerds that codes in Notepad++, so I don't really have any experience with either DW or NVU, so I can't say with any conviction that the difference is as drastic as the difference between GIMP and Photoshop.
Jun 14, 2007. 9:06 PMerfonz says:
I get macromedia programs free from work so it makes no difference to me price wise, I'm just looking at it in terms of how useful it is to me.
Jun 14, 2007. 5:53 PMpleasedontspamme says:
Nvu makes cleaner code, imo, than Dreamweaver, but they both kick the crap out of Frontpage; of course, so does notepad. also the OOS comment is more that OSS means a lot for than "hey it's free" At work we use quite bit of OSS and I'm the support guy who makes it work. Some of it makes my job much easier. Course Some of it makes it a bit harder, but thems the breaks. I'm also a graphics designer, and trust me, GIMP isn't nearly as watered down as some people make it out to be. It is, however, a whole diferent animal to PS. I use both. Couldn't do my job without them.
Jun 14, 2007. 7:27 PMTonamel says:
It's not that I think GIMP is watered down. I don't. I did find it to be a total usability nightmare, where nothing is intuitive, and figuring out how to do something takes far longer than actually doing it. I imagine it's largely a preference thing, but I just couldn't get anything done with it.
Jun 14, 2007. 4:09 PMlemonie says:
This really doesn't say much about building a web site, unless you aready know how (you do, I do).
Step 1 is essentially "make some images"
Sept 2 amounts to "use software"
Step 3 mostly says "get an account with freewebs
Step 4 (I don't really know)
It isn't hard to do, but this Instructable doesn't make it much easier than finding out for one's self.
It would be good to explain a bit about the structure of a site, and what the software is doing, also a mention of domain reistration (yours was free, yes?)

And for the benefit of others: http://en.wikipedia.org/wiki/.tk

L

Pro

Get More Out of Instructables

Already have an Account?

close

All Steps Viewing
View all steps of an Instructable on the same page when you're a Pro Member.

Upgrade to Pro today!
5
Followers
3
Author:arch_angel07