If you are reading this chances are that you are not only interested in my neocities page, but perhaps in creating your own. Well then you are in luck! Because it's not only fun, but also pretty easy! No matter how much or little experience you have in programming, this guide will help you create your very own website. So grab some soda and let's get started!
To make a website you need a browser. You can use your phone, or a computer, it's up to you! For others to be able to view your website you will need to "host" it somewhere. For this page I am using neocities because it's free and has a fun community in my opinion!
If you don't have a neocities account, the first step would be to sign up!
Once you have an account you are ready to create your first page! Click your profile name and navigate to your dashboard. Before we get into what these files are let's head straight in by creating a new file. Important! This file should end with .html
this is how your browser knows that you are making a web page and not just a text document.
Since we are making a brand new page, I think it makes sense to start with an introduction. So I will create a file called about-me.html
With my new file created I click "Edit" when hovering it in my dashboard. If you don't have this option, or if the file is empty, the file probably has a different file ending than .html
, go back to your dashboard, delete the old file and create a new one.
Yes. Sadly hahah. But you will learn in no time!
<body> <h1>Welcome to my Website!</h1> <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p> <p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p> <p>Here's how you can add an image:</p> <img src="/neocities.png"> <p>Here's how to make a list:</p> <ul> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ul> <p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p> </body>
But first! Since neocities was so nice and created a template for us, let's click View and see what this code means.
It's not much, but it's a start! And using just the code that neocities gave us we should be able to create our about me page! It has text in different sizes, bullet points and much more.
Before we change anything I want you to look at the address bar in your browser. If you look closely (you might have to click it) you can see that it ends with the name of the file that you created. For me it's corbiss.neocities.org/about-me.
If you add .html
to that name and press enter you will notice... that nothing happens. Magic! And that is because you are actually viewing the html file that you created. But your browser is looking through all the code gibberish and figuring out that some of it actually should be bigger text, smaller text, bullet points and clickable text. How cool!
So let's see if we can figure out the language that the browser is speaking
Ok so going back to your code you might notice that all of the text that exists on your about-me page, also exists in the .html
file. But surrounding that text you will find something called tags.
As you might see most tags come in pairs. They both contain the same "code" like <h1>, <p>, <ul>, <li> and so on. But for the latter in each pair it has a "/". This is called a closing tag. What is written in between an opening and a closing tag results in an element on your page!
My head is spinning. Lol same, let's try using some tags.
Ok! So let's stay focused on our goal, to create an "about me" page. The fastest way to do this is to copy and paste the text from the template. So I will copy the h1, which creates a header, and write a fitting headline for my page.
After making my header, I save the file and refresh my page, looks good!
I can see in the template that paragraphs have the p tag around them, so I copy that from the code and paste it under my header.
<body> <!-- Here's what I have written so far --> <h1>About me</h1> <p>My name is Lukas, but online I go by Corbiss!</p> <p>Feel free to have a look around my website.</p> <!-- And below is the code of the original file --> <!-- I copied this line to create my own header! --> <h1>Welcome to my Website!</h1> <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p> <p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p> <p>Here's how you can add an image:</p> <img src="/neocities.png"> <!-- And this one to create a paragraph (even though it says list) --> <p>Here's how to make a list:</p> <ul> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ul> <p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p> </body>
When copying and pasting the code you might, or might not, have noticed that no matter how many lines you insert between tags, it doesn't affect the layout of your page. This is because empty space, or whitespace as it's called, is ignored by the browser. Cool beans!
Despite this wordy guide, I am usually a fan of short concise information. So when creating my "about me" page I think it could be nice to list some interests, perhaps movies I like, foods I like, music I like and so on. I could do this in a paragraph, but there's actually a built in tag for this.
It's called an unordered list, or ul for short. It is special because it expects other tags between it's tags. WHAT? I know, I'm shocked too. Let's try it out!
<body> <!-- Here's what I have written so far --> <h1>About me</h1> <p>My name is Lukas, but online I go by Corbiss!</p> <p>Feel free to have a look around my website.</p> <!-- I made a new header to title my list B) --> <h2>Videogames I like</h2> <!-- Since I like a lot of games I added some extra li elements --> <ul> <li>Minecraft</li> <li>Pokemon</li> <li>Black Ops Zombies</li> <li>Animal Crossing</li> <li>REPO</li> </ul> <!-- And below is the code of the original file --> <h1>Welcome to my Website!</h1> <p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p> <p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p> <p>Here's how you can add an image:</p> <img src="/neocities.png"> <p>Here's how to make a list:</p> <!-- Here's where I copied the code from! notice how there are li tags for each item in the list! --> <ul> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ul> <p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p> </body>
That's a web page if I have ever seen one! Is it pretty? No. But we built it ourselves!
To finish up the content of my page I will clean up the template code within the body tags.
<body> <h1>About me</h1> <p>My name is Lukas, but online I go by Corbiss!</p> <p>Feel free to have a look around my website.</p> <h2>Videogames I like</h2> <ul> <li>Minecraft</li> <li>Pokemon</li> <li>Black Ops Zombies</li> <li>Animal Crossing</li> <li>REPO</li> </ul> </body>
To get some practice I would recommend creating a few pages using what you now know! If you aren't feeling creative I have some suggestions c;
Anyways! Good job! Once you feel ready, there's another tutorial waiting for you! Click here!