#website builder tutorial

[miaqc1]

Rebloging again! Since your post gave me the push to jump right in and make 2 websites on Neocities. 😄 Since yesterday but I progress ok. Also with .ca domain. 😺

How To Make Your Own Fanfiction Archive, In Just Ten Easy Steps

As the go-to "person who knows about AO3" for quite a few people who read fanfic but aren't really linked-in to wider fandom culture, I've fielded a lot of questions about how to do certain things on AO3 to which my best answer is "you should really start your own archive!" I think, in general, more fans starting their own small archives would be a net good for fandom. AO3 was never meant to be the only archive for all fandom, or even the main archive, and the more spread out and backed up we are the more resilient we are.

But of course I have to be reminded that a lot of fans these days don't really have any idea how little "you should start your own archive!" really involves. (Also, that I should practice what I preach.) So I am now making my own fanfiction archive, and writing up this post as I do it to tell people how to make theirs!

Go to https://neocities.org/ and sign up for an account. It only needs a username (which will also be your website address), password, and email. Pick a username that will be related to your archive's title!

Choose the free account option (if you ever need more than what the free account offers for a text-only archive, you should probably look into graduating from neocities.) This should take you to a menu of "how to make a website" tutorials. You should do them! They're useful skills. But let's get your archive running first.

Hit the big red Edit Site button, or open the menu under your username and select "Edit Site".

Select the "Index.html" file to edit. You're now in an HTML Editor. Congrats, you're a web developer c. 1999!

Find where it has text between the < title> tags. Delete the filler text, and put in the title of your new archive. This text will be what shows on the tab when people go to your archive.

Find where it has text between the < h1 > tags. This will be big header text at the top of your page. Put the title of your archive here again. If you have no experience with HTML, you should read over the other sample text. It covers the basic basics very well! Once you've done that, you can delete everything else between the < /h1> tag and the < /body> tag. Save your index.html file.

Get an HTML file for a fanfic you would like to add to your archive. If it's on AO3, you can use the html download option built into AO3. If you have it as a word processor/google docs file, you should have the option to save as an html file. Save that html file to your computer.

Go back to Edit Site on Neocities and go to "upload". Find the html file you saved and upload it. (You can also drag and drop files to upload.)

The file you uploaded should now be showing with your other neocities files. Right-click on the title and select "copy link".

Go in to edit index.html again. Under where you put your header text, type < br> < a href=" . Then paste in the link you copied. Then type "> Then put in the title of the fic. Then type < /a> . Then save the index page again when you're done. You can do this for every fanfic you have.

Congratulations! You now have your very own personal private fanfiction archive that you are 100% in charge of and make all the rules for. It's at least as good as half the ones I was reading on when I started reading fanfiction and will serve its function well as a way to let people read your fic. You can link to it from anywhere you want! (Including your AO3 profile.)

Blogpost version, with FAQs and discussion

Anyway, here's my beautiful new fanfiction archive made using this tutorial:

Melannen's Fanfiction Archive

