1.2 Setting up the development

Welcome to this new chapter on setting up your JavaScript development environment. To write JavaScript code you need a code editor. Several editors exist such as Sublime Text, VSCode, and Atom, but throughout this course we will use VSCode. It is lightweight, powerful, easy to use and multiplatform. You can download it from code.visualstudio.com. We will also install Node.js from nodejs.org. You don't strictly need Node to run JavaScript inside a browser, but having it on your machine is useful because we will rely on it later to install third-party libraries.

Once both tools are installed, create a new folder named js_basic. Open VSCode, then use File > Open Folder to load this folder directly. Inside it, create a new file called index.html. To scaffold the document quickly, type an exclamation mark and press Tab: this shortcut generates a complete HTML skeleton with the head and body sections.

Installing the Live Server extension

We will use a lightweight web server to serve our application during development: the Live Server extension. If you don't have it yet, install it from the VSCode extensions marketplace. Once active, right-click the file in the explorer and choose "Open With Live Server". Your default browser opens automatically on the served page.

  • If the browser doesn't open, go to File > Preferences and search for Live Server settings.
  • Adjust the default browser (Chrome here) if needed.
  • Copy the URL Live Server exposes — it contains a host and a port number.

You should now see an empty page, which is perfectly normal. Let's test the live reload feature: add an <h1>Hello World</h1> in the body. The change appears in the browser instantly, without even saving manually. The extension is working and updates the page in real time. That's all for this short demonstration. In the next video we will write our very first JavaScript code.

Summary

This lesson covers the essential setup steps for JavaScript development, including installing VS Code as the code editor and Node.js for managing dependencies. Students create their first project folder, set up an HTML file with boilerplate code using Emmet shortcuts, and install the Live Server extension to enable real-time browser auto-refresh. The lesson concludes with a practical demonstration of the Live Server functionality, showing how code changes automatically update in the browser without manual refresh.

Key points

  • Install VS Code from code.visualstudio.com as your primary code editor—lightweight, powerful, and cross-platform
  • Install Node.js from nodejs.org to manage third-party libraries and dependencies (not required to run JavaScript, but essential for a professional workflow)
  • Create a project folder and open it directly in VS Code using File > Open Folder
  • Use Emmet shortcuts (html:5 or similar) to automatically generate complete HTML boilerplate code with DOCTYPE, head, and body tags
  • Install the Live Server extension for real-time browser auto-refresh—eliminating the need to manually reload when you modify code
  • Verify the setup by making HTML changes and observing instant updates in the browser window

FAQ

Is Node.js required to run JavaScript?

No, JavaScript runs natively in web browsers and IDEs. However, Node.js is valuable for installing third-party libraries, managing dependencies, and building a professional development workflow.

What is the Live Server extension and why use it?

Live Server is a lightweight local development server that automatically refreshes your browser when you save code changes. This eliminates manual page reloads and dramatically speeds up development iteration.

What does the Emmet shortcut do in VS Code?

Emmet shortcuts (like typing 'html:5' and pressing Tab) instantly generate complete HTML boilerplate code, including DOCTYPE declaration, head section, and body tags—saving repetitive typing.