melankorin.net

First and foremost, this is not an HTML and CSS tutorial.

There are so many places online where you can learn how to get started in making websites, there’s nothing for me to add that could be better than what already exists out there. If you want my recommendation on where to begin, I suggest freeCodeCamp’s Responsive Web Design course, it is what got me going in the world of web design and I can’t recommend them enough.

If that’s not the case, then what is this blog post even about, you might ask? Let’s first talk about what design is at all. Design, as a discipline, was born out of the need to produce consistently repeatable objects in a newly industrial world. For consistently repeatable results, what do you need? Planning.

We aren’t building some boring Bootstrap template or a website for a canned tuna brand here, so we don’t need to have sticks up our asses like that. Still, like most things in life, it doesn’t hurt to plan what your HTML masterpiece will contain, and how it will look like, does it? It doesn’t. How do we go about that?

step 1: Knowing

In design school, we produce objects for (fictional) clients, and to do that, we need knowledge of them and their demands, usually provided—or when they want us to suffer, produced by us—in a concise briefing. In our case here, the client is… yourself.

We’re making a personal website, emphasis on that word. You can’t make something personal without knowing about yourself, can you? I know not everyone is adept at introspection as I am, and that’s okay, but you’ll need to do it with me here: what makes you you? What do you like, what do you know, what experiences have shaped you, what can you bring to the table? The table being the world of personal websites, of course.

Sometimes even I have trouble thinking of everything that defines me, so I go through my files on my computer, the things I’ve drawn and written, the images I’ve saved to my are.na or my Pinterest, the covers of albums I listen to, and I compile collages of them. Or moodboards, or “aesthetics”, whatever you call them. Helps refresh my mind.

You (probably, according to my stats) wouldn’t have gotten to my website without browsing others’, and that’s a good thing. Knowing about yourself is great, but how can you know what’s good about websites without navigating them? Looking at others’ work almost always provides me a blast of inspiration, I believe it will inspire you too. Plus, you need to know what the competition is doing so you can crush them later!

After all of this, I’m sure you’ve gotten an idea of what your vision is: the colour palette, the graphics, the fonts. Perhaps a cute blue and pink website filled with pixel graphics? A gloomy-looking entirely black-and-white Helvetica-abusing Swiss-inspired thing?

Now that we’ve got the knowing done, on to the next step.

step 2: Ideating

What do you want to display to the world on your website? It’s why I mentioned browsing other websites, so you can have an idea of what things you can do too (and possibly, do differently). To help you, I’ve compiled here a list of some often-seen pages on websites and the things you might see in them. You don’t have to do things exactly as I tell you (oh god, please don’t), this is merely to get your brain juices flowing.

• Splash page: Replaces the homepage—and sends you there after you’re done—as the first page. Usually contains stuff like browser compatibility and content warnings. Not all websites have them (mine doesn’t), but they’re pretty neat.

• Homepage: Pretty hard to make a website without one of these, isn’t it? Everyone is gonna look at this one, so make it look good. It can contain things like pretty images, introductory blurbs, snippets of the content on other pages, buttons, webrings… It’s a blank canvas where it’s up to you to decide what is best.

• About: A page about you, on a website that is entirely about you. Maybe we’re all raging egomaniacs here.

• Blog: You know what a blog is. Write about obscure anime, the soup you ate yesterday or how you’re going to take over the Danish government. It’s pretty hard to maintain one with plain HTML, but that’s a topic for another step.

• Graphics: Buttons (that might or might not be links), stamps, blinkies, free-to-use graphics, adoptables, that kinda stuff.

• Gallery: If you’re an artist, please display put your artwork on your website. I like looking at it.

• Hobby pages and fanpages/shrines: Personal websites are the best places to go turbo-autism on your interests, so pull no brakes on that stuff. Some people also like making fanpages (or “shrines”) on their favourite properties and characters where they offer sacrifices to their beloved turbo-autism even further.

• Links: Links to other indie websites, webrings, cliques, fanlistings, or just a bunch of random shit online you find interesting. Or all of that, if you’re me.

Like I said: don’t follow the patterns I’ve laid down beat by beat. You can choose to display webrings on your homepage, abandon having an about me, have everything on a single page and make an abomination of a website (actually, please don’t do that), your website is your canvas. Just make sure the content is grouped in a manner that makes sense and isn’t exhausting to read.

This might’ve given you a better idea of what kinds of things you can put on your website, right? How about writing it all down, so you don’t forget it?

step 3: Structuring

Now that you’ve gotten the basics of appearance and content down, let’s talk structure: the way information will be displayed on your website. This is perhaps the designiest part of this whole endeavour, so please bear with me.

The layouts in old web revival personal websites vary a lot. First, let’s talk about the two ways to display the main content on your pages.

