indie web grimoire
charms and incantations for the small web
this is a collection of ideas, resources, and epiphanies i've stumbled across while working on this place.
why webweaving is hard
building a website is a non-linear process that requires you to focus on two different angles at once. this can be absolutely brainmelting when you start out. it's always going to be hard to translate an artistic vision into an actual form, no matter what medium you use - but web design uses two separate languages (minimum), each with their own learning curve, across multiple files which all have to work together for anything to happen.
and much like other art forms, you can't just learn by reading. yes, you can absolutely learn HTML and CSS by reading a tutorial, but that's just the price of admission. the only way to learn to build websites is to fuck around and find out. making broken shit teaches you how to fix stuff (and perhaps more importantly, how to find answers from knowledgeable corners of the internet). once you're there, you're unstoppable.
so, yeah, it's hard, but that means you should be patient with your progress and failures. take breaks when you need to! sometimes your brain needs to figure stuff out on the backburner. but keep going when you have the energy - it's so worth it, both for the finished product and the moments where the solution you've struggled for finally clicks into place.
foundational reading
{why is your site like this...}
{every site needs a links page...}
starting small
learning something new is all about messing up and iterating. you will start over - you will want to start over, as you learn new things and look back on old code and think "wow, i overcomplicated this." don't delete your old code (you might actually want it later), but make a new folder and a blank index.html and build a better version.
and if you're going to be iterating anyway, make it easy on yourself and start with a smaller objective. not a whole site, but maybe just a page. or maybe not a whole page, but just a section - a button wall or a guest book or a navigation bar.
also, on the creative side, it can be overwhelming to set yourself up a dozen blank pages and then struggle to fill them with anything. maybe your plans or tastes change before you can get to them. condense, combine, simplify. there is nothing wrong with a one-page website - all your thoughts and favorite things in a long, disorganized scroll. i go crazy for that shit. and putting together that one page will help you a. learn to code, b. slowly gather lots of stuff/writing/decor, and c. expand your site organically.
there are no rules here, so this only ever needs to be as stressful as you make it.
getting set up
please, i beg of you, do not code straight into the Neocities editor - or if you must, make sure you're making backups regularly. don't rely on Neocities itself (or any host, for that matter) for access to your files. anything could go wrong at any moment (as proven by the recent outage) and if you don't have a backup, you might not get your files back.
further, the Neocities editor kinda sucks? a proper code editor has a lot more tools to help you out and can also show you a preview of your changes without having to upload anything. better yet, it'll let you work off files that exist on your own computer and copy those changes onto the live website when you're ready. that way if Neo ever explodes or something your entire site is safe on your machine and ready to be uploaded to any other host. my editor of choice is VSCode.
okay, so how do you go from files on your machine to a working site? my holy grail will always be this guide by Whiona, which taught me everything i needed to get this place started:
{learn from Whiona's Neocities workflow...}
note: Whiona explains how to use Eleventy and Nunjucks templates - if this does not spark joy in you, it's totally fine to skip it. i don't use templates at all so i ignore the Nunjucks stuff. i do, however, use Eleventy because i like that it makes urls prettier ("/link" instead of "/link.html"). (you can do this manually, too - Eleventy is just easier.) i'm definitely not taking advantage of the other features it offers and that's okay with me.
done is better than perfect
two things that helped me relax about the whole process.
one: 'good enough for now' is a triumph. you can always come back and tweak things, add things, or start from scratch later. it's okay for things to exist unpolished and unfinished.
two: you can just be a hobbyist and not a professional. basic accessibility and mobile-friendliness are important and very achievable goals, but it's okay to put them off for a minute while you figure out how to make the thing exist.
html + css guides
if you're picking this hobby up from scratch, you might start with any of these in-depth guides.
{dragonflycave's HTML and CSS guide...}
{web.dev guide to semantic HTML...}
if you've got the basics but need more information about a specific concept or tag, use the Mozilla Developer Network. W3Schools is also good, but i find MDN way easier on the eyes...
building layouts
start with flexbox and grid. yes, there are other positioning options, but i'll leave it to you to look them up and explore their usecases and downsides. but in my own experience, flexbox and grid have been relatively easy to learn and have many tutorials and resources available to help you out.
first, learn the basics with some games about frogs and flowers:
next, play around with this layout generator. fiddling around with the settings is surprisingly educational.
{Brad Woods' layout generator...}
finally, bookmark these cheat sheets:
{flexbox cheat sheet by Malven...}
{grid cheat sheet by Malven...}
in my experience, the biggest hurdle in all this is remembering that these positioning systems are a parent container + child item type of thing. you can't do much with the items if the container is not set up as a flexbox or grid area.
tip #1: box-sizing
box-sizing is a css tag that controls how the margin, border, padding, and content of an element add together to form its final size. by default, this is set to a very confusing setting, but you can change it to a much more sensible method using "box-sizing: border-box;" - MDN can explain better than i can.
tip #2: select all
in css, the asterisk is your select-all function. so if you want box-sizing to behave on everything all at once, all you need is:
* {box-sizing: border-box;}
and you can further combine this with...
tip #3: using borders
if your layout is not behaving and you can't figure out why, use the asterisk again to give every single element on your page a thin border. it'll help you see what's not sitting right. if you've done the box-sizing thing already, it'll easily show you if the problem is the margin (outside the border) or the padding (inside the border). and since it's just one line of code, it's effortless to turn off and back on.