Neocities/Hobbyist Web Development Thread!!

[terashards]

i've noticed that some other people across the forums either have a website they work on for fun OR they're interested in making one but don't know how to start, so i figured i'd make a dedicated thread to the topic for discussion!! feel free to talk about personal web projects, discuss personal websites that other people have made that you enjoy, ask for advice on HTML/CSS/JS/etc, share resources, whatever! (just please stay within the spirit of the thread! the "no advertising" rule still applies here so don't use this thread to try to sell things or just post links with no discussion!)

personally speaking i've been doing this as a hobbyist for a good multiple years now and i run a few personal websites so this is a topic that hits very close to home for me i consider web development an art form (not too dissimilar from video games as an art form, which involve multiple overlapping skillsets) and i think it is the coolest thing ever. Rahh

also, i'll provide some information here in the thread OP for those interested:

Spoiler: what is neocities?

neocities is a simple static web hosting service intended to be a spiritual successor to geocities of the 90s and 2000s, which was a service where anyone could make a personal website if they knew a little bit of HTML. a lot of hobbyist web developers get started on neocities due to its ease of access, as well as its very light "social" features that allow users to easily browse other people's websites and see new site updates from websites they follow. it is so ubiquitous in the hobbyist/newbie scene that it felt appropriate to put it in the title of this thread and mention it here.

Spoiler: what's the point of making a personal website?

well... pretty much anything! these days, the internet has been all rounded up into social media platforms hosted by a tiny handful of companies that decide how we can express ourselves online. with a website, all of those restrictions are gone. you can put whatever you want online and present it visually in whatever way you like as well. it's great for just... talking about what you like, sharing personal art projects, and really anything else you can think of. (also, in my personal opinion, it's just a fun skill to have!)

Spoiler: how do i get started?

you'll want to learn the fundamentals of HTML (Hypertext Markup Language) and CSS (Cascading Stylesheets) to start. these are the building blocks of any website, even these forums! (if you're on a computer and right click anywhere and inspect element, the code that pops up is HTML! even this post is HTML!)

as for how to do this, there are a million tutorials out there with different styles of teaching and different levels of depth/difficulty, all accessible by simply perusing some google searches. you should do whatever fits your personal learning style. if you want my personal opinion, i think written tutorials that make you code along the way are typically better than video tutorials, but if you love video tutorials then go for it, there's plenty on youtube.
my favorite guide to recommend to people who want to make their first website is this one by petrapixel. (the website in question is also a great example of a fun personal website!)

regardless of what you end up doing, please download a text editor to edit your code in that isn't neocities itself (or any other in-browser way of editing sites). trust me, you'll thank me later. even just notepad works, but i'd recommend notepad++ if you're intimidated by all the bells and whistles of a full code IDE, or visual studio code if you want to jump straight in to a proper coding IDE. either is fine! (sorry mac users i do not know as much about software made for mac first...)
edit: princess viola informed me of vscodium which is the same as visual studio code without all the microsoft telemetry and whatnot! thanks so much

edit: i should clarify also this is for discussing websites that are personally coded/created without the use of drag and drop editors like carrd and strawpage! just wanted to make that clear in case it wasn't already lol

 

[Princess Viola]

i joined neocities back in 2022 cuz i wanted to make my own personal site

naturally in the spirit of geocities all i did was make an incomplete home page and nothing else lol

BUT i have been working on an all-new and updated version of it since june. it's still not published yet (i still got content i wanna add before it goes live - i don't want it to be 100% complete before publication since that's something that it never will be, i just want it to be more than just an empty skeleton of a site)

i'll remove these if they fall foul of the advertising rule (i don't think they should since A. my site isn't selling anything and B. i mean these aren't just links, the new version of my site isn't even up yet lol) but here's a few preview images of my site. i'm definitely biased but i think it looks pretty good

Spoiler

i use vscodium for my editing, it's basically visual studio code but free of microsoft's bullshit. like literally that's what it is, it is literally the same software just FOSS and without any microsoft branding, telemetry, etc.

 

[terashards]

i'll remove these if they fall foul of the advertising rule (i don't think they should since A. my site isn't selling anything and B. i mean these aren't just links, the new version of my site isn't even up yet lol) but here's a few preview images of my site. i'm definitely biased but i think it looks pretty good

no yeah you’re totally fine! i just put that reminder there so people don’t think this thread is a pass to just toss (monetized) links without actually saying anything. you are contributing to discussion so it’s all good.

and i agree!! i love the layout i am embarrassingly terrible at telling apart decade aesthetics so i cannot tell what exact retro aesthetic you’re going for but you’ve nailed the retro vibes. at the same time content feels readable and your sidebars look easy to navigate so that’s a plus too. i love your header with the fancy font and music player!

