Home
This is a raw, plain, uncooked website for you to mess with and make your own. It's all in one file and is more or less a version of the John Doe template except I yanked out all the parts it'll run without; both in order to make the filesize smaller (just 20ish KB!) and to make it a little less intimidating if you have zero HTML knowledge. It's open-source, public domain, and totally free to modify and redistribute.
How's it Work?
Instead of one HTML file per page, this site is a single document that uses anchor links to show or hide different sections. It's made entirely out of plain old hypertext — no Javascript, no databases, no problems.
I've also marked up the code to try and make it easier to understand by taking apart. It's not a complete guide to web design by any means, but I think it'll be a fun introduction if (like me) you enjoy learning by screwing around.
What For?
Whatever you want! Start a blog, or a "now" page, or share your art, or write down some thoughts. Link to some stuff you like or pages your friends made. Imagine an internet where the things you make and say can live somewhere that belongs to you instead of a billion-dollar app. Imagine an internet populated by more and smaller and weirder websites that you can explore and discover at your leisure.
Right-click anywhere on this page and hit "Save As" to get started.
How to Use
Crack open this HTML file in a code editor (I happen to like Brackets, but you can use plain old Notepad if you want.)
Under the Hood
At the top is some technical stuff, then some embedding stuff like meta-og-title and etcetera. These are pieces that will show up in the embed card when you link to this site on Bluesky or Discord or somewhere. You can include an image too, but you don't need to use any of this chunk if you don't want. (More info on meta tags)
Then you'll see the <style> section. This is where the CSS lives and gives the website its visual style. CSS is capable of a lot of crazy tricks (especially if you want to avoid learning Javascript), but it's also pretty easy to figure out. I love and highly recommend the Mozilla CSS guide for learning what you can do.
The HTML content is cut up into <section>s, each of which has an ID. This is how this website manages multiple pages, by using the :target selector and "anchor links," which are links to a specific element on a page instead of a different page. Otherwise the HTML in here is pretty basic—just headers and paragraphs and links—so it should be pretty simple to figure out, especially if you've ever inspected element on Wikipedia to get a fake screenshot for a gag.
You can embed images and stuff with img tags and a URL, either to an image in the same folder as this HTML file or to an external host like imgur. It's good manners to use loading=lazy on images, especially if they're not on the homepage so they're not visible right away.
Stealing Rocks
HTML, like all programming, is a process of pasting other people's code you find on forums into your own project until it does what you want. A lot of places (Youtube, etc.) will even give you embeddable HTML you can plop right into your own site. Check this out:
Anyway. I'm not going to write a whole "Learning Basic HTML" guide in here. Just mess around with it and see what breaks. HTML elements are nested boxes and they have IDs or classes (or are just standard types of thing) that get referred to in the CSS and painted according to those rules. If you're smart you can use combinations of classes to make writing and typesetting content easy for yourself. Or if you're like me you can slap together some big mess that gives you a headache to edit every time.
How to Publish
Uploading
Getting your site public is easier and cheaper than ever. A really popular option these days is Neocities, which is pretty easy to use and well-documented. They offer a paid plan with extra storage and some other neat features, but you can make something totally fleshed-out with the couple gigabytes you get for free. Neocities also has an in-browser HTML editor and file manager, which is so sick when you upload a page and realize there's a typo in it.
If you want to set out on your own, I use Netlify for all my sites. Netlify is a little intimidating because it's meant for businesses, so it'll show you a bunch of popups about A/B testing and node functions and other nerd stuff. But that also means it's free to use as a regular person, so I just ignore all those and drag & drop my little folders.
Netlify also lets you upload a text file of automatic redirects, which I think is pretty slick compared to using Linktree or whatever—you can go to jackis.online/videos to get straight to my Youtube, for example.
Anyway, using either of these services is pretty straightforward, especially for a one-file site like this one. Just rename it to index.html, upload it, and you're rolling.
Getting a Domain
Getting a custom domain name is optional, but I think it's cool. It does cost some money, depending where you buy it (I use Namecheap), but if you buy a goofy domain nobody else wants you're only gonna be looking at five or ten bucks a year.
To hook up a vanity URL to your site, you'll have to do some stuff with DNS records. This process is different for every domain broker and hosting platform, so just look for the instructions on the service you chose. I believe in you.
Bonus
I know I just said I'm not writing a whole guide to HTML, but here are a few tricks and tools I've found useful:
Tools
LayoutIt is a great tool for making CSS grids and flexboxes and stuff. I love a CSS grid but remembering all the right syntax is a pain. So just use this.
CSSmatic has some nice generators for things like gradients and shadows, which are also annoying to try and make by typing code.
Google Fonts has a ton of open-source typefaces that are really easy to embed and use on your webpage. Some of them are even good!
Squoosh is a tool for compressing images, which is handy if you're hosting them yourself somewhere like Neocities with a storage cap. Or you could go old-school and dither it.
Tips
It's good manners to include target="_blank" on links to an external site. This makes the link open in a new tab.
Margin goes outside of a box. Padding goes between the box and its contents.
Some special characters (< and >, etc.) need to be typed in HTML as something else or the computer will choke on them. For example, & is encoded as &. This is dumb but what are you gonna do.
An em is a unit about the size of a capital X in regular body text. It's good to use ems instead of pixels for sizing & moving things so they look right on more screens.
The most important tip is to have fun :)
Hello!
This one-page style of website does allow you to have sections that don't appear in the nav, since you choose what to type up there. But it's still all visible in the source, so it's a bad hiding place.