tutorial
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
Tags
Summary
Originalmente creada para uso y placer de la comunidad Dreamling con Ñ, y subida para servicio de utilidad pública, esta es una guía/tutorial muy muy básica de algunas de las cosas cool que se puede hacer en AO3 con la añejeza que es el HTML.
En general, siempre hay muy pocos recursos en español para los fandoms. Ojalá esta breve cosa inspirada por The Sandman > Dreamling > nuestra bonito Discord hispanohablante sea de utilidad para todes :3 Estaré actualizando y puliendo!
-
Tags
Summary
How to create an account, how filtering works, how to create a work, tags to look out for, and more! also feel free to suggest things for me to add info on. This has images, but i'll work on a text one too at some point
-
How to create your work skins to have colored text by Goddess_of_the_arena
Fandoms: css - Fandom, Work Skins - Fandom, HTML - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.Series
- Part 1 of CSS GUIDES
-
Tags
Summary
Bringing Homestuck chat clients to AO3!
✔️ Trollian chat window (compatible with mobile browsers)
⬜ Other Trollian components
⬜ Pesterchum 6.0
⬜ Pesterchum 7.0
⬜ Other Pesterchum components -
Tags
Summary
Want to write a fanfic that will break integer counters? Do you wish to pull a Harper Lee and be known for one story forever? Are you ready to break fanfiction.net for the 700th time?
Well buckle up motherfuckers, I'm showing y'all how to write your own Revamped fanfic!
-
How To Kill Procrastination When Writing Gay Smut. by orphan_account
Fandoms: Original Work
11 Feb 2024
Tags
Summary
A Tutorial, an ACTUAL TUTORIAL On how to write if you have no knack or talent or motivation to do so. With story prompts and guides to help you.
-
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
-
[craft] Rusty Candles by Nthen, WTF Mad Max 2024 (Team_Mad_Max)
Fandoms: Mad Max Series (Movies)
10 Feb 2024
Tags
-
[Crochet Tutorial] Вязаный топ Сакуры из Le Sserafim Day Off S03E01 by WTF J and K Pop 2024 (J_and_K_pop)
Fandoms: LE SSERAFIM (Band)
11 Feb 2024
Tags
Summary
Схема и процесс вязания крючком летнего топа.
Series
- Part 3 of Зима 2024, челлендж
-
Tags
Summary
This work will be used to ensure all of the images I use in my fanfics still work. I doubt they'll stop working this time, so it is also just a simple collection of everything in one place.
The first chapter is a tutorial on how to put images into your own works and comments.
-
Tags
Summary
Where the previous meta looked at how to find one's own fics' traffic pattern, this meta looks at all of AO3 for a year of 48/7 half-hourly data in 5+1 variables (total {bookmarks, works, comments, hits [and my own works' hits for comparison and contrast], and kudos}), tells how they were obtained, drawing traffic pattern conclusions from these.
Tables' and graphs' foci are the peaks and troughs of the mean average day (in 30 minute increments) and changes over the mean average week, with links to some years of AO3's own data.
As well, some observations and caveats are made regarding the fluctuations, the holidays, and similar minutiae — a traffic report trying to disguise itself as not-a-weather-forecast. 😉
NB for transparency to avoid misleading: AO3's 48/7 uploads 366 days; AO3's 48/7 bookmarks 298d; and AO3's 48/7 comments, hits, and kudos 295d; my own works' hits 366d of daily tally and 352d of 48/7.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 7 of How to
-
Building ConLangs, with a concrete example by Charles_Rockafellor
Fandoms: Conlangs - Fandom
07 Apr 2024
Tags
Summary
Sometimes we want a conlang (constructed language) in our fic (or even without a fic). They abound in the wild — Star Trek's Klingon has an essentially functional vocabulary, Tolkien put in a lot of work on Elvish Quenya and other languages of Middle Earth, and many others exist in one state of completeness or another.
So, how do you go about making one for yourself? This takes you through the steps alongside resource links; where you start building one is up to you, but this provides a good grounding in some of the basics at least. It also goes through those steps as it progresses, building up the lelɹli conlang as we go. The sounds and written form, the vocabulary and grammar, and even dialects, though each section's associated linked resources are probably of more interest to most (except perhaps my readers).
NB: there's a metric shit-ton of IPA in here, for which I apologize beforehand should you read this with a TTS screen reader (or, I imagine, a braille reader) that's not majorly buffed.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 9 of How to
-
Tags
Summary
As a reader, I love it when authors have footnotes, but I know the html can be annoying to put together. So here's my guide to it, including a link to a spreadsheet you can use to generate the html you'll need!
-
Tags
Summary
Want to podfic but don't know how? Join the club! I'm stumbling my way through things but I have figured some things out so here I am to share what I do know.
This is by no means an extensive guide, just me sharing some things like my equipment list, spreadsheet, an example of my editing prosses and some other things.
The bulk of the useful things I have to share come in the form of behind the scenes videos of my prosses. All of it is accessed through a google drive folder so if that's your thing, give it a look.
-
Unicorn Overlord: How to Heraldry by otblock57
Fandoms: Unicorn Overlord (Video Game 2024)
28 May 2024
Tags
Summary
A guide and resources for making your own Unicorn Overlord style heraldry for characters, for fics or whatever else.
-
How to create a work skin to have different fonts and colors in your works by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom
30 May 2024
Tags
Summary
This is a tutorial on how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well.
It also contains two ready-to-use codes to give your fonts a gradient effect. There are both the code for the linear gradient effect and the code for the radial gradient effect.
CHAPTER 2 contains the visual examples of every font that you find in chapter 1.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.Series
- Part 2 of CSS GUIDES
-
How to create a work skin to highlight your text and create text boxes by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
25 Dec 2024
Tags
Summary
This guide will help you create your own work skins to add highlighted text and text boxes to your stories.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 highlight text (also in gradient colors!) and mixing highlight text with colored text and new fonts. You can also give the text the appearance of having been redacted by making it appear as a block of solid black.
CHAPTER 2 Text boxes, Deadpool's thought boxes and green-on-black text in the Matrix movies, making the border, text and background of your text box be in gradient colors and making the border dotted or dashed. You can also put the text box inside a paragraph.
CHAPTER 3 creating a text box inside another text box, with also a ready-to-use code.
CHAPTER 4 putting two text boxes side by side to create the effect of diary pages.Series
- Part 3 of CSS GUIDES
-
How to create a work skin for glitch effect, mirror text, vertical text and upside down text by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
22 May 2025
Tags
Summary
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the text with glitching effect similar to the Zalgo font.
CHAPTER 2 is for the mirror effect, vertical text and upside down text.
CHAPTER 3 is to create a negative mirror text effect in black and white with the text side by side.
CHAPTER 4 is to give your blockquote a colored side border, top border or bottom border (also in gradient colors), a colored background (also in gradient colors) and different margin values.Series
- Part 4 of CSS GUIDES
-
[Tutorial, Linocut] Гербы домов Алва и Савиньяк by fandom OE Izlom 2024 (fandom_OE_Izlom_2021), Nordora
Fandoms: Отблески Этерны - Вера Камша | Otbleski Eterny - Vera Kamsha
02 Aug 2024
Tags
Summary
Туториал по линогравюре (изготовлению печати для оттисков): гербы домов Алва и Савиньяк.
Series
- Part 2 of ОЭИзлом2024_челлендж
-
[скетчбук, переплет] Онмёдзи by fandom Abe-no Seimei 2024 (Seimei_1100)
Fandoms: Onmyouji | The Yin-Yang Master (Movies 2001 2003), 陰陽師 - 夢枕獏 | Onmyouji Series - Yumemakura Baku
02 Aug 2024
Tags
Summary
Скетчбук с жёсткой подушкой. Фото процесса и бонусный рисунок внутри!
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
18 May 2025
- Words:
- 84,915
- Works:
- 19
- Bookmarks:
- 4,054
-
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
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
18 May 2025
- Words:
- 84,915
- Works:
- 19
- Bookmarks:
- 4,054
-
The Nice and Accurate Guide to Footnotes by Vigs for fersh
Fandoms: Good Omens - Neil Gaiman & Terry Pratchett, Good Omens (TV)
10 Aug 2019
Tags
Summary
If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.
But html can be confusing. What can you do?
Read this guide to find out!
-
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 -
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
18 May 2025
- Words:
- 84,915
- Works:
- 19
- Bookmarks:
- 4,054
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
18 May 2025
- Words:
- 84,915
- Works:
- 19
- Bookmarks:
- 4,054
-
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
-
Tags
Summary
Embedding tutorial
-
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
-
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
-
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
- Language:
- English
- Words:
- 24,090
- Chapters:
- 12/17
- Collections:
- 8
- Comments:
- 1,064
- Kudos:
- 5,831
- Bookmarks:
- 6,670
- Hits:
- 357,904
Bookmarked by Brachylagus_fandom
15 Oct 2019
Bookmarker's Tags:
Bookmarker's Notes
A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot
Fandoms: No FandomGeneral Audiences
No Archive Warnings Apply
Gen
Work in Progress23 Nov 2015
TagsNo Archive Warnings ApplyHTML Guide cheat sheet How-to no story here reference Fanwork Research & Reference Guides
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
How to Make Invisible Text (That Can Be Highlighted) by La_Temperanza
Fandoms: No Fandom
21 Oct 2015
Tags
Summary
This is a live example how to make invisible text that can only be seen by highlighting the text. Tutorial is included in text, and you can always leave comments about questions you may have.
MOBILE USERS: Sadly, this probably won't work for you, since highlighting in a mobile browser is different than web. I've tried correcting this, but have yet to find a solution.
Series
- Part 4 of AO3 Work Skins/Tutorials
-
Tags
Summary
Original coding and design is from layouttest. I make no claims for it, just tweaked it so it will work on AO3.
Series
- Part 5 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of lined notebook paper in their work. To learn more about it, you can find the tutorial here.
Series
- Part 7 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of sticky notes (aka Post-Its) in their fic. To learn more about it, you can find the tutorial here.
Series
- Part 8 of AO3 Work Skins/Tutorials
-
How to Make Deadpool's Thinking Boxes on AO3 by La_Temperanza
Fandoms: No Fandom, Deadpool (Comics), Deadpool - All Media Types
20 Jul 2015
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of Deadpool's thinking boxes in their fic. To learn more about it, you can find the tutorial here.
Series
- Part 2 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of a newspaper article in their work. To learn more about it, you can find the tutorial here.
Series
- Part 1 of AO3 Work Skins/Tutorials