1 - 20 of 95 Bookmarked Items in Hoard of Excellent Coding Templates and Tutorials
Navigation
List of Bookmarks
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 3,457
- Chapters:
- 3/3
- Collections:
- 7
- Comments:
- 82
- Kudos:
- 627
- Bookmarks:
- 925
- Hits:
- 40,489
-
Bookmark Collections:
Bookmark Notes:
Linked footnotes
-
Decorations for Fic (HTML/CSS): Fan Art, Dividers, Embedded Songs, and More by Jnsn
Fandoms: No Fandom, Archive of Our Own
24 Jul 2021
Tags
Summary
NON-FICTION. This work shows some examples of use of HTML/CSS to decorate a fic with art and other things. The second chapter provides the HTML for each example.
- Language:
- English
- Words:
- 3,825
- Chapters:
- 3/3
- Collections:
- 2
- Comments:
- 8
- Kudos:
- 264
- Bookmarks:
- 219
- Hits:
- 7,043
-
Bookmark Collections:
Bookmark Notes:
Html
-
How to make Minecraft chat logs on AO3 by Ekusuo (lomenlurks)
Fandoms: Minecraft (Video Game)
14 Jul 2026
Tags
Summary
A guide on how to code minecraft chatlogs on ao3 without using images. Super easy tutorial!! This is for all of you fluxarata fans and MCYT authors :D
-
Bookmark Collections:
Bookmark Notes:
Chat log
-
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 3 of Azdaema's AO3 Messaging Skins
- Language:
- English
- Words:
- 1,193
- Chapters:
- 5/5
- Collections:
- 3
- Comments:
- 16
- Kudos:
- 182
- Bookmarks:
- 124
- Hits:
- 8,586
-
Bookmark Collections:
Bookmark Notes:
WhatsApp
-
Tags
Summary
During a late night dive into the deepest depths of a classic Wikipedia rabbit hole, you come across an articles that seems like an interesting read. The name feels like it rings a bell, you think there's a chance you saw some Netflix documentary series plastered with this guys face or it coming up with some conversation with your grandparents.
This Whittman guy was some kind of megastar in the 1950's and a massive cult leader/serial killer. Deciding you have nothing better to do, you begin to read his article...
(My take on what a real Wikipedia Article for our favourite TV heads life on Earth might look like given his status shown in "Brighter.")
-
Bookmark Collections:
Bookmark Notes:
Wikipedia example
-
-
Tags
Summary
Want to code in ao3?
Heres how!
This work will teach you how to code on ao3 from simple to more advanced techniques.
Some code featured in this work is credited to their respected authors, so be sure to check them out as well!
Series
- Part 1 of Ao3 C̵̬̳͕̲̪̖̉̎̂͌̿̊̈́̅o̶̬̳͇͙̤̎̄͗̈́̓̃̔̚͜͝d̷̙̹̖̳̪̞̬̗̔͐́̏̕i̶̧͈̱̣̝̍ͅn̸̛͉̤̙̭̂̾̏̏̑̈́̀̎̅̅͂g̸̢͉͈̦͍͎̮͎̭̮̉̌́̇̄̓͜ͅͅ
- Language:
- English
- Words:
- 43,986
- Chapters:
- 21/?
- Collections:
- 2
- Comments:
- 171
- Kudos:
- 453
- Bookmarks:
- 690
- Hits:
- 22,936
-
Bookmark Collections:
-
Tags
Summary
A mock-up of a fake article about a TV series, with CSS and HTML code and a brief guide on how to use it.
- Language:
- English
- Words:
- 3,498
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 7
- Kudos:
- 72
- Bookmarks:
- 75
- Hits:
- 2,472
-
Bookmark Collections:
Bookmark Notes:
Wikipedia
-
Tags
Summary
A workskin to mimic the website FetLife, which is Facebook for kinky people.
-
Tags
Summary
A work skin tutorial of a Google Search Suggestions page in AO3.
See Chapter 1 for examples of the work skin with 4 different suggestions types (auto-complete suggestions, recent history, related to recent searches and trending searches), Chapter 2 for an explanation of the CSS work skin, Chapter 3 for the complete CSS code of the work skin, Chapter 4 for explanations of the HTML code and Chapter 5 for the complete HTML code (all 4 types of suggestions).
-
Tags
Summary
A tutorial for a screen reader friendly WhatsApp mockup work skin.
-
Tags
Summary
are your characters stuck in quarantine and attending online zoom classes??? here's a really simple skin for that
Series
- Part 2 of #ao3_work_skins
-
Tags
Summary
Documentation/Examples for the CSS workskin and HTML code for a Wikipedia article inspired layout to use in your mixed media works.
Created with help from Nautilusopus and DarthTofu.
-
Change Your Password! by willyoucometomycottagethissummer1
Fandoms: Heated Rivalry (TV), Game Changers | Heated Rivalry - All Media Types
01 Jun 2026
Tags
Summary
Shane: Ilya lost his phone again
Shane: If anyone finds it, can they please message me?
LaPointe: I hope he learnt to put a password on it
LaPointe: I think Young is still traumatized from last time
Harris: please tell me his password isn't 1234
Harris: I don't need to see his nudes leaked onto twitter
---Ilya loses his phone (again)
Series
- Part 1 of Call Me!
-
Tags
Summary
[this is an updated version of one of my older workskins!] The perfect workskin for when your character is scrolling through Youtube. I've made it to work well with the workskin disabled, and to look more seamless in fics.
Series
- Part 3 of AO3 workskins
-
"Objection!" Shout Buttons (HTML + CSS with audio) by FerdieLance (JohnWWells)
Fandoms: 逆転裁判 | Gyakuten Saiban | Ace Attorney
30 May 2025
Tags
Summary
Clickable Ace Attorney shout balloons for your stories.
-
Tags
Summary
Live example and tutorial on how to include a Yelp product review in your work.
Series
- Part 2 of AO3 Work Skins
-
Tags
Summary
Live example and tutorial on how to include an Amazon product review in your work.
Series
- Part 1 of AO3 Work Skins
-
Tags
Summary
A tutorial + live example on how to recreate Ao3 on mobile in your Ao3 fic using CSS and HTML.
Series
- Part 2 of Cool Coding Kumquats
-
Tags
Summary
This is a work skin to create a fic-within-a-fic on AO3, complete with the top navigation bar, kudos, and comments!
-
Tags
Summary
A tutorial on how to include a gift fic email into your fic.