owner templates support me theme
about this site 01

name

mocha

work

graphic designer

pronouns

she/her

focus

tutorials & templates

level

beginner-friendly

last updated

05/09/2026

welcome! this little corner is where i keep all my tutorials and notes — mostly about coding, design, and the small tricks i pick up along the way. everything here is written to be easy to follow, even if you're just starting out. ♡

tutorials are organized by topic and difficulty, so you can jump straight to whatever you need. each guide walks through things step by step, with plenty of examples along the way. if something's unclear or you'd like a tutorial on a specific topic, feel free to reach out or send me an anonymous request! i'm always happy to help :3

all i ask you is to please be kind and patient, as i only code as a hobby and i may not have the free time to update this blog consistently (plus, tutorials take me a while to write and go through step by step in a beginner-friendly way). i'm also just a human and constantly learning, so i may not know how to teach you something that i didn't even learn myself — therefore, i need to study and analyze it before anything else. thank you! x

latest tutorials 02
05/09 content warning popups — a native browser alert that blocks the page until dismissed, or a dedicated warning page with go back / continue links.
05/09 organizing your files — a folder structure for your dashboard, linking multiple css/js files in the right order, and why splitting css beats combining it.
02/09 building a tabbed box — 5 clickable tabs, plus a sidebar journal-style variant.
02/09 scrolling news ticker — a strip of text that endlessly loops sideways, pure css.
02/09 small hover animations — growing images, gentle lifts, tilts, glows, and fades.
26/08 fetching data from anilist — pull manga and anime data straight from anilist's api.
26/08 loading data from a database — keep your content in a spreadsheet or notion page and pull it in automatically.
26/08 disabling right-click — swap the browser's context menu for a cute little note instead.
26/08 styling your own tooltips — swap the browser's default tooltip for one that matches your theme.
25/08 auto-generating a calendar with javascript — a calendar that always knows today's date.
25/08 responsive layout with media queries — same html, different arrangement on mobile.
25/08 building a 3-column grid — the classic profile / content / sidebar layout.
25/08 basic html document structure — the skeleton every page starts with.
categories 03

html & css

html basics css grid layout responsive design custom tooltips disable right-click hover animations news ticker tabbed box music player organizing your files content warning popups

javascript & apis

date & calendar logic loading data from a database fetching data from anilist

tools & tips

beautify html pagecrypt filegarden
requests 04

want a tutorial on something specific? drop a suggestion below! totally anonymous, no name or email needed. i'll try my best to help you, even if it takes me a while to get to it. ♡
p.s: tutorials only — template requests are exclusive to ko-fi supporters. and please remember to be kind & patient, as i may not always have free time to update this blog.

0/300

open requests

loading...

replied ✓

loading...

done ✓

loading...

faqs 05

questions sent in through the requests inbox above, answered here in case anyone else is wondering the same thing! ♡

"best place to find backgrounds?"

my go-tos are pinterest and tumblr! just search for "{color you want} background", so something like "pink background" or "blue background", and you'll get tons of results to scroll through.

i also recommend searching "sozai" right here on neocities itself. a lot of artists share their own f2u materials under that term, backgrounds included, so it's a great way to find stuff made specifically for personal sites like ours ♡

"my page uses multiple css files, can i combine them into one so it doesn't clutter my dashboard?"

you can, technically! but i'd actually recommend the opposite: instead of merging your css into one file, put your css files into their own folder, something like /styles. that alone cleans up your dashboard just as much, without any of the downsides of one giant combined file.

a single huge css file gets hard to search through, and once it gets long enough it can even get slow to open and edit in the neocities editor. splitting it into a few smaller files (one for layout, one for colors, one for animations, etc) keeps each one focused and easy to find your way around.

i wrote a full tutorial on this exact setup, folders for every file type, how to link more than one css file to a page (and why the order you link them in matters), plus how to use comments to organize sections within a single css file: organizing your files. hope that helps, thank you for asking! ♡

"news ticker doesn't loop"

it does loop here on my end, so nothing's broken! this is almost always because of a reduce motion accessibility setting turned on somewhere on your device. i actually go over this in the news ticker tutorial itself, at the very end (which is easy to miss, so i got you!): the ticker (and every other animation on this site) respects prefers-reduced-motion, a setting the browser reads straight from your operating system. if it's turned on, the animation is intentionally switched off instead of scrolling anyway.

that's also why it varies per device! it isn't a browser bug or a screen size thing, it's tied to a personal accessibility preference, so it can be on for one visitor and off for another even on the exact same page.

here's a quick recording of what it looks like on my end, for comparison ♡

you can check/toggle the setting here:

  • windows: settings → accessibility → visual effects → animation effects
  • macos: system settings → accessibility → display → reduce motion
  • ios: settings → accessibility → motion → reduce motion
  • android: settings → accessibility → remove animations

so it's working as intended! if a visitor has that setting on, respecting it (instead of forcing the ticker to scroll anyway) is the whole point ♡