the indie web grimoire
welcome!
compiled here are resources and advice for making your own webspace, a creative pursuit i cannot recommend highly enough. i hope you find something useful! <3
mindset
recommended reading
a page about thinking in html (the page that got me started)
everything on 32bit cafe and yesterweb
foundational vibes
less is more (usually) - if you're starting out and you don't have much ~stuff~ to fill your webspace with yet, it's okay to dump everything on one page. once a section gets big enough, build it a page. let the site grow organically.
iterate - let the vision evolve; start over whenever you want to. (don't delete your old stuff though, you might want it later.)
unlearn web 2.0 - your webspace doesn't have to have a sidebar or a footer or even a header or a nav bar, tbh. go wild with it.
everything is always unfinished - by which i mean that 'good enough for now' is an excellent goal. you can always come back to tinker.
you gotta make stuff - you literally cannot learn to do this by reading W3Schools or following line-by-line tutorials. you have to cludge together terrible code and frustrate yourself trying to fix it in order to build the skills you need to do it right the first time.
the learning curve
in my experience, the main reason webweaving is hard to learn is because it requires thinking about things from two angles at once. you need to consider the html and the css. you need to style the element you want and its parent element to get some things to work. you're learning two skills at once - it can be overwhelming.
but the only way out is through! it gets easier as you go and the satisfaction of having it click into place is heavenly.
process
recommended reading
webpage anatomy
this is one of the easiest ways to mess up! your basic page setup needs to look like this:
<!DOCTYPE html> - this tells the browser that it's about to receive html. notice that it's not a tag you need to close.
<html> - behold, the start of the html.
<head>
stuff that goes in here:
- your <style> tags for your css
- <link> tags to pull in resources like stylesheets and fonts
- the <title> which is what is displayed as the name of the page in your browser tab
- <meta> tags which give you more control over how your page is displayed. two important tags to make sure you use are:
- <meta charset="utf-8"> (this tells the browser what character encoding to use, but you don't have to know exactly how it works)
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> (helps your site look good on a variety of screens and devices)
</head>
<body>
all the stuff you want to show up on the page goes here. all your divs, headings, imgs, etc should be inside the body tags.
</body>
</html> - closing the html tag. this should be the last thing on the page.
the hero's journey
(in my experience anyway)
step one: using a template; learning how it works, getting comfortable with the syntax, figuring out the basics and how to change them
step two: fiddlin' with the template; moving stuff around, adding sections with help from tutorials, poking around other people's source code, becoming good friends with StackExchange
step three: freestyling; building a page or two without a template, working on layouts and maybe picking a favorite between flex and grid, looking back on some of your early code and realizing you can do it better now
step four: starting fresh; rebuilding from scratch now that you've figured out what you like, using resources and generators to pull off more complex css, knowing how to search stuff like "css frosted glass effect" and being able to implement what you find
step five: iterating; finding more elegant ways to get the results you like, optimizing things, filling up more pages, learning how to do stuff that used to intimidate you
step six: presumably, see step five? personally i'm working on improving at css animations and considering adding some javascript to the mix. go where your heart takes you.
traveler's notes
a code editor will help you avoid simple but frustrating mistakes like misspellings and unclosed tags. i use vscode.
if the changes you make are taking forever to show up, clear your browser cache - this forces your browser to redownload the latest version of all your files. in most (all?) browsers you can also hit F5 to do a hard refresh.
by default, box sizing (how the border, margin, padding, and content combine to make the size of the element) is unintuitive. setting box-sizing: border-box made it way more understandable for me.
in your css, you can use an asterisk to style all items on the page. i troubleshoot layout issues by putting a border on everything so i can see exactly how much space everything is taking up.
i recommend looking into semantic html - it'll help you avoid having to work with a million divs. my main building block is the <section> tag and i get heavy use out of the <details> tag.
layout
templates on neocities
under construction
more soon!