logo
Course

Environment Setup

Video thumbnail
Course icon

Sign up to watch this lesson (and more).

By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

You'll also be the first to know about upcoming launches, events, and exclusive discounts.

No spam—just helpful content to level up your skills.

If that sounds fair, go ahead and log in to continue →

Enter your name and email to get instant access

or

Already have an account? Log in
Lecture Summary

Before starting your JavaScript journey, it's essential to set up a proper development environment for a smooth learning experience.

Key Takeaways:

  • Choose a Browser: Any modern browser (Chrome, Firefox, Edge, or even Arc) will suffice for testing your JavaScript code.
  • Install Node.js: While not mandatory, having Node.js installed allows you to run JavaScript outside the browser and is crucial for exploring tools in the future.
  • Install Git: It’s not required for the course, but Git is essential for your development growth.
  • Select a Code Editor: Popular choices include WebStorm and VS Code. Customize your editor for a more personal touch.
  • Keep It Simple: Start with basic tools and only add extensions as needed to create an intuitive environment.

Transcript

00:00:00 Before diving into the exciting world of JavaScript, let's set up your development environment for a seamless learning and development experience.

00:00:08 First, choose a browser.

00:00:11 Since JavaScript runs in the browser, you'll need one to test your code.

00:00:15 If you're already using a browser like Chrome, Firefox, or Edge, you're good to go.

00:00:20 However, if you're looking for something fresh, I recommend trying Arc.

00:00:24 Arc is a new browser with a lot of cool features, such as a collapsible sidebar for better focus, customizable spaces to organize work,

00:00:33 and full-screen views without the traditional top bar.

00:00:36 That said, any browser will work perfectly fine for this course, so use the one you're most comfortable with.

00:00:42 All browsers offer amazing developer tools, allowing you to do a range of things, from inspecting currently loaded HTML,

00:00:50 CSS, and JavaScript, to showing which assets the page has requested and how long they took to load.

00:00:56 You can open up DevTools in any browser by right-clicking the site and clicking Inspect.

00:01:01 Or you can also use a shortcut, command option J on Mac or F12 on your keyboard.

00:01:07 The second step is to install Node.js.

00:01:11 Although this course doesn't cover backend development, having Node installed is a great idea.

00:01:16 It allows you to run JavaScript outside the browser, and it's a must-have if you plan to explore tools like package managers or frameworks in the future.

00:01:25 So, head over to nodejs.org and download the latest long-term support version.

00:01:30 Installation is straightforward and varies slightly based on your operating system.

00:01:36 The third step is to install Git.

00:01:39 While it's not mandatory to have Git installed for this course, it's absolutely essential for your growth as a developer.

00:01:46 It's a non-negotiable.

00:01:48 You can download Git from its website, and if you haven't used it before, I'll link our complete Git and GitHub course below this lesson so you can learn

00:01:57 how to use it quickly and efficiently.

00:01:59 Number four is of course to choose your code editor.

00:02:02 The code editor is where you'll spend most of your time writing JavaScript.

00:02:07 The two most popular options are WebStorm and VS Code.

00:02:11 WebStorm is a powerful IDE with features like intelligent code assistance and free access for non-commercial use.

00:02:19 And VS Code is lightweight, highly customizable, and packed with features.

00:02:24 Feel free to explore themes to personalize your editor's appearance.

00:02:28 I personally use the Fira code font with ligatures and a catpuchin mocha theme for a dark and sleek look.

00:02:36 And step five is to keep it simple.

00:02:38 You don't need to install every tool or extension right now.

00:02:41 Start with the basics and add more as you go.

00:02:44 The goal is to have an environment that feels intuitive and supports your learning.

00:02:49 So with our environment ready, you're all set to dive into this course.

Before diving into the exciting world of JavaScript, let’s set up your development environment for a seamless learning and development experience.

1. Choose a Browser

Since JavaScript runs in the browser, you’ll need one to test your code. If you already have a browser like Chrome, Firefox, or Edge, you’re good to go. However, if you’re looking for something fresh, I recommend trying Arc. Arc is an innovative browser with:

  • A collapsible sidebar for better focus.
  • Customizable spaces to organize work.
  • Full-screen views without the traditional top bar.

That said, any browser will work perfectly fine for this course, so use the one you’re most comfortable with.

All browsers offer amazing include developer tools allowing you to do range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.

You can open dev tools in any browser by right-clicking the site and clicking inspect. You can also use the shortcut: Cmd + Option + J (on Mac) or F12 on your keyboard.

Arc Browser
faviconhttps://arc.net/download
thumbnail

2. Install Node.js

Although this course doesn’t cover backend development, having Node.js installed is a great idea. It allows you to run JavaScript outside the browser, and it’s a must-have if you plan to explore tools like package managers or frameworks in the future.

  • Head to Node.js and download the latest LTS (Long-Term Support) version.
  • Installation is straightforward and varies slightly based on your operating system.

3. Install Git

While it's not mandatory to have Git installed for this course, it's absolutely essential for your growth as a developer. It's non-negotiable.

You can download Git from it's website.

And if you haven’t used it before, I’ll link our complete Git and GitHub Course so you can learn how to use them quickly and effectively.

4. Choose a Code Editor

Your code editor is where you’ll spend most of your time writing JavaScript.

Here are two popular options:

  • Visual Studio Code (VS Code): Lightweight, highly customizable, andpacked with features. It’s the editor I’ll use throughout this course.
  • WebStorm: A powerful IDE with features like intelligent code assistance and free access for non-commercial use.

Feel free to explore themes to personalize your editor’s appearance. I personally use the Catppuccin Mocha theme for a dark and sleek look.

5. Keep It Simple

You don’t need to install every tool or extension right now. Start with the basics and add as you go. The goal is to have an environment that feels intuitive and supports your learning.

With your environment ready, you’re all set to dive into this course!

0 Comments

glass-bbok

No Comments Yet

Be the first to share your thoughts and start the conversation.

tick-guideNext Lesson

Welcome to the Dev Career Accelerator Blueprint