Hierarchy Of One

code/tutorial links for ones i personally have used as base code, most of which have very clear explanations of how to use them that make the rest of this post truly unnecessary:

texting (incl blue messages, green messages, group chat)

google search

gmail (sent email)

instagram

phone lockscreen notifications

generic email/draft email (with scrollbar!)

there are collections on ao3 full of these codes, incl discord, twitter, other social media sites!

that is more than enough to get started, but i love to over-explain things, so just to be super clear, there are 3 steps in how i do this:

Writing, planning images, uploading images if needed (aka the parts with no coding)

Adding the CSS to the work skin

Adding the HTML to the actual text/story/chapter - usually the most annoying part :-)

in more (unnecessary) detail:

writing/planning images/uploading images i always write out what i want to have without code because i like making sure the actual content/story is front and center! i also want to make sure that i know when the exchange happens for any timestamps. for the above examples, it looks like this in my gdoc:

i also make sure that i have any images that i'm going to include at this point, because it can be super annoying to be almost done coding and realize you want/need to go back to figure a pfp or something out. ao3 does not host images, so you need to either have a link you trust won't die or upload images yourself somewhere else that you can link. i've been uploading to my drafts on tumblr, but that does decrease the quality a little. (personally i'm fine with that but just want to give that disclaimer) i would recommend downloading any photos you know you want to include as soon as you find them so you don't lose track and spend a bunch of time trying to track something down (definitely speaking from personal experience rip)

the only image note i'd add is that i always recommend previewing how the fic looks before posting (duh) and checking specifically if the dimensions look weird. on the gmail code for example it'll make pfps 40px x 40px even if it wasn't originally a square, which can make it look weird and stretched out, so i cropped all the pictures i used as gmail pfps to be square (not 40px x 40px, just square in general).

work skin css all of the above guides will explain this, but you'll add some base code to a work skin that you apply to your fic. i use the same skin for all my fic as i go, but if you adopt that approach, make sure you don't ever accidentally have attributes with the same names! just to show what this looks like/where to find it on ao3:

combining html/story all of the above guides will include the html you use in your actual story, and i HIGHLY encourage you to integrate it in your non-ao3 editor and transfer it over from there instead of workshopping it just in ao3 and risking losing it if something goes awry!! (again speaking from experience rip) pay close attention to which parts you're supposed to change from the source code and which you won't change (eg gmail icons). examples cont:

this step is usually the most annoying and finicky and requires the most patience to troubleshoot things. css/html can be very particular and there are some things that would require additions to the base css that you might expect to just work (eg links - adding links to things makes them sooo angry). i usually transfer the html parts into the chapter and troubleshoot before adding the main text because it can be annoying to scroll through all the text for editing it. there will be something that is slightly off from how you wanted it to look, and you will have to call it a day at some point! i often end up posting something when i feel like it's good enough and then going back and fixing it later. consider this permission to do the same :)

that is how i like to do this but i'm sure other people have other ways they prefer! i can imagine doing the coding as you write might be nice for some people but i like to go back and do that when i'm feeling a little stuck or want to work on fic but need a brain break.

i hope this helps people who are interested but not sure where to start!! i am happy to help if you're running into issues but i should note that css is a complete mystery to me and i self-taught myself html to make pages for my neopets so my skillset is...limited...