I highly recommend if you're not coming from my Neocities and are a complete beginner to take a read through on my HTML and CSS tutorial. I will use a lot of terms from those two tutorials!
So why do you need a homepage? It is usually the first thing people see when they visit your site, so you should put a lot of effort into making it interesting! A homepage also connects all the parts of your site, almost like a train station!
What do people even put on their homepage though? Well, here's a list:
Wow, that's a lot, and it might be overwhelming for a new coder, but you shouldn't worry, there are some ways to get around this and get your site running in no time! So let go step by step!
When making your homepage on Neocities it will always be called index.html. You cannot change this and index.html will always be the first page people will go to, so place your homepage on this page.
Either replicate this page inside of your code editor by calling it index.html or going into Neocities and coding in there. Just note that any updates you make will be available immediately, so if anybody visits your site they will see your updates immediately.
Specifically for homepages, I recommend using a layout generator. I'm special and used this one but this can be confusing for beginners so I recommend using one like SadGrl's Layout Generator or PetraPixel's Generator
For this tutorial, I used PetraPixel's layout generator and just changed some of the settings inside of their site.
Follow the steps on their site and paste the code inside of your HTML and external CSS file.
Now, you can save and refresh your page and see that you have a layout, but it is quite boring, and you haven't added any of your own pizazz to it yet. This is where we will do our CSS.
You can use my CSS tutorial to customise your site and add more of your own creativity to it, but if you've already customised a lot of it inside of your generator, you can just update the information!
The first thing I'm going to do is find the heading and make it my own for this site. I'm just going to call it tutorial site, but yours would obviously be your sitename. If this was my main homepage I'd call it "Miss-David".
Next, I'm going to describe myself inside of the about me section they've made for us. They've also shown how to make the text look different, like italics and strikethrough.
After that, I'm going to add the links to other parts of my site there. If you don't have any, that's okay. Just remove them and add them back when you have more pages to add. For now, I'm just going to add my two tutorials.
Then, remove anything you don't want. If you don't want a picture, then remove it. Make sure you remove it from your external CSS file as well.
Once you're done with that, you can look up if there's anything else you want to add. You can usually find how in W3Schools tutorials!
Enter your index.html file inside of Neocities and paste all of the code from your .html file. If this is a seperate page and not your homepage, make a new file.
Because we used an external CSS file we will have to upload that as well. Make a new file and make sure it has the same name as the one you specified. This is cAsESenItIve so make sure you include any capitals or punctuation.
Then, save all of them and check if it's all working as intended. If it is, congrats! You've made your first homepage!
Why is none of my CSS showing up? Ensure your file name is exatly the same as the one on your HTML file. They are linked, so if you have placed it into a folder, it may not show up! If you did, click rename and copy the file path inside of Neocities and place it inside the place where you've linked it.
What if I want a different layout to the ones you've showed me? That is why I linked the generator I used for my site. This generator allows you to make your own custom layout. Be warned: this takes much more knowledge about CSS to do right, so let me know if you want a special tutorial on that!
What if I don't like the fonts? That's a simple fix! You can use Google Fonts! Just pick a font you like, click "get font" and get the embed code. If you have an external CSS, place the CSS inside of that file and specify them inside of your headings or text like this: h1{font-family="Name Of Your Font;"} This is case sensitive as well.
Will people know I used a generator? Probably, but it's not a bad thing! It works, and if anybody has anything to say about it, ignore them! You are on your own journey to coding and when you understand HTML and CSS more, you can make your own custom layout!
Why should I use a generator? You now no longer have to labour away making a layout for yourself! Save yourself the pain, we don't have to struggle like how we did before! If you want to do that though (or you're like me and wanted a specific layout) that's totally okay as well!
Do you have to give credit to the people who made the layout? I'd say yes but for PetraPixel's layout generator it's only necessary to keep the credit inside of the code. Just read and make sure for whatever generator you're using.
I hope this guide helped you! I'm making a bunch of these for my friends, so this is for you guys! If you'd like me to explain something a little bit more, ask in the main chat!(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