(I am honestly way more disproportionately proud of finally making that than I expected to be. It's nice to have your own archive.)

If you make one, share it here ! I want to see!

[ionlineco]

Build Your Dream Website in Minutes with Limecube AI | Perfect for Beginners and Pros

[meriablog]

Wordpress

[sivasaikrishna]

How Is 10Web AI Different From Traditional Website Builders?

Think of any traditional website builder like Gutenberg or Elementor. They simplify and accelerate website creation by giving you drag-and-drop content blocks, design elements, and templates to build your site – no coding skills or design experience needed.

10Web.io takes this a level higher with generative AI technology. It has all the qualities of a conventional website builder. But instead of leaving you with a set of tools, 10Web uses AI technology to give you a head start by generating modern website designs tailored to your needs.

You only need to answer a few simple questions about your project to get the ball rolling. Visit Official Website : https://10web.io/?_from=websites

10Web’s AI models have been trained on hundreds of thousands of web designs for different business types and goals. When you describe your project, it instantly produces the most relevant and high-quality design suggestions based on its vast database. No more staring at a blank screen for hours, wondering where to start.

[tanvierul-blog]

[mdalirezarazu]

The Divi Summer Sale Has Arrived!

It's that time of year. The 2023 Divi Summer Sale starts now!  With massive discounts of up to 50% off across the entire Divi ecosystem, this is your opportunity to get started with Divi and upgrade your Divi toolkit with unique products like Divi AI, Divi Cloud, and so much more. There are many excellent deals to be found

[numbpill]

========================================================

[tutorial: build your own neocities/nekoweb page]

========================================================

a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.

this ain’t an average wix, squarespace, or tiktok aesthetic.

we’re talking full html/css with soul and attitude.

[ prerequisites ]

------------------

> an idea

> basic text editor (vscode, notepad++, or even notepad)

> account on https://neocities.org or https://nekoweb.org

> some gifs or tiles you love (dig deep or make your own)

> optional: image host or gif repo (or self-host everything)

[ feeling overwhelmed? read this. ]

-----------------------------------

you do *not* need to know everything.

html is not a mountain. it's a garden.

you plant one tag. then another. then a style. then a button.

you can build your site piece by piece.

and every piece is a portal to somewhere personal.

you are allowed to make broken pages.

you are allowed to use templates.

you are allowed to start over as many times as you want.

this is *your* world. you control the weird.

[ step 1: create an account ]

-----------------------------

> neocities: https://neocities.org

> nekoweb: https://nekoweb.org

register a name, log in, and enter your file manager.

this is where you upload your files and see your site live.

[ step 2: your first file - index.html ]

----------------------------------------

make a new file: `index.html`

basic starter:

<html>

<head>

<title>my weird little corner</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>welcome to the void</h1>

<p>this is my page. it’s strange. like me.</p>

<img src="mygif.gif">

</body>

</html>

> upload to the dashboard

> boom. you’re live at

https://yoursite.neocities.org

or https://nekoweb.org/u/yoursite

[ step 3: add a style sheet - style.css ]

-----------------------------------------

create a file called `style.css` and upload it.

here’s some nostalgic magic:

body {

background: url('tile.gif');

color: lime;

font-family: "Courier New", monospace;

text-shadow: 1px 1px 0 black;

}

img {

image-rendering: pixelated;

}

marquee {

font-size: 20px;

color: magenta;

}

link it in your html and the vibes activate.

[ step 4: decorate it like a haunted usb ]

------------------------------------------

> use <marquee> for chaos scrolls

> embed gifs from https://gifcities.org/

> steal buttons from https://cyber.dabamos.de/88x31/

> set up a guestbook at https://www.smartgb.com/

> loop audio with <audio autoplay loop>

> add fake errors, 90s web lore, random link lists

[ step 5: resources, themes, and comfort ]

------------------------------------------

> templates & layouts: https://numbpilled-themes.tumblr.com

> glitchy gifs & buttons: https://glitchcat.neocities.org/resources

> layout builder: https://sadgrl.online/projects/layout-builder/

> free tiled backgrounds: https://backgrounds.neocities.org/

> beginner html intro: https://www.w3schools.com/html/

> pixel fonts & cyber assets: https://fontstruct.com/

remember:

you don't need to know js. you don't need to be a coder.

you just need a mood, a direction, a dream.

the html will follow.

[ bonus concept: shrine pages ]

-------------------------------

> a page just for one character you love

> a room to house digital fragments of your identity

> embed quotes, music, images like altars

> call it shrine.html and link it from your homepage

[ closing mantra ]

------------------

you are not here to be optimized.

you are not a brand.

you are a ghost inside the machine,

carving your initials into the silicon void.

welcome to Your website.

========================================================

[deception-united]

Online Writing Resources #2

Vocabulary:

Tip of My Tongue: I find this very helpful when I can't think of a specific word I'm looking for. Which is often.

WordHippo: As well as a thesaurus, this website also provides antonyms, definitions, rhymes, sentences that use a particular word, translations, pronunciations, and word forms.

OneLook: Find definitions, synonyms, antonyms, and related words. Allows you to search in specific categories.

YourDictionary: This website is a dictionary and thesaurus, and helps with grammar, vocabulary, and usage.

Information/Research:

Crime Reads: Covers crime and thriller movies, books, and TV shows. Great inspiration before writing a crime scene or story in this genre.

Havocscope: Black market information, including pricing, market value, and sources.

Climate Comparison: Compares the climates of two countries, or parts of the country, with each other.

Food Timeline: Centuries worth of information about food, and what people ate in different time periods.

Refseek: Information about literally anything. Provides links to other sources relevant to your search.

Perplexity AI: Uses information from the internet to answer any questions you have, summarises the key points, suggests relevant or similar searches, and links the sources used.

Planning/Worldbuilding:

One Stop for Writers: Literally everything a writer could need, all in one place: description thesaurus, character builder, story maps, scene maps, timelines, worldbuilding surveys, idea generators, templates, tutorials... all of it.

World Anvil: Provides worldbuilding templates and lets you create interactive maps, chronicles, timelines, whiteboards, family trees, charts, and interactive tables. May be a bit complicated to navigate at first, but the features are incredibly useful.

Inkarnate: This is a fantasy map maker where you can make maps for your world, regions, cities, interiors, or battles.

Miscellaneous:

750words: Helps build the habit of writing daily (about three pages). Fully private. It also tracks your progress and mindset while writing.

BetaBooks: Allows you to share your manuscript with your beta readers. You can see who is reading, how far they've read, and feedback.

Readable: Helps you to measure and improve the readability of your writing and make readers more engaged.

ZenPen: A minimalist writing page that blocks any distractions and helps improve your focus. You can make it full screen, invert the colours, and set a word count goal.

QueryTracker: Helps you find a literary agent for your book.

Lulu: Self-publish your book!

See my previous post with more:

Drop any other resources you like to use in the comments! Happy writing ❤

Previous | Next

[spiders-around]

YOU MUST MAKE A WEBSITE

Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!

• Making a website might look scary. It is Not.

At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is

an HTML file,

a web hosting service and

w3schools tutorials,

and that's about it!

This post will point you towards these resources, and others I found useful while figuring out how to make a website.

• VERY QUICK EXPLANATIONS:

What's HTML and CSS?

HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!

CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!

Do I absolutely NEED JavaScript for a website?

Not at all! You don't need to worry about learning it before getting started.

• What do I make a website for? What do I put in there?

ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:

You can make a page that's only pictures of your pets.

You can make an interactive adventure.

You can make your own academic blog full of your own essays or articles.

You can just post a ton of art or make a full music page.

You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.

Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.

I could keep going but, for the sake of "brevity", I won't.

• WEBSITE EXAMPLES!

If I started listing the websites I know, this post would be bottomless. Here's only seven:

https://publictransit.neocities.org/ - A webbed site, for sure

https://ribo.zone/ - A personal site

https://leusyth.neocities.org/ - An art archive

https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)

