Understanding How The Web Works(part1)
Hey there, fellow web enthusiasts and curious minds!
I’m excited to kick off a new series where I’ll be sharing my daily journey into the world of frontend and web development. Over the next 30 days, I’ll be diving deep into various topics, researching, and learning as much as I can to master frontend development.
Each day, I’ll be documenting my discoveries and insights right here. My goal is to break down complex concepts into simple, digestible bits — just as if I’m explaining them to a friend. Whether you’re a beginner or just interested in understanding how the web works, I hope you’ll find these posts helpful and engaging.
So, let’s start this adventure together! Here’s what I learned today about how the web works behind the scenes. It’s pretty cool stuff!
So, when we type a website address into our browser, a lot happens:
1. Our browser asks our Internet Service Provider (ISP), the middle man, to find the website’s IP address.
2. The ISP uses something called DNS (Domain Name System) to find the IP address.
3. Our browser then connects to the website’s server using that IP address.
4. The browser asks the server for the website’s HTML page.
5. The server sends back the HTML, and our browser starts to read it.
6. As it reads, it finds other stuff the page needs like images or CSS files, and asks for those too.
7. Finally, our browser puts it all together and shows us the webpage!
The image shows the DNS lookup process. It illustrates how a DNS client (like our computer) communicates with various DNS servers to translate a domain name (like github.com) into an IP address. The process involves querying root name servers, top-level domain servers (.com in this case), and finally the specific domain’s name server.
Below that, we see how the client-server communication works once the IP address is obtained. The client (our computer) sends a GET request to the server for the specific page (index.html in this example). The server then responds with the requested content and an HTTP status code (200 OK in this case).
I also learned about some important parts of the web:
- Clients: That’s us! Our computers and browsers.
- Servers: The computers that store websites and send them to us.
- IP addresses: Like phone numbers for computers.
- DNS: Turns website names into IP addresses.
- HTTP: The language browsers and servers use to talk to each other.
One cool thing I found out is that when we request a website, the data gets broken into tiny pieces called packets. These packets travel across the internet separately and then get put back together at the end. It’s like sending a puzzle through the mail!
Lastly, I learned that our browsers do a lot of work to turn the code they receive into the pretty websites we see. They use something called a DOM (Document Object Model) to organize all the parts of the webpage.
This tree structure represents how browsers interpret HTML documents. Starting from the ‘document’ root, it branches out into ‘html’, then ‘head’ and ‘body’ elements, and further into more specific elements like ‘h2’, ‘p’, and ‘table’. This structure allows browsers to understand the hierarchy and relationships between different parts of a webpage.
Conclusion:
Web development is complex, but understanding these basics helps a lot! Next time you load a website, think about all the amazing stuff happening behind the scenes.
