#html tutorial rec

[html-tryhard]

Html Tutorial Rec Wednesday

Twitter

Do the characters in your works use Twitter? Would you like them to?

Are they posting thirst tweets? Long threads compiling information against a specific celebrity or politician? Are they regular people whose tweets accidentally go viral, or are they celebrities that people pay close attention to?

Either way, this tutorial by gadaursan makes it super easy to make tweets for your AO3 fanfictions! Gadaursan has also taken the time to make a code free html generator for any tweets you might want to embed into an AO3 fic!

The tutorial lets you embed images, show polls, and use quote retweets, all while explaining the HTML and CSS structure behind it all. Dark mode tweets are also available, if you prefer that!

Multiple AO3 users have created their own versions of twitter work skins, each with a slightly different look and feel; check them out!

[Ao3 Skin] Twitter with threads by oakleaf

Mimicking Twitter Posts for Fics - Some Twitter Workskins by Ultraviollett

Twitter Work Skin: Tweets & Profile (newest layout) by starskin

Twitter Work Skin Template by etc e tal (pe_pe_peperoncinocandy)

and so on!

These examples are just to show you how there are many different ways to convey the same information / achieve the same result. Hopefully it inspires you to incorporate twitter into your own fics!

[html-tryhard]

Html Tutorial Rec Wednesday

Texting, Part 1

Texting is the backbone of all group chat fics. Why not style it with pretty HTML and CSS?

Adding text messages to an AO3 work is very easy, thanks to this simple tutorial by CodenameCarrot and La_Temperanza! (While you're at it, check out La_Temperanza's ao3 work skin tutorial series on AO3.)

"But coding is hard! I see all those <span> things and I get scared!"

What if I told you that there's a code free generator that writes the HTML and CSS for you, to embed into your fics on AO3?

"But how is that any different from using doctored images?" You say? "If I'm not coding it myself and I'm using an online website to make it for me, why not use an image?"

Let me hold you tenderly and tell you why.

Accessibility.

Specifically:

Screen Readers.

Google Translate.

And a secret 3rd option, which is learning how to code if you never did, I guess?

Remember ye olde days of customizing the HTML and CSS of your Tumblr blogs, circa 2014? The cool new place to do that is now your AO3 fics :)))

Have fun writing your wrong number AUs and group chat fics!