https://hog.neocities.org/ - The Hogsite

https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)

https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry

• You've convinced me. I want a webbed site. Where do I start?

https://neocities.org/

FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!

When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.

Here's what helped me get an idea of how to make things work:

https://sadgrl.online/learn/articles/beginners-guide-neocities

An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.

https://www.w3schools.com/

Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!

https://htmlcheatsheet.com/

https://htmlcheatsheet.com/css/

Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!

https://sadgrl.online/webmastery/

Sadgrl's webmastery resources! Also includes the next resource listed here:

https://sadgrl.online/projects/layout-builder/

Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!

(basically, a responsive layout is one that translates well in different sized screens)

https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share

Tumblr user fysa made this layout imitating a wiki page!

https://brackets.io/

At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.

http://www.unit-conversion.info/texttools/text-to-html/

Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.

https://imagecompressor.com/

COMPRESS YOUR IMAGES.

The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!

https://solaria.neocities.org/guides

Some CSS, JavaScript and Accessibility guides! Worth checking out!

https://eloquentjavascript.net/

This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.

And now, accessories!

• Silly stuff for your page :]

https://gifypet.neocities.org/

Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]

https://www.wikplayer.com/

Music player for your website!

http://www.mf2fm.com/rv/

JavaScript silly effects for your site :]

https://blinkies.neocities.org/geoblinkies

