1. Start Here

To be able to properly follow this coding tutorial, please use one of these web browsers: Firefox, Chrome or Windows 10 Edge.

If you are already using one of these web browsers, then let's take a look at a special website called Codepen.io where you can type in your codes and the visual output will appear right away in the website itself.

Goal #1

Please make sure you have codepen.io website loading properly in your web browser. If the website is able to load properly, you should see three separate adjustable columns named HTML, CSS and JS. Below these columns is where a live visual output of your code would appear.

We will be moving to and fro between this tutorial page and the Codepen website for this tutorial. If you have not open the Codepen website yet, please click or tap the big green button to do so.

Open Codepen.io Website

2. What is HTML?

HTML (HyperText Markup Language) is basically the code that will render a plain output of what you see in your web browser. HTML codes are used to create paragraphs, lists, tables, images and whole lot more items for your website.

Goal #2

Our first goal will be to create a sentence that output "I love cute cats." on screen in the web browser. To do this, all you need to do is enclose your sentence with the <p> tags. Click on the Solution button below to see the code.

Goal #2 Solution

Type this line of code that is highlighted in yellow color into the HTML column of the codepen.io website:
<p>I love cute cats.</p>

Your code should look like this:

Explanation on HTML Code

When we enter a <p> tag (which stands for paragraph), we are basically telling the computer or actually the web browser (e.g. Firefox, Chrome, Edge, Safari, etc) that we want to open a paragraph and the </p> tag is how we tell the web browser that's where we want to close the paragraph. We humans can understand that a full stop '.' means that is the end of the sentence but the web browser cannot understand this by itself, and that is why we must tell the web browser where we want to open and close the paragraph. There needs to be a opening and closing tags for most HTML tags as without it, the web browser cannot understand what we are telling it to do. Computers may be 'smart' in some sense but it can only be truly smart if we, the humans program it correctly.

3. What is CSS?

CSS (Cascading Style Sheets) are the codes that basically defines the visual styles of your website, for example the colors in your website, the spacing between texts, the size of the texts, what is in the foreground and background and so on.

Goal #3

Let's say we would like a background of red color behind the sentence that we just created in the previous HTML section.

Goal #3 Solution

To achieve this goal, we have to name an id for the sentence. This id allows us to identify this sentence just like how we would identify a man with his name. Later on you will see how we can use this id to link this particular sentence to CSS codes in order to make changes to its visual style. The name of the id can pretty much be anything you like as long as some fixed rules are followed but that is another topic that will not be included in this quick start tutorial. For now, let's just say we will identify the sentence with an id of 'catSentence', and to do that we will have to modify your existing HTML code given in the previous HTML section:
<p id="catSentence">I love cute cats.</p>

Next, enter these codes into the CSS column:
#catSentence {

Just click on the HTML and CSS tabs below to see the respective codes:

Explanation on CSS Code

The hastag '#' in CSS is how we link the CSS codes to the id that we named in HTML. If you remove this hashtag and you may certainly try doing so, the red background should disappear as the web browser will not be able to understand that we are trying to link this particular style to the sentence that we have named an id of catSentence.

What you see within the {} curly brackets are the block of codes that you want the web browser to execute. The web browser can only understand specific CSS words and it must be typed in a particular format in order for the styles to take effect. Unlike typing in a word publishing software such as Microsoft Word, white spaces and entering codes into a new line generally makes no difference to the visual output of your code. Web Developers normally break their codes into separate lines for readibility purposes for us humans. Just like the HTML tags from the previous steps, it is also very important that we tell the web browser where we want to open and close the block of CSS codes with the '{}' curly brackets.

The semi-colon ';' basically tells the web browser that we want to end that line of code at that spot. Without the semi-colon, the web browser may not be able to understand where the code ends even if you had properly closed off the block of codes with the '}' closing curly bracket. Removing the semi-colon on this one line of code here in our example will probably be ok but errors will likely appear when you have many lines of codes.

4. What is JS?

JS (JavaScript) is the computer language that Web Developers use to enhance their websites and web apps with interactive features, animations and a whole lot of other things that makeup a modern website. This computer language is very powerful and it is capable of producing advanced websites, web apps and web games when used in combination with HTML and CSS.

Goal #4

Should we then make our sentence more noticeable with some basic animations? Let's just say we will aim for this goal by changing the colour of the background to yellow, enlarging the size of the words and making the whole sentence bold. We can certainly trigger these changes to happen through a variety of ways depending on our own creativity but for the purpose of this simple example, we will just apply the changes by clicking on a virtual button that appears on screen.

Goal #4 Solution

So, before we proceed to enter the JS codes, we need to create the virtual button in HTML and also name it with an id in order to link the JS codes to it later. You may put the button's HTML code at the top or below your existing HTML code given in the previous CSS section but just make sure that you do not modify or delete anything. The HTML code to create the virtual button is:
<button id="catButton">Change style of sentence</button>

Then enter these JS codes into the JS column: var changeSentence = document.querySelector('#catSentence');
var catButton = document.querySelector('#catButton');

catButton.addEventListener('click', function() {
changeSentence.style.background = 'yellow';
changeSentence.style.fontWeight = 'bold';
changeSentence.style.fontSize = '2.5em';

If you have entered your codes correctly, you should see a small silver-greyish colour virtual button that is rectangular in shape with the words 'Change style of sentence' on it. Once you are very sure that all your codes are correct, click on the virtual button and you should see the visual styles of the sentence change.

Explanation on JS Code

Be patient if you are finding it a bit difficult to understand the programming logic of JavaScript in the beginning, especially if you have zero programming experience. It is actually quite important to be able to at least understand the basic workings of the language's syntax because even a relatively simple website these days will be coded with some JavaScript.

The var stands for variable and in JavaScript, variables store 'something' and this 'something' is a type of computer data. There are various types of computer data and in this simple example, we are just storing both the id of the virtual button and the sentence so we can link codes to them. You can also pretty much name the variables anything you like as long as you follow some fixed rules just like how you are free to name the id.

Upon storing what we want in our variable with the var keyword, we then add a virtual "click listener" to the button that programs the button to standby and "listen" out for a virtual "click" from the mouse (not the actual click sound). In the context of human interactions, it is like us human workers standing by to listen out for specific commands from a boss, and once the commands are received from the boss, we will then execute what the boss commanded us to do.

In coding, we the human programmers are like the bosses of the websites that we are coding. In this example, we are programming the function of the virtual button to "listen" for a virtual "click" from the mouse cursor when it is ON the virtual button. Once the virtual button "hears" the click, it will then execute the commands that we had programmed it to do. You may click anywhere else outside the virtual button but it will be "deaf" to those clicks because we did not program anything to happen on the areas outside the button. Note that our commands for the virtual button are also coded within a set of opening and closing curly brackets { } like in CSS. In this very simple example, all the codes that the button must execute relate to changing the visual styles of the sentence.

Code credits: