Web Development

This page is a work in progress! I plan to eventually make a RSS feed for web development (as well as other stuff, like general blog posts)

For now, I'll just write everything out by hand.

Preface

This is mostly meant to be part blog dedicated to my experiences building my websites, part guide for my friends who are also interested in building a personal website.

I have some previous coding experience: I started learning some basic LUA for Roblox and then Garry's Mod in 2008, then moved on to Java for a computer science course. I did some barebones HTML and CSS customizing my theme on DeviantArt (when that was still a thing you could do) and customizing a few blogs on Tumblr (when that was still something that actually mattered). I have little to no experience in JavaScript.

Thankfully, there are a ton of resources for leaning how to build a website. If you're new to coding, I recommend making a few small practice websites before tackling your main website. Or don't. It's kind of an indie web staple to have an ugly website to call your own!

Keep in mind that you don't need to host your website on Neocities. For example, people host websites on GitHub Pages or on Nekoweb. Everything posted here will still apply.

In any case, I am going to walk through my process, as well as my many pitfalls.

How I started

I was ultimately inspired to build a website by this Tumblr post to make a website. I had seen it a few times before, but ultimately put it off for later.

I spent a weekend building the bare bones of both this website and my other website, making my Neocities account on the 18th and launching both sites on the 20th (of April, no less).

I did a bare minimum of research on what I wanted to do, outside of the Tumblr post.

I started off coding my HTML in Phoenix Code, but now I'm using Visual Studio Code. I didn't want a bulky coding program, but with Phoenix Code promising AI integration in the future, I can at least reliably use plugins on VS Code to tell Copilot to gofuck itself.

Not wanting to start completely from scratch, I started with SadGrl's layout builder. There are a ton other CSS layout builders, but I decided to stick with this one as it was simple and most everything in the HTML and CSS were explained in comments. Also, I REALLY like sidebars.

A good portion of my time was actually color selection. Despite being an artist, I never considered graphic design to be one of my strong suits. Worse yet, I couldn't find any layouts that I felt I could take inspiration from. I messed around generating color palettes and color picking from other layouts until I got the colors I wanted.

Finally, I started adding content to the website. Text, images, links, buttons, blinkies, website bumper stickers. I was in my element at this point. I feel like most of my time was searching and downloading blinkies, since I wanted a very obnoxious sidebar on my homepage.

I coded the entirety of my websites locally on my PC until I felt I had enough to launch them on Neocities.

What I messed up

Well, "messed up" is a strong term. More like I fell into a few pitfalls that I could have avoided with better planning. Though, in my case, it's a boon that I fucked up. I learn best this way (along with teaching others how to do the thing).

Perhaps most obviously, I did not make the columns on my site mobile-friendly. I used very basic column CSS which used table cells to divide a div into sections. I have partially rectified this by turning each column into blocks that either float to the left or to the right. These blocks can then be made to fit 100% across a narrow screen (such as a phone) and stack on top of each other depending on what order I called them in.

Turns out, an even better way to lay out a website is using CSS grids. Using floats is pretty old-school, and as much as that's kinda how I roll, I would rather save myself a future headache and re-code my layouts for a third time into something more flexible (no pun intended).

I also ended up coding a ton of CSS in-line in my HTML. Which I am still doing at this very moment, though not at the volume and frequency that I once was. I will worry more about addressing this in my own code when I fix up the aforementioned layout issues.

My layout being inconsistent was also an issue, though I realized this pretty early on. I have a ton of information in my left sidebar, including the primary navigation for the site. I also have a header and footer that I want to remain consistent throughout every page on my site.

At first, my solution was to just cut out the entire sidebar, header, and footer and separate them into their own HTML files, which I then included in their proper spots. This made my website load in a horrifically distracting way, with entire portions and images resizing as these elements added themselves after the bulk of the page had loaded.

Luckily, I also realized quickly the solution to this issue: I should only include the inside contents of each element, so that their place is held on the site as it loads, so to speak. Turns out, declaring the sizes for your images also helps a lot with this loading process.

Oh, also, this is less of a mistake, and more of a trap. If you update your site, make sure you do a hard-reset and clear your cache with CTRL-SHIFT-R so that you can actually see how the site has updated. I had a few seconds of frustration due to this.

Future endeavors

My immediate want is to add a bunch of silly little pages on my website: shrines, games, emulators, etc. But I know that if I put off coming up with a gallery layout, I'll never get to it.

I want a gallery to not only act as a sort of portfolio for myself, but also as an archive of my old stuff as well. I deleted my DeviantArt account shortly after it was acquired by Wix (by the way, do not make a website with Wix.) and turned into an AI slop website. I no longer have a place that had everything I had drawn since I began posting my art to the internet.

This is why I want a good, responsive layout for my galleries. I have a ton of stuff I want posted, I want it to be sortable and searchable, and I want it to be easy on me as well. I still have a ton of research I have to do to find the solution to my problems.

As I've said previously on this page, I also want to add RSS feeds to my pages. As much as I enjoy the idea of blogging, I never did much actual blogging on Tumblr. Constant off-topic reblogging on my part and a lack of a decent search system really dissuaded me. Sideblogs also don't appeal to me much for a plethora of other reasons. Having my blogs all on the same site, or at least, linked closely together by a navigation sidebar, appeals to me much more.

Finally, I do want to eventually code my own layouts from scratch. I absolutely would have crashed and burned if I had tried to start from scratch, especially because most of my CSS experience is in modifying already existing websites. I eventually also want my other website to have its own layout. But this is definitely not a priority at the moment; I would like to have a website that functions how I want it to function for me first before I worry about things like breaking out of the template I've used.

Final thoughts

There's only so much you can learn from reading about it online. Yeah, I could have maybe done more planning and I maybe could have researched more about what makes a good CSS layout; at the same time, it's okay to make mistakes, especially if it keeps you from putting things off for eternity.

You can watch all the tutorials you want, read blog posts, ask for advice, none of this will get you any closer to actually starting unless you do it yourself. Nobody can make you make your website.

Check out my resources page to find out how to get started.