i've been sourcing a lot of these graphics and add ons from other websites and digital collections in this google spreadsheet that maybe i'll try to make into a nice page one day?
code is just the language we use to talk to our computers; there’s vocabulary and grammatical rules you have to follow to make sure you are understood of course, but these rules are repetitive and once you get a hang of things, you’ll be surprised how simple it is.
html/css is probably the most straightforward language (from my experience). if i had to give it a metaphor, it’s like communicating exclusively with those little word magnets on a refrigerator. the great thing about working in html/css is that everything’s been done before (maybe not everything, but probably a good amount); you just take those pieces and move them around as much as you need to. unless i’m doing something a little ambitious, i am never actually typing out my own code letter by letter. there are constructs and pieces that are floating around on internet forums and html libraries that just require a simple copy and paste. of course, there is a small learning curve to know where exactly things should be moved into, and what pieces are more or less compatible with others… but those are things you will learn as you go.
there are two things that will significantly push your fluency in html/css:
✿ messing around in w3schools
✿ building your own html page
i’ve got so many multi-hour videos saved in my youtube watch later playlist with titles like “web building bootcamp!” and “html/css guide for dummies!” but i’ve never watched a minute of any of them. tailor your experience to your learning style, but i promise you that just jumping in will be way more productive.
✿ write down all your ideas even ones that feel overly ambitious… the more you build and play with simple pages the more tools you acquire to materialize these big ideas (and the chances are, they are not as complex as you think)
✿ start with a visual: i always make a rough sketch of my page’s end goal on paper before i begin then i jot down notes about how i want it to behave. i think by doing this first, i have an idea of the big picture
✿ use chatgpt B)
✿ find a friend! sitebuilding is tough to approach alone because it’s easy to get lost in your own weeds… a fresh brain to talk to is really helpful (hmu!)
✿ manage your assets and directories as you go… if you dont do it now i promise you will never go back to do it again. this means use intuitive naming conventions for your assets, get rid of keyboard smashes, have dedicated “placeholders”, etc.
✿ the best way to learn how to build a website is to build a website
✿ make a github account
✿ find some friends (i can be one !)
✿ have fun and i dont mean that in a tacky way i mean that in a reclaim digital personality and resist the sterilization of technology way
✿ the repository is the house that holds your whole website. in this analogy, the house is like your www.website.com and each room in the house is a page. if you’re building from the ground up, you have total control over how cohesive your house looks from room to room. there are no rules!
✿ the code mostly html/css and maybe some javascript if you want to add in some cool elements. each page in your site will have the .html file (which is the one that gets “viewed” on the internet), and a .css file (which stylizes the html). the .js is optional. for reference, the girlnet homepage is html/css only. for this current page, i used .js to create these popup windows.
✿ the domain is probably something you’re going to try to worry about too early on because me too… but no one really talks about it enough bc you realize how unimportant it is in hindsight. i figured i’d throw it in though. personally, i buy my domains on google domains… this is your “house address” if we keep going with this analogy. you don’t need a new address for every room, just the big main house. i pay a yearly fee to keep ownership of my domains, then everything after that is free. there are some hoops to move through to connect your repository to your domain and i use netlify for that. i have no opinions about hosting, netlify was just the one that came up first when i was following tutorials
these are all eventually connected to power your website. i strongly advocate for starting with a github account and linking everything there so that you’re organized from the start.
i used to feel really exhausted by the internet while simultaneously longing for a way to better represent myself on it. i’m not a total off-the-grid advocate tbh. i think modern technology and the internet in particular are important facets to our cultural identity and in order to exist meaningfully in the present day, our active observation of and participation in the internet is vital. i started healing my relationship with the internet after exploring more of the niche/soft/small webs (is there an official name for it? i dont know). here are a few of those spaces and articles that i think are impactful:
✿ a website is a room (classic holy grail resource)
✿ soft.space
✿ feral.earth
✿ the common discourse substack
✿ escape the algorithm ft. chia amisola: why arent more websites about love?
there’s so much more out there… but i think these are good places to start. i think once you start pining for small websites, you open up a pandoras box of all these little corners of the internet. keep an archive of them! a really easy way to save websites/references is on are.na boards
bestie, you’re not mark zuckerberg… and thank god for that. you are not here to build a new twitter, you are not here to shift a paradigm. you are here for yourself, for indulgence, and for fun… especially for fun. look at this page you’re on rn… do you think i built this with a straight face? there are times and places for structure—and you’re allowed that if you need it—but i challenge you to challenge yourself to re-experience the internet with more fluidity and expression. be silly, be clever, be tender, be the things that you like about yourself. the internet is infinite and so so public and because of that, it is quiet. create space for yourself and do whatever you want with it. you have the freedom to share it with everyone you know or to keep it to yourself and the lone web nomads who happen to stumble in. you are free here! surrender!
i suggest you make a github account and learn how to use it.
i also use glitch to live code… it’s directly linked to my github and i push/pull as needed
next, start with a template of some sort
note: my first foray into html/css was by building my digital garden from a template by maxime vaillancourt which i cloned into my github repository. if you look at the template and my digital garden side by side, they’re almost indistinguishable from each other now. but by starting with a pre-coded foundation, i was able to forego all worries about functionality and just start working it into something i wanted.
another great gateway is this tutorial by chia amisola on building websites off of data in a googlesheet. after reaching a bit of a plateau with my digital garden, this tutorial opened up new possibilites and applications of html/css to explore. also, it made js and jquery feel really accessible.
think about what you want to achieve with your page and then search for adjacent pages that already exist. i’ve found that a lot of niche internet communities are open source, meaning that the code and layouts they use are public and available to be copied in to your own repository. starting with a pre-built template ensures that your page will function the way you want it to. after you have this foundation, you can start customizing and morphing your page into something personal. whether it be changing the colors in css or adding new elements in html, every template should be as customizable as you want it to be. of course, you will inevitably mess things up, and things will break or misbehave but there are always solutions.
for stuff more like girlnet, take a look at:
✿ layouts by sadgrl
✿ neocities layouts
note: a lot of these little sites are hosted on neocities which is worth looking into. i have never used it myself, but i am inspired by it.
static website: fixed, prebuilt page(s)
this differs from dynamic websites that are responsive to requests made by the user/audience
static websites are archival, meaning that they only change when you (the builder) choose to change them. with that said, they are great platforms for preservation.
what you’re ultimately looking at when you view a static website is the visual translation of an .html file (more on that later). all of the text and images you see are inserted directly into the html code. there is no “backend” or data collection. everything is very 1-to-1. static websites are managed very easily because there’s no “maintenance” really. once something is built, it’s there until you decide to change things.