You go to Google.
You type "Netflix".
You click the first link.

And just like that — https://www.netflix.com opens.

But pause. Think for a second.

What just happened?
How did that website open?
And more importantly — how are you able to binge-watch an entire series without even thinking about it?

Well, without data being transferred behind the scenes, nothing would load. Not a single episode. Not a thumbnail. Not even the homepage.

🌐 So… How? Where? And Who’s Involved?

Let’s break it down.

When you open Netflix — whether on your laptop, tablet, or phone — your device is the one asking for data.

In technical terms, your device becomes the client.

We can represent it like this:

This client (your browser/device) sends out a request:
“Hey, I want to watch a show on netflix.com — help me find it and bring the content back!”

But who does it ask? How does it know where Netflix lives ?

Let’s dive deeper into the hidden data journey — where it travels, who guides it, and how it returns to you in the form of a show you can’t stop watching.

🌐 What Happens After the Click?

As soon as you click on the URL www.netflix.com, your device (the client) doesn’t magically know where to go.

Instead, it sends out a request —"Where is this website located?"
And this request goes to something called the DNS — Domain Name System.

Let’s represent it like this:

🧠 Wait — What Is DNS Server Anyway?

Before we continue down the data journey, let’s quickly understand what DNS Server actually does.

Think of it like your phone’s contact list.

You don’t remember everyone’s phone number, right? You just tap on a name like "Muskaan" and your phone dials the correct number behind the scenes.

In the same way, Netflix.com is just a name.
The real identifier is something called an IP address*(It’s the contact number in the world of internet)* — something like 192.0.2.1.

So far, here’s what’s happened:

• You typed netflix.com into your browser.

• Your device (client) sent a request to the DNS Server.

• Now the DNS Server has a job: to find out where netflix.com lives.

So what's the DNS Server next step?

It reaches out to the Root Server.

🌳 DNS Server Contacts the Root Server

🌍 What is a Root Server?

Think of it like the root of a tree — the very base from where all paths begin.
Just like a tree distributes nutrients through branches, the Root Server directs DNS traffic to where it needs to go next.

There are 13 main root servers around the world (named A–M) and they have further sub-servers as well.

🧭 But What Do Root Servers Actually Do?

Root servers don’t know the final IP of netflix.com — but they know where to find the next clue. Think of it like a scavenger hunt.

They store mappings for Top-Level Domains (TLDs) — like:

• .com

• .net

• .org

• .in

• .us

So when DNS Server asks, “Where is netflix.com?”,
the root server replies: 🗣️ “I don’t know where netflix.com lives, but I can point you to the .com TLD server — it might know!”

🧩 The Root Server Brings a Clue

So, the DNS Server asked the Root Server:
“Where can I find netflix.com?”

The Root Server responds:
🗣️ “I don’t know exactly where netflix.com is, but I do know who handles all .com domains. Here’s their contact!”

In tech terms, the Root Server shares the IP address of the .com TLD server — the next stop in the journey.

So, it's like the Root Server hands the DNS Server a clue and says:

🔎 “I didn’t solve the mystery, but here’s the next lead.”

This clue gets passed back to the DNS Server .

Now the DNS Server knows who to ask next — the .com TLD server(in our case server with .com addresses), which might just have the answer we’re looking for.

🔍The TLD Server Finds the Host

Now the DNS Server takes the clue from the Root Server and heads over to the TLD Server — in this case, the one responsible for .com domains.

So it asks the .com TLD server:
🗣️ “Hey, I’m looking for netflix.com. Do you know where it lives?”

The TLD server responds:
✅ “Yes! I don’t know the exact house, but I know the person who owns it. Here’s the address of the authoritative name server for netflix.com.”

This authoritative name server is typically managed by the company where the domain is registered or hosted — like GoDaddy, Namecheap, Cloudflare, AWS , etc.

And this server?
It holds the final, most important piece of the puzzle:
The actual IP address of netflix.com — the true digital home where the site is hosted.

🧠 The Authoritative Name Server — Final Answer

We’re now holding three clues:

• The browser asked the DNS server,

• The resolver asked the Root Server,

• The Root pointed to the TLD Server (.com),

• And the TLD Server gave us a lead:
  “Ask the Authoritative Name Server. It knows it all.”

So now, the DNS Server heads to the authoritative name server —
Let’s say, for example, Netflix is hosted on AWS Route 53 (very likely, since AWS is one of the biggest DNS providers).