Blinkie search engine!

https://www.cbox.ws/

Add a chatbox to your site!!

https://momg.neocities.org/

Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.

https://wrender.neocities.org/tarotinstructions

A widget that gives you a random tarot card!

https://www.websudoku.com/widget.php

Sudoku widget!

That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]

[geoledgy]

your oc website is SO SO SO SO INCREDIBLY COOL how the hell do you even start learning how to do this ?? if you learned how to do this by yourself online, are there any tutorials or resources you can share with us? was making this website free??

omg THANK YOU SO SOOOOOO MUCH!!! It makes me so happy to hear that folks like my little site. I code my site with Phoenix Code (for the live viewer and number dials) and I host my site on Neocities - it is all free. Phoenix can be used in browser or on desktop, but I like having it on desktop more for big projects in case my files get deleted. I use the browser version when I just want to test something quickly.

The 2 videos I use and can not recommend enough to anyone who asks me are this HTML tutorial and this CSS tutorial. They are simple and easy to understand, but I recommend watching it the first go, and then following along the next few watches until you get the flow of basic parts to a website, how they're organized, and what order they go in. At this point, I've memorized exactly where everything goes, and it is all thanks to these 2 videos.

If I am being honest, I learned how to code by myself, not quite even with online tutorials but just from being stupid and messing around myself (1, because I was a kid, and 2, because I didn't understand English very well to know what tutorials are saying.) I used to do html coding for Neopet pages when I was a kid with too much online time, first by just editing the default petpages and adding info and images, and then just doing trial and error with the html. I'll just try something and then if it doesn't turn out the way I want it, I try to find out why it didn't work and also get inspiration from other similar sites to figure out where things go or how they coded (with this nifty thing called right click > inspect page or right click > view page source). And BOOM, working webpage.

It was rudimentary, white blank background without any boxes or anything, you just scrolled down the page and sections were separated by a horizontal bar. OH and every text was centered! I had no idea how to make scrolling boxes or fancy assets, but damn I still had so much fun working on it every weekend. When you find authentic selfmade sites from the 90s and 2000s, most of them aren't super fancy either unlike what modern nostalgia makes you think. So I hope you don't feel discouraged if you begin making a website and feel it isn't "fancy", you're already doing a first big step which is making a webpage and learned your first set of html code!

It was over a decade later before I coded webpages with html again. I've gotten lazy and started relying on site builders, but nothing was quite as versatile as html. I wanted to try coding my own OC site again, so that was when I started working on OutKrop (the site I posted). Until I started coding again, I had literally no idea what CSS even is (and let me tell you, it's a game changer!)

Personally, I work best when I can do things hands on. I don't read through tutorials, I code first then go back and read through coding help sites like w3schools when I find myself stuck and unable to figure something out. Sometimes I grab existing codes and play around with them to see what changes and what I can do with it, cuz having visual context is what helps me a lot.

I can also share my process:

Once I gather up some ideas, I make a sketch, including what boxes (divs in css) should approximately go. It is very rough, but shows me exactly what I need to know.

Next I load up my coding app (Phoenix Code in my case) and "sketch" the layout. Nothing fancy going on here, just putting things where they need to be, and fixing size of boxes and margins if needed. I give my boxes all a background color so I can easily see how big they are and where they are located.

After some adjustments like moving stuff around and adding assets like backgrounds and images, and changing colors of the boxes, rounding off corners, etc., we get this!

so recap + additional useful sites I use:

Coding app: Phoenix Code

Site hosted on: Neocities

Video tutorials: HTML and CSS

Sites for learning code: w3schools, also lissa explains is a great site that is written for kids to learn html so it's easy to understand. Finally, sadgrl has a lot of great resources for coding as well!

I recommend looking through these sites AFTER you tried taking a spin at coding - it doesn't have to be anything fancy just follow the HTML video tutorial I linked!

