How to easily relate and understand HTML, CSS and JavaScript for Website Development?

 #showyourwork

As I mentioned in the previous blog, I am going to start the Front-end Web Development series which means I am going to publically learn how to create a website layout/design. As I have already discussed in the previous blog, we need only three languages i.e. HTML, CSS and JavaScript to design the basic front-end of a website.

 Front-ends of different websites

While I was searching about these languages, I noticed people were relating websites to different objects. And, they compared the different parts of these objects to HTML, CSS and JavaScript. Now, let's see how we can understand them well. 

A youtube channel CodeWithHarry considers the website as a metallic car. He compares the metallic body of the car(glass, windows, wheels etc.) with HTML. The design and cut of glass, windows, wheels etc. with CSS and the engine, accelerator, clutch etc. with the JavaScript. According to him, if HTML is the physical body, CSS is the beauty and JavaScript is the brain of the car.

An another website, www.itonlinelearning.com considers website as a human body. They consider human body as a command center i.e. HTML, the accessories worn by the the human body as CSS and the actions performed such as moving, talking, eating etc. is considered as JavaScript.

Now, after reading these examples, the example that I can relate using my mind is considering website as a building or a house where we live. According to me, the wall, the glass of the window, the ceiling the floor etc. can be related to HTML whereas when we decorate the walls not with basic colors but with patterns or textures or add marbles or wood to the floor or add cupboards in the house this is what can be called as CSS. Because as I know, HTML has some basic fonts and colors but CSS gives a variety of colors and fonts and many more styling things.

A house with basic features (i.e. using HTML)

A house with decoration (i.e. using CSS)

Now, if I relate JavaScript to the house, I can consider switches as JS(JavaScript) because when we press on the switches the fan starts moving or the bulb starts glowing i.e. some actions are being performed. Likewise, when we turn the tap on, the water starts flowing. As in JS, we have submit button and when we hit that button the form gets submitted.

The  glowing bulb on pressing the switch

In short, HTML is the basic structure, CSS is the enhanced style and the JavaScript is the acions being performed or the logic. In the next blog, we will dig deeper into all the three languages.So, stay tuned to that.

Comment me down below to tell me how you understand the three languages and give me your feedback if my assumption appears right or wrong to you.

References to mentioned articles -

• https://www.youtube.com/watch?v=6mbwJ2xhgzM
• https://www.itonlinelearning.com/blog/how-do-html-css-and-javascript-work-together/