🕵️ The resolver now asks:
“Hey Authoritative Server, I’ve followed every clue — can you finally tell me the IP address of netflix.com?”

And the authoritative server responds:
✅ “Yes. Here you go — Netflix lives at [actual IP address].”

💡 Boom! We now have the exact coordinates of where Netflix is hosted.

💾 Mission Complete

Now that the DNS server has the final IP address, it sends that information all the way back to your browser.

Step 7 , At this point, something powerful happens: The browser establishes a direct connection with the Netflix server at that IP address.

From here on, the client and server can now talk directly to each other.

Step 8 & 9: Let the Conversation Begin

With the connection open, your browser sends an actual HTTP request to the Netflix server —
something like: 👉 “Hey, I want to load the homepage of netflix.com!”

The server understands the request and responds with the necessary data — HTML, CSS, JavaScript, or even video stream chunks.

This two-way communication (request ↔ response) is what powers your Netflix experience.

📝 For simplicity, we show this to-and-fro as a single step idn the diagram, but just know: Your browser keeps talking to the server as long as it needs data (images, scripts, videos, etc.)

🧾 Summary: The Secret Life of Data — Revealed

Let’s recap the thrilling behind-the-scenes journey of what happens when you search and click on netflix.com:

1. Client Request:
   Your browser (the client) sends a request for netflix.com.

2. DNS Server Lookup Begins:
   The request is sent to the DNS server, asking, “Where is netflix.com?”

3. Root Server Step:
   The DNS Server contacts a Root Server, which points it to the .com TLD server.

4. TLD Server Step:
   The TLD server (for .com) gives the address of the authoritative name server for Netflix.

5. Authoritative Server Response:
   The authoritative name server provides the final IP address of netflix.com (e.g., hosted on AWS).

6. DNS Server Sends Back IP:
   This IP is returned to your browser — now it knows exactly where to go.

7. Connection is Established:
   The browser creates a direct TCP connection with the Netflix server.

8. Data Request:
   The browser sends an HTTP request to that IP asking for the homepage.

9. Data Delivery:
   The server responds with the required content — and the Netflix site starts loading on your screen.

DNS resolution

It is this process of translating a domain name (like netflix.com) into its corresponding IP address (like 52.94.134.119) so that your browser can find and connect to the correct server.

The reverse of it is Reverse DNS Lookup

Reverse DNS Lookup (rDNS)

Reverse DNS is the opposite of the usual DNS process.

• DNS (forward lookup):
  domain name → IP address
  e.g., netflix.com → 52.94.134.119

• Reverse DNS (rDNS):
  IP address → domain name
  e.g., 52.94.134.119 → netflix.com

This reverse lookup uses a PTR (Pointer) record.

Mail servers use rDNS to check if the sender’s IP actually maps to a legitimate domain.

Example:You receive an email from xyz@bank.com, but the IP address doesn't go to bank.com.
The server may flag or reject the email as suspicious.

BONUS

DNS Record is a piece of information stored in DNS servers that tells the internet how to handle requests for a domain — like where to find the website, send emails, or verify ownership.

The following are it’s types :

DEBOUNCING

As the name suggests , if we want to execute a function or an action we will debounce(avoid) it, if similar action is executed within a given span of time(i.e delay).

Real-Time Example : While naming a github-repository , the name availability is shown once you are done typing and not on every change of the alphabet in the name.

IMPLEMENTATION

To understand the implementation of debouncing , the knowledge in Closures and Decorators in JS is a must. So , assuming you are having a fair idea about it ,

• Debounce Function here is a Decorator.

• As there is a closure , the timer variable is declared in debounce function , which is accessible in the inner function even after the debounce function has been popped out.

const debounce = (fx, delay = 250) => {
    let timer;
    return function (...args) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fx(...args);
      }, delay);
    };
  };

The timer(delay) is set as soon as any action has taken place. If before the delay hits 0 , a similar action takes place then we are clearing the previous timer and setting a new timer(delay) and so on , and hence avoiding the operation to happen until and unless no new similar action is being sent and the delay ends and hence the operation inside a function gets executed.

WHY WE DON'T DECLARE THE VARIABLE INSIDE THE NESTED FUNCTION?

• If it's declared inside the the nested function , it would be redeclared every time and you would'nt be able to clear the timer.

