Setting Up a Development Environment

Components of a Web Application

Throughout this course, you will be making "web applications". Web applications consist of three parts:

  1. HTML, which creates the elements of a webpage,
  2. CSS, which describes how the elements look, and
  3. JavaScript, which describes how the elements move

For the sake of simplicity, we will be using exclusively HTML and JavaScript in this course, although we encourage you to prettify your assignments and projects with CSS if you'd like.

Setting Up a Development Environment

There are countless IDEs one can use to write JavaScript. However, in this course, we encourage you to use a text editor instead. Text editors will give you a rawer, more hands-on understanding of how different elements of a web application interact. If you're brand-new to text editors, you might find it easiest to start with either Atom or Sublime, although if you're looking to establish some more serious hacker cred, try looking at emacs or vim.

This article provides a good and thorough introduction to how you should organize the files of your web application on your computer. To get started right away, save the following text into a file called "myapp.html":

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <h1>Hello JavaScript!</h1>
    <!-- put more HTML tags here! -->
    <script src="myapp.js"></script>
  </body>
</html>

To see this file in action, open up "myapp.html" with your web browser of choice.

Now, create a new file called "myapp.js" in the same folder as "myapp.html". This file can start with the following:

let message = "Hello JavaScript!"
console.log(message);

The console.log() function is the JavaScript equivalent of a print statement. In order to actually see the output, though, you need to open the web console in your browser. The way to do this differs from browser to browser:

If you want to change either "myapp.html" or "myapp.js", you will need to save the file, and then refresh the web page on your browser.

Play around by changing the message in "myapp.js", or by adding new tags to "myapp.html"!