Build your own website in an hour

RefugeesCode Melbourne's photo
RefugeesCode Melbourne
·

10 min read

Table of contents

Hello, in this tutorial we are going to try and build a website within an hour and that should give you an idea of what building a website involves in every aspect. With that knowledge, then you can walk away and spend longer crafting more websites of your own unique ideas.

What is coding?

First of all, let's try and understand what exactly coding means.

We often say coding language, so it's a language like English/Mandarin/Arabic we speak every day. Yet it's different because we speak languages to communicate with fellow human beings but we talk in coding languages to communicate with computers, then computers interpret the idea behind the code and then convey it through the screens to other humans. There are also various coding languages like people speaking different languages.

In this blog, we will focus on a language called HTML which specialises in building webpages, and another language CSS which is used for styling the HTML webpages.

What's involved in building a website

Firstly we need a place to write down the code for the computers. That's called a code editor. It's similar to Microsoft Word or Google Doc in concept - where you keep words down, but code editors specialise in editing code and come with features to make it easier to write code, like highlighting when there is an error, or formatting the code as you write it so it's always neat and tidy.

Once we have written some code, we need the computer to interpret it, it might require some special program depending on the language. In the case of HTML/CSS we are going to learn later, it's the browser.

So, we write code in a code editor and open the code with a browser to see what it looks like. Once we are happy with it, the next question is, how do we share it with other people?

Like a Word document, you can just send the HTML file to a friend and they can open it with a browser and see the content. But, that's so clumsy. What if you make some changes later and they won't see it until you send through the latest file again. Think about how you usually share a website with a friend, you share a URL that looks like refugeescode.com and they type it in the address bar in the browser, and boom they see the website. How does that work?

First of all, you have to leave your code in a public space, because you don't want anyone to access the code on your computer like you wouldn't want anyone to walk to your study and look at a document. That public space is called cloud storage in the digital space just like those physical storage sites.

Then you give people the address of where you store your code and people can go and look at it, and that is the URL. URL stands for uniform resource locator, literally address, just in the digital space.

Let's get into actions

Sign up for CodeSandbox. CodeSandbox is an online editor where we are going to write code in.

On the dashboard, click on "New sandbox".

Search for "html" and click on "html by nulls". That creates a workspace with a HTML file that you are going to work on.

On the left section, it shows the files you have in the workspace. What's important for us here is the index.html and ignore the other two.

And the middle section is the code we are going to learn how to write.

The right section shows how the browser is going to interpret the code, in other words, how people will see it in the browser. It's blank now because we haven't written any code yet.

So now let's write some code.

<h1>Katara & Gingie</h1>
<p>Stay PAWsitive!</p>

Copy the code above and paste it into the middle section line 10.

Now we are seeing something there! So what we have done so far is - created an HTML file in a code editor, added some code and view it from the browser.

Before we go deep into the code, let's get through the other half of building a website - publishing it so your friends can see it from a URL.

Sign up for Github. GitHub is going to be the cloud storage for our code. After signing up, click on the little cat icon on the tool bar on the left-hand side.

And connect your GitHub account to code sandbox. Then click on create repository with a name of your preference.

After that, if you go to GitHub and under your repositories, you will see your code there. Congrats, now your code is published on the cloud.

Then how can your friends check it out? They are not going to come to this page and get impressed. Nothing makes sense to them on this page. So what we are going to do next is to get a URL for the website. Go to settings tab (1) and then pages section (2), select main branch (3) and save (4).

Give it a minute and refresh the page, you will see the URL there.

Click on the URL and you will see the website we just built!

Not super impressive looking but I hope you get the idea now. This is the other half of it. We put a copy of the code on cloud storage (GitHub) and then we get a URL for it. From the URL, everyone can have a glimpse of our code.

Sync CodeSandbox with GitHub

Before we go deep into the code, let's do one more thing. Click on the top left box and go to settings.

Uncheck "protect current branch" option. This allows us to sync the code with GitHub easily.

Now let's try to make some changes and sync with GitHub. Firstly, add the following line into index.html line 12.

    <p>17 Aug 2023</p>

Save the code (CMD/CTRL + S), after the code is saved, you shouldn't see a purple dot next to index.html. Then refresh the preview, you should see the new change show up on the preview.

Now click on Git tool panel and commit/push the change.

This step sync the code change we just did on CodeSandbox to GitHub, so now the cloud also has the latest update. And we can confirm that by visiting the URL. It's there.

So this is the process, write code - check it in our own browser - sync the latest code to GitHub so people can see the latest changes from the URL. And from now on we will keep repeating the process and make our website look better and better.

