Home
This is a raw, plain, uncooked website for you to mess with and make your own. It started as a version of this template but I've overhauled and pretty thoroughly stripped it down; both in order to make the filesize smaller (barely over 20 kilobytes!) 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. That makes it load all at once, which can be helpful for users on bad or temporary connections. It also makes it much easier to edit and publish. The :target selector is an old standard that works on all browsers & devices. You can even refresh, use the back button, etcetera.
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
Eric Meyer's CSS reset is a sheet that will reset all the weird annoying default properties some HTML elements have. Keep in mind that stylesheets are applied in the order they're linked.
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:
Dither Me This is for dithering images, which compresses them way more and looks cooler than JPEG compression. Dither It! is a similar tool that gives you more options.
Tips
It's good manners to include target="_blank" on links to an external site. This makes the link open in a new tab.
CSS has a lot of features meant to make your site more accessible. Use them! Images have an alt="" tag for description text. @media queries can check a user's preferences for contrast and input device.
Margin goes outside of a box. Padding goes between the box and its contents. Temporarily giving an element a bright background color or border can help you figure out where its edges are.
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.