i figured a little informative post about how i make my pages would be fitting for a first blog post.
First of all, what do I use to make my pages?
Neocities does have a built-in code editor, and that's good for making quick edits, but I really wouldn't recommend making your entire site in it! It's pretty limited, and refreshing your page over and over to check edits is very tedious (and messes up your page view statistics, if you care about that.) There are a lot of text editors for code out there, but I personally really like Atom. It's open-source and has a gallery of packages and themes you can install to it that make using it feel more convenient and personalized to your needs!
The Atom packages I use are:
- live server - my favorite-- this lets you open a preview of how your page will look and function online that updates in real time in your browser of choice.
- beautify- formats your code to keep things nice and tidy!
- color-picker- lets you open up a color picker right in the editor window that automatically inserts the color code. Makes CSS styling a lot easier.
- pigments- visually highlights your hex/rgb codes in the editor to reflect the color you've chosen.
- file icons - shows icons next to files in the file viewer, to make navigation easier.
I also recommend that you have all of your files for your website saved in a folder for your website and the files and folders of your website saved on your computer the way they are on your live site-- this makes the live preview in your browser function as if you're viewing your website live, and makes editing, uploading and organizing your files easier! (and in general, it's good practice to have a local copy of your website in case anything happens to Neocities or wherever else you decide to host it.) Sadgrl.online has a better post about saving your site locally here.
When you open up atom, it prompts you to open a project -- click add folders and select the main folder you have your site saved to.
To make creating pages easier, I like to have a barebones page base made, just so I don't have to retype stuff if I don't have to! Here's the base I use:
I personally have a hard time making page layouts from scratch unless I plan them out visually first. Maybe not necessary for everybody, but it helps me. Here's an example of a page I've drawn out in MS Paint first! It's the design for my OC wiki pages.
A page like this one has one main container holding all of the content, and using flexbox, contains smaller containers with the different sections in it. (you can also use CSS Grid display, but I like flexbox best personally!) I won't go into how to use flexbox in detail, but Sadness of sadgrl.online has two really good tutorials on using flexbox to make layouts here and here.
While I'm laying out the sections of a page, before I get styling, it helps me to color each smaller section a different color so that I can clearly see their sizes and spacing. (something less harsh than this for the sake of your eyes, ideally!!!)
after you have everything positioned the way you want it, you can start styling things! here's how this page ended up. ignore my placeholder text lol
And that's about it! This isn't a super in depth guide, but hopefully it makes sense and helps a bit.