Thanks for the ask, and I hope this helps you and many others out there who are interested in building a site with html/css! Don't be afraid to get things "wrong" or have an "un-fancy" site. This is how you learn to code, and it'll become so easy once you get the hang of it.

Anyone is always more than welcome to reach out for coding help and advice :-]

[amphibianauthor]

Ao3 HTML/Coding Resources Part II

This is the HTML/Coding for Website mimicking resources in Archive of our Own (Ao3). To find Part I where I go over the Basics, General Text HTML and some Fancy Formatting (images, dividers, columns, photos, tabs etc. CLICK HERE!

Other Websites:

Texting

-How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza

-A Quick Generator for Embeddable iOS Text Messages by 221b_ee

-imessage Skin by Adzaema

-Retro imessage by Adzaema

-Basic Text Message Work Skin by ProfessorMotz

- Bubble platform [workskin] by Khashana

-Chat Log HTML by deathbymistletoe

-LINE Messenger/Chat by imperiousmarshmellow

-IDOLish Rabbit Chat Workskin by associate

-Replika workskin by FaeriMagic

-Texting Workskin to match light/dark mode by irrationalpie

Tumblr

-Tumblr style CSS Tweaks by Aposiopesis

-Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM

-How to make Tumblr Posts on Ao3 by phyyripo

-Plain Text Social Media Platforms by anubisms

-Tumblr Post Work Skin by tsukinosaugi

Twitter

-Repository - Twitter by gadaursan

- How to mimic Social Media in an Ao3 work by aerynevenstar

-Twitter Work Skin Template by etc e tal

-Twitter Workskin: Tweets and Profile by starskin

-Twitter Mock-Up by TheBrookesNook

Ao3/Fandom

-How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza

-How to mimic AO3 Comments by bittermoons

-How to add mobile Ao3 in your fic by DemigodofAgni

-How to make a fanfic style header Ao3 style by ElectricAlice

-Template for adding post chapter content by SpookyTesting

-CSS based full Ao3 fic integration (Header/Overview, Comments, Title, Summary & Buttons) by deciMae

-How to Mimic LiveJournal Posts and Comments by cursedcuriosities

-Dreamwidth Entries & Comments Work Skin  by folk_melody 

Facebook/Instagram/Whatsapp

-Whatsapp Group Chat builder by FestiveFerret

-How to make Facebook Messenger Chat on Ao3 by ran_a_dom

-Whatsapp Work Skin Template Revamped by etc e tal

-Whatsapp group chat skin by ovely

-Instagram DMs for Ao3 by monarch_rhapsodies

-How to make Instagram DM mockup by xslytherclawx

-Penstagram chats on ao3 by deciMae

Snapchat

-Snapchat skin by Azdaema

-Snapchat Template for Ao3 by starskin

Reddit/Forum

-UPDATED Reddit Skin by diamine

-2020 Reddit Work Skin by timstokerlovebot

-Reddit Work Skin CSS & HTML by knave_of_swords

-How to mimic Social Media in an Ao3 work by aerynevenstar

-template Reddit Skin by spookedcroon

-template:Subreddit page by ireseen

-Ao3 workskin for Forum Thread by fencesit

-Ao3 workskin for Forum Thread [Expansion Pack] by AMereDream

-How to mimic 4chan posts without just taking screenshots of 4chan

Twitch/Youtube

-Mimicking Twitch Chat for fics by Ultraviollett

-Twitch Chat Work Skin by cherrari

-Workskin testing by tohmas [Youtube comments]

-Youtube Work Skin by 1864s

-Youtube Comment Section Workskin by LupaMoe

Discord/Slack/Zoom

-2023 Discord Theme Workskin by TrojanTeapot

-Discord Work Skin by unpredictableArtist

-Discord (Dark Theme) Workskin by Heterochromia_Mars

-Skin for Recreating Discord’s Server Member List by SpookyTesting

-Ao3 Workskin Testing and Tutorials by junietuesday25

-Slack Workskin by Khashana

-Zoom inspired Ao3 skin by mystyrust

Wikipedia 

-Fake Wikipedia article about a TV show: Work Skin by Anonymous 

-Wikipedia article work skin by styletests

-SCP Wiki Style Workskin by thesnager

Working Games in Ao3 Tutorials

Logic Grid Puzzle Work Skin & Tutorial by BookKeep

The Case Of The Clickable Murdle by VThinksOn

Review Sites:

Yelp Reviews by kiwiana

Amazon Reviews by kiwiana

Rate My Professor Work Skin by BookKeep

Video Game Dialog Mimics

-Dialog [workskin] by Clover_Zero

-Dialogue Workskin (with parallax BG effect) by mystyrust

-My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]

