March 21, 2026 · 14 min read

Build a Retro Website in 30 Minutes

No React. No Tailwind. No build step. Just HTML, a text editor, and the aesthetics of 1997. Here is how to build a website the way we did before CSS was a thing — and publish it for free.

Somewhere between 1995 and 2001, millions of people built their first websites on GeoCities, Angelfire, and Tripod. Those sites had dark backgrounds, neon text, table layouts, animated GIFs of construction workers, scrolling marquees, visitor counters, and guestbooks. They were loud, personal, and wonderful. They were also built with nothing but raw HTML in a text editor — no frameworks, no package managers, no deployment pipelines.

This tutorial walks you through building one of those sites from scratch. Every step includes code you can copy and paste. By the end, you will have a fully functional retro homepage published for free on Neocities. The whole thing takes about thirty minutes.

What You Will Build

A complete 90s-style personal homepage with a table-based two-column layout, neon text on a dark background, animated GIFs, a scrolling marquee, a visitor counter, a guestbook form, and a "Best Viewed In Netscape Navigator" badge. You will publish it for free on Neocities.

What You Need

The beauty of retro web development is the toolchain: there is none. You need exactly three things.

A text editor. Literally any text editor. VS Code, Sublime Text, Notepad on Windows, TextEdit on Mac (switch to plain text mode first), or nano in a terminal. If you want to go fully authentic, use Notepad. No syntax highlighting. No autocomplete. Just you and the HTML.
A web browser. Any modern browser will render everything in this tutorial, including the <marquee> tag. Chrome, Firefox, Safari, Edge — they all work.
A Neocities account. Go to neocities.org and sign up. It is free, gives you 1 GB of hosting, and your site will be live at yourname.neocities.org. No credit card. No domain required. No build process. You upload files and they are live.

That is it. No npm install. No node_modules folder with 847 dependencies. No webpack.config.js. No .env files. No CI/CD pipeline. Just files and a browser. This is how the entire web worked until roughly 2010.

Step 1: The HTML Skeleton

Open your text editor and create a new file. Type this exactly:

<html>
<head>
  <title>My Awesome Homepage</title>
</head>
<body bgcolor="#000033" text="#00FF00" link="#FFFF00" vlink="#FF00FF">

<center>
<h1><font face="Comic Sans MS" color="#FF0000">
  Welcome to My Homepage!!!
</font></h1>
</center>

</body>
</html>

Save it as index.html and open it in your browser. You should see bright red text on a dark blue background. Congratulations — that is already more visually interesting than ninety percent of modern landing pages.

Let us break down what is happening:

No <!DOCTYPE> declaration. In the 90s, almost nobody included one. Browsers did not require it, and most web authors did not know it existed. Your page will render just fine without it.
bgcolor, text, link, vlink — these attributes on the <body> tag set the background color, default text color, link color, and visited link color. No CSS file needed. Everything is inline. This is how every 90s page was styled.
<center> — centers everything inside it. Deprecated in HTML5 but still works in every browser. It was the text-align: center and margin: 0 auto of its era, except it worked on everything without thinking about block vs inline elements.
<font> — sets the typeface, size, and color of text. Before CSS, this was your only tool for text styling. You will be using it a lot.

