For easier coding, it is recommended to use a desktop computer or laptop to go through this tutorial.

Skills Requirements

Besides an average computer literacy, coding requires a fair amount of precision and accuracy in your codes because unlike us humans who can quite easily spot a mistake in lines of text or guess what a misspelled word should be, computers are actually not very good at detecting coding mistakes and correcting it still lie in the hands of the programmers.

That means misspelling a word or forgetting to include a required full stop, comma, bracket, etc somewhere in your lines of codes may render your codes inoperable though a bit of leeway is allowed depending on the coding software that you are using. Just like pretty much any skill, having an eye for details is a skill that can be learnt and honed through repetitions, so please do not give up just because you think you are not a detail-oriented person now.

Should we get started on this hands-on coding tutorial then?

1. Start Here

To be able to properly follow this tutorial, please use one of these web browsers: Firefox, Chrome, Opera or Windows 10 Edge as you would need to enter your codes into this external website:, which is known to function well on these four web browsers. You may also try using other popular web browsers except Internet Explorer and Safari as these two browsers are not compatible.

Goal #1

Make sure you have the website loading properly on your chosen web browser. If the website is able to load properly on your computer, 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.

If you are now viewing this page through a large screen monitor, try adjusting the size of the window of this website and the Codepen website so you can view both at the same time as we will be moving to and fro between these two websites for this tutorial.


2. What is HTML?

HTML (HyperText Markup Language) is basically the code that will render a plain output of what you see on the screen of your computer. This is where you insert the codes to create paragraphs, lists, tables, images, etc.

Goal #2

Our first goal is to create a sentence that output "I love cute cats." on screen. 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.

Solution for Goal #2

Type this line of code that is highlighted in yellow color into the HTML column of the 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 according to the systems that were programmed into the HTML computer language long ago.

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 gaps 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.

Solution for Goal #3

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 style of red background should disappear as the web browser CANNOT 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 has no meaning to the web browser when it translates your code. Web Developers normally break their codes into separate lines purely for readibility purposes for the benefit of 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 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 will probably also return a result that is not what we want as it cannot 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 it will likely return errors when you have many lines of codes.

4. What is JS?

JS (JavaScript) is the computer language which Web Developers use to enhance their websites and web apps with a wide variety of 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 your 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.

Solution for Goal #4

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() { = 'yellow'; = 'bold'; = '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, then click on the virtual button and you should see the visual styles of the sentence change.

Explanation on JS Code

The programming logic around JavaScript may be a bit difficult to grasp for someone with absolute zero programming experience and there is no one method that fits all solution for everybody. If you really struggle to understand the explanation here, you may send me a message and I will see what I can do for you. Most modern websites will be coded with JavaScript, so it is very important to understand how it works as it is quite similar with other computer languages too.

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 var(s), we then add a virtual "click listener" to the button, which means we are programming 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 into. 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 those outside areas. 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.

Tutorial Completion

Learning coding in this modern age and even starting out as a programmer in the early stages does not require one to be gifted with a talent for it or to be good in Maths because it is only the more advanced levels of programming where you would need to possess a solid foundation in Maths in order to excel but not all programmers aim to reach those levels anyway. Once you are skilled enough to do some work-level coding, more job prospects could open for you in non-IT sectors too as almost all modern businesses utilise the Web in one way or another.

Gone are the days where only people who call themselves 'Web Designers' or "Website Developers" publish contents on the Web as it is fairly common now for non-IT workers to maintain their companies' websites and blogs through CMS (Content Management System) or other forms of web software. Therefore, if you desire to gain an edge over those who only use CMS, you have to prove to employers that you are skilled too in creating and manipulating Web contents and the good news is, you do not need to study computer science to learn how to do that. In fact, since modern companies will almost certainly have a business website that serves as a primary marketing channel, coding may even soon no longer be regarded as a technical IT skill because acquiring elementary coding skills is now much easier with advancement in technology.

Therefore if you are diligent, it really does not take very long for a person with an average computer literacy to start coding their first website or even their first web app from scratch. If you get stuck implementing something, then just google for a solution and try what other Web Developers posted online or send me a message and I will try to offer some personal coding guidance. If you are ready to take on more serious learnings from here, then please read my article on 'Reviews of Websites with Free Computing Education.'

Code credits: