Sitebuilding Resources
Coding
- sadgrl.online's Absolute Beginner's Guide to Neocities
- W3Schools
- HTML Tutorial
- CSS Tutorial
- Predefined Color List
- Flexbox Properties (cause I'm always forgetting them)
- Javascript Tutorial
- How-Tos (assorted HTML/CSS/JS code snippets)
- Flexbox Froggy
- Solaria's Web Guides
- FreeFrontend (even more assorted code snippets)
Accessibility
- WAVE Evaluation tool (Scans your site and lists accessibility errors)
- WAVE Firefox Extension (Can be used with offline files)
- WAVE Chrome Extension
- Color Contrast Tester
Graphics
88x31 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:
- 99GIF Shop
- Death Generator (textbox generators from different video games)
- GifCities (The Internet Archive's search engine for Geocities GIFs)
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:
The font currently on the site is Proza Libre, which I picked because I can't afford Palatino Sans.
The font used in the pre-2024 layout is Karma, which is a serif specifically designed to be read on screens. Note that Karma only has two styles (regular and bold) and doesn't have an italic style, which is part of why I changed it.
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)
Happy sitebuilding! Feel free to poke around through my code if you're curious as to how I've done something specific. If you're on Firefox, you can right click on something and select "Inspect" (or press Q) to see the code and properties of a specific item, or you can select "View Page Source" to see the entire source code.