Sitebuilding Resources

Coding

General

• W3Schools
• Solaria's Web Guides

Neocities-Specific Tutorials

• sadgrl.online's Absolute Beginner's Guide to Neocities

HTML

• W3Schools HTML Tutorial
• Unicode Character List

CSS

• W3Schools CSS Tutorial
• Predefined Color List
• Flexbox Properties (cause I'm always forgetting them)
• Flexbox Froggy (game for learning CSS flexbox)
• Josh W Comeau's Interactive Guide to CSS Grid
• Color Blender (Input hex codes to generate codes for colors in between)

Javascript

• W3Schools Javascript Tutorial

Code Snippets

• W3Schools How-Tos
• FreeFrontend

Accessibility

• WAVE Evaluation tool (Scans your site and lists accessibility errors)
• WAVE Firefox Extension (Can be used with offline files)
• WAVE Chrome Extension
• Audioeye Color Contrast Checker

Graphics

In-Browser Image Editing

• EzGIF (tools for editing GIFs and other formats)
• Squoosh (Image compressor for reducing file sizes)

---

Places for Finding Graphics

88x31 Buttons

• The 88x31 GIF Collection
• Capstasher's 88x31 Button Collection
• Yesterweb Buttons

(Do note that some of the ones you may find are personal website buttons intended to be linked back!)

Backgrounds

• Texturetown
• Sadgrl.Online's Tiled Background Collection
• Alexis Bee's Patterns
• Transparent Textures
• CSS Animated Backgrounds on FreeFrontend

Misc Graphics

• 99GIF Shop
• Death Generator - textbox generators from different video games
• GifCities - The Internet Archive's search engine for Geocities GIFs
• Internet Bumper Stickers

Fonts

• Google Fonts - Provides CSS for you to embed fonts without having to download the files
• Dafont (Note: Not all fonts here are free or cleared for commercial use. Your best bet is to filter by 100% Free or Public Domain. Also pleaseee think about legibility when picking your fonts, the super decorative/tacky ones may work for things like headers, but not the entire website!)
• OpenDyslexic - Font designed to counter some common symptoms of dyslexia

If you're not embedding from Google Fonts, you'll have to manually upload the files to your website. Detailed instructions here.

Some quick notes regarding fonts and type if you're not super familiar with how they work:

• Serif fonts are the fonts that have little decorative strokes on the ends of characters, which are called serifs. Sans serif fonts do not have serifs.
• Display fonts are intended to be displayed in larger sizes (such as headings and titles). They can be harder to read as body text, especially if their shapes have a lot of contrast.
• You can adjust the spacing between lines (leading) using the line-height CSS property.
• You can adjust the spacing between letters (tracking) with the letter-spacing CSS property.
• W3schools suggests setting the line-height property to 1.6. Here, I've made the line-height 1.8 because the font I'm using is a little more compact. I currently haven't touched the letter-spacing, but it can be a cool effect for headers.

The font currently on the site is Proza Libre, which I picked because I can't afford Palatino Sans. Fun fact: The font used for most of Spore's UI is Palatino Sans Informal!

The font that was used in the pre-2024 layout is Karma. Karma is a serif designed specifically for being read on screens, but I ended up changing it because it only has two styles (regular and bold — no italic!).

Miscellaneous

• SCM Music Player - JS music player that can use links from Youtube and Soundcloud
• GIFyPet - customizable interactive pet
• Cursors-4U - free cursors, just copy and paste the code into your CSS
• Quiz Scripts - HTML/JS templates for personality quizzes
• Meet the Ipsums - Collection of links to different themed placeholder texts. Good for testing out how things will look when you aren't finished writing the actual content
• Melon's Gallery Maker - Downloadable program to generate gallery pages from image folders