Creating an Old-Web Inspired Site

by trainsarecool in Design > Websites

256 Views, 2 Favorites, 0 Comments

Creating an Old-Web Inspired Site

Screenshot 2026-03-22 10.00.01.png

Have you ever wanted to make a website without using a big, online website builder that costs money and has so many ads that it slows your computer down? If yes, then this is the right tutorial! Here I will show you how to create a website easily and for free, with no stress on your computer! I am creating this Instructable for the Making History contest because I think it fits in the Later 1900s category, because people started creating websites in the 1990s.

Supplies

  1. Computer
  2. Text editor
  3. File application
  4. Knowledge of H.T.M.L. and C.S.S.

What Will Your Website Be About?

Screenshot 2025-06-01 13.22.23.png

The first step is to decide what you want to put on your website. This requires some thinking. (Obviously!) Once you have done all the thinking you want, then it is time to build your website!

What Editor Should I Use?

New Piskel-1.png (59).png

If you don't already know which text editor you will be using, then here is a list of some:

Operating System: Editor(s):

MacOS: TextEdit, Terminal

Windows: Editpad Lite, Editpad, Notepad, Notepad++

Chrome: Text

Linux: Nano, Vim, ed

Starting to Code

Screenshot 2026-03-24 17.17.54.png
Screenshot 2026-03-24 17.19.06.png

Once you have finished Step 1 and Step 2, you can start coding. I am coding in H.T.M.L. I have a Chromebook, so I am using Chrome Text. Press the "New" button to create a new file. Then, press either "Save" or "Save As" to download the file. When the Files app shows up, change the part of the name before the dot to "index", and change the part after the dot to "html". This will make your new file be called index.html, so that your text editor, depending on which one you use, might recognize it as an H.T.M.L. file and turn on special features like different elements showing up as different colored text, or automatically adding closing tags for you. This file will be your homepage.

Add the Tags

Screenshot 2026-03-24 17.19.15.png

Add these tags to start your code:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
body {
font-family: Font, font-family;
color: #blabla;
background-color: #blabla;
}

h1 {
text-align: center;
}

h2 {
text-align: right;
}

h3 {
text-align: center;
}

p {
text-align: left;
}
</style>
</head>
<body>
<h1>My Cool Website</h1>
<h3>You can use this template as a journal for your website.</h3>
<h2>??/??/??</h2>
<p>Corporis dolore explicabo sed dolores tempora nesciunt quia maxime. Possimus sunt sunt et est. Velit quae iure consequatur qui dolor rerum aut provident. Tenetur in cum minus rerum. Velit odit sit cumque et dolorum porro.</p>
<hr />
<h2>??/??/??</h2>
<p>Omnis commodi iusto eos laboriosam. Esse nam alias sunt non ipsa. Distinctio voluptatem eum qui dolor est. Minus iusto quaerat labore. Aut ut quia voluptatibus.</p>
<hr />
</body>
</html>

You can use this code as a journal for your website. Just fill in the placeholder text!

Adding an "about Me" Page

Screenshot 2026-03-24 17.22.31.png

Make sure you press "Save". Then repeat Step 3, but name the file "about.html". You can then code it so that it tells other people about you! After this, you can add as many other pages as you want to.

Publishing Your Site on the Web

Screenshot 2026-03-22 10.48.12.png

To make our site available to everyone, we can use Neocities (https://www.neocities.org), a web-hosting site created after the death of Yahoo!'s Geocities, another web-hosting site. Just go to Neocities, and fill in the "Username" blank with the name of your site. Then fill in "Tags" with some hashtags about your site. Fill in "Password" with a password to log into your Neocities account, and then fill in your email address. Finally, do the captcha and sign up! Neocities is completely free to start, but some features and file types are unavailable unless you become a Supporter, which gives you access to these features when you pay $5 a month.

Adding Your Pages

Screenshot 2026-03-22 11.12.22.png

Once you have your site, go to your index.html on Neocities, then on the one that you made using your text editor, copy everything and then paste it into the Neocities text editor. The reason you shouldn't use the Neocities text editor to test your code is because once you press "Save", then the whole world is able to see what you just put on your site. After you import your homepage, go back to the editing dashboard and select "Upload". It will bring up your Files app, where you can now upload your About page and the other page(s) that you created.

Adding a Navigation

Screenshot 2026-03-24 17.23.37.png

Make sure that, at least on your homepage, you add a list of links, like this:

<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/page">Something</a></li>
</ul>

Or, you can change the links to buttons, like this:

<ul>
<li><a href="/"><button>Home</button></a></li>
<li><a href="/about"><button>About</button></a></li>
<li><a href="/page"><button>Something</button></a></li>
</ul>

Just make sure that you change the "/page" and "Something" to what you actually made.

Ta-da!

Screenshot 2024-06-02 8.47.58 AM.png

Ta-da! Now you have a finished website that everyone can see! Make sure you update it regularly so that everyone that looks at it will see a better version of your website!