DEV Community

Chandan B S D
Chandan B S D

Posted on

How do websites work? Super Simplified Explanation

Internet and Web Addresses:

  • To access a website on the world wide web, we use IP addresses
  • Each Website has an associated IP address (This is similar to our home address)
  • When we enter the IP addresses (we actually enter web address like which the browser converts into IP address) on a web browser, the web browser makes a query to the webserver (A computer that handles user requests and provides responses) and then downloads three files: an HTML file, a CSS file, and a javascript file.
  • The web browser then takes these three files to show us the webpage

What is the HTML file?

  • The HTML file is similar to the “stone bricks.” we use to build our house.
  • i.e., Its only purpose is to define the structure of the webpage
  • For Example:

            <TITLE> My Personal Website </TITLE>
                Hello World, My name is Chandan.

HTML Output


  • In the above HTML snippet, we can see that the HTML tags provide a structure that identifies the webpage. In this case,

  • <TITLE> My Personal Website </TITLE>
    This line ensures that the title of our website is called “My Personal Website"

  • <BODY> Hello World, My name is Chandan </BODY>
    This line ensures that the content or body of our website displays the line “Hello World, My name is Chandan”

What is the CSS file?

  • The CSS tells the web browser how to present our HTML elements.
  • i.e., it is similar to a hairstylist who gives shape, length, and color to our hair
  • For Example:

        color: lightgreen;
        background-color: grey;
        text-align: center


    CSS Output

    The above example shows that HTML tells the web browser “WHAT” to display, and CSS tells the web browser “HOW” to show.

What is a JavaScript file?

  • JS files provide the functionality or “actions” of a webpage.
  • Without JavaScript, we can only display some content beautifully using HTML and CSS.
  • But to provide some functionality, we need to use JavaScript.
  • For Example:

    let entireDocumentVariable = document.querySelector("html");
    entireDocumentVariable.addEventListener("click", () => alert("Hello, Welcome to my website"));


JavaScript Output


  • Using javascript, we have written a functionality where a user clicks on any area inside the web page, and he is greeted with an alert saying, "Hello, Welcome to my website."

Source Code:

Top comments (2)

atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Thanks for this detailed information 🤠

chandanbsd profile image
Chandan B S D

Thank You