-Tutorial: Ace Attorney Work Skin by QuailFence

-Among Us Ao3 skin by mystyrust

-How to Mimic Undertale Fonts on Ao3 by La_Temperanza

-Tutorial:Rain Code Work Skin by faish

-Balder's Gate 3 Documents Work Skin by Professor_Rye

-SpookyTesting has SOO many Nintendo based ones

–Mimicking Minecraft for some fics by Ultraviollett 

Runescape Right Click Menu Formatting by fennfics

How to put Z skits in your Tales fics by wingedcatgirl

How to make Honkai: Star Rail Messages by html_hell (jihnari)

Hold-hands inspired Texting skin by cursedcuriocities(SetsuntaMew)

Simple Linkshell Ao3 Work Skin by Pent – Final Fantasy XIV mimic

Homestuck Chat Clients by 77angel-skins

Workskin: Slay the Princess by ASpooky

Slay the Princess: Updated Workskin by Lilto

Misc. Sites

--How to mimic Deadpool Thinking boxes by La_Temperanza

--FetLife Skin [Work Skin] by Khashana

--Disco Elysium workskin by SarunoHadaki

--StarTrek PADD workskin by duskyspirit

--MDZS-themed letters by allollipoppins

--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]

--Skin for making Character Intro Cards by SpookyTesting

--Kpop Photocards by legonerd

–OVR System Workskin by unpredictableArtist

-How to make Stylized CSS Card Links for your fics by buttertartz

-vroom vroom kachow: Formula1 Race Results Workskin by mackerel_cheese

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Feb 8 2025 (Have a resource that you want to share? My inbox is open!)

View Part I with HTML Basics HERE!

[ionlineco]

Launch Your Business Online in 30 Seconds with Durable AI | #1 AI Website Builder

[meriablog]

https://www.youtube.com/watch?v=U2itssa-QLc

Elementor How To Create A Website New 2024 - YouTube

Elementor How To Create A Website New 2024 - YouTube

Elementor How To Create A Website New 2024 - YouTube

Elementor How To Create A Website New 2024 - YouTube

Elementor How To Create A Website New 2024 - YouTube

[sivasaikrishna]

What is 10Web AI Builder?

10Web AI Builder is an innovative website-building tool that utilizes advanced artificial intelligence technology. It sets itself apart from other website builders on the market and simplifies the process of creating a website. Visit Website Learn More Click Here

10Web AI Builder offers a range of key features that streamline website creation. These include an intuitive drag-and-drop interface, extensive customizable templates, and more, enhancing the web design experience.

[isat-script-project]

How did you get started creating the script project? I think it would be fun to try to do something similar for deltarune, but I'm not sure how feasible it would actually be

the age old tale is "i was writing isat fanfiction and really wanted to get some dialogue exactly right, so i combed through 100% playthroughts on youtube to find the right spot and jotted down what i needed in a document except it got so fucking annoying i contemplated just making a website for it and then i got my grubby mits on both rpgmaker mv and the isat data files and it was all joever"

if it's the actual PROCESS. well. it was a bit of a mess. the first thing i did was make the website itself, hammering out a general layout using the sadgrl layout builder over a whole weekend and an increasingly yelling filled call with my sibling who actually knows how websites work.

you can take a look at this post where i answered what to look out for more in-depth.

i've only played ch1&2 but honestly? deltarune seems feasible. i've seen people datamine sprites from it, at least, it seems like the engine is pretty well documented.