WHY ARE WE PASSING ARGS ? WHY ARE WE SPREADING THOSE ?

• Args are passed to make the debounce function generic , as a function that is being passed in the debounce function can and cannot have arguments . So , instead of writing a separate debounce function , we are making it generic.

• We are spreading the arguments , to give us a liberty to pass multiple arguments in a single argument.

EXPLANATION IN TERMS OF EVENT LOOP

The method goes to the queue and then is sent to the stack , where it waits for the delay to hit zero , if another similar action happens the reference to the method(action) is cleared , hence making the stack empty or if no similar action happens , after the delay finishes , it gets executed.

REAL TIME APPLICATION

• Suggestion in search box

• Auto-Save in text fields.

• Screen Resizing

• Page Scrolling

• Show mouse position

• Excessive calculations or API calls

Screen resizing , in normal manner and then via debouncing the function.

If the function for updation was called without being debounced it would result in 'n' number of DOM renders, which is way more than the function being called via debouncing. Hence improving the performance of an action 'n' times.

SUMMARY

Debouncing is a practice to avoid SIMILAR multiple actions and make it happen and not to delay those.

Pseudo Classes and Pseudo Elements are special types of selectors.

Why does Pseudo Elements and Classes called so ?

As we know what Pseudo means , so pseudo elements and classes mean that these actually do not technically exist in the DOM in a i.e. these weren't inserted in the code ,it's added with CSS. And hence the word Pseudo before their names.

WHAT ARE PSEUDO CLASSES?

The pseudo classes are technically a condition or state on the selector.

//Syntax
selector:pseudo_class{

}

Now what does this mean ? Let's understand with examples of Pseudo Classes -**

i) Hover(:hover)

When the cursor goes on the button i.e. the hover state has become true or you can say the hover condition has been met the styling gets applied to the button element in the DOM or HTML.

REAL-TIME Example : AMAZON

Example : On Hover the styling of the button changes

//It changes the styling when we hover(place the cursor) over an element
button:hover{
border: 2px solid red;
border-radius: 5px;
color: red;
background-color:transparent;
}

ii) Focus(:focus)

When the focus is in the element e.g. in input if the cursor is placed in the input box or in case of select element when the dropdown opens i.e. the focus is in the element of select then the styling is applied.

      input:focus {
        font-size: 2em;
        background-color: #ff0000ec;
      }

There are multiple such pseudo classes , so a little work for you. Some pseudo classes work for links and have a order to override one's styling. Try the same on <a> tag. ( HINT - LVHA order )

WHAT ARE PSEUDO ELEMENTS?

Pseudo elements are used to style a part of selected element(via selector) unlike pseudo classes that style the entire element on a state/condition.

//Syntax:
selector::pseudo-element {
  property: value;
}

i)First Letter (::first-letter)

Add styling to the first letter/alphabet in the tag.

//This changes the font-size and color of the first letter in <p>
 p::first-letter {
        font-size: 2em;
        color: #8a2be2;
      }

Unlike pseudo classes the styling is applied to a part of element(<p>) and not the entire <p> .

ii)Before(::before)

Using ::before after the selector allows us to add content or styling BEFORE the content of the elements and NOT the elements itself. content property is a must to be present in the styling even its null i.e. (''). If this property is missing the styling/content won't be visible.

Syntax:
selector::before{
content : content_value
}
/* content_value can be "" , url() , open-quote etc. 
There are many options available.*/

//adds `"` before the CONTENT of <h1>
  h1::before {
    content: open-quote;
  }
//adds an * (depicting required field) before the <label>
 label::before {
 content: "*";
    display: inline;
    color: #ff0000;
     font-size: 2em;
  }

Now there is a misconception that using ::before will add the things before the element, but it's not the case. It adds up before the Content of the Element and not the Element.

NOTE: Multiple values in content can also be added , it works Example:

content: open-quote "*";

iii) After(::after)

It's similar to before , with the difference of the placement i.e. it adds up styling/content .

Have you seen , busy depicted via red circle on initials/profile Or green circle to depict Online ? It can be built using Pseudo-elements.

REAL-TIME Examples: Status on Discord , Notifications Count of Gmail can be built using ::after or ::before too.

   span {
        position: relative;
        padding: 10px;
        border-radius: 50%;
        background-color: #b17ae7;
        color: #ffffff;
      }
// Added red circle on beside the initials 
      span::after {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: red;
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
      }

