links
personal sites
sites i love to visit. i list friends/mutuals first before other beloved sites, and buttons before banners, but individual order has no meaning.
dryhands roadside picnic witchitalk lugaw.gay nicky caseweb development
code editors
- visual studio code: really wonderful code editor with lots of integrations. π
- brackets: what i used when i first started coding. great for beginners! π
beginner-friendly
- sadgrl's guides: lots of cool tutorials in here! π
- boxboxhtml β’ sadgrl: layout builders
- templaterr β’ eggramen β’ sadgrl: site layout codes you can use
- html cheat sheet: all the tags + a color picker + copypasting special characters
- super simple blog layout: you can use this for things other than blogging too!
- html5 editor: type in a rich text editor and get the html equivalent. i used to use this for text-heavy pages, for efficiency's sake.
code snippets and specific tutorials
- css layouts β’ css generator β’ css toys: css code snippet masterlists
- dynamicdrive β’ free frontend: css and js snippet masterfiles
- frame tutorial: lissa has lots of other good tutorials that are easy to understand too! this helped me grasp iframes.
- filter by tag tutorial: uses javascript, but pretty nifty! here's another.
- display a button on an image: what it says on the tin
- magnetic poetry β’ drag and drop: drag and drop codes
- save div as image: could come in handy someday!
- how to make a sticky sidebar: yup!
mostly cosmetic, but fun
- button hover effects β’ more buttons: cool button effects made purely with css
- geometric shapes: fun shapes that aren't just a box or a rounded box
- highlight effect: super cute!! i use this still!
- terribleideas: fun text designs you can use
- scrolling marquee β’ endless marquee: marquee tutorials
- pure css background animation: beautiful seamless moving gradient background!
- progress nav: really sleek way to keep track of where you are via sidebar
fully-furnished, mostly saving to study
- bulletin board layout: i used this to learn how to rotate elements
- kawaii notebook layout: i used this to learn overflow and scrolling
- book layout: cute highlighter feature!
- retro PC: the design is just nice, so i saved it to look at lmao
embetterment
making your code nicer, making your site more accessible/responsive, stuff like that.
- purifyCSS: get rid of css you aren't using! π
- using media queries: helps make a responsive site! my saving grace. π
- multi-screen test: check how your site looks at different sizes/resolutions
- make a website responsive: yup!
- make your site look good on mobile: yup!!!
- websitecarbon: check your website's carbon footprint.
- dark mode: add dark mode to your site.
- eleventy: the static site generator i use for my websites. bit of a learning curve in the beginning, but made my workflow soooo much less tedious. i owe it my life. π
features
fun/good stuff to add to your site.
- rss tutorial by pklucky and by sadgrl.online: how to make an rss feed for your site. please make an update feed for your site so i can follow it.
- journal.miso.town: automatically get an atom feed for your site if you structure a page a certain way and paste the link here! this was how my old changelog worked, so if you want help with this, please email me! i highly recommend it for beginners. π
- riku.miso.town: collect responses to your site forms, if you have a form!
- create your own webring β’ another version: why not!!
- kaomojis: to decorate your text (*Β΄β½`*)
- quiz tutorial: make your own personality quiz!
- rarebit template β’Β eggramen webcomic: templates you can use to host your webcomic on your site
- paintBBS: make an oekaki board (seems kind of advanced... i'm scared to touch this)
- webneko: give your site a little cat :)
site design
- asterism β’ sorahana β’ kawaii sozai: wonderful free to use jp graphics
- backgrounds β’ subtle patterns π β’ tartanmaker β’ tiled-bg: all sorts of backgrounds. i use subtlepatterns most!
- repeater: helps you make an image out of a pattern that you can tile
- bit font maker: make your own 8bit font
- 04 bitmap: downloadable bitmap fonts!
- cinni's icons β’ engrampixel: cute icons you can use!
- cursor-switch: get custom cursors.
- cute falling pixel art: cherry blossom hearts • ribbons
photo editing
- photokako and photo mosh: fun effects
- dither me this: dither your photos!
- redketchup: quick and easy image resizer π
- remove.bg: deletes the background of any image you paste π
hosting & ownership
- neocities: where i started. free, with extra stuff if you're a supporter! very beginner friendly with social features to meet others on the personal web.
- vercel: where i'm at right now. free for hobbyists, and with great integration with github + eleventy! i love it so far. π
- nekoweb: an alternative to neocities with similar social features.
- squidge: lots of services for fans and fandom, but also hosts fan websites!
- porkbun: get a domain β this is where i got mine! i was charmed by the user-friendly, personable language on their site. π
- namecheap: another place to get a domain name.
- landchad: teaches you how to build your own site, platform, e-mail server, and more. kind of advanced stuff!!!
blogging
- bearblog.dev: simple blogging platform that looks good anywhere! rss is easy to grab, and nice little community. i use this for my blog. π
- smol.pub: another simple blogging platform, but the rss is kind of fucky on my feed reader. seems more customizable for free than bear is.
- dreamwidth: like livejournal before its enshittification. i use this for my brainworms... and if you want to use it as a blog, here's a tutorial on how to integrate it into your site.
- montaigne: make a site or blog from your folders. see also: blot
- zonelets: more code-based blogging platform, mostly meant to integrate into hand-coded sites. see also: zoneLOTS, which has tagging!
games
for playing
- hShop: content preservation for the nintendo 3DS
- GBA/GB/GBC on PC: big downloadable file of gameboy games
for making
art
programs
- piskel: online pixel art program
- clip studio paint: my fave drawing program on PC - designed for drawing/animation/comics specifically. π
- StudioBinder β’ Moviestorm β’ FrameForge β’ ShotPro β’ Storyboard Quick β’ Storyboard Artist Studio 7 β’ Toon Boom StoryBoard Pro β’ Storyboard Fountain β’ Storyboard Composer β’ Storyboard That β’ FrameForge 4 β’ Boardo: all storyboarding tools!
reference
- art search helpers: for male anatomy, female anatomy, and animals
- room 3d planner: great reference tool for indoor backgrounds
- pureref: reference compiler that can sit over your canvas as you draw! insane! π
tutorials and resources
- VAMPBYTE's clip studio paint tutorials: big ol sheet for learning CSP!
- studying storyboarding on a budget: tips and resources for storyboarding
- howtobeaconartist resource list: tumblr resource full of stuff to help you with anything from producing merch to tabling at cons
- merchandise supplier database: big spreadsheet of different merch suppliers
- artist alley quick-start guide: a helpful beginner’s guide to artist alleys, written in very casual, friendly language!
colors
- color hunter: generate a color palette from an image
- color palette generator: generate a color palette from an image
- design seeds: photos and their associated color palettes
- coolors: palette generator with lots of features! π
- gradient generator: helps you... generate gradients...
organization
note-taking
- notion: note-taking app. requires an internet connection, but very useful for organizing your notes into something pretty and presentable. i use this sometimes to make drafts for my pages. π
- obsidian: note taking app that gets stored in your local files. you write in markdown. lots of great ways to customize your user experience too. i use this the most now! π
- more note-taking apps: i haven't vetted these myself, but other recs include notesnook, tiddlywiki, and dynalist
other
- frogtab: plaintext task organizing tool β also good for making a contact form! π
- miro: board / mind map / brainstorming tool. i've also used mural, and have been recommended milanote.
- airtable: easy database maker. i use this for my fic catalog and blorbo roster. π
- sendrecurring: send recurring email and text reminders
- typehere: type stuff and it will save even if you close it!
writing & reading
writing
- 4thewords: defeat monsters by hitting word counts or writing for x amount of time. requires subscription after a free trial.
- 750 words: encourages the habit of writing daily with a point system
- reverse dictionary: helps you look for a word. see also: tip of my tongue.
- novellla: a focused writing app you can access through your browser
reading
- recommend me a book: shows you the first page of a book without showing you the title and author, so you can decide if you want to read it mostly without any preconceived notions
- typelit.io: tests your typing by practicing on books. gets you reading classic lit and i believe they have a way to upload a book of your choice on there too!
- feedbro: extremely simple RSS feed reader browser extension. shows an unobtrusive little notification bubble in the icon when feeds i subscribe to are updated. π
- the ginormous yuri rec list: early 2010s rec list of yuri/GL manga. outdated but this was an incredible list for me when i was in high school
- 12ft.io: bypass paywalls, typically on journalism websites
hobby & fannish
- LaTeX: typesetting program for bookbinding
- stuffed frog pattern: a pattern to make your own stuffed toy frog. i don't sew but this looks pretty simple and easy to do from scraps!
- sub sub gakkou: giant resource for learning how to hardsub videos. i used this when i was learning how to subtitle!
- how to make a fanzine: great resource for anyone thinking of organizing a modern day fanzine project.
health
- emotional baggage check: vent and get an email back; respond to others.
- bedtime calculator: helps you figure out what time to go to bed or get up
- supercook: find recipes for things based on what you have in your fridge
- classification of the anatomical variation in female external genitalia: yeah
- scarleteen: sexual health education for all!
digital & tech
- alternatives to big tech: nice post with recommendations for what to swap out your big data email/messaging/browsing clients with
- digital wellbeing: a masterlist of privacy tools and other good stuff
miscellaneous
- make word art: word art generator
- cocktailstuck ingredients masterpost: make drinks based on homestuck characters. i was never into homestuck but i thought this was such a cool idea lol
- ultimate favorite pokemon picker: pick your favorite pokemon by generation and type
- cat icon maker: make a cat :)
- θ§οΌθ³γ£γγ‘γΌγ«γΌ: honestly the prettiest picrew i’ve ever seen. contains fantasy features!
- ian's shoelace site: shows you different ways to tie your shoe depending on your needs
surf! the! web!
i subscribe to the idea that every site needs a links page, so here's mine!
links are not arranged in any particular order within their headings, and anything i can personally vouch for is marked with a π. happy websurfing!
navigate
link me?
I may have to make a new site button one of these days...
rings & listings
credits
- cursor: from kawaii pink heart cursors by mimi destino.
- backgrounds: most are from subtlepatterns; some i made myself.
- fonts: source serif, source sans, roboto mono, space mono, rubik, playfair display, zilla slab, libre franklin, gloomie saturday.
- kidd gif: shinobi-bacon on tumblr.
- 3d effect on the av page: from simurai on codepen.
social & communication