This is just a very simple demo designed to help non-tech people get a quick idea of how easy it is to get started in web coding. As we will be doing some actual coding in this tutorial, it is recommended that you use a desktop computer or laptop rather than a mobile device.

Skills Requirements

Coding is a task that requires focus, precision and accuracy; that means misspelling a word or forgeting to include a required full stop, comma, bracket, etc somewhere in your lines of codes will likely render your codes inoperable. If you browse around the programmers' forums, it is actually quite common for even experienced programmers to sometimes make basic typing mistakes that could cause hours of frustration as it is not always easy to point out where the mistakes are in lines and lines of codes.

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 or Opera as you would need to enter your codes into this external website: codepen.io, which seems to function best on these three web browsers. You may also try using other web browsers except Internet Explorer, which I am pretty sure is not compatible with the Codepen coding website.

Goal #1

Make sure you have the codepen.io 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, you might want to adjust the size of the windows 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.

Open codepen.io


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.

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 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 according to the systems that were programmed into the HTML computer language long ago.



3. What is CSS?

CSS (Cascading Style Sheets) is the code that basically defines the visual styles of your website, for example the colors in your websites, 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 achive 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 {
  background:red;
}

Just tap or 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 this 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() {
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, 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

Congratulations if you have taken the initiative to type the codes from this tutorial and did not copy and paste. You might have missed a semi-colon or bracket as a beginner and that is totally OK as you WILL actually learn faster and retain more memory by typing in your own codes and memory retention comes naturally as long as you keep coding at the keyboard.

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 as once you mastered some coding, more job prospects could open for you in other non-IT sectors.

Gone are the days where masses of workers use Adobe Dreamweaver or Microsoft FrontPage to publish contents on the Web. Today and in the future, as Web contents become more complex and interactive, employers will be on the lookout for workers who are skilled in creating and customising Web contents. In fact, web development has now become such an integral part in companies that elementary web coding may even soon no longer be regarded as a technical IT skill because this digital technology has become so much more accessible to the common layman in recent years.

Therefore if you are diligent, it really does not take very long for a person with average computer literacy to start coding their first website or even their first web app. If you get stuck implementing something, then just google for a solution and try what other Web Developers posted and I am also available for personal coding guidance. If you are ready to take on more serious learnings from here, then please do read my article on 'Reviews of Websites and Apps that Offer Free Coding, Programming and Computing Education.' or you might also be interested to read my article titled: 'Learning Web computer languages is easier and more beneficial than learning a foreign language for better job prospects.'

Code credits: