P0.1: Software Downloads & Setup
Before writing your first line of code, you must equip your computer with the industry-standard software tools that every professional web developer uses daily.
1. Google Chrome Browser
Google Chrome is the primary browser used by developers because of its fast rendering engine and powerful built-in developer tools.
- Download: Download Google Chrome
- Tip: Once installed, we will use it to test and debug all our HTML, CSS, and JavaScript projects.
2. Visual Studio Code (VS Code)
VS Code is the most popular code editor in the world. It provides syntax highlighting, auto-completion, and extensions to make writing code incredibly fast.
- Download: Download VS Code
- Tip: During installation, check the box that says "Add to PATH" and "Register Code as an editor" so you can open projects directly from the terminal.
3. Git (Version Control System)
Git is a tool that tracks history and changes in your project files. It is the backbone of developer collaboration.
- Download for Windows: Download Git for Windows
- Download for macOS: Open your terminal and run
git --version(macOS will prompt you to install Xcode Command Line Tools automatically). - Tip: On Windows, installing Git will also install Git Bash, which provides a clean Linux-like terminal interface.
4. Node.js (JavaScript Runtime)
Node.js allows us to run JavaScript outside the browser and gives us access to npm (Node Package Manager) to install tools and packages like React, Vite, and Next.js.
- Download: Download Node.js (LTS Version)
- Tip: Choose the LTS (Long Term Support) version as it is the most stable version for learning and production.
Brad TraversyView Profile 🔗
Real-World Developer Case Study“I started with nothing, struggling to install local tools. Once I set up VS Code and git, the world opened up. Don't worry about complexity. Take it one download at a time!”
🎓 Practice Assignment
- Download and install all 4 tools above (Chrome, VS Code, Git, and Node.js).
- Open VS Code, create a new file named
test.html, type<h1>Environment Ready!</h1>, save it, and open it in Google Chrome to verify.