Live Server :Behind the Scenes

Started Learning HTML and CSS from Youtube

YouTube: Install a coding editor like Visual Studio Code.

You: Downloads and sets up VS Code.

YouTube: Install some extensions, like Live Server by Ritwick Dey.

You: Live Server? Okay. But what is a live server?

YouTube: (Skips the question) Make a new file named index.html.

You: Hey, wait! I want to know what a live server is.

(Hastingly scrolls through web pages to understand live servers)

Sees a friend refreshing a website repeatedly

You: Hey, why don't you use a live server for that?

Friend: Live server? Sounds complicated!

You: Not really! Think of it as a tiny computer inside your computer, just for your website.

Friend: But technically, how does this live server work?

You: When you click the live server button, it starts a server program on your machine.

Friend: But servers are big, powerful machines, right?

You: Yeah, but this one's miniaturized for your local project. It can access and serve the files within your folder only .

Friend: That's pretty cool. But how does it update the browser then?

You: The live server opens a local address in your browser, like http://localhost:5500.

Friend: Ah, localhost! So whenever a change is saved, the server detects it and...?

You: Exactly! Here's the simple process: Watches over the files: It keeps track of any changes you make. Asks browser to reload: Whenever there's a change, it tells the browser to reload. Browser updates the website: The browser then fetches the new version and updates your website. Simple!

Friend: Ayy, thanks for explaining that!