Go deep into the code

Okay hopefully now you get the idea of the process. If you don't, that's okay too because we will be doing this again and again so it should eventually sink into your head. And now we can finally get into coding.

Let's take a look at index.html again.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Katara & Gingie</h1>
    <p>Stay PAWsitive!</p>
    <p>17 Aug 2023</p>
  </body>
</html>

HTML code is made up of elements

We can see some patterns here.

  1. There are a lot of <xxx>, there are called elements.

  2. If you look at the elements closely, they are slightly different. Some of them are <xxx> but the rest are </xxx>. <xxx> is called the opening element, and </xxx> is called the closing element, a pair of opening and closing elements make a complete element. <h1>Katara & Gingie</h1> is a h1 element, which stands for header 1. <p>Stay PAWsitive!</p> is a p element, which stands for paragraph. An opening element needs a closing element.

  3. In between the opening and closing elements is the content, which goes on to the web page. So the opening and closing elements are the syntax for the browser to understand what is the content and how to interpret it.

Now let's take a step back and pay attention to the colours of the code. The purple text is the syntax and the white text is the content. Easy!

Structure of HTML

Next let's talk about the structure of a HTML code.

On line 1, we have <!DOCTYPE html> , which tells the browser the type of this document is HTML. It doesn't do anything to how the page look in the end, but it's good to have it there.

Line 2 is the <html> elelement, which closes on line 11. In between the <html> elements, the browser knows it's HTML code.

Then inside html element, there is head and body. Imagine HTML is a person that has a head and body. Inside head, we have information about the page, e.g. title of the page. And body and everything inside go on to the page.

More HTML elements

Till now we only talked about h1 and p elements, but there are much more elements, there are h2, h3, ..., h6. There are generic element div, and there are img for displaying images.

Let's add an image to the page.

Go to file explorer panel (top right) and right click to open up menu and select "upload file".

Upload an image of your choice.

Now add the following code to your index.html.

<img src="katara_and_gingi.png" width="100%" />

Replace the katara_and_gingi.png with the name of your image.

Let's talk a little bit about this element. It looks slightly different from the other elements.

  1. There is no closing element! Yes, it's called self-closing element, so it looks like this <xxx />.

  2. What is src="/katara_and_gingi.png" width="100%"?? It looks complicated but it's simple to understand once you get it. They are attributes of the elements, they look like this attribute="value". So src="/katara_and_gingi.png" means the source of the image is /katara_and_gingi.png , width="100%" meaning we want the width of the image to be 100%. Remember, we always wrap a quotation mark around the value, and each attributes are separated by space.

Refresh the page and the image is there!

Style the page

Now we know how to add things to a web page, but it doesn't look good! How do we make it look good?? CSS is coming to the rescue here.

Let's create a new file called index.css. The same as how we uploaded the image, right-click on the file explorer panel and click on "new file", type index.css and hit "enter.

Go back to index.html file, and add the following line to the head section.

    <link rel="stylesheet" href="index.css" />

This tells the browser we are using index.css to style the index.html page.

Now go back to index.css and add the following code.

body {
  background-color: #f08080;
}

Save the code and refresh the preview, you should see this. The background looks nicer now.

What was the magic? Let's try to understand what we did there.

A typical CSS syntax looks like this.

  1. We have a selector, a selector tells the browser which element we want to style. In our case it's body.

  2. Then we have the {}, in between the curly brackets, we tell the browser how we want to style the element.

  3. We can have multiple declarations.

  4. A declaration is made up of a property and a value. Property means what aspect of the element we would like to style, e.g. background-color. Value means what value we want to give to the property, #f08080 is a hex colour code which is the pinkish colour we see on the page.

Let's do another one.

Add this to index.css.

h1 {
    color: whitesmoke;
    text-align: center;
}

Now the header also looks nice.

Another one.

p {
  color: lightgrey;
  text-align: center;
  margin-bottom: 36px;
  font-size: 24px;
}

Better.

Most of the CSS styles are very straightforward, we can read them and understand what they do.

Now don't forget to commit and push the changes to GitHub.

Check it out on the URL, you've got your first website.

It looks very simple but now it's up to your creativity to make it as crazy as you like.

Website inspirations

You can make something like this with HTML/CSS.

Or something more classic.

Or something minimalistic.

Or something that doesn't even make sense.

As long as you have ideas, you can find out how to do everything with HTML/CSS online. W3School is a good one to look at. And I have a series of blogs that dives deeper into HTML/CSS as well.

That is an intro to coding, I hope you think your time is well spent and you would like to spend many more hours writing code!

refugees code melbourne