[ Thephooka's Quick Website Kit ]

Do you need a website? Do you need it now? Unfamiliar with or only vaguely experienced in HTML and CSS? Overwhelmed by all the how-tos and just need a template that you can modify for free?

I put together this site kit so you can get up and running in only a few steps!

  1. Make a free Neocities account.
  2. Download the three template files below.
  3. Upload the templates to your new Neocities account (replacing the default files) along with any other images you want to use.
  4. Get tinkering!

Template Files

These files are all heavily annotated with comments to help you edit them as needed. I would recommend uploading them to Neocities first, and then editing them using the in-browser editor; the color-coding can help you keep track of different parts of the code.

  • Index.html - This will be your homepage. It can be copied and modified easily into an About page, or any other page you would like. Includes a basic navigation bar. Example
  • Gallery.html - A simple gallery page template with a table in which images can be loaded. Includes a basic navigation bar. Example
  • Style.css - a CSS stylesheet that can be modified with your choice of font style, background image, header image, etc.

Asset Checklist

To make customizing your site easy, here's a list of image assets and sizes that will slot into the template without much adjustment!

  • Your gallery images. These can be whatever size you want them to be--they will open in a new tab at full size.
  • Thumbnails for your gallery images. The template is designed for a max size of 150 x 150px, but feel free to experiment.
  • Your header image. 1000 x 200px
  • Your background image. The template is set up for a tiling backgroud image at 500 x 500px.
  • Optional: Your index image. I left code in index.html for a little accent image if you'd like to use it, like the one here. This size can vary but around 800 x 500px will fit best without adjusting the code.


Extra info

Do I have to use Neocities?

Nope! I suggest it because it's free and very user-friendly. You can easily build your site on Neocities, then download the whole thing and upload it to a host of your choice later if you'd like.

How do I make a splash page like yours?

Whichever page is called 'index.html' is the one that will be loaded first when your URL is typed in. So to make a splash page, create it on 'index.html' and call your main page something else, like 'homepage.html', and link to it from the splash page.

How did you do [x thing on your website]? I want to do that.

Here's a coding secret: try using Inspect Element to view what the HTML/CSS of any website looks like! For most browsers this is as easy as right-clicking a page. Mouse over various parts of the HTML to see which part of the page it defines. You can copy and paste code from this module and modify it to your heart's content!

Can I use any of your image assets?

Please don't! I made them all custom for my own site. If you do use Neocities, however, have a look under the Resources tag in their Websites section--there are tons of websites that host free GIFs, background images, etc for your use, especially if you want that Web 1.0 feel!

But it's ok if I modify your code?

I don't own HTML! None of the code here is proprietary in any way.