Understanding HTML, CSS, and JavaScript

Visit any site on the internet, anywhere in the globe, personal blog to the staggering complexity of Facebook or Youtube. Technology, Take away the branding and the complexity and you will find the same three fundamental technologies driving all of them HTML, CSS, and JavaScript. These languages are not merely languages to the aspiring developers, but the ultimate pillars. When you need to develop web-based applications, you have to know how these three layers can relate to each other.

We would like to analyze them with a simple analogy - The Human Body.

1. HTML - The Skeleton (Structure)

The foundation of the web is HTML (HyperText Markup Language). It gives meaning and the format of the content. Think of HTML as the Skeleton. A body would be nothing without bones. In the same way, a site cannot have content structure in absence of HTML. It informs the browser of what it is: This is a headline, this is a paragraph, this is a button, or this is an image. It is not a programming language as such (it does not contain logic such as if/else). It is a markup language that structures information in a way that it is read by browsers and understood by screen readers.

2. CSS - The Skin and Clothing (Presentation)

The visual presentation is attributed to CSS (Cascading Style Sheets).CSS is the skin, hair and clothing but the skeleton is HTML. A skeleton serves a purpose, and it cannot be pretty to see. CSS uses that raw HTML format and gives it style - colors, fonts, spacing, and layout. CSS also has the role of Responsiveness. It makes sure that the "clothing" looks just as good when the user visits this site with the giant desktop monitor or a small smartphone-size screen. CSS would make the web a dull list of black writing on a white background.

3. JavaScript - The Brains and muscles (Behavior)

JavaScript (JS) is the real web programming language. It deals with logic, interactivity and behavior. JavaScript is the Brain and Muscles in case HTML is the skeleton and CSS is the clothing. It causes a body to move and respond.

• HTML creates a button.
• CSS turns the button round and red
• JavaScript causes some action (such as a form or a window) to be performed when you finally actually press the button.

JS enables websites to be dynamic as opposed to being static. It loads information, loads content without reloading the page, and drives sophisticated applications such as Google Maps or Netflix.

• How They Work Together

The browsers are programs that are created to integrate these three different files to the visual experience that you are watching.The HTML is loaded in the browser to create Document Object Model (DOM). It analyses the CSS to render the pixels where they belong. It executes the JavaScript to respond to user interventions and update the DOM as needed. There is no way you can master the modern frameworks of the web (React, Vue, or Angular) without first mastering these three essentials. They are the age old blocks of the internet.