Home
Welcome to my website!
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.
Projects
Art Projects
What For?
Commmissions
Art Projects
What For?
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.