• Standalone pages for everything: The common, obvious method. Every page is its own completely independent page, and the entire thing is reloaded once you go to another. Assembling a pure HTML website with different pages inside a homogenous “wrapper” (like mine) is a hateful task involving mind-numbing amounts of copying and pasting, it’s the same problem as making a blog in raw HTML and it will be addressed in the next step.

• Iframes: The main content of a page is in a neat little box and the navigation between different pages is done inside it. Pretty old-fashioned way of doing websites, adds a lot of retro cool to your website if done properly, makes creating new pages much easier if you’re handling everything with HTML only, but it’s also… well, old-fashioned: not the best to browse on phones, not the best for accessibility.

These two examples aren’t the end to it though, you could choose to add more information-containing elements to your page, like say, a sidebar or a footer, or even choose to make pages that escape the pattern you’ve established. What do I mean by that? You can observe all pages on my website are inside this neat white box (the “wrapper”), but the gallery isn’t, as the grid needs more space than what is offered by the wrapper. Just make sure to maintain things coherent if you’re breaking your pattern… or not, you’re free to desire anarchy. Down with the system!

Like the previous step, I recommend some good old pen and paper (or pen and display, it’s 2023 after all) ideation.

Now that all of this has been done, the question is: how are these pages connected?

Your website could be the greatest thing in the world, but if the navigation is labyrinthian, then you’re better off with a Carrd or a Twitter profile. This isn’t something like a government website where you’re forced to endure the ugliest, jankiest, most horrendous websites known to man because you need to pay your taxes, it’s something people are accessing for entertainment on their spare time—if they want to look at your artwork but they can’t find the link anywhere, they’ll just leave.

Creating easily navigable interfaces is something even designers struggle with (looking at you, Discord mobile UI/UX designers). But there’s no need to be intimidated, as we’re making a simple personal website here things are much easier. All we gotta do is think: does the way you navigate from one page to another page… make sense? Or are we creating links to a list of bomb recipes in the middle of a page full of cat pictures?

Can you guess what’s coming? Oh man, oh man… another visual representation! I know, all of this seems overkill, but it’s just that my creative process is like this, it lets me have control over my output. Yours could not be, it’s up to you. But mine is pretty good so please consider it.

This is it: the initial plan for your website is done. Now it is all a matter of finally opening your code editor and getting to work.

step 4: Implementing

Ha. You thought I was done? No, I’m here to haunt you still. But worry not, there are no more ramblings and poorly scribbled mockups, this section is just a few things I wish I could’ve learned sooner when I was still in the beginning stages of building my website.

• Think consistent and don’t repeat yourself: The pages in your website will have elements that occur multiple times, like say, a page’s title, the navbar, a grid of images, etc. Keep their designs consistent: for instance, you can assign all picture grids in your website under a .img-grid class so they’re all rendered consistently. Saves you the effort of copying and pasting CSS code too—stop repeating yourself in your code.

• Adapt to the technology you’re using: Do you remember me saying something about websites (particularly blogs and other sorts of dynamic-ish content) being hard to maintain with raw HTML? Well, it’s not exactly hard, it’s simply incredibly tedious—you have to copy the basic structure of the website every time you write a new post, you have to manually update every instance of an information in the entire website. Doable, but do you really hate yourself that much to subject yourself to this?
  If you want to keep your website nice and static (no WordPress and other such slogs), I know of two ways to avoid this:
  
  • JavaScript: If you know your JavaScript you can assemble a system that handles that for you. Or if you don’t, there’s Zonelets and other tiny easy-to-use blog engines out there.
  • Static site generators: Ah yes… my beloved.
    SSGs build static websites (that is a page that doesn’t change based on user, no back-end) from text files such as Markdown and JSON, so you have the positives of dynamic pages without the negatives. There’s Hugo, Jekyll (my personal choice), Eleventy, Pelican, and many, many others.
    If you’re comfortable enough with HTML I highly, highly recommend picking one of these up—switching to Jekyll is probably what saved me from abandoning melankorin.net entirely.

  And if you still want to remain coding everything yourself without any help (respect), I recommend sticking to an iframe, so you don’t have to copy and paste the entire page every time. It’s what I did when I just started.

• Perfection is nothing but a concept: If you take a look at my Time Machine, you’ll see that melankorin.net has a bit of a tortured history: it took me three published versions plus countless unfinished iterations to finally arrive at a design I’m somewhat satisfied with. How did this happen? Every time I felt unhappy with my work I told myself “this isn’t good enough, I’m starting from scratch”. This only ended up making a whole year of work basically worthless.
  Perfection is a concept, greatness takes a lot of time, it’s ok to strive for excellence but not to the point where you’re punishing yourself for not achieving it. Making a website is supposed to be fun, isn’t it?

And that is all! This was long, rambly and pretty autistic of me, but I hope I helped you somehow in your journey as a webmaster. Now open that code editor, would you? Your website won’t write itself.