This is where I will record all my learning progress!

In order to organise and give color to your website, we will have to use something called css.

To start off with css, you must first have an idea of how you want your site to look like. For the sake of showcase, I will give you a simple demostration to get you understanding how css works.


So lest say you want your site to look something like this, with a header at the top,a navigation at the left, contents at the right and a footer at the bottom.

In order to get your website to look something like that, create a text file like the one you did with html but instead of naming it .html, name it .css and type in this line of code in your head column of your html file. link rel="stylesheet" type="text/css" href="xxx.css">. This will connect your html file and your css file together so that you can make changes to your html site with your css file.

Following that, you are supposed to declare how your page looks like in your css file. To get a better understanding of how it works, take a look at this video.

This video should equip you with the basic understanding of how css works in correlation to html. From here on I'll put in some useful and commmonly used codes/ websites while designing this website.

  • Background-color defines the color of the background while color defines the color of the content/ text.

  • a href="link"> Name/> Allows you to make words and pictures clickable and brings you to a link or another html page.

  • Css cheatsheet --> Click me!

After creating you website, you will be the only one that is able to view it as it is stored on your computer, so, how do you make it like all other websites where everyone can see and use it at the same time? The answer is to upload it! For the case of my website, we used GitHub to upload our website, and here is how to do it.

First, login to github with your existing account or register a new account with github, and from there :

Click NEW from the top left corner

Name your website in the REPOSITORY and select public so that people can visit your website with your link. Finally click complete!~

That will be your link to your very own website! But currently it has nothing inside of it, so click on Uploading an existing file!

Lastly Drag everything thats related to your website into here, from codes, to pictures to css, EVERYTHING!

This is how your end product should look like!