Why Comic Sans? Because it was on every Windows computer since Windows 95, it was "fun" and "informal" (Microsoft's words), and it was the default choice for personal homepages. Using Comic Sans is historically accurate. The backlash against it did not start until the mid-2000s.

Step 2: Table Layout

Every 90s website with more than one column used tables for layout. Not CSS Grid. Not Flexbox. Not even CSS floats (those came later and were their own kind of nightmare). HTML tables — the same <table> element designed for tabular data — were the only way to put things side by side.

Replace everything between <body> and </body> with this:

<table width="800" border="0" cellpadding="10" cellspacing="0" align="center">
  <tr>
    <!-- Navigation -->
    <td width="150" bgcolor="#003366" valign="top">
      <font face="Verdana" size="2" color="#FFFFFF">
        <b>Navigation</b><br><br>
        <a href="index.html"><font color="#FFFF00">Home</font></a><br>
        <a href="about.html"><font color="#FFFF00">About Me</font></a><br>
        <a href="links.html"><font color="#FFFF00">Cool Links</font></a><br>
        <a href="guestbook.html"><font color="#FFFF00">Guestbook</font></a><br>
      </font>
    </td>
    <!-- Content -->
    <td bgcolor="#000033" valign="top">
      <font face="Verdana" size="2" color="#00FF00">
        <!-- Your content goes here -->
        Welcome to my homepage! This is where I put all my cool stuff.
      </font>
    </td>
  </tr>
</table>

Here is what each attribute does:

width="800" — the standard page width. In the 90s, most monitors ran at 800×600 resolution. Designing for 800 pixels wide was the equivalent of today's "responsive design" — except there was only one breakpoint, and it was 800.
border="0" — hides the table borders. Without this, your layout would have visible grid lines (which actually was a design choice on some sites).
cellpadding="10" — adds 10 pixels of padding inside each cell. This was your CSS padding before CSS existed.
cellspacing="0" — removes the gap between cells. Combined with border="0", this makes the table invisible as a structural element.
valign="top" — aligns cell content to the top. Without this, content in shorter columns would vertically center, which looked bizarre.

The navigation column on the left, content area on the right — this was the canonical layout of personal homepages from about 1996 to 2003. Some sites added a third column on the right for a sidebar, a top row for a banner image, and a bottom row for a footer. The more ambitious ones nested tables three or four levels deep. The HTML source of a Yahoo homepage in 1999 contained over 800 lines of table markup before any visible content.

If you want to understand table layouts in depth — nested tables, spacer GIFs, the whole archaeology — see our Complete Guide to 90s Web Design.

Step 3: Animated GIFs & Under Construction

No 90s homepage was complete without at least one animated GIF, and the most important one was the "Under Construction" sign. It told visitors that the page was a work in progress — which it always was, because personal homepages were never finished. The construction sign became so ubiquitous that the Internet Archive's GeoCities collection contains over 300 unique variations of it.

Add this inside your content <td>:

<center>
  <img src="https://web.archive.org/web/2009/http://www.geocities.com/SouthBeach/Marina/4942/underconstruction.gif"
       alt="Under Construction">
  <br>
  <font size="1" color="#FFFF00">
    This page is under construction. Check back soon!
  </font>
</center>
<br>

The URL points to a real Under Construction GIF preserved in the Wayback Machine. It may load slowly (it is served from archive.org), but that is historically accurate too — everything loaded slowly in the 90s.

Where to find more retro GIFs:

gifcities.org — a search engine for GIFs from the GeoCities archive. Search for "under construction", "email", "fire", "welcome" — thousands of results.
archive.org — the Wayback Machine has millions of preserved 90s pages with their original images still accessible.
cameronsworld.net — a beautiful collage of GeoCities content. Browse it for inspiration and right-click to save GIFs.

A few tips for authenticity: do not add loading="lazy" to your images (that attribute did not exist). Do not add width and height attributes unless you want to stretch the image (stretching was common and usually accidental). And do not worry about alt text length — in the 90s, alt text was usually either missing entirely or just "image".

Step 4: Marquee & Blink

The <marquee> tag creates scrolling text. It was introduced by Internet Explorer in 1995, Netscape responded with the <blink> tag, and for a few glorious years both were used simultaneously on the same pages. Scrolling, blinking, flashing — the 90s web was in constant motion.

Add this above your table (between <body> and the <table> tag):

<marquee bgcolor="#FFFF00" direction="left" scrollamount="3">
  <font face="Arial" color="#FF0000" size="3">
    ★ Welcome to my page! ★ Last updated: April 2026 ★
    Thanks for visiting! ★ Sign my guestbook! ★
  </font>
</marquee>

Here is the fun part: the <marquee> tag still works. As of 2026, Chrome, Firefox, Safari, and Edge all render it. It was officially deprecated in the HTML5 specification, but browser vendors never removed it. Paste that code into any HTML file, open it in your browser, and watch the text scroll.

The attributes you can customize:

direction — left (default), right, up, or down
scrollamount — speed in pixels per frame. Lower is slower. 3 is a comfortable reading speed. 10 is chaos.
bgcolor — background color of the scrolling area
behavior — scroll (continuous), slide (stops at the edge), or alternate (bounces back and forth)

As for <blink> — rest in peace. Netscape created it, and Firefox was the last browser to support it, dropping it in version 23 in 2013. If you absolutely need blinking text, you can fake it with two lines of CSS: @keyframes blink { 50% { opacity: 0; } } and animation: blink 1s step-end infinite. But the original tag is gone forever.

Step 5: Hit Counter

In the 90s, every homepage had a visitor counter at the bottom. It was a point of pride — the digital equivalent of a "people served" sign at a fast food restaurant. Hit counters were usually provided by external services like WebCounter, Digits.net, or StatCounter, which generated a small image that incremented every time someone loaded the page.

The simplest approach for a Neocities site is a CSS-only retro counter. Add this before the closing </td> of your content column:

<br><br>
<center>
  <font face="Courier" size="2" color="#FFFFFF">
    You are visitor number:
  </font>
  <br>
  <!-- Retro counter style -->
  <span style="font-family:monospace; font-size:18px; background:#000;
    color:#0f0; padding:4px 12px; border:2px inset #666;
    letter-spacing:3px;">000142</span>
</center>

That gives you a static counter that looks like the real thing — green monospace digits on a black background with an inset border, exactly like the Digits.net counters of 1998.

If you want a counter that actually increments (sort of), here is a JavaScript version that uses localStorage to count visits in the current browser:

<script>
  var count = localStorage.getItem('hitcount') || 0;
  count++;
  localStorage.setItem('hitcount', count);
  document.getElementById('counter').textContent =
    String(count).padStart(6, '0');
</script>
<span id="counter" style="font-family:monospace; font-size:18px;
  background:#000; color:#0f0; padding:4px 12px;
  border:2px inset #666; letter-spacing:3px;">000001</span>

It is fake — it only counts visits from the same browser — but it looks authentic, and nobody will know the difference. For a real server-side counter, WorldWideMart.com originally hosted Matt Wright's TextCounter — a Perl CGI script that stored counts in a flat text file. Counter technology has not changed much since then; it has just moved from CGI to JavaScript.

Fun fact: WorldWideMart.com has a working retro hit counter on the homepage. It is the same concept, updated for modern browsers.

Step 6: Guestbook

The guestbook was the comments section of the 90s web. Before social media, before blog comments, before Disqus — if you wanted visitors to leave a message on your site, you gave them a guestbook. Matt Wright's Guestbook CGI script, originally distributed through this very domain, was installed on hundreds of thousands of sites. It was a Perl script that appended entries to an HTML file — simple, effective, and completely insecure (but that was true of everything in the 90s).

For a static Neocities site, the simplest guestbook is a form that opens the visitor's email client:

<h2><font color="#FFFF00">Sign My Guestbook!</font></h2>

<form action="mailto:[email protected]" method="POST"
      enctype="text/plain">
  <font face="Verdana" size="2" color="#00FF00">
    Name: <input type="text" name="name" size="30">
    <br><br>
    Message:<br>
    <textarea name="message" rows="5" cols="40"></textarea>
    <br><br>
    <input type="submit" value="Sign Guestbook!">
  </font>
</form>

The action="mailto:" approach was the most common on personal homepages because it required zero server-side code. When a visitor clicked "Sign Guestbook!", their email client opened with a pre-filled message. It was clunky, it only worked if the visitor had an email client configured, and it did not display previous entries on the page — but it was free and it worked.

Modern alternatives that keep the retro feel:

Giscus (giscus.app) — uses GitHub Discussions as a comment backend. Free, no server needed, and you can style it to look retro with CSS.
Neocities profiles — Neocities has a built-in social layer where other Neocities users can follow you and leave comments on your profile.
A simple PHP script — if you have server access, a 20-line PHP script can append entries to a text file. Same idea as Matt Wright's original Perl guestbook, just in a different language.

Step 7: Finishing Touches

Every 90s homepage had a collection of badges, disclaimers, and links at the bottom. These were not just decoration — they were part of the culture. Here are the essential finishing touches:

<!-- Background music (optional, historically accurate, annoying) -->
<!-- <embed src="song.mid" autostart="true" loop="true" hidden="true"> -->

<!-- "Best Viewed In" badge -->
<center>
  <br>
  <font size="1" color="#888888">
    Best viewed in Netscape Navigator 3.0 at 800x600
  </font>
  <br><br>

  <!-- Email link -->
  <a href="mailto:[email protected]">
    <font color="#FFFF00" size="2">Email Me!</font>
  </a>
  <br><br>

  <!-- Webring -->
  <font size="1" color="#888888">
    [ <a href="#"><font color="#FFFF00">Prev</font></a> |
    <a href="#"><font color="#FFFF00">Random</font></a> |
    <a href="#"><font color="#FFFF00">Next</font></a> ]
    <br>Member of the Retro Web Ring
  </font>
</center>

<!-- Footer -->
<hr>
<center>
  <font face="Courier" size="1" color="#888888">
    &copy; 2026 My Homepage. All rights reserved.
    <br>
    Made with Notepad. No frameworks were harmed.
  </font>
</center>

A few notes on each element:

Background music. The <embed> tag with a MIDI file was the standard way to add background music. It autoplayed when the page loaded and there was no way to stop it. I have commented it out because it is optional and will annoy everyone — which is historically accurate. If you want the full experience, find a .mid file (MIDI files were tiny, usually 5-30 KB) and uncomment the line.
"Best Viewed In" badge. These appeared on virtually every 90s homepage. Netscape Navigator and Internet Explorer rendered HTML differently, so webmasters would design for one browser and add a disclaimer for the other. "Best viewed in Netscape Navigator 3.0 at 800x600" was the most common variation.
Webring. Before Google, webrings were how people discovered related websites. A webring was a circular list of sites about a similar topic (anime, Star Trek, pet hamsters). Each site had "Previous" and "Next" links that took you to the adjacent site in the ring. Neocities has revived the concept — you can join webrings through the Neocities community.
Email link. The mailto: link was the primary contact method. Contact forms existed (Matt Wright's FormMail was the most popular), but a simple email link was more common on personal pages.

Step 8: Publish on Neocities

Your retro homepage is ready. Time to put it on the actual internet.

Go to neocities.org and create an account. Pick a username carefully — it becomes your URL: username.neocities.org.
Open the Dashboard. You will see a file editor and an upload button. Neocities gives you a default index.html — you can either edit it inline or delete it and upload your own.
Upload your index.html file. If you have GIF images saved locally, upload those too. Neocities supports drag-and-drop.
Visit your site. Go to https://username.neocities.org and see your retro homepage live on the web.
Join a webring. Browse the Neocities community, follow other retro sites, and ask to join a webring. The Neocities browse page has thousands of sites organized by tag.

Bonus: Make an 88×31 button. The 88×31 pixel button was the standard "badge" size of the 90s web. Every site, tool, and webring had one. You can make yours in any image editor, or use an online generator — search "88x31 button maker" and you will find several. Once you have your button, other sites can link to you by embedding it, just like we used to do.

Neocities gives you 1 GB of free storage, a built-in HTML/CSS/JS editor, HTTPS, and a social network of like-minded creators. There is also a paid plan ($5/month) for custom domains, more storage, and WebDAV access. But the free tier is more than enough for a retro homepage.

The Complete Code

Here is the entire index.html assembled into a single file. Copy it, paste it into a text editor, save it, and upload it to Neocities. Everything works.

<html>
<head>
  <title>My Awesome Homepage</title>
</head>
<body bgcolor="#000033" text="#00FF00" link="#FFFF00" vlink="#FF00FF">

<!-- Scrolling marquee -->
<marquee bgcolor="#FFFF00" direction="left" scrollamount="3">
  <font face="Arial" color="#FF0000" size="3">
    ★ Welcome to my page! ★ Last updated: April 2026 ★
    Thanks for visiting! ★ Sign my guestbook! ★
  </font>
</marquee>

<!-- Header -->
<center>
<h1><font face="Comic Sans MS" color="#FF0000">
  Welcome to My Homepage!!!
</font></h1>
</center>

<!-- Main layout table -->
<table width="800" border="0" cellpadding="10" cellspacing="0" align="center">
  <tr>
    <!-- Navigation -->
    <td width="150" bgcolor="#003366" valign="top">
      <font face="Verdana" size="2" color="#FFFFFF">
        <b>Navigation</b><br><br>
        <a href="index.html"><font color="#FFFF00">Home</font></a><br>
        <a href="about.html"><font color="#FFFF00">About Me</font></a><br>
        <a href="links.html"><font color="#FFFF00">Cool Links</font></a><br>
        <a href="guestbook.html"><font color="#FFFF00">Guestbook</font></a><br>
      </font>
    </td>
    <!-- Content -->
    <td bgcolor="#000033" valign="top">
      <font face="Verdana" size="2" color="#00FF00">

        <!-- Under Construction -->
        <center>
          <img src="https://web.archive.org/web/2009/http://www.geocities.com/SouthBeach/Marina/4942/underconstruction.gif"
               alt="Under Construction">
          <br>
          <font size="1" color="#FFFF00">
            This page is under construction. Check back soon!
          </font>
        </center>
        <br>

        Welcome to my homepage! I made this site myself using just
        HTML and a text editor. No frameworks. No build tools.
        Just vibes.
        <br><br>

        Here are some things I like:
        <ul>
          <li>Retro web design</li>
          <li>Animated GIFs</li>
          <li>The sound of a 56K modem</li>
          <li>Web pages that load instantly</li>
        </ul>

        <!-- Guestbook -->
        <h2><font color="#FFFF00">Sign My Guestbook!</font></h2>
        <form action="mailto:[email protected]" method="POST"
              enctype="text/plain">
          Name: <input type="text" name="name" size="30">
          <br><br>
          Message:<br>
          <textarea name="message" rows="5" cols="40"></textarea>
          <br><br>
          <input type="submit" value="Sign Guestbook!">
        </form>

        <!-- Hit Counter -->
        <br>
        <center>
          <font face="Courier" size="2" color="#FFFFFF">
            You are visitor number:
          </font>
          <br>
          <span style="font-family:monospace; font-size:18px;
            background:#000; color:#0f0; padding:4px 12px;
            border:2px inset #666; letter-spacing:3px;">000142</span>
        </center>

      </font>
    </td>
  </tr>
</table>

<!-- Footer -->
<center>
  <br>
  <font size="1" color="#888888">
    Best viewed in Netscape Navigator 3.0 at 800x600
  </font>
  <br><br>
  <a href="mailto:[email protected]">
    <font color="#FFFF00" size="2">Email Me!</font>
  </a>
  <br><br>
  <font size="1" color="#888888">
    [ <a href="#"><font color="#FFFF00">Prev</font></a> |
    <a href="#"><font color="#FFFF00">Random</font></a> |
    <a href="#"><font color="#FFFF00">Next</font></a> ]
    <br>Member of the Retro Web Ring
  </font>
</center>

<hr>
<center>
  <font face="Courier" size="1" color="#888888">
    &copy; 2026 My Homepage. All rights reserved.
    <br>
    Made with Notepad. No frameworks were harmed.
  </font>
</center>

</body>
</html>

What Makes This "90s"?

Here is your checklist. If your page has all of these, it is authentically retro:

✓ Table layout (no CSS Grid, no Flexbox)
✓ <font> tags for all text styling
✓ <center> for alignment
✓ bgcolor attributes instead of CSS
✓ Animated GIF (preferably "Under Construction")
✓ <marquee> scrolling text
✓ "Under Construction" notice
✓ Visitor counter
✓ Guestbook form
✓ "Best Viewed In" badge
✓ mailto: link
✓ Webring navigation
✓ Comic Sans or Verdana font
✓ Dark background with neon text
✓ No <!DOCTYPE>
✓ Zero dependencies

Why Build Retro in 2026?

This is not just nostalgia (though nostalgia is a perfectly valid reason). There are practical reasons to build a retro-style website:

It loads instantly. A page with raw HTML, a few GIFs, and no JavaScript framework loads in milliseconds. No hydration. No render-blocking scripts. No layout shift. Just content, immediately visible.
It teaches fundamentals. Building without frameworks forces you to understand what HTML actually does. Every modern abstraction — React components, Tailwind classes, CSS-in-JS — is built on top of the same elements you are using here. Tables taught a generation of developers how box models work.
It is yours. No algorithm decides who sees your page. No platform can delete your account. No terms of service change. Your HTML file on Neocities is yours in a way that a social media profile never will be.
The community is thriving. Neocities hosts over 800,000 sites. There are active webrings, a follow system, and a browse page. The personal web is not dead — it just moved off the mainstream platforms.

The web was not always a collection of identical SaaS landing pages with gradient hero sections and "Trusted by 10,000+ companies" badges. It was personal. It was weird. It was fun. And you can build that in thirty minutes.