How Do Traditional Web Pages Work?
Explore how traditional web pages function using the core technologies of HTML, CSS, and JavaScript. Understand the role of each component in structure, style, and interactivity, and learn why front-end frameworks like Vue.js offer enhancements in performance and scalability for modern web development.
We'll cover the following...
Assume for a minute that mankind is living in the 2000s. At this time, front-end frameworks have not been invented yet! Millions of websites on the internet were functioning without any front-end frameworks. Knowing this, some questions arise: How did they work? Do we not need front-end frameworks to create a website, then?
Traditional webpages
A webpage needs three major components to work: HTML, CSS, and JavaScript. For a moment, dive into each component briefly.
HTML
HTML is an initialism for Hypertext Markup Language. It is a language that defines the structure of a webpage. This language is based on Tags that define each part of the webpage. HTML is interpreted by the browser to display a web page.
CSS
CSS is the initialism for Cascading Style Sheets. CSS describes how HTML elements are displayed. In other words, the styling and appearance of a webpage are governed by CSS. It can also be written within HTML which is referred to as Internal CSS. In addition, it can also be written in a separate file, called External CSS. This can be integrated into any webpage. A big thanks to CSS for making webpages beautiful and aesthetically pleasing!
JavaScript
Websites not only provide content to the users but also react to user actions like clicking a button to perform a task. This interactivity is added to a webpage by using a scripting language which is exactly what JavaScript does! JavaScript brings the power of programming to webpages. In fact, JavaScript is responsible for the working of modern webpages today as modern front-end frameworks including Vue.js are built on top of JavaScript.
Note: A website can be built without CSS and JavaScript but a website without CSS will lack visual aesthetics. Without JavaScript, a website will lack interactivity. However, HTML is absolutely necessary for any website.
Explore a hands-on example of a traditional website that relies only on HTML, CSS (external), and JavaScript (without the help of any front-end framework)!
Play around with the code provided above to understand or recap the concepts of HTML, CSS, and JavaScript!
So, why front-end frameworks?
Do we need front-end frameworks to create a website? Although the three components (HTML, CSS, and JavaScript) are enough to build a website, there are certain features related to scalability, performance, and user experience that make front-end frameworks superior! That is why many websites have been and are currently shifting to front-end frameworks such as Vue.js.