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
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful (2018).
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs and interests.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (with opacity and hover translations)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text
Part Seventeen: Drop-Down Transition Delay (NEW & reformed)
Part Eighteen: Automated Animation (NEWEST and No. 2 added) -
A Beginner's Guide to HTML and CSS on AO3 by the_untamed_poet25
Fandoms: No Fandom, Fandom - Fandom, AO3, Original Work
18 Aug 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 workskin to make a cover for your fic, inspired by Penguin Classics book covers. 100% done in CSS, no HTML required.
-
Userscript and CSS, as you prefer, to return overflow and sticky effects client-side by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for feindcode (feind)
Fandoms: CSS abuse - Fandom
12 Jun 2026
Tags
Summary
What can I say that isn't pretty self-evident from the title?On Mon 08 Jun 2026, AO3 updated some stuff that broke a lot of things in a lot of people's CSS-works (and at least one userscript). I fixed it. This fix is only client-side, so that you can re-enable some of the magic that some people have wrought and see it once more as a reader — it doesn't act from within a work skin to force a rollback to the actual server-side site-level underlying code itself, so it's not much good directly for authors (indirectly: your readers might use this to see your effects).
Have you seen some of my CSS demos, or a number of heavy hitters' works that the change broke?1 If so (before the “update”), then you know and remember; if not, then you're going to want to do so, and you'll want this CSS or JS with which to view them in all of their glory.
-
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.
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
02 Jun 2026
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.