also i really agree with the sentiment of trying to make sure the site has content before launching it; one of my earliest sites also fell into the pitfall of being a homepage with (almost) nothing on it, and the way i set up the site also ended up being very rigid and not malleable to new content or changes, so i quickly lost interest in working on it while my other sites continued to be updated. i’m trying to amend that with a new personal site that i’m making content for before it actually goes up, both so it isn’t empty and also so i know it’ll be easy to add more content in the future.

i use vscodium for my editing, it's basically visual studio code but free of microsoft's bullshit. like literally that's what it is, it is literally the same software just FOSS and without any microsoft branding, telemetry, etc.

SOMEHOW i was totally unaware of this, thanks so much for mentioning it! i’ll update the op with this as an option when i’m home because that’s a really good thing to know about. i’ll have to try it out myself

 

[Princess Viola]

and i agree!! i love the layout i am embarrassingly terrible at telling apart decade aesthetics so i cannot tell what exact retro aesthetic you’re going for but you’ve nailed the retro vibes. at the same time content feels readable and your sidebars look easy to navigate so that’s a plus too. i love your header with the fancy font and music player!

yeah, i'm tryna go for a mid-2000-ish personal/fan site aesthetic (or at least my probably incorrect memories of them but also i have found sites from back then that are still active and updated from time to time)

cause sure i mean there is something charming about a 90s geocities/angelfire/tripod site but also let's be honest good web design wasn't exactly something that your average geocities site had

 

[terashards]

cause sure i mean there is something charming about a 90s geocities/angelfire/tripod site but also let's be honest good web design wasn't exactly something that your average geocities site had

i can appreciate those who go full nostalgia mode for the geocities energy but i like it when people at the very least update their code to fit modern accessibility standards while keeping the older visual aesthetic. but anyway yeah; i like oldschool looking things and my sites definitely don't fit into Modern Web Design(tm) but i probably think about design more than the average 90s site lol (which is partially just because we have more advanced CSS and HTML now of course)
edit: forgot to say i added vscodium to the op also! yippee

 

[pilosophos]

Mmm yes I do love websites.

For those of you who are into those retro 88x31 buttons, I made an 88x31 button viewer which is a searchable collection of such buttons that were scraped from the Geocities 1TB archive. I did not scrape the buttons myself, but the person who did had all 29,258 of them on a single page, and that would crash my browser, so I made the viewer as a solution. Here's a few:

And mine for good measure below. If any of y'all want to trade buttons we can link each other or something. I tried to find a Bulbagarden one, but was unable. There must be one, right? These forums have been around a long time.

I used to mirror my personal site (which is linked in my forum sig) to a few different places including Neocities, but I moved some stuff around and bought a domain and now I host it on Github Pages only.

Once upon a time, I was a web developer, and now I use technologies that are probably overkill for most people. I use the Astro static site generator, which lets me define templates and HTML components that so I don't rewrite the same structures over and over, and it also handles some image optimization and other odds and ends. The best thing this does for me is when I need to add to my art gallery, I put an image and an accompanying file with a short description, the date I drew it, etc, into a folder. Then not only does it show up on my gallery and generate thumbnails, but it also creates separate pages that can be linked to directly, all without having to write any extra HTML.

It did take a long time to set up, though.

For styling I use Tailwind, which gives you a bunch of convenience classes to make responsive design (making your website look good on both small and big screens) easier, and so you don't have to write too much CSS directly (some people think this is an anti-feature, but I disagree).

Once I've written all my source code, I tell Astro to compile it to pure HTML/CSS and the occasional JavaScript so I can host it anywhere I want.

As a little kid I'd be at the library and wander into the technology section with books on how to make a website and whatnot, but at the time the decline of Geocities and Angelfire made it really unclear how you were supposed to do that without forking over wads of cash to some faceless overlord. I'm glad that's changed.

 

[da man/man]

Me learning about HTML and Web Design in Class: "Uuuuuugh, this sucks, I don't want to do this!"
Also Me, sees a forum post about HTML and Web Design: "Oh, this should be an interesting read!"

I have like nothing to add to this thread, other than to say this is something I'm interested in, and I'll definitely be watching, and thanks for sharing examples!

 

[terashards]

Once upon a time, I was a web developer

that’s what i’m trying to become as of late

I use the Astro static site generator, which lets me define templates and HTML components that so I don't rewrite the same structures over and over

the main static site generator i’ve seen floated around has been Eleventy; are there any specific aspects of astro that make it preferable for you over other static site generators?

For styling I use Tailwind, which gives you a bunch of convenience classes to make responsive design (making your website look good on both small and big screens) easier, and so you don't have to write too much CSS directly (some people think this is an anti-feature, but I disagree).

