• cepheus’s themes
• cinni’s themes
• EGGRAMEN’s CSS Test Pages
• fool lovers’ themes
• kalechips’ layout thrift store
• REPTH themes
• ribo.zone’s layouts
• sadgrl.online’s premade layouts and layout builder
• teppy’s layouts & tips
• tentacool’s directory
• ThemeKing’s Retro HTML Web Templates
• Templates | Wasp Nest
• xandra’s layouts
• petrapixel’s layout generator
• Wish Glows’ layouts
• 5493’s themes
• Almost Sweet’s themes

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 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.

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.

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.

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.

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.

• scripted