the webwitch's grimoire
advice and incantations for the new old web
advice and incantations for the new old web
(not links yet, sorry)
mental preparation
anatomy of the webspace
layouts
backgrounds
typography
hello, fair traveler! if you're here, you're likely aware by now that the retro web is fun as hell, and maybe you want to jump in for yourself.
there's an awkward phase between beginner and amateur where you're full of questions you don't know how to phrase yet. where tutorials are too surface-level but full documentation is too opaque to be inspiring.
this is my collection of things i wish i had known about while i was in that phase, fiddling my way through the first few iterations of this site. i'm still learning, so please don't take anything i say as gospel.
i hope this gives you some ideas, shows you some new tricks, and provides some of the language you need to hunt for other answers you seek. enjoy your stay!
in other words, some encouragement and mindset shifts that i would have appreciated when i was starting out.
first, let it truly sink in that your site does not have to be normal. you do not need a sidebar. you do not need consistent styling across all your pages. your code does not need to be efficient or optimized. these are avenues you can choose to stroll down, not prerequisites for being on the internet. setting up my own navigation frustrated me until it occurred to me that my little webspace can function just fine with a few highlights on the home page and everything else listed on the sitemap. this is exactly the joy of the retro web!
second, planning is great but experimentation can be more forgiving. (or maybe i'm just not a planner.) figuring it out along the way is part of the process. starting over is part of the process. "good enough for now" is a hugely important part of the process, especially when your ideas are bigger than your skill level. don't be afraid to get part of the way there. you can always edit.
third, study sites you like. look through their source code - always to learn and never to steal. in that vein, the source for this page is fully commented, particularly the CSS. i'm not sure there will be any major revelations there for anyone, but it might teach you how i achieved some little effect that you like.
fourth, start small. it's tempting to make a bunch of empty, aspirational pages you intend to fill in at some point - but it can also be stressful and limiting, having that much structure weighing you down before you really have your thoughts together. better to have a few pages full of neat stuff than tons of pages with less neat stuff, imo. your mileage may vary, of course, but in my experience the natural growth of your webspace is another joy of the retro web.
finally, it's uniquely rewarding to be able to use the site you've built. collect resources, catalog your favorite media, make lists, save code snippets, track and organize things. it's a great time. :)
i am definitely not the right person to teach anyone HTML or CSS from scratch, but i do feel qualified to make this little list of beginner hints and pitfalls. this is based on stuff i personally had to Google multiple times and questions i see posted often on the neocities subreddit (upon which i lurk).
there's two parts to the webpage - the <head> and the <body>.
the <head> is for instructions, including the title and other meta information for the page along with the CSS. you can write your CSS directly in-page, inside <style> tags placed inside the <head>. you can also write it in a separate file and call it in using a <link> tag. you might want to do this if you're going for a consistent look because you can call that CSS file into as many pages as you want. this is what i do for my homepage and any 'default' pages i want to make, but i still use in-page CSS for one-off pages like this one.
the <body>, meanwhile, is where your content goes. that's basically it - unless/until you start using scripts but that's for someone more capable to explain.
the actual content of a page is ultimately just a big list. maybe that's obvious to everyone, but thinking of it this way helped me so much when i started putting together my pages. i recommend reading about semantic HTML to see what kind of building blocks you can include. i get a lot of use out of <section> and <details> tags.
naturally this is all a process of trial and error, with emphasis and sparkles on the error. some general housekeeping advice:
a modern code editor is your friend and will make so much of this easier. i use vscode.
the arcane art of positioning was my biggest personal hurdle. there are lots of options, some of which i only vaguely understand, but my favorite (and in my opinion, the easiest to learn) is flex.
flexbox froggy taught me everything i know and i can't recommend it enough to get you started. i also keep this cheat sheet handy for quick reference because i am constantly mixing up 'align' and 'justify'.
you can pull off a lot of neat stuff just by grouping stuff into divs and tinkering with the flex settings. i usually have my sections set to flex columns, and i use divs set to flex row to break things up horizontally.
there's also grid garden which teaches you grid layout. i only use grid rarely, so i usually lean on this layout generator to make sure i get the setup right.
hi everything below this is still in progress! ignore my vague bullet points unless they really do something for you i guess.
you can do so much rad stuff with your backgrounds if you know how to build up layers! style the <body> to change the background of the entire page, but you can apply all this to any div or section and essentially stack them up.
the background-color is your base layer. you can add a background-image on top - if the image is transparent, you'll see the background color under it.