There are many people who have a Neocities, but it's actually shocking the lack of tutorials there are for newcomers.
So that's what I'm doing! Making a tutorial for people who want to make their own Neocities!
I will be posting resources I find helpful, tips and tricks for Neocities and my own HTML and CSS tutorial.
Making these tutorials takes long, so I hope this helps!
You may be confused on how or what you should do when you first start with your Neocities, so lets get a general direction!
Start with doing the Neocities tutorial(the one when you make your account). Just a heads up, pick a blog name you like; you can't exactly change it without losing all your work!
Once you have completed the Neocities tutorial, you'd have most of the basic skills you'd need to complete things in your website. If you still can't make the site you want; that's okay! We will get there!
One of the first things you need to do is install a code editor; I use Phoenix Code (press the link to install.)
To make things easy for yourself; make a "website" folder on your computer and include inside folders such as:
⤷ Images
⤷ Headings
⤷ Decorations
⤷ Backgrounds
Anything you use to make your site needs to be uploaded to Neocities, so keep it all in one place and I'll teach you how to upload properly later in this tutorial.
Just remember something; your part of the internet is important. Document things you're interested in, share your favourite photos, your holiday, anything you're truly interested in can become a website.
If you're truly uninspired, go look at other people's Neocities and make your own version of some of the things on their site!
So once you know what you want to make your website on, start planning towards that. I wanted to make a site where I could include the things i'm passionate about, a place to share my interests and create some sort of a digital time capsule for myself.
You can create your ideas on a blank sheet of paper; its your website and you have total control over it. If you want to create a bright, colourful website, you can totally do that! If you want to make a site with a specific layout, or a special add-on, you can do that!
For me, I really wanted to make a coquette, cute, girly site, because I like that theme; in real life I'm all about simplicity and being modern, but on my website I can definitely make it as decorative and girly as I'd like.
Many people believe making a website is hard; and thats why they stick with social media, but making your own website means you can control exactly what you want to see.
So comes up the dawnting challenge of learning how to code. It is challenging; and you are not going to understand everything right away. This kind of stuff has a learning curve you have to learn to overcome.
You ask, "How do I do it?" Simple. Use the tools given to you.
Especially HTML and CSS, they're really just little tags you need to remember - and luckily they're all super short, so they aren't even hard to remember.
If you're writing a blog like me, the most important tags to remember are the tags for placing lines of text. Eg "H1-H6" or "br"
You can learn all the tags in a couple hours with the in-depth guide from W3Schools.
I highly reccomend learning how to code in HTML before you start decorating your site using CSS. It adds an unnesscesary, complicated layer for beginners and will add a bunch of confusing things in your head.
The first thing you should do is copy all of your code from your code editor and place it into a new file on Neocities. If you're updating your homepage; into the index.html file created when you made your Neocities.
Remember that images folder we made earlier? Recreate it EXACTLY to how it is to your computer and place the images in there. This is so you can have images show up on your site and not show a 404 error.
These things are cAsESEnsItiVe so make sure you upload everything EXACTLY like how it is on your PC.
Save your site inside of the code editor built into Neocities once you've copied the code and make sure that everything is working exactly how you want it to.
If it does, congrats! You did it! Now to do this all over again for all of your nieche, strange ideas.
This section will cover helpful things you can take note of while coding your site. This will include any rules and helpful tricks I've learned.
A HTML skeleton is basically skeleton code you can add at the very beginning of your document so you don't forget to add anything such as "body" or "head"
I just copy mine from the internet, but if you want to include certain things, you can make your own.
iFrames are little inserts you can copy to paste into your site. Gone are the days where you have to labor away to make a chatbox, or a spotify playlist. If you're interested in me making a tutorial on how to do those things; ask in the main chat.
The way in which you choose to decorate your site is one of the things that makes it unique. Unlike social media; everybody has a different layout to their page.
You may take your pictures for example, from Pinterest, and realise it's got an ugly white background you really don't want. There is a free, AI tool for removing that - Remove.BG
I literally use this all the time. It isn't perfect, but its a hell of a lot better than other background removers I've used and its free.
Another tool I use is Canva. I use this on a daily basis for work anyway - so its a site I've grown accustomed to using. You can make backgrounds, cursors, elements, pictures, etc. for your website, free of charge!
Making headings for my site is Pixlr E. The site I use for finding my fonts is Dafont.
Images are a helpful little tool to add some flavour to your website - my entire website would be SUPER BORING and have no theme without them. So here's a rundown on images:
Ideally use .png or .jpeg images for best results.
Use "height" and "width" attributes under "style" to make it as big as you want.
Any images you use, upload with your site onto Neocities. Put them inside the files you made earlier - save yourself the confusion.
You can make borders on elements pictures. Use "border-image" with these other attributes: "border-image slice: (put number here; I use 30)"; "border-image repeat: round" for the best effect.
Background images go under "html{}" in style. So do fonts and other site wide elements.
Extra resources that helped me learn HTML and CSS
A helpful website I found that explains in detail how certain elements in CSS and HTML work. Super useful!
W3SchoolsA helpful coding website that explains basically everything about HTML. You can learn all sorts of coding languages here as well - including JavaScript.
A helpful video for everybody learning HTML. This saved my life lowkey.
The video form of the written W3Schools link above.
The stage of your website when you are building up things you can do on it.
It's important to give your site a reason to exist; as much as your corner of the internet is important, you need to give people a reason to follow your site. Making helpful things people might want to use (eg. blogs, resources, tutorials, etc.) will help increase traffic to your site!
If you have no ideas; think about what you'd want to see on somebody else's site. That is the most helpful way to find ideas, and how I came up with this idea!
It's important to pick a theme for your site. Your site will look the same as others if you don't theme it or make it unique, its super boring. You can do anything. You can really make it your own. Any theme your heart desires could be made. I'll give a few links to some sites that are really well done.
Lovesick Cafe(this was the first neocities I ever looked at! it was a big inspiration for my own site!)If you want some traffic on your site, you should give people reason to visit it. Make it helpful for people. Make it interesting. Provide detailed information on things you're interested in.
Like now - you're probably here to learn how to code in HTML and CSS and make your own Neocities, and thats what I'm trying to help you do!
Especially if you like teaching others what to do, make a Neocities based on things you like and are interested in. Help others - its free, you don't even need to be inconvienced. Just write what you know.
We all know - the internet has been taken over by major corporations. Making your side of the internet a personal and intimate space which isn't so washed by a corporation is important. Make it special, irreplacible. Make it uniquely yours.
The conclusion for all of this is that yes, you, you should make a Neocities! It's completely free of charge and with the help of HTML tools (such as layout generators) and iframes, you don't really have to do much complicated coding at all.
One step at a time, we can all create a better, more mentally healthy internet.
You can do it! ☆