A Guide to Coding and Fanworks
A collection of tutorials, references, guides, and meta discussion for the creation and appreciation of coding as used for/in transformative works.
(Open, Unmoderated)
Recent works
-
Olive Pine Moon site skin theme by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: Site Skin - Fandom
03 May 2026
Tags
Summary
This theme uses an olive tone as its basis, and was built at the request of a Redditor.
It requires ravenothere's Closer to Home BASE site skin in order to function.
-
A Beginner's Guide to HTML and CSS on AO3 by the_untamed_poet25
Fandoms: No Fandom, Fandom - Fandom, AO3, Original Work
28 Apr 2026
Tags
Summary
You've seen it. A fic formatted like a classified document. A chapter that looks like a real social media feed. An interactive game, somehow, inside an AO3 work. You clicked the kudos button. You thought: how.
This is the tutorial that answers that.
A beginner-friendly guide to HTML and CSS on AO3 — no prior coding experience required. By the end of this series, you'll know enough to write formatted fics, build your own workskins, style your entire AO3 interface, and maybe make something that makes other people stop and think how.
Series
- Part 23 of Izzy's HTML & CSS Experiments
- Part 2 of HTML/CSS AO3 Skins & Tutorials
-
Tags
Summary
a generic texting workskin, that adapts to the width of any screen :D
Series
- Part 3 of silly little codey bits
-
Tags
Summary
Y'all ever heard of the css property resize??? I. going okay. draggables. is here too
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!
Recent bookmarks
-
User-Selectable Names in a Fanfic Work by feindcode (feind)
Fandoms: Testing, AO3 Abuse, HTML Tryhard - Fandom
06 Aug 2023
Tags
-
How to Make Facebook Messenger Chat on AO3 by ran_a_dom (revabhipraya)
Fandoms: No Fandom
17 Jun 2019
Tags
Summary
A tutorial and live example to make Facebook Messenger Chat using AO3 skin.
Series
- Part 3 of AO3 Chat Skin Tutorial
-
Tags
Summary
AO3 work skin CSS & HTML formatting for imitating reddit in a work. CSS is my own and not copied from somewhere else. Feel free to use as you wish.
-
Tags
Summary
Code and Tutorial for a 2020-style reddit post.
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.