Intro to HTML, CSS, Javascript. Installation of Node Js, VS Code

In our previous tutorials, we learned what is meant by server, client, server-based application, client-based application, and so on. We also learned what technologies we have for building client- and server-based applications. We also learned the basics of the web, how websites work, and so on.

Let's get started with the first technical tutorial. In this tutorial, we will learn HTML, CSS, and Javascript. Also, let's see how to install Node.js and Visual Studio Code.

For any website or web application to be built, we need to know HTML, CSS, and Javascript concepts. These technologies are core to web development.

The following image I found on the Quora website (credit to Aditya Saxena) is a great way to explain HTML, CSS, and Javascript.

HTML is like the skeleton of a human body; it defines the structure and content of the website.

CSS is like the clothes of a human body; it defines the styling of the website.

Js, i.e., Javascript, is like the soul of a human body; it defines the functionality of the website.

With just HTML and CSS, we can create a static website, but JavaScript is required to create any website with some functionality (dynamicity). It's like we can create any human with mud and paint, but if there is no soul, then we call it an idol, not a live human. Here,  mud and paint are like HTML and CSS, and soul is Javascript.

As we already discussed in the past, our ultimate goal is to learn ReactJS, so we use the ReactJS project as a tool to learn HTML, CSS, and Javascript. We learn HTML concepts, CSS concepts, and Javascript concepts right from the basics using ReactJS as a vehicle.

Let's see how websites look with ‘HTML without CSS’ and with ‘HTML & CSS’.

You can observe in the above image how the website looks without CSS (left side) and how it looks with CSS (right side). Both do not reference the same website, rather it's just a general representation.

The CSS website looks cool and beautiful compared to just HTML without CSS, which is boring.

If you can observe in the right side image, there are two buttons, i.e., ‘free quote’ and ‘contact us'. When we click on any button and want to do some functionality, then we need javascript.

To create a ReactJS project, we require NodeJS, because ReactJS is just the library of NodeJS. To write code, we need a ‘code editor'. In this tutorial, we use ‘Visual Studio Code',( or,  we say, VS Code)

Installing Node JS:

Step 1: First check whether node.js is already present on your computer or not. To check it, open the command prompt in Windows (terminal in Mac) and type node.v. The command will output the node version; if it doesn't, it means node.js is not present on the computer.

Step 2: If NodeJS is not present on your computer, open a browser, open 'Google', and search 'NodeJS download'. Open the Node.js website and download the installation file corresponding to your operating system.

Step 3: Click on the installation file that was downloaded earlier; a popup will appear with installation steps; just press ‘next’ or ‘next’ until the end of the installation.

Step 4: Once installation is completed to check, just follow the step 1

Note: For better understanding, watch my video on the website (www.itfieldjobs.com).

Installation of VS Code:

Step 1: If VS Code is not present on your computer, open the browser, open 'Google', and search ‘Visual Studio download'. Open the VS Code website and download the installation file corresponding to your operating system.

Step 2: Click on the installation file that was downloaded earlier; a popup will appear with installation steps; just press ‘next’ or ‘next’ until the end of the installation.

Step 3: Once installation is complete, check your PC’s apps.

Note: For better understanding, watch my video on the website (www.itfieldjobs.com).

In our next tutorial we will start learning HTML concepts practically.