(Progress persistence is disabled until Phase 9)
Browsers, Servers & Development Tools
Understand how web browsers and servers interact, and the tools developers use to write HTML.
Learning Objectives
- Understand the basic relationship between a web browser and a server
- Learn how browsers render HTML
- Understand what text editors and live servers are
Web Browsers & Servers
When you type a URL like google.com into your address bar and press Enter, a lot happens behind the scenes in just a fraction of a second.
To be a web developer, you need to understand the relationship between a Client (your web browser) and a Server (a computer storing the website).
How It Works
- The Request: Your web browser (like Chrome, Safari, Firefox, or Edge) sends a request over the internet to a remote Server asking for a specific webpage.
- The Response: The Server receives the request, finds the correct files, and sends them back to your browser. These files are typically HTML, CSS, and JavaScript.
- The Rendering: Your browser receives the HTML file and reads it from top to bottom. It interprets the tags and renders (draws) the visual webpage on your screen.
You can think of a web browser as a translator. It takes the raw, structural HTML code written by a developer and translates it into the beautiful, visual interface that a user interacts with.
Development Tools
To write HTML, you don’t need expensive software. Since HTML is just plain text, you can write it in any simple text editor (like Notepad on Windows or TextEdit on Mac).
However, professional developers use specialized text editors designed for writing code.
Code Editors
The most popular code editor today is Visual Studio Code (VS Code). Code editors provide helpful features like:
- Syntax Highlighting: Coloring the code so it is easier to read (e.g., tags are blue, text is white).
- Auto-completion: Automatically closing tags when you open them.
- File Management: Easily organizing complex website folders.
When you create an HTML file on your computer, you simply save it with a .html extension, like index.html. You can then double-click this file to open it directly in your web browser.
Live Server
When you edit an HTML file on your computer and save it, your browser does not automatically update. You have to click the “Refresh” button in your browser to see your changes.
To speed up development, developers use a tool called a Live Server (often installed as an extension in VS Code).
A Live Server creates a small, local server on your computer. When you save your HTML file, the Live Server automatically forces your browser to refresh. This is called live reload, and it allows you to see your changes instantly as you type!
While learning here on BrowserCode, you don’t need to install VS Code or a Live Server. Our built-in Playground acts as your editor and provides instant live rendering automatically!
Key Takeaways
- Servers store website files and send them over the internet when requested.
- Browsers receive HTML files and render them visually on your screen.
- Developers write HTML using Code Editors (like VS Code) and save files with a
.htmlextension. - Live Server tools automatically refresh the browser when you save your code, speeding up the development process.