WHY :AFTER/:BEFORE AND SOME OTHER PSEUDO ELEMENTS ALSO WORK?

As per CSS3 , a clear distinction has been made between pseudo elements and pseudo classes via :: and : respectively on the basis of their core functionality which clearly wasn't there in previous versions and was a bit confusing. So , as per the latest norms :: is preferred and recommended to use , but due to browser compatibility to older versions :after/:before also works.

WITH WHAT ELEMENTS DOES ::AFTER & ::BEFORE DOESN'T WORK?

The elements that do not have the content box where element's own content is placed i.e. replaced elements . Such as : <img> , <br>, <iframe> etc.

WHAT ARE BIG NOS WHILE USING PSEUDO ELEMENTS?

a) Using pseudo elements in the middle of selectors or pseudo-classes.

Example :

The pseudo elements should be at the LAST to make it work.

b) Using multiple Pseudo Elements with a selector at one time .

If multiple pseudo elements are to be used on a single selector , it should be done separately

SUMMARY

Find all the code used in the article below: https://github.com/Parul1999/CSS-Pseudo

Selectors tell the browser which HTML element(s) should be targeted🎯 so that those elements could be styled. Styling any element is possible via Selectors ONLY.

There are manifold selectors , the ones which we are going through are :

What do you mean by Combinators in CSS ?

The kind of selectors that combine or explains/build relationship between different types of selectors .

• UNIVERSAL SELECTOR (*)

The styling written is applied to the entire web document. Lets try to understand with an example of Netflix.

So , most of the font-colors and white and go to any page the background is black. Do you think for every element the developers would have written separate CSS? Probably , not !!! So , in such cases where in the entire website we have to give some common styling be it background , color, font-size etc. We mostly use Universal selector.

//Syntax
*{style properties}
/*CSS to give white color to fonts and background as black
 in the site.*/
*{
    background-color: #000000;
    color: #FFFFFF
 }
// #000000 - black and #FFFFFF - white

• TYPE SELECTOR

It means that the styling is applied to any and every element present. Again , if I talk about Netflix , all the buttons are of red color.

So , in this kind of scenario when any type of element needs to be in specific manner or need to remove default styling to any kind of element , type selectors can be used.

//Syntax
element_name { style properties }
/*all the button's present background goes red and
 font color goes white*/
button{
background-color: #E20813;
color: #000000
}

• CLASS SELECTORS(.)

Various elements can have same class. The selector is used when same or different kind of element(s) need to have a similar kind of styling.

//Syntax
.class_name { style properties }
/*all the elements having the class name of primary-color
 got the styling*/
.primary-color{
  color:#0000FF;
}

• ID SELECTOR(#)

ID mean unique as we used to have roll-numbers in schools/colleges . So , ID selector needs to be unique. Now what does this mean? This means that the two HTML elements should not have same ID name , every HTML element which has the attribute of ID should have a different name. And then using ID selector , the element with the ID of same name gets the styling.

//Syntax
#element_name { style properties }
//The element that has the id-name as list-item1 got the styling
#list-item1{
   padding: 10px;
   background-color: #ffff00
}

• COMPOUND SELECTOR

You can refer to them as chaining/and selector because this is what it does i.e. chain different selectors(as we have read so far) without any space. Let's try to understand what different chaining mean with the help of examples.

//Example1
p.primary#txt1{
 border: 5px solid #000000;
 color:#ad01ad;
}
/* This means a p tag which has a class "primary "
AND also has an id of "txt1" will get the styling 
*/

//Example2
input.btn.primary{
 background-color: #6495ed;
 border: 5px solid #ffff00;
 color: #ffffff;
}
/* This means an input tag which has a class "btn"
AND also has a class of "primary" will get the styling 
*/

NOTE: No space among the selectors.

• SELECTOR LIST/COMBINED SELECTOR(,)

It is used when same CSS is applied to different kind of elements via tag/class or id selectors. All the selectors separated by comma(,) gets the styling.

// Syntax: selector1 , selector2 {}
/* All the span element , the element with the id of 
"list-item1" and the elements with the class name of
 "para" got the styling */
span,
#list-item1,
.para {
  background-color: #ffff00;
  padding: 10px;
  color: #ff0000;
}

• DESCENDANT COMBINTOR( ) The whitespace( ) between the selectors represent descendant combinator(inside an element). Let's throw some light on it with the aid of an example

