Table of contents
No headings in the article.
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 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!