1 - 20 of 92 Works in A Guide to Coding and Fanworks
Navigation
Listing 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.
-
Tags
Summary
A brief guide to putting a pair of cards, a deck or a game of Cards Against Humanity into your fanfic!
-
Tags
Summary
A simple workskin to mimic a calendar.
Series
- Part 2 of Linwëlin's Workskins
-
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor
Fandoms: css - Fandom, AO3
26 Jan 2025
Tags
Summary
Want to apply CSS effects (e.g.: some background color, image, or .gif) to entire sections automatically from your work skin (without having to waste precious character count within said sections)?
Wish you could adjust the font, color, highlight, alignment, etc. of the section headers themselves? Perhaps even extend the work beyond the boundaries, covering that wasted space to the sides, and even the site page header and footer regions?
No clue where to even start? Tired of trying to find which part of the work is which from peeking at other works' work skin rules, or mucking about with trial and error?
🤣 Don't Panic. 😉
Here you'll find how to aim your work skin rules at any section of your work (or combination thereof) that you want — and yes, even how to expand those effects to outside of the work area ! (Even... comments )
I read, appreciate, and reply to all of your comments — they're always welcome! ❤️
Series
- Part 3 of How to
-
Finished, Dropped or something else? How to make custom tags for story titles by Curvo
Fandoms: No Fandom
12 Dec 2024
Tags
Summary
A short guide on how to add tags next to fanfiction titles, so you know which stories you have already read or dropped when browsing for new ones to read.
-
Tags
Summary
a super simple qna element i made for a project i’m thinking of starting :]
-
Tags
Summary
A tutorial for a Choose Your Own Adventure/Interactive Fiction workskin. A gift for my younger self, in a way.
-
Tags
-
Hold-hands Inspired Texting Skin by cursedcuriosities (SetsuntaMew)
Fandoms: Ensemble Stars! (Video Game)
25 Sep 2024
Tags
Summary
This is a tutorial/live example for a Hold-hands inspired texting skin, based on the look of iOS messaging.
Series
- Part 2 of Killian's AO3 Work Skins
-
Tags
Summary
I deconstructed Heterochromia_Mars's Discord skin and reconstructed a new one that should work slightly better on screens of all sizes, especially mobile screens.
Note: Please check Chapter 3 for CSS code whenever the skin updates!
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
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. -
Tags
Summary
Workskin to mimic the bubble platform that Korean artists use to communicate with fans.
-
Tags
Summary
Make text appear when you click a "button"
Chapter 2: Simple tweaks to existing email and stationery skins -
Tags
Summary
A tutorial + live example on how to add Gmail-esque emails into your fic using CSS and HTML.
Series
- Part 3 of Cool Coding Kumquats
-
Tags
Summary
Fancy dividers for you to choose from and incorporate to any other workskin, as well as guidance on how to customise them and how to make your own divider out of an image.
Series
- Part 1 of Linwëlin's Workskins