• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/26/19

Configure your work environment

Log in or subscribe for free to enjoy all this course has to offer!

Now that you've had a brief intro to programming and JavaScript, it's time to get more concrete. To start programming in the right conditions, you'll need a good working environment.

Code with JavaScript online

A simple and fast solution for coding with JavaScript is to use an online "sandbox." These are websites that allow you to write HTML/CSS/JavaScript code and see the results immediately. The most famous are JSFiddle, JS Bin, and CodePen (I like CodePen)!

Logos for JSFiddle, JS Bin, and CodePen
Logos for JSFiddle, JS Bin, and CodePen

These sites are great for experimenting with and sharing code. However, it's also great to set up your own machine with a working development environment.

Code with JavaScript on your computer

Choosing a Web browser

A web browser is an application that displays web pages. All modern computers, whether desktop, portable, or mobile, probably feature a web browser. The most famous are Firefox, Chrome and Internet Explorer, but there are many.

This course uses Google Chrome, the most popular browser on the web.

Google Chrome
Google Chrome

If you don't already have Google Chrome on your computer, you can install it from this link.

Like all web browsers, Chrome is able to execute JavaScript code. We will use it to test our programs written in JavaScript. It has tools dedicated to web development which we will use a lot in this course. Open up these tools by selecting View > Developer > Developer Tools from the menu up top. 

Developer tools (JavaScript console)
Developer tools (JavaScript console)

Choose a text editor

As you learned, programming involves writing code as text in a number of files. Any text editor (yes, even Word) will allow you to create and modify text files. However, some are much better than others for working with code. In this course, I recommend using a simple text editor called Sublime Text.

Organize your code

You're almost ready to get started! It's important to set up your basic folder and file structure before actually starting to code. That way, your project will be organized, and you'll be starting off with some good programming habits! ^^

You can either create the project files for this course from scratch or use the file skeleton I've already created for you. Each chapter is set up in a series of folders as follows:

Course file structure
Course file structure

Each chapter has a folder, which contains an html and a js folder, each of which contains a file. These files are what you can fill out for each chapter, or you can create your examples on CodePen.

In your first JavaScript file (chapter-1/js/course.js if you're using the file skeleton provided), type the following content:

console.log("Hello in JavaScript!");

Add the following content in the above file's HTML equivalent, chapter-1/html/course.html.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
</head>

<body>
    <script src="../js/course.js"></script>
</body>

</html>

Not sure what you just typed? Don't worry! This is simple HTML, which uses tags like <title> or<body> to describe the content of the page.

HTML is not a programming language but a content description language. Usually, an HTML page contains many tags that display information in a structured way, such as titles, images, links to other pages, and more.

Our website is a bit special because it contains no content that will be displayed by the browser. The purpose of this page is to tell the browser that we want to execute JavaScript file through the<script> tag.

Again, you'll ultimately have the folder structure below.

Your file structure
Your file structure

Try out your first program

Once you open a web page in a browser, the content will show in the main window, and the associated JavaScript console will show up in the console below (assuming you have it open).

HTML opened in browser
HTML opened in browser

If you get this same result in your browser, two bits of great news for you:

  1. Your work environment is ready for the course.

  2. You've already written your first line of JavaScript!

Example of certificate of achievement
Example of certificate of achievement