//Syntax: selector1 selector2{}
 div li {
  color: #ff0000;
 }
/*This means any "li" present inside the div AT ANY LEVEL ,
 be it direct child, grand-child, great-grand child 
and so on will get the styling.
*/

NOTE : Space between the selectors is a must.

• CHILD COMBINATOR(>)

The only difference between descendant and child combinator is that the CSS will only apply to the direct child of the parent and NOT on all children at any level.

//Syntax: selector1 > selector2{}
 div > li {
  color: #ff0000;
 }
/* This means any "li" present in the div 
as a DIRECT CHILD gets the styling.*/

• ADJACENT SIBLING COMBINATOR(+)

As adjacent mean next to something , similarly adjacent sibling combinator mean the styling would go to the immediate next sibling

//Syntax: former_element + target_element { style properties }
 .list-item2 + li {
   color: #ff0000;
   font-style: italic;
}
/*This means the styling goes to IMMEDIATE NEXT SIBLING of the element
which has the class of list-item2*/

NOTE: Had there been NO IMMEDIATE target element the CSS would'nt apply

• GENERAL SIBLING COMBINATOR(~) The styling applies to all the siblings immediate or not that are next to the former_element and satisfy the condition after (~). In our example the condition is the class should be "amazing".

  //Syntax: former_element ~ target_element { style properties }
  .list-item2 ~ .amazing {
  color: #ff0000;
  font-style: italic;
  }
  /*This means the styling goes to ALL the NEXT SIBLING(s) 
  which has the class of "amazing" of the element 
  ( class="list-item2"). 
  It isn't necessary whether the elements are immediate 
  or not*/
  

  

SUMMARY To summarize the selectors and combinators covered in the article are : Different selectors(also combinators that are type of selectors) and different ways can be used to achieve the same output . The situation and the code in hand should decide your best way to approach towards the output needed.

Here you can download all the code files used in the article: https://github.com/Parul1999/CSS-Selectors/

TRANSPILING

What is a transpiler? Transpilers, are tools that read the source code written in one language and produce the equivalent code in another language with a similar level of abstraction. It is also known as source-to-source compilers.

How transpiler works? Transpiling is the type of compilation. It switches one language (or version of a language) to another at the same number(abstraction level).

Abstraction - It refers to the important things that are visible to the user and all the working which is irrelevant to the user is hidden.

The lower the number the lower is the abstraction level.

1. CPU-level (actual logic gates on the CPU)
2. machine code
3. assembly code
4. [C/C++, JVM/bytecode]
5. [JavaScript, Python]

What is transpiling? Transpiling is the process in which the transpilers convert the source code from one language/version of the language to another language/version at the same abstraction level.

Types of transpiler There are different types of transpilers, as per the source and target language.

E.g Babel transpiler is the most popular and commonly used for converting the ES6 JS code to ES5 JS source code or any lower version.

Advantages of transpilers Transpiler's goal is that programmers do not need to rewrite or duplicate code anymore. When a new language or library comes up, programmers should be able to use and tune transpilers so legacy code does not turn out to be obsolete.

Also, taking the example of JS. The browser compatibility to the code comes into the picture. As of today, most of the browsers are compatible with ES5 and not with ES6 yet as to make a browser compatible with the new language/syntax there is a long process by when we may expect a new language/version

So, it's not as important as a compiler but has its own uses and advantages.

COMPILING

What is a compiler? A compiler is a program that processes statements written in a particular language and turns them into machine language or "code".

Machine code is the binary code i.e written in 0s and 1s and understood by the machine and hence known as machine code.

Types of compilers There are multiple compilers used for different purposes. The common ones are:

• ahead-of-time (AOT) compilers: These are typically invoked from the command line in a shell environment (from within a terminal or console) or within an IDE.

• just-in-time (JIT) compilers: These are typically not invoked directly but are instead built into software runtimes internally, for the purpose of improving performance.

How compiler works? The compiler takes the code and converts it into machine code as per the definition and the output is received.

Most compilers perform either ahead-of-time (AOT) compilation or just-in-time (JIT) compilation.

What is compiling? The process of converting a high-level code(javascript/typescript) written in any language to a low-level code/machine code is known as compilation/ compiling.

Advantages of compiling The machine won't understand a thing if the code is not compiled. So to perform any and every operation on the machine, the compilation of code is a must which leaves us with no cons.

SUMMARY