Introduction: Making Your First Website From Scratch

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.

Step 1: Making the Pictures

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.

Step 2: Putting Everything Back Together

Now for this your going to open up nvu, it took me a little bit of clicking around but it isn't to complicated. ill take you through it step by step.

First you'll need to take the top bar which is set at default to 600 (im pretty sure) but you'll want to drag this over and make it 1000 wide, do the same to the side just make it 600.

Next you'll want to make the background of the site first you won't be using the fill you used in your paint program, instead go into Format>Page Colors and Background, click use custom colors. and make the background color what you made it in the paint program.

The next thing you'll want to do is add the top banner. click the image button on the tool bar. and find your banner. click do not use alternate text. and ok. you now have your first image on your page.

*click the source bar at the bottom of the program to see how much coding went into just that. it's also a good way to learn HTML.

Upload the rest of the buttons, you can use alternate text or not its up to you. you will however need to click the button and go into the format bar in image and link properties. click the link bar and make it link to what it pertains to, the home button would be index.htm, the links button would be links.htm write what the buttons are linked to down you'll need them later
once you get everything done it should look like the picture of the website before you did the cut and paste.

The last thing you'll want to do is to make a table in the center of the page under the buttons, you can change the color and borders in the menu bar, this is where your main text will go. write something in their just so you have something on your site.

Step 3: Getting Everything Set Up

Now you have the website pretty much made. but you probably don't have the time or space needed to set up a server, plus then it wouldn't be free. but their are places that will host your website for free on their servers. my favorite is. freewebs

  • If you don't feel like actually doing this instructable and are just reading through, you can still make a site from their they have everything you need all you do is choose how you want your site to look and type in what you want. This way of doing it is just alot more flexible.

Make an account on freewebs if your website name is taken don't worry just add a 2 to the end of your site for now, i.e. mines punkholy, if it was taken i would call it punkholy2. (this most probably won't be what people type in when they go to your site.

Last of all when making the website make sure to set it to html mode.

You will end up at a screen like the third picture, click site manager, and click to edit the page called index.htm delete the stuff thats in their, go into the source bar in nvu and copy and paste that into the now blank text editor.

lastly upload the images into the main directory and click the little globe to view the page.
if anything goes wrong make a comment about it and send me a message with your html in and ill see what i can do.

Step 4: Finishing Up

Bare with me your almost done. remember when you were so posed to write those names down? Nows when you need them. make some new pages named the same things as the buttons were linked to. now go copy the html code from the Index page. and copy it into the new pages, upon inspection. you should see where the text is you entered into the home page. you can delete that and write something else that would go into the page, then you'll need to look up some html if you wan to add links to other site and things like that. but for the majority of it your DONE test out your buttons see if they work. think up some content and be happy.

*as an optional step if you got a name that was taken and had to put a 2 into your name go to here and register the name you want. even if it's taken on freewebs chances are it isn't taken here.

lastly just the usual stuff comment if you have problems, I know it's a long instructable with alot of info, and if I left out something tell me, don't flame me, Iv made alot of websites and something I think is obvious might be not so obvious to someone who's new to it. if you want an example heres my site
www.punkholy.tk.

Comments

author
LaverneH (author)2015-08-06

I created my own website through https://www.bloxup.com and it was great! They offered me free web hosting service, social media integration and a portfolio of teams.

author
allaboutmodels2 (author)2015-06-22

Each month over 90,000 searches are done online by people wanting to know how to create a nice profitable website. Keeping things simple is key because most people don't know HTML codes. I highly recommend using a service called SBI. I've been using them since 2005. For more information and 5 free important steps to build a successful website visit this link http://www.healthy-eating-habit.com/how-to-create-a-website

author
LaverneH (author)2015-04-27

Awesome post! If your a beginner like I was then https://www.domainki.com/ is the perfect website to use and build your professional free website from scratch.

author
itsruthanitha (author)2015-02-21

Great Post! if you are looking for software to build you site here is the link http://www.earnmoneyonlinehelp.com

author
mmRb423Z (author)2014-02-10

The NVU link no longer works... any alternative? I'm trying to combine this guide with this guide - http://blogerr.net/how-to-build-a-website-from-scratch/ - and so far everything's going great up until the NVU part. :(

author
littlechef37 (author)2008-03-16

Is there something other than nvu I am looking for more of a drag and drop interface.

author

It's the only thing I've used, Theres dreamweaver, but that costs money, and I haven't used it. you'll have to do your own research on this one.

author

It only costs money if you don't know how to steal things from the internets ;D.

author
fwjs28 (author)Awesome Possum2009-03-09

exactly!

author
xACIDITYx (author)littlechef372008-09-06

Yeah, Kompozer, which is build off of NVU but NVU has stopped development.

author
A good name (author)2008-05-28

Don't add a 2 onto the end, it's stupid.

author
aki12345 (author)2008-03-25

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

author
electrick (author)2007-10-27

I think you should know, your link to NVU no longer functions.

author
Briguy9 (author)electrick2008-01-05

electrick is right, it's now http://nvudev.com/download.php and not http://nvu.com/download.php

author

can i use ms paint instead of gimp?

author

yes just follow the same thing, if you paint skills really aren't up to par, you don't even have to use pictures, but that just gives you a site with a bunch of text on it and no pictures to look at, but paint is fine to use.

author

i just cant figure out gimp lol. thanks

author

how the hell do you use gimp!??????

author

well at least im not the only one

author
zachninme (author)2007-06-15

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)

author
arch_angel07 (author)zachninme2007-06-16

I wasn't comparing my site to instructables, i was just saying that all you really need for a good website is basically a banner, and some buttons, which look at the instructables homepage other than the login and search bars, and the pictures the link to different instructables, thats all their really is. get off your high and mighty horse and calm down.

author
zachninme (author)arch_angel072007-06-16

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.

author
arch_angel07 (author)zachninme2007-06-16

yes but in, nvu you can set alternate text which shows if you go to the site with an non graphical web browser, it isn't pretty looking but it if you wanted it to look good you wouldn't be using a non graphical web browser anyway.

author
zachninme (author)2007-06-16

Can this be removed from Computer Programming group? You didn't program at all...

author
pleasedontspamme (author)2007-06-14

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)

author
erfonz (author)pleasedontspamme2007-06-14

I preference Dreamweaver to Nvu.

author
Tonamel (author)erfonz2007-06-14

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.

author
erfonz (author)Tonamel2007-06-14

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.

author
pleasedontspamme (author)Tonamel2007-06-14

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.

author
Tonamel (author)pleasedontspamme2007-06-14

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.

author

ah well it's close enough, the point is everyone gets what i mean, It's all free

author
lemonie (author)2007-06-14

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

author
arch_angel07 (author)lemonie2007-06-14

ummm... (form the 4th step)

*as an optional step if you got a name that was taken and had to put a 2 into your name go to here and register the name you want. even if it's taken on freewebs chances are it isn't taken here. <that takes you to the dot.tk page

and the fourth step is kinda hard to understand unless you register at freewebs and look at the menu while reading what i typed.

also i didn't mean this when i made it to show what was happening, when i was in like 7th grade, and i was trying to figure out how to make my first website. i didn't care how it worked i was content just having a website.