My page creation workflow

I think I've basically perfected my workflow for writing pages for this site, so I've decided to share it.
Of course, this is just what feels the most convenient and efficient for myself, so it may not be the best choice for everyone. But if you're struggling with motivation, visualization of site layout, etc, this may be good to try out.

Step 1: Drafting

Before, I would often just go ahead and create a page, and think of and write the content directly in the Neocities editor. I found it a bit hard to focus solely on what I wanted to write, as I would start mess around too much with formatting (links, text decorations, line breaks, indents, etc.).
This is what I do now:

I draft nearly all of my pages in a program called Notion. The visuals and toolset are similar to HTML, so it is very suited for page-writing (you can even directly publish pages through Notion, as I do with my translations). It also has a mobile app, so I can write on the go.

(Further rambling about Notion)

Your device's built-in notes app is also alright, but I find Notion the most versatile in terms of sorting pages, easy formatting and layout, navigation within a long page, etc. while also minimizing UI visual clutter and headaches (side-eyeing Google Docs). Being able to rearrange text blocks is a real life-saver!
I also use Notion for college lecture notes, notably in class formats where outlines (I.A.1.a.) are involved.

The one single issue I have with it is that it automatically converts apostrophes, quotation marks, and ellipses, with no way to turn it off. ("→”) ('→’) (...→…)
I've taken classes on typography so I understand that these are the correct glyphs, but it does get in the way when I want to write for my site, especially when I want to take note of HTML tags I plan to use.
I write in all-lowercase half of the time anyways! I don't care for "correctness!"

For big pages (such as when I write for the Bog or Brain), I just write the complete post as a page on Notion, so that all I have to do left is copy-paste to Neocities and tweak the formatting.
However, for special pages without big paragraphs, I sometimes just write a vague outline. For example, the outline for the new portal page was:

cereal and choccy milk

Entrance　入り口

<a href='/'>ENGLISH (main site)</a>

<a href='/ja'>JAPANESE (中庭 / Courtyard)</a>

<a href='/ja/kirby'>「ちょき」(@spheredotorb)の星kb二次創作を見に来た方はこちら</a>

In cases like these, I feel the need to have a visual of the finished CSS formatting to go any further. I will flesh out the contents in the next step.

Step 2: Inspect element!

You will need a computer to do this (unless there's some hidden way to inspect on mobile).
I use Firefox, so if you use a different browser ~~you should ditch that and start using Firefox~~ some menu functions may be named differently.

I open a browser tab of a new blank/template page of my site, or an existing page with the same layout.
Using the Inspect element function (usually F12, or right-click and select "Inspect"), I will then find the <body> or <div> of where the content should go, and choose "Edit as HTML" in the right-click menu.
In this text editor, I will paste the contents of my Notion page.

IIRC the default view is "dock to bottom," but I personally use the "separate window" view so the page I'm editing is a normal size. "Responsive design mode" (the phone/tablet icon) allows quick resizing to common phone/tablet sizes and is also helpful.

For long, nearly-complete pages, I sometimes paste it into Neocities first and then Inspect the page. This order doesn't make much of a difference.

I will now make any changes I need directly in the Inspect element window.

I'm not sure how many people use this method, but there are a few advantages:

It gives you an immediate visual of the finished product. It's like a combination of WSYWIG and hand-coded HTML/CSS.
It drastically reduces internet and power usage. Instead of needing to save the Neocities editor and reloading the page every time you want to check a change, it's all done directly on one browser tab, no reloading needed.
In fact, you shouldn't reload at all until after the next step since you might lose your progress.
You can edit both HTML and CSS at once. It is very easy to experiment with formatting and create new style rules if needed.
Edited CSS attributes are highlighted so it's relatively easy to find the parts you have to copy onto your site's style.css. If I'm worried of losing track, I can always screenshot the parts of CSS code that I changed.

Step 3: Paste the final product to Neocities

Once everything looks the way I want it to look on my browser, I will transfer the contents to Neocities to get it online.

Using the "Edit as HTML" function again, I copy and paste the code onto the Neocities editor. If you made any CSS changes, remember to copy-paste those too.
When you check the online version of your page, be sure to open it in a new tab instead of closing or reloading your Step 2 tab, so you can compare the two and check if you missed anything.

Important note that you will need to be careful with any parts of your site that is generated with JavaScript. It's good to go div-by-div (or however you subdivide your page), instead of copying the entire <body> at once.

After a hard refresh (cmd/ctrl + shift + R) and a final check of the online page, you're done! You've now crafted a webpage the way Choccy does it.

If you have any questions or comments, feel free to contact my guestbook, Neocities profile, or email about it!
Do you use Inspect element like this? If you tried this method out, how did it work out for you?