Creating web art can be super fun! Make something yourself, learn a new skill, or just edit a template to suit the fic you want to create for! You can make fic rec pages on a personal website, design a tumblr theme or AO3 skin, or even make an online quiz themed to the fic. HTML, CSS, and other coding languages can be used for all sorts of interesting art!
Potential ways to connect to a fic:
There are a few things you can do with HTML and web art related to a fic. Here are a few ideas:
A web page - this could be a page on an existing site (your personal site - see below for recommendations for this - or we may be able to host your project on our domain). What you put on this can vary pretty widely. You can make a fic rec page, with your own art, things you like about the fic, and a recommendation to read it - essentially an old school web shrine. If you’re working with a coffee shop AU, or an office AU, or something that in some way involves a fictional business, you can create a mock-up of a website for that business.
AO3 skins or tumblr themes based around a fic, using significant colors, symbols, and art to translate what you love about a fic into a new web format.
Online Quizzes - Buzzfeed and uquiz’s formats can be easily customized to relate to, or even recreate the ideas and themes of a fic - feel free to get weird with it. Working with an inescapable tragedy? Trap quiztakers in the inevitability of the ending. You can also make a quiz assigning quiztakers a significant object, plot point, or other aspect of a fic. For example, a “which pastry from this coffee shop AU are you” quiz, or “which quote from [FIC] that made me lose my mind are you?” If you’ve found a lot of great fics for the event, you could even make a ‘Which fic I [made art for/commented on] for Fanart Frenzy should you read?’ quiz to recommend them to your friends and show off your work in the results.
Making things for various websites, like discord emotes of an OC in a fic, or web stamps depicting an object or symbol from the fic.
There are many other (more complicated) options, we've just covered the basics here - get creative and see what you can come up with!
Details, tutorials, and resources below the cut!
Examples:
Personal websites are making a bit of a comeback, which is excellent news for those of us who long for a decentralized web free of the control of the various billionaires who prod at us as we scuttle about their social media empires. You can make your own website easily on Neocities - check out their tutorials to get started and have a look at some personal websites in your fandom by searching here for some inspiration. You can add pages to your site for anything you like - fandom-themed personal sites often include rec lists for fanfiction, and making a themed recommendation page within your site for a fic is a great way to fill the web art and HTML prompts!
AO3 skins and tumblr themes are another option. Tumblr theme making is unfortunately a dying art, as many users no longer opt to have a theme at all, but with your help, we can do a bit of fanfiction-themed necromancy and bring it back from the brink. For some great examples, check out memorizingthedigitsofpi’s github repository of their ao3 site skins, including a couple fandom-specific examples like this Game Changer skin.
In terms of quizzes, there’s a lot of variety out there and many excellent quizzes you can take inspiration from. You may have seen this incredible nightmare of a quiz, try to find your way out of my wizard maze, floating around tumblr - its freeform weirdness recreates the feeling of being trapped in a cursed labyrinth. On the more normal side, find out which Muppet you are and get some inspiration for a “which ____ are you” quiz here. For another example, check out our quiz - Build your ideal fanfic and find out what kind of art to make for Fanart Frenzy.
Read on for more information on how to get started!
What is HTML?
HTML in and of itself, as you can see, is quite ugly. That is why in web design it’s always paired with two other languages: CSS and JavaScript. You don’t need to worry about Javascript for now (it defines interactivity on websites, like what happens when you click on a button), but CSS is very important: it defines what things look like.
Check out how I changed colors here (and colors are just the start!).
And those are just colors! You can do tons of stuff with CSS.
Note: In the example above, the HTML and CSS are automatically linked, Normally you need to make sure the HTML you write is linked to your CSS file. Check out this page for more info.
Where do I do this?
In order for your HTML to show up as a beautiful page instead of a taggy mess, you need to put it somewhere it will be interpreted as such. This can be locally, on your computer, but there are also plenty of places online where you can preview what your HTML would look like as a webpage, or even write it!
Codepen is a reliable place to quickly write HTML and CSS, and it will immediately preview it as such (that’s what was used for the screenshots above). You can also share links to your codepens and explore what others have done!
W3 schools has one with a simpler interface if you want to play around without an account!
AO3 has a HTML mode when you’re publishing a work! Do make sure to check out which HTML tags are supported though by AO3 though.
You can also do it without internet. Write some html in a local file (eg: Hello world! in your notepad), save the file as .html by using Save As, selecting all file types in the dropdown, and adding .html at the end of your file name. Then you can open the file with your browser. You will see the text as a website there!
If all of this stresses you out, you can also go to an existing website and just edit the underlying HTML to (temporarily) display what you want it to display! Just follow this tutorial, take a screenshot, and you’re done!
How do I share my HTML project?
That depends! You have a few options:
If you can publish it on AO3, do so!
Create it in an online editor that lets you share it, like CodePen.
Hit up @Clara (on discord) or @pallasandthepeople (on tumblr) to see if we can host it on our website!
Resources, tutorials, and where to look for inspiration:
For tutorials, and any question you may have about how to use HTML or CSS, check out W3 Schools or Mozilla Developer! They have information information and tutorials on all HTML and CSS functionality and tags, and all W3 Schools tutorials come with an editor that you can use to try things out.
Browse CodePen for examples of what other people have put out for others to use. For our website, for example, I searched for “paper effect CSS,” and found the HTML / CSS for the notebook effect that comprises most of the page.
For AO3-specific HTML, check out their guidelines.
If you’re particularly interested in the style aspect of web programming, have a look at AO3 skin creation tutorials as well!
For some AO3 coding examples, check out this collection of Coding Guides, this collection of AO3 skins, and this overview of social media post templates you can edit.
For more detailed instruction, never underestimate your local library. There are many excellent books written about coding and web design that can be acquired quickly and for free in physical or ebook form. Librarians are your friends and will not bite you - ask them for help in finding books and resources! Your local library likely also has computers, software, and other resources which may be helpful with web art. They may also offer free or low-cost classes on computer skills and coding.
If you find any tutorials or guides helpful when making art for the event, please show the creator some love and leave a comment!
Stuck or confused? Drop a reply here, or check out our discord server and subreddit for help from other participants (@Clara in particular) if you need any help!
Good luck! Be sure to share what you make with the fic author using our commenting guide and posting guide, and tag it with #fanartfrenzy or #fanart frenzy!