i have used a little bit of tailwind before but i’m pretty allergic to anything that takes me away from writing actual CSS (though of course i will have to be learning it to go professional lol)

I'm glad that's changed.

the “web revival” has been small but wonderful and i am also glad there are proper easy-to-access resources on this now because i also remember being mystified as a kid during the decline of geocities and the like. i don’t think everyone needs to be particularly passionate about code but everyone does deserve to know that the internet can be more self expressive and free than it seems these days

 

[Princess Viola]

btw a really simple bit of advice i'd like to give anyone who might be interested in making a personal site on neocities, nekoweb, etc. (there are probably others than those two but neocities and nekoweb are the ones i know) but thinks 'oh no i don't know any HTML, i don't know CSS, i don't know javascript, so i can't do it '

use a template! seriously. OP mentions and links petrapixel's guide on how to build a website, which is great, but she also has a layout generator you can customize and it will give you code for HTML, CSS, and (optionally) javascript to download and then use as a starting base for your site.

seriously, my own site's base layout was created via petrapixel's layout generator (and then modified as needed)

i'm only bringing this up because i've occasionally seen sentiment that using templates/layouts for your fun little personal site 'goes against the spirit'. which is utter nonsense and i think mostly comes from people who weren't actually around during the geocities and angelfire days and have this incorrect view that everyone was handcoding every aspect of their websites from scratch.

which just ain't true! people used templates and pre-made layouts. shit, people would just copy the source code of things they thought looked cool from other sites that they wanted on their site. even when geocities et al were dying out and being replaced by things like myspace, livejournal, etc. there were still templates and stuff people used to customize their pages.

so like use a layout made with a layout generator like petrapixel's for your site if you wanna give this a try and don't be ashamed of it. also don't be ashamed to do research and follow guides, ask questions, etc. either. and ESPECIALLY don't be ashamed if you want some cool widget on your site and you just copy-paste some code someone else did and released for others to use instead of personally coding it from scratch.

like shit, to use my own site as another example, do you think i coded the music player in my header myself? nope. it was originally a basic javascript music player someone created on github, then someone used that to make a multiple song music player, which was then reskinned into a windows 98 look by yet another person and they released the code for others to use on their own site.

but anyways the point i'm trying to make here is that a layout is just that - a layout. it is NOT a website. it gives you a base to build off of, but you're still going to actually be adding all the content you want. so you shouldn't be ashamed that your site is built upon a layout you generated with some layout generator tool any more than you should be ashamed that you didn't personally sew the denim jacket you've customized with pins and patches. you still made it your own.

 

[terashards]

adding onto the above that templates are a great learning tool too! if jumping into learning html/css/js or whatever as a whole is too intimidating, just tinkering around with adding your own content to a template and seeing what the template is doing is a great way to get your foot in the door. how much you actually end up wanting to learn is up to you but you may be pleasantly surprised by how much you can pick up from referencing other people's work

