The explanation for Beginner of What is HTML, CSS, and JavaScript

This article will help you understand the use of technologies that are used in developing websites. I will try my best to explain everything from a beginner's perspective. We will learn what is HTML, CSS, and JavaScript and how these technologies help in making a website.

If you go to this article you won't have any problem in the future in understanding how HTML, CSS, and JavaScript work together in order to serve/make a website.

What are HTML, CSS, and JavaScript?

HTML

HTML stands for Hypertext markup language, it is basically a standard markup language for giving a static skeleton to the web applications and websites. It is referred to as the skeleton because it provides the structure of a web page. Defining how many bones(components) the web page is going to have.

What is meant by Standardized?

It is considered as the standardized language that will be used universally by every browser as the language to display a Web-Page. It is the only language that will be used by web developers to develop Websites. That means No other language can be used or developed for presenting a web page.

Why it is called a Markup Language?

It is to be noted that everything inside an HTML file is text. But HTML contains two types of text- Normal text that is needed to be displayed on the browser and Markup Language Text which is basically tags that are used to format how Normal Text will be displayed. In HTML, The markup language texts are used with Less than and Greater Than "< >" symbols. These tags are also often called HTML Components/Elements.

HTML Tag syntax- <Tag_Name> Normal Text that is to be displayed </Tag_Name>

CSS

CSS, the short form for Cascading Style Sheets is all stylesheet language that is used to handle the presentation of the web page containing HTML. By using CSS, one can modify the look and feel of an HTML page. It's just like a human doing dress-up and makeup just to look good and beautiful.

You can add visual properties to HTML Components to set or change different colors for text and background, set margin and padding distance between two elements, and can even add animations to the element you desire.

Moreover, CSS is the reason why a Website looks different on different devices. CSS can add style properties to HTML Elements according to the viewport and screen resolution.

JavaScript

JavaScript, also known as JS. JS is a client-side scripting language. It is a high-level dynamic interpreted programming language. It allows client-side scripting to create completely dynamic web applications and websites. JavaScript acts as a brain to a web page. By using it, it gives a web page the ability to execute/triggered some tasks based on some event/actions performed by the client/user.

Examples where Javascript is used

• The Alert box is popped up on the screen after submitting the wrong captcha.
• On submitting a form, validating whether all the values are typed correctly.
• Adding Textboxes dynamically when you have more than one value to enter.
• Changing Styling of Web Page design at run-time using DOM manipulation.

How much ability does JavaScript give to a web page?

JavaScript being a scripting language makes a static web page into an interactive one. Like having a button that will convert the whole website theme into Dark Mode, or showing some message in the modal.

One thing that beginners get confused with is that they consider that JavaScript can also be used to perform backend kinds of stuff. To be honest, even I also used to think that I can store and retrieve data from databases using JavaScript.

As said earlier, JavaScript is a Client-Side Scripting language and runs totally on client's machines and cannot be used to perform backend-related tasks such as File Uploading, database manipulation, and some processing/computation of data.

How HTML, CSS, and JavaScript are related?

Since you want to learn web development and want to create a website, you must know that HTML is one of the most important parts. HTML is a must and without it, there is not a single website. But we need to keep in mind that HTML with CSS and JavaScript. CSS parts WT open JavaScript

Examples

We can better understand this concept by an example of a human body. Consider HTML as the Body with the skeleton of the human being. Then we add CSS to do makeup and dress up and then we add JavaScript so that the body can have a brain that can perform functions.

If you didn't get the previous example here is another example. Consider a car being made in a factory. At first, the structure of the car is made. Then different colors are added to the cart structure. Then, at last, we add the engine and lots of wiring that will make the car work as desired.

How a website works?

Consider the following diagram-

This image shows, a web server and a client using a device. That client's trying to access a website that is hosted on that web server when the client enters the URL on the device on its web browser he makes a request who the webserver.

Let's suppose the client wants to access www.google.com. the client enters the URL in the browser. As the request is made the browser connected with the internet searches for the IP Address linked to that domain. this IP address is stored in a web server. As soon as the webserver gets the request, it will send a page to the client as a response.

Also, if the URL is not valid, the browser will not able to show any web page. A URL is false if the address/domain name entered is incorrect or the client is trying to access files which they are not authorized for, thus the URL contains a false filename, and there may be a case in which the URL contains the wrong parameter value.

Examples of the wrong URL

When there is a situation of incorrect URL the Web-Server and the browser produces and displays an error message. Mostly when the browser cannot access a page, it shows the error message as "URL/Site can not be reached" and when the web-server gets the request of a page that does not exist, it shows the error message of "Error 404 File not found".

How browser displays a web page

Note- when a valid URL is entered by the client, the Web-Server responds by sending the HTML File hosted at that URL. Along with that HTML-file, CSS, and JavaScript files are also sent if they are called within the HTML file. In some cases, the CSS and JavaScript code can also be written inside the HTML File itself.

Yes, CSS and JavaScript codes are totally different code compared to HTML Tags still they can be written inside the HTML file. This is known as Internal CSS and internal Scripting.

How to learn HTML, CSS, and JavaScript?

All three of them are a very vast language to learn. if you are a complete beginner and you start learning HTML, you don't have to learn it completely 100%. You can switch to learning CSS and JavaScript in the middle of learning HTML.

In my opinion, you can think to switch to CSS, if you have completed 70-80% of HTML. And move to JavaScript when you have completed 50-60% of Styling. And later you will learn by your own practicing. Don't focus on any one of them for a very long time. Because all of them are a very big language to learn. And remember, don't try to memorize the code and properties, rather practice the code by your own self.

The more you self-practice, the more you get errors. The more you rectify/debug errors, the more you learn.

How long to learn HTML, CSS, and JavaScript?

I will be honest with you, even I don't know HTML, CSS, and JavaScript completely, at least I can make some simple mini-projects using all three. And I will say, that if you are a complete beginner, then it would take 2 - 2.5 months to at least become used to the Trinity of FrontEnd Web Development.