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).
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
- Language:
- English
- Words:
- 7,539
- Chapters:
- 8/8
- Collections:
- 7
- Comments:
- 85
- Kudos:
- 322
- Bookmarks:
- 439
- Hits:
- 16,121
Bookmarked by buries
26 Apr 2025
Bookmarker's Tags:
Bookmarker's Notes
Repository: Twitter by gadaursan
Summary: A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter Polls -
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:
- 32
- Bookmarks:
- 32
- Hits:
- 754
Bookmarked by buries
26 Apr 2025
Bookmarker's Tags:
Bookmarker's Notes
Fake Wikipedia Article about TV Show: Work Skin by Anonymous
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. -
Tags
Summary
Embedding tutorial
-
This work isn't hosted on the Archive so this blurb might not be complete or accurate.
Tags
Summary
We create simplified and interactive learning experiences.
Learning web development should be easy to understand and available for everyone, everywhere!
W3Schools is a school for web developers, covering all the aspects of web development:
Learn HTML
HTML is the standard markup language for Web pages.With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
- Bookmarks:
- 1
-
Tags
Summary
Some tips and tricks for adding music to podfics. With screenshots of Audacity to make it easy to follow.
Chapter two is a list of websites which share free-to-use music.Bookmarked by buries
17 May 2025
Bookmarker's Tags:
Bookmarker's Notes
A quick guide to adding music to podfics in Audacity by ChaosKiro
Summary: Some tips and tricks for adding music to podfics. With screenshots of Audacity to make it easy to follow.
Chapter two is a list of websites which share free-to-use music. -
How to target specific elements of your work (for work skins) by hearker (heark)
Fandoms: HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom, No Fandom, css - Fandom
24 Feb 2025
Tags
Summary
This is a guide to help you precisely target elements in your work skins using CSS selectors. It doesn't focus on styling or adding cool effects!! This guide teaches you how to identify and select the exact elements you want to style.
CHAPTER 1 - Work Title
CHAPTER 2 - Author Name
CHAPTER 3 - Summary
CHAPTER 4 - Notes Part 1
CHAPTER 5 - Notes Part 2
CHAPTER 6 - Gifts
CHAPTER 7 - Inspired By
CHAPTER 8 - Chapter Title
CHAPTER 9 - Series
CHAPTER 10 - Selecting Multiple Headings
CHAPTER 11 - Body TextNote: This guide contains custom CSS. It's not necessary for the guide, it's only cosmetic. If you want to disable it, click "Hide Creator's Style" at the top.
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
How to edit ao3 elements such as work title, chapter title, backgrounds, etc. Very helpful and opened my eyes to editing ao3 completely. Any work from them is amazing.
-
CSS GUIDES by Goddess_of_the_arena
Fandom: AO3 help - Fandom, css - Fandom, HTML - Fandom, Work Skin - Fandom, Work Skins - Fandom
22 May 2025
Summary
Guide 1 colored text, also with gradient effect.
Guide 2 new fonts, in more colors, size and with gradient effect.
Guide 3 highlight text, text boxes, diary pages.
Guide 4 glitching text similar to the Zalgo font, mirror text, vertical text, upside down text, colored blockquote.
Guide 5 underline types, line dividers (also with emoticon/emoji).
Guide 6 shadowed text, bordered text, 3D text, neon text.
Guide 7 change background color, font color and/or font type of your story, either for the whole work or giving a different style to every chapter.
Guide 8 add emoticon/emoji to story title, username, summary, notes, chapter titles.- Words:
- 28,473
- Works:
- 9
- Bookmarks:
- 66
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Very versatile and helpful in all aspects below.
Guide 1 colored text, also with gradient effect.
Guide 2 new fonts, in more colors, size and with gradient effect.
Guide 3 highlight text, text boxes, diary pages.
Guide 4 glitching text similar to the Zalgo font, mirror text, vertical text, upside down text.
Guide 5 underline types, line dividers (also with emoticon/emoji).
Guide 6 shadowed text, bordered text, 3D text, neon text.
Guide 7 change background color, font color and/or font type of your story, either for the whole work or giving a different style to every chapter.
Guide 8 add emoticon/emoji to story title, username, summary, notes, chapter titles. -
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,024
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
19 Works of all kinds to do various things. Basically one of the first CSS HTML series on ao3 to take off.
Newspaper Articles, Deadpool thinking boxes, ios text messaging, invisible text (highlight to reveal), playlist, linked footnotes, notebook paper, sticky notes, page dividers, fonts (undertale), all emoji, email window, text wrap around images, mimic ao3, change text when hover/tap, CYOA how to, letters, fliers, stationary, image sizing.
-
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,054
- Kudos:
- 5,797
- Bookmarks:
- 6,614
- Hits:
- 355,972
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
THE beginner friendly HTML/CSS on ao3, absolutely helpful for anyone starting out or otherwise.
-
How I Style My System by Emriel for shura_alice, komengrebi
Fandoms: 人渣反派自救系统 - 墨香铜臭 | The Scum Villain's Self-Saving System - Mòxiāng Tóngxiù
24 Nov 2021
Tags
Summary
A few people wanted to know how I style my work so here's a few guides and useful resources to help you because I suck at explaining and I'm no expert.
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Interesting system popup text / hover to reveal
-
How to by Charles_Rockafellor
Fandom: AO3, AO3 CSS, AO3 help - Fandom, Conlangs - Fandom, css - Fandom, HTML - Fandom, The Matrix (Movies), Work Skins - Fandom
24 Mar 2025
Summary
This series started as just a one-shot to help people with AO3's CSS for making work skins. Now that I've written a piece on making series (originally for a friend, but then shared to a Facebook group, so I figured why not add it to AO3), I figured that the two really should be linked for tutorial purposes. I had no plans to do any of this at first, so maybe I'll add more in the future (Collections come to mind, and they're really easy to do).
I don't expect to add further tutorials, but I hadn't expected to write these either. I'm calling the series complete, but who knows (one thing that keeps nudging me is to take the statistics and show how fics' half-lives vary, for example; another is putting all weird AO3 fixes into one spot).
NB: If you're wondering, please see How to make and fix a series on AO3 (in this series with the tutorial on CSS work skins for fonts, which made that link become underscored blue ink [assuming that your browser settings, site skin, and third party apps didn't prohibit it]).
- Words:
- 148,434
- Works:
- 9
- Bookmarks:
- 93
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Want to know anything and everything about ao3? This is the place. It is almost overwhelming with how much information is in this series and other works by Charles. Have a question? Just ask them in any work.
-
- Words:
- 19,151
- Works:
- 14
- Bookmarks:
- 323
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Various tutorials thats very helpful.
News website, skin for dark/light mode, header, flat button, various skins, revealing spoilers, change names, highlight comments
-
My Code Snippets by DoctorDizzyspinner
Fandom: Ao3 meta - Fandom, No Fandom, Original Work
22 Mar 2025
- Words:
- 1,577
- Works:
- 3
- Bookmarks:
- 1
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Text Effects, bookmarklets, toggle caps/lowercase
-
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- Language:
- English
- Words:
- 11,568
- Chapters:
- 16/?
- Collections:
- 6
- Comments:
- 97
- Kudos:
- 444
- Bookmarks:
- 530
- Hits:
- 20,488
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Tutorial that explains a lot of various aspects. Very detailed. Glitch text.
-
Repository: A Collection of Work Skins and Guides by gadaursan
Fandom: Original Work, SK8 the Infinity (Anime)
15 Sep 2024
Summary
All work skin guides and code written by me.
- Words:
- 16,300
- Works:
- 4
- Bookmarks:
- 181
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Really unique ways to code on ao3, especially the myth one. Very beautiful.
Twitter and Instagram like posts, Non iOS messaging systems, Avatar and image formatting for script formats, Search engine interfaces, Documentation on AO3 Site Skins, Fire emblem chat type, google search, twitter polls and posts, site skin editing ao3 elements
-
Summary
We ride at dawn, to fight the programming errors on our screens and to tear our hair out and cry the long suffering cry.
- Words:
- 8,498
- Works:
- 4
- Bookmarks:
- 12
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Text effects, mobile ao3 (really cool), gmail, music notes
-
How to target specific elements of your work (for work skins) by hearker (heark)
Fandoms: HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom, No Fandom, css - Fandom
24 Feb 2025
Tags
Summary
This is a guide to help you precisely target elements in your work skins using CSS selectors. It doesn't focus on styling or adding cool effects!! This guide teaches you how to identify and select the exact elements you want to style.
CHAPTER 1 - Work Title
CHAPTER 2 - Author Name
CHAPTER 3 - Summary
CHAPTER 4 - Notes Part 1
CHAPTER 5 - Notes Part 2
CHAPTER 6 - Gifts
CHAPTER 7 - Inspired By
CHAPTER 8 - Chapter Title
CHAPTER 9 - Series
CHAPTER 10 - Selecting Multiple Headings
CHAPTER 11 - Body TextNote: This guide contains custom CSS. It's not necessary for the guide, it's only cosmetic. If you want to disable it, click "Hide Creator's Style" at the top.
-
Netflix Work Skin by entropy_muffin
Fandoms: Goncharov (1973) dir. Martin Scorsese - beelzeebub, No Fandom
12 May 2025
Tags
Summary
A Netflix/streaming service work skin for AO3.
-
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:
- 193
- Bookmarks:
- 151
- Hits:
- 4,581
Bookmarked by GumbaBunny
21 May 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
A few cool random css tricks with images, chess, tables, columns, etc.
-
Tags
Summary
A guide to using a provided template, or building, your own spreadsheet.
Series
- Part 1 of Podfic Related Guides