also, it's not just personal websites; web development, software development, pretty much anything programming related is built off the back of collaboration and 10 million stack overflow and google searches. learning any programming at all comes with reading other people's work and documentation. so go for it (as much or as little as you'd like)

 

[Princess Viola]

'i stole your code'

'it's not my code'

 

[pilosophos]

One thing I might add is that even though it's really cool to see people express themselves through their site styling, feeling like your site ought to be styled shouldn't stand in the way of having something out there. If you just need a place to put your thoughts, it's better to have your thoughts out there on a site that looks plain than for your thoughts not to be out there at all.

Berkshire-Hathaway is a 1.1 trillion dollar company, but their website looks like it was put together in 30 minutes. And honestly, I prefer it to most websites with fancy slick CSS and autoplaying videos and animated menus.

the main static site generator i’ve seen floated around has been Eleventy; are there any specific aspects of astro that make it preferable for you over other static site generators?

I used Jekyll before Astro, which I only used because it's Github Pages' default static site generator. I got fed up with it because writing reusable components in Jekyll was really painful, and I'd always have to look up the syntax for interpolating stuff into HTML (it uses Liquid). I did actually try 11ty really briefly while I was looking for something to replace Jekyll with, but I can't really remember why I didn't go with 11ty. It's probably fine.

Astro just does all the things I was looking for when I was making the switch (not all of which are exclusive to Astro), which was the following:

• An easy way to write templates and components with something that looks like JSX (which is essentially HTML but you can interpolate it using JavaScript and is used in React, which I like using for web apps)
• Let me port my existing pieces of writing that I already wrote in Markdown without much trouble
• Easily integrate Tailwind into (I was switching away from Bootstrap at the time)
• Easily update to new versions (Jekyll would break on my machine every time Ruby upgraded) and have it run on Github Actions (so I can upload source code changes and it would build the site automatically)

I discovered some other interesting features like the image/thumbnail optimization later, and the fact that any client-side libraries I need to use (so far, I only use Masonry for the tiling layout on the art gallery) can also be managed by the same package manager (npm) as Astro and Tailwind.

i have used a little bit of tailwind before but i’m pretty allergic to anything that takes me away from writing actual CSS (though of course i will have to be learning it to go professional lol)

You will always need to know CSS, but you will not always need to know Tailwind or any other CSS framework. I will say that if you agree with Tailwind's philosophy, and you get used to the class names, it can be a lot more convenient than having to juggle CSS classes in different files all the time.

that’s what i’m trying to become as of late

Good luck!

 

[terashards]

Good luck!

thank you for the detailed response and thanks for the good luck wishes! i'd consider myself like... roughly intermediate right now? i'm incredibly comfortable with HTML/CSS/JS in a static environment but i have not touched any fancier technologies or the back-end side of things, which i would really like to. i've just kind of been circling the same hobbyist neocities spaces for a good while instead of making progress in that department, but i'm picking up some steam now and going back to dedicated learning.

i'm in community college and taking some web related classes to get an associate's in TLDR; digital media, but it's been... uh. slow. i pretty much know all of the material taught in the classes i'm taking already so it's been pretty boring. as a remedy to this i just picked up The Odin Project which i'll be completing in my free time from college and hopefully that'll get me where i need to be. i skimmed over the whole TOP curriculum and i'm comfortable with pretty much everything in the foundations course and bits and pieces of the node js course. that being said i'm not skipping foundations because i'm sure it'll patch up holes in my knowledge that i just never bumped into with any of my personal projects, and also give me a portfolio of work that doesn't link directly to my very nerdy and queer online identity, which i'm not sure i want to share with employers yet.

no matter what i'll still be goofing off on neocities and making hobbyist web projects in my free time. i really enjoy the simplicity and pushing to see what i can do within the limitations as much as possible

 

[terashards]

oh yeah before i forget to bring it up again! would anyone be interested in a bulbagarden user webring? for people active here on the forums or discord or the wiki. the sites don’t even have to be pokemon related. i was considering making one i’d have to contact other staff for non-forum sides of bulba to ask them what they think though

 

[pilosophos]

oh yeah before i forget to bring it up again! would anyone be interested in a bulbagarden user webring?

Yeah, a webring would be cool! We probably want some way to ensure it doesn't just break if someone's site goes down or removes the webring from their page, but I'm sure someone's solved that problem before.

I kinda wonder what the enthusiasm for indieweb stuff is on Discord and the Wiki. My presumption is that the kind of person who frequents a forum, one of the vestiges of a pre-Facebook social internet, would be much more interested in the indieweb than someone who's just on Discord, say.

 

[nuvematown]

a webring would be so awesome!!! i would absolutely love that.
i need to do more with my website... i haven't updated it in a while. i just dunno what to do with it...

recently, i also created a pokemon roleplay forum! i didn't make the site skin or anything like that myself (i grabbed a free to use one) but it's helped me learn a good chunk of knowledge lol...the problem solving has been honestly pretty fun. i'm so tired of futzing with profile fields though ToT

 

[terashards]

I kinda wonder what the enthusiasm for indieweb stuff is on Discord and the Wiki.

i wouldn’t be surprised if there’s some people interested from the discord who just don’t happen to use the forums for whatever reason (discord is so ubiquitous these days you never know) but i have no idea about the wiki lol

recently, i also created a pokemon roleplay forum! i didn't make the site skin or anything like that myself (i grabbed a free to use one) but it's helped me learn a good chunk of knowledge lol...the problem solving has been honestly pretty fun. i'm so tired of futzing with profile fields though ToT

that’s so cool! i remember making forums with proboards back in the day. a couple of them are still online as ghost towns that i can look nostalgically back on with some additional bot posts in the mix unfortunately and yeah it definitely teaches you a good bit about site management

noted that both of you are interested! even it it was just the three of us that’d already be enough for me but i am really busy so i’ll look into it sometime next week

 

[Princess Viola]

i mean i'd be interested in a web ring too but y'know my site still ain't ready so that might put a damper into things for me

 

[terashards]

i mean i'd be interested in a web ring too but y'know my site still ain't ready so that might put a damper into things for me

we could just add you to it whenever your site is ready! there is no rush lol

 

[NumberOneSpinelApologist]

I found this

Let's Make a Fansite! by MarineHaddock

A guide for populating your fansite

marinehaddock.itch.io

As a potential resource. I never made a live site before so idk but it looks useful