so yah i first figured out i COULD do it, then i made the website + website layout for it (if you know how, you should also hammer out your individual page layout at this point and not wait for other people to show up and do it for you).

then i just took a crack at making a page except my process was fucking horrid, i didn't actually have all the data files nor a proper way to read them (didn't have rpgmaker mv back then, i just looked at the .json files and tried my best, which is why some weird half completed pages were floating around in the site's early days, like the tutorial one from back when). I got tired of this pretty quick and very legally aquired rpgmaker (i actually own it on steam now and i never talked about piracy in isatcord and you can prove nothing and because this ISN'T isatcord i can make blatant euphemisms.)

and at that point i just went at it making whatever scrappy pages interested me. it was a sorta trial-by-fire thing where i got more familiar with rpgmaker and isat in specific as i went along, instead of putting in the effort to figure out how shit works first, because i am just a very learn by doing kinda guy. and that's how it all went along till the legendary hero Gold showed up and taught me github and made everything better and prettier (before this i was pushing every minor change directly to neocities which was especially funny when i was tinkering w the layout so the site just updated twenty bajillion times that one weekend)

for deltarune you'd probably also be pretty chill splitting things by area, and maybe subdividing area stuff into normal/weird route as is the room pages with normal/act5 or something. the battle stuff looks interesting to do with all the act options.

so yeah refer to the linked post for general tips but again for deltarune you do probably have a good shot? just the general stuff, decide how you wanna host it early, make a test page to check out what a page should look like and how to format it, and everything else (like How The Hell Do I Portray Conditionals: the story of how the <details> tag saved us all), but the real obscure stuff is only gonna sneak up on ya when you're already many many pages deep and trying to figure out where one specific variable is increased because the rpgmaker search function SUCKS SO BAD. s192 my fucking nemesis.

best of luck 👍

i'll prolly stop answering questions about this stuff at some point unless someone is asking for smth specific (like how to connect ur github repo to ur neocities or smth) bcuz i feel like i've said all that can be said at this point on the topic. go forth wiki warriors

[sasheneskywalker]

useful resources for fanfic writers and readers

AO3 Floating Comment Box A script to create a floating comment box at the bottom of the page for works on AO3.

Floaty Review Box To review fics on AO3 as you read.

FanFictionDownloader (FFDL) A little tool to download your favorite stories from different websites to your local computer or eBook-reader.

FicLab FicLab is a browser addon that allows you to download fanfiction and original stories directly from supported websites in a number of different ebook formats, including ePub, Kindle and PDF.

Comment Builder The @/longlivefeedback comment builder is a tool created to help fanfiction readers respond to stories and communicate with authors.

ao3 savior Hide specified works on AO3

AO3: Kudosed and seen history Highlight or hide works you kudosed/marked as seen.

AO3 Additional Filter Tools Adds additional filters to the AO3 filter sidebar on works listings, including creator, hits, kudos, comments and bookmarks.

AO3 Works List CSV Bookmarklet Lets you download the contents of a works listing as a CSV.

Hide Empty Paragraphs Hide empty paragraph tags from a work.

AO3 Statistics CSV Bookmarklet Lets you download your AO3 statistics as a CSV.

Fic Trackers A tool to keep track of your fics!

AO3 Automagic App Exchange requests summary eyeball searing on AO3? No problem. View an exchange that's already been scraped, or scrape a new one!

Google Docs script to handle issues when copying from a doc into AO3 A script for Google Drive that will take your finished work and convert all basic formatting into HTML for you.

AO3: Hidden search operators cheatsheet

Shortening long tag fields skin by Xparrot Puts all tag fields on the Show Works page over a certain length into a scrollbox.

Reversi skin by AO3 AO3 dark mode.

ByLine skin by Branch Breaks warnings, relationships, characters, and freeform tags into separate groups.

AO3 Work Skins/Tutorials

A Complete Guide to 'Limited HTML' on AO3

CSS code scripts for Ao3

How to Mimic Social Media in an AO3 Work

Works Skins