1 - 20 of 27 Works in A Guide to Coding and Fanworks

Pages Navigation

Listing Works

  1. 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.

    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: Choose Your Own Adventure
    Part Seven: Chapter Title
    Part Eight: Boxes

    Language:
    English
    Words:
    4,757
    Chapters:
    9/?
    Collections:
    2
    Kudos:
    47
    Bookmarks:
    59
    Hits:
    1331
  2. Tags
    Summary

    Learn how to edit the HTML of your image files so they automatically size themselves to fit any screen (both mobile and desktop). It's super EASY!

    The second chapter is a comical crackfic multi-universe cross over that utilizes the techniques described in the first chapter and goes over the Archives greatest hits:)

    Language:
    English
    Words:
    3,605
    Chapters:
    2/2
    Collections:
    2
    Comments:
    15
    Kudos:
    170
    Bookmarks:
    86
    Hits:
    3097
  3. Tags
    Summary

    This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).

    Language:
    English
    Words:
    810
    Chapters:
    2/2
    Collections:
    2
    Comments:
    2
    Kudos:
    23
    Bookmarks:
    21
    Hits:
    769
  4. Tags
    Summary

    This is a tutorial/live example on how to make large images fit on mobile browsers but remain normal size on desktop browsers.

    Series
    Language:
    English
    Words:
    689
    Chapters:
    1/1
    Collections:
    2
    Comments:
    38
    Kudos:
    162
    Bookmarks:
    64
  5. Tags
    Summary

    a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)


    made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!

    If you use it, crediting and linking back here so other people can find it is appreciated :)

    Language:
    English
    Words:
    572
    Chapters:
    1/1
    Collections:
    2
    Comments:
    21
    Kudos:
    70
    Bookmarks:
    52
    Hits:
    2021
  6. Tags
    Summary

    What it says on the tin.

    A mock-up of instagram direct messages without having to use screenshots.

    Language:
    English
    Words:
    601
    Chapters:
    1/1
    Collections:
    2
    Comments:
    8
    Kudos:
    33
    Bookmarks:
    25
    Hits:
    1372
  7. Tags
    Summary

    This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.

    Series
    Language:
    English
    Words:
    3,724
    Chapters:
    1/?
    Collections:
    3
    Comments:
    37
    Kudos:
    124
    Bookmarks:
    61
  8. 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
    Language:
    English
    Words:
    1,769
    Chapters:
    1/1
    Collections:
    2
    Comments:
    17
    Kudos:
    136
    Bookmarks:
    102
  9. Tags
    Summary

    Have you ever wanted to put a Tumblr post in your fic? Even if you haven't, you now can!

    This is a tutorial on how to mimic different Tumblr post types using a work skin, without using screenshots.

    Language:
    English
    Words:
    4,227
    Chapters:
    1/1
    Collections:
    2
    Comments:
    22
    Kudos:
    80
    Bookmarks:
    65
    Hits:
    2416
  10. 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
    Language:
    English
    Words:
    3,457
    Chapters:
    3/3
    Collections:
    2
    Comments:
    50
    Kudos:
    123
    Bookmarks:
    157
  11. Tags
    Summary

    This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.

    Series
    Language:
    English
    Words:
    999
    Chapters:
    1/1
    Collections:
    2
    Comments:
    23
    Kudos:
    73
    Bookmarks:
    45
  12. Tags
    Summary

    Anonymous on tumblr: do you have a skin that would mimic the author’s notes and review/kudos buttons section from the end of a fic? the desired effect being that the fic could go on after the “end” of the fic, so after the author’s notes and review/kudos buttons

    Here's a tutorial/live example to do just that, with some of the buttons actually functioning. I'll explain more inside!

    Series
    Language:
    English
    Words:
    729
    Chapters:
    1/1
    Collections:
    2
    Comments:
    4
    Kudos:
    63
    Bookmarks:
    12
  13. Tags
    Summary

    This is a tutorial/live example on how to align images to the left or right of the screen and have text wrap around them.

    Series
    Language:
    English
    Words:
    2,891
    Chapters:
    1/1
    Collections:
    2
    Comments:
    2
    Kudos:
    29
    Bookmarks:
    16
  14. Tags
    Summary

    Primarily just where I share work skin code and experiment.

    Language:
    English
    Words:
    2,725
    Chapters:
    7/?
    Collections:
    2
    Comments:
    30
    Kudos:
    145
    Bookmarks:
    145
    Hits:
    3645
  15. Tags
    Summary

    This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.

    Series
    Language:
    English
    Words:
    2,551
    Chapters:
    1/1
    Collections:
    2
    Comments:
    13
    Kudos:
    80
    Bookmarks:
    50
  16. Tags
    Summary

    As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.

    There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.

    10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.

    *Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.

    (Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")

    Series
    Language:
    English
    Words:
    33,325
    Chapters:
    11/11
    Collections:
    2
    Comments:
    32
    Kudos:
    116
    Bookmarks:
    136
    Hits:
    8442
  17. Tags
    Summary

    This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.

    Series
    Language:
    English
    Words:
    4,500
    Chapters:
    2/2
    Collections:
    2
    Comments:
    132
    Kudos:
    687
    Bookmarks:
    665
  18. Tags
    Summary

    Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).

    Series
    Language:
    English
    Words:
    2,156
    Chapters:
    1/1
    Collections:
    2
    Comments:
    44
    Kudos:
    247
    Bookmarks:
    123
  19. Tags
    Summary

    The following tutorial/live example explains how to mimic Sans’, Papyrus’, and the main game’s text on AO3. (I also discuss briefly on how to change the font color, to say yellow, or how to write W.D. Gaster’s text, but because they both have issues attached to them, they’re not automatically included in the main code.)

    Series
    Language:
    English
    Words:
    1,136
    Chapters:
    1/1
    Collections:
    2
    Comments:
    26
    Kudos:
    110
    Bookmarks:
    50
  20. Tags
    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 Images

    Each 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.

    Language:
    English
    Words:
    2,642
    Chapters:
    3/4
    Collections:
    3
    Comments:
    252
    Kudos:
    928
    Bookmarks:
    1206
    Hits:
    58835

Filters

Filter results:
Submit

Include

?
Include Ratings
Include Warnings
Include Categories
Include Fandoms
Include Characters
Include Relationships
Include Additional Tags

Exclude

?
Exclude Ratings
Exclude Warnings
Exclude Categories
Exclude Fandoms
Exclude Characters
Exclude Relationships
Exclude Additional Tags

More Options

Crossovers
Completion Status
Word Count
Date Updated
Submit

Pages Navigation