web grimoire

how i got started

i learned about neocities from You've Got Kat and jumped in headfirst. i had some beginner html/css knowledge and wanted to make a site, but i didn't know what my vibe was or what i wanted to fill it with. these are things i figured out along the way.

i started with a template while i got comfortable and put together the bare bones of a website. i figured these were a home page, an about page, and a links page. originally i had a couple of other pages planned and i went ahead and built empty html placeholders, but looking back it was too much structure before i really knew what i wanted. i figured out after a while that i would rather have fewer pages with more stuff on them than more pages with less stuff. this way the site grew naturally instead of being boxed in from the start - which is the beauty of the indie web in the first place.

i think a links page is a good place to start, though. besides collecting stuff you enjoy, you can add sites you admire, tools and tutorials, and whatever else you like to keep handy. it was uniquely gratifying to realize i could use my own links page to keep track of the css helpers i rely on. it's cool to make stuff that's useful for other people, but making stuff that's useful for you is more than enough.

i suppose this is less important if your site is based on a project as opposed to a personal webspace, but that's another conversation.

once i had a starting point, i started making new experimental pages that didn't use the template. start by emulating something you like. ribose was a massive inspiration for me and peeking through their code taught me a lot. once i was more comfortable putting pages together from scratch, i redid most of my main pages - kept the content but moved it into a new layout i put together and styled myself.

up until this point i was doing all of my css within each page. i still do this a lot, but once i figured out how i liked my main pages to look, i made a separate style.css to keep some of the basics consistent. as of this writing it's really short and i'm sure i could optimize it, but it does the job. my archive took about two minutes to put together - i just called in the stylesheet and copied in the content from other places. i'm sure months down the line i'll want to fix something and i'll do another revamp, but that's part of the process.

the * selector

  * { 
    border: 1px dotted black;
}

behold: the "select all" selector. super helpful to be able to slap a border on everything when i'm building a layout.

box-sizing

 * { 
    box-sizing: border-box;
}

makes sizing things way more straightforward because it'll measure starting at the border and not the content.

backdrop-filter

.example {
    backdrop-filter: blur(5px);
}

this is how i get the frosted glass effect that i love so much, but you can do a lot of things other than blur if you want - see the MDN page.

aspect-ratio

.example {
    aspect-ratio: 1/1;
}

want a square? you got a square. or any other ratio you like. useful if you want things to resize nicely on smaller screens.

inactive checkboxes

input[type="checkbox"] {
    pointer-events: none;
}

use this to make checkboxes purely visual - nothing will happen on click.

display: contents

a {
    display: contents;
}

suppose you've made a collage and you want to make part of it into a link, so you wrap it in an <a> tag and it suddenly breaks your whole layout, leading you into about an hour of desperate frustration giggles until you finally find the right StackOverflow post. yeah. this solves the problem. god bless.