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
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Inside, Outside, Upside-down by Charles_Rockafellor
Fandoms: AO3 CSS, css - Fandom, HTML - Fandom
24 Mar 2025
Tags
Summary
I threw this together overnight (and have tweaked it some since then). Just applying a few little CSS party tricks that I've learned or developed along the way... 😉
My tricks aren't revealed in the narration, but since this is a How To series, you should be able to ferret them out by now — and if not, then take it as your homework challenge! ❤️
Use your 1337 haX0r Wiz zen skillz.
Click for keynote
Best viewed on a COMPUTER browser with a MOUSE, not a 'phone where some effects will be missed or simply not optimized (though there are a couple of surprises that appear on iPhone [not Android] rather than desktop browsers).
⚠️
CAUTION, beware of audio from invisible video; see notes.
⚠️Cf. notes in work skin for issues w.r.t. different approaches used in this work.
Series
- Part 4 of How to
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
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. I just realized, this will never be "complete" and there is no final number of chapters.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: Boxes (still in progress)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator -
Tags
Summary
An updated version of spookedcroon's Reddit template for use on AO3. (Updated 3/29/25.)
-
Tags
Summary
A tutorial on how to include a gift fic email into your fic.
Recent bookmarks
-
Tags
-
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.
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 4 of Azdaema's AO3 Messaging Skins