site building resources

premade themes and layouts

static site generators

static site generators are applications that can create full html files by inserting text into preconfigured templates. useful if you use the same html format across multiple pages.

microblog.py: a simple microblog generator using python for use with static sites. very easy to configure and use. i use this for my microblog. i currently recommend using the cfg-update branch, which lets you configure the timestamp.
Zonelots: uses javascript to generate a blog for static hosting, also easy to use and works well with neocities.
Eleventy: a simple static site generator. this is the generator i use for this resource site. i recommend this tutorial if you need an easy to use guide on how to set it up for use with neocities.
Hugo: another lightweight static site generator. a walkthrough on how it was used to build a neocities site can be found here. if you write posts in obsidian, this plugin can be used to convert the files for use with hugo.
Quartz: a static site generator that turns markdown files into a website. built for use with obsidian but not required. this is what i use for my notebook.
Obsidian Digital Garden Plugin: another static site generator built for obsidian. has instructions for deploying to vercel and netlify, providers that also offer free static site hosting.

css frameworks

css frameworks are premade, ready to use stylesheets that can speed up the development of your website by doing a lot of the styling for you. you can sometimes download them to host on your website, but many will have a link that you can put right into the head of your html file without needing to download them.

dropin-minimal-css: see how a webpage looks with different minimal stylesheets. good for people looking to quickly publish long-form written content on their site (like a blog, essay, tutorial, etc), want it to look nice without writing their own CSS, and want to preview many different options.
sakura.css: my personal favorite minimal css framework.
Terminal CSS: minimal css framework that mimics the look of a terminal.
NES.css: framework inspired by the 8-bit graphics of the NES era.
PSone.css: framework inspired by NES.css that takes its styling from popular playstation 1 games.
XP.css: replicates windows XP.
98.css: replicates windows 98.
7.css: replicate windows 7.
normalize.css: a stylesheet that helps different browsers render elements more consistently.
A Modern CSS Reset: another css reset that i like using.
Pico CSS: somewhere between a css reset and lightweight framework, emphasizes responsiveness and semantic html.

code snippets

PetraPixel’s Widgets: a variety of widgets that don’t rely on external scripts so they can be used by free accounts. includes widgets for status.cafe, last.fm, and pollcode.
MelonKing’s Frame-Link System: if you use iframes on your site, this lets you link to a page and it will open inside of your desired iframe. i have this set up on my personal site homepage (for example, this link opens my /main/contact.html page inside the iframe of my /main/index.html page)
FreeFrontend: a ton of different html, css, and javascript examples, neatly organized and all with codepens linked.
Kalechips’ code snippets: some simple code snippets with a focus on accessibility.
You Don’t Need jQuery: github page with examples of how to do common jQuery commands in vanilla javascript.
vuvuzela’s code snippets: very 2015 tumblr sidebar style code snippets for displaying links and small amounts of text next to images (usually of favorite fictional characters).
Hover.css: a css hover effect library.
Animate.css: a css animation library.
my code snippets: i have some of my own code snippets on my personal site. includes a wii menu style media gallery, pictochat style microblog/changelog, draggable and collapsible windows, and more.

javascript libraries

Rough Notation: a small javascript library for creating animations with a handdrawn look.
Tippy.js: a library for creating tooltips, elements that appear when hovering over other elements.
Draggabilly: makes elements draggable. i use this to make windows moveable on my main page, and i wrote a demo page on how to use it here.
GSAP: an animation library. i used their scroll plugin to create my favorite places page.
Freezeframe.js: control playing and pausing of animated gifs with mouse hover or click events.

online tools

ezgif: create, crop, resize, reverse, split and convert between animated image files like gifs, webp, apng, avif, and mp4 online.
Dither Me This: online tool to decrease the file size of images using dithering. lots of nice looking presets, and supports transparent images.
Pixel Art Scaler: a tool that scales pixel art to bigger sizes while keeping edges sharp.
coolLabs Fonts: replace google fonts in your code with an alternative that doesn’t log user data.
Online @font-face generator: convert fonts to css @font-face formats with CSS and HTML sample files. you can use this tool to convert ttf fonts to woff/woff2 so you can host and use them on your neocities site if you have a free account and can’t upload ttf fonts.
google webfonts helper: online tool that helps you self host google fonts by downloading them in woff2 format and generating @font-face css.
glassmorphism generator: generate css code that mimics glass.
CSS Gradient: generate css gradients.
Toptal’s CSS3 Generator Tool: generate borders, box-shadow, text-shadow, transitions, transformations, and more.
CSSmatic’s Border Radius Generator: generate css border radius, including the ability to control each corner separately.
CSS3Generator by @RandyJensen: another css generator; this supports generating columns and flexbox.
CSS3 Transform: visualize and generate css transformations.
Flexbox Playground: interactive way to see how different flexbox settings work.

learn

Interneting Is Hard: straightforward, easy to read guide to web development suitable for beginners.
freeCodeCamp: has a variety of project based courses that teach you to code, plus thousands of tutorials. if you’re new to building a website i recommend their responsive web design course.
The Odin Project: a more in depth course on web development.
Codepip Games: a collection of online games that teach you html, css, javascript, or sql.
PetraPixel’s tutorials: beginner webdev tutorials aimed at indie web users looking to code websites from scratch.

other

scripted