the webwitch's grimoire

welcome traveler!

this is my little hoard of tools, tricks, and lessons learned over the course of building this little webspace.

if you've stumbled across this page, i can only assume that you're interested in indie web. it's a lovely place if you hadn't already noticed - both to explore and to be a part of.

why i'm here

as an agéd thirty-something, i played around with a little html in my misspent youth (including a long stint of messing with WordPress, which in hindsight taught me way more than i thought it did). i made a neocities account after being enchanted by ribo.zone, expecting it to be another temporary hyperfixation in my neverending autism carousel.

instead i've been growing this place for almost a year now - it's reminded me how much i love journaling, eased me back into writing like i used to when i was a kid, pointed me to magical little corners of the internet, and overall just brought me so much joy.

(lowkey it's also improved my problem-solving skills. coding has a logic to it that rewards forethought and lateral thinking. figuring out something that's been bugging me by looking at it from a different angle is a fabulous high.)

foundational vibes

unlearn web2.0

try to forget you've ever seen a modern website. your webspace doesn't have to be efficient, optimized, or 'normal' in any way. you don't need a header, sidebar, or footer - unless you want them. your navigation bar doesn't have to be exhaustive - make a map if that makes more sense for you.

efficiency and optimization are great, but they're not a prerequisite to existing on the internet. it's okay to start small.

skill vs. taste

if you're just starting out (and your tastes aren't 'devout minimalism', i suppose) there is probably a wide gulf between your knowledge/skill and your style/taste. of course i'm paraphrasing Ira Glass, but i also like this blog post on the subject.

there's no avoiding sucking at something, so you have to lean into it. pin your fancy design idea to the wall and start by learning how to make the shittiest possible version of it. the things you learn while making the shitty version will inform future versions, and you'll likely end up with something better than your original idea.

good enough is so important

do not let perfect be the enemy of done! if it works, and you can live with it for a while even if it wasn't exactly what you wanted, let it be. move on to your next idea. come back to it when you want to tinker - if you ever want to tinker.

iterate

you're probably going to start over at some point. probably several times. that's okay. that's why we have fun making the shitty version. eventually your knowledge will grow and you'll look back on what you've done and think "oh, i know so much better now" - that's when you revamp. you can keep all your words and images and transfer them into your shiny new html files.

starting from scratch

if you're coming to the indie web without any coding knowledge, i recommend the Mozilla Developer Network as a general reference. it's great for looking up tags you're unfamiliar with, but it can be overwhelming if you don't know what you're looking for.

in that vein, here are some concepts and terms that might be helpful to search:

  • semantic html will show you what pieces you can use to build your pages
  • flex and grid are important css positioning options - you can learn them with flexbox froggy and grid garden
  • the box model explains how borders, margins, and padding affect the elements on the page

common pitfalls

  • are all of your html tags closed? are they nested correctly?
  • is your meta information and css in the <head>? is your content in the <body>?
  • mind your .classes and #ids
  • mind your src="" and url() syntax when working with images in html and css, respectively
  • site not updating when you refresh? make sure your browser cache is clear

site setup

i think it's more fun for both the sitemaster and the visitor to have fewer pages with more stuff on them, so i encourage you to start small, especially if you don't know where you're going yet. it's tempting to make a bunch of blank pages you plan to fill in later (and that might even work if you, unlike me, are a planner) but i found this to be limiting and stressful and was much happier when i started over with just a handful of pages. home, about, and links are a good place to start.

now, you can code your site directly in the Neocities editor and there's nothing wrong with that (in fact there are some upsides to that if you're after pageviews, but that's another conversation). however, i strongly recommend that you keep a backup copy of all your files. if something ever happens to your site or to Neocities itself, you won't lose anything and you can reupload your site anywhere you like.

working from files on your computer can be way easier if you set yourself up correctly. this article by whiona taught me everything i needed to know, both about using a static site generator and working with the Neocities cli. this site would not exist without this article.

on code editors

a good code editor will help you avoid a ton of common pitfalls once you learn how to work with it. i use vscode. there's a cheat sheet for keyboard shortcuts (pdf), which help me move around the editor much faster.

vscode supports emmet, which is kind of a shortcut system for writing html tags. i still have to reference the emmet cheat sheet, but even so, it saves an absurd amount of time.

making layouts

if you're not ready to put a page together from scratch, by all means start with a template! there are many available and they let you focus more on your content and less on your code.

templates on neocities

when and if you're ready to build your own layout, i recommend trying flex - i found it to be the most straightforward and least menacing option when i was starting out.

i still lean heavily on layout generators to sketch out the basic setup and remind myself what my options are. Brad Woods' layout generator can do both flex and grid and i use it constantly.

there's also a great flexbox visual cheat sheet and accompanying grid version that i use for quick reference - mostly because i always get align-items and justify-content mixed up.

finding images

here are some of my favorite resources. you might also like my own public domain graphics.

on the indie web
creative commons + public domain

typography

i use google fonts because it's dead simple, but it is also possible to host your own fonts if you so desire.

little typography details are fun. text-decoration gives you lots of underline and overline options, which are fun to use in hover effects.

there are some baked-in options for your list bullets, but you can also set custom ones by styling the li::marker. the fabulous Solaria has a collection of symbols that you can use.

adding sparkle

you don't necessarily need javascript to make your webspace more lively and interactive. i have yet to explore the arcane arts of scripting but i've still managed to make *gestures around*.

the structure of your pages can be interactive. if you hadn't noticed, i'm very fond of the details tag and using scrollboxes.

you can accomplish so much with just hover effects. a standard use is to make your links do pretty things when you hover over them, but css can do far wilder stuff nowadays.

useful tags:

  • filter - if you've used photoshop or similar, you're ahead of the curve here. you can adjust things like saturation, blur, grayscale, and more.
  • backdrop-filter - throws a filter on whatever is behind what you're styling. this is how i get my beloved frosted glass effect; i set the backdrop-filter to a light blur.
  • opacity - lots of fun reasons you might want to make something disappear on hover.
  • transform - the syntax can take some study, but this lets you rotate, flip, grow, shrink, and warp pretty much anything.
  • transform-origin - in combination with transform, this sets the 'anchor' point for the transformation; you could rotate something around its edge instead of around its center, for instance.
  • z-index - control how images or elements stack, like arranging layers in photoshop.
  • transition - controls the speed, delay, and behavior of some or all of your hover effects; this tag goes on the base element, not the :hover element.

animations

animations are a more complex transition, where you set up keyframes to make longer and more complex changes. this is the edge of my skill level at the moment, but i'm slowly understanding how to build what i'm envisioning. i've learned a lot from playing with the options in animista.

gradients

there are many a gradient generator out there on the internet, and even more uses for them from subtle to eyeball-melting. i used a circular gradient from transparent to black in order to make the vignette effect on this page. you should also know that Solaria's rainbow gradient collection exists because i stare at it often and i feel like more people should.

javascript

while i am definitely not the person to teach you javascript (maybe someday), the lovely Clarity Anne has a wonderful collection of code snippets and use cases.