- [Instructor] To get started with this course, I've provided exercise files so you can work along with me. I also have a few tips for you to set up your environment. If you have access to the exercise files, there's a directory for each chapter and a subfolder for each video. The start folder contains the files you should use to work through the tasks in the video. The finish folder contains the same files with all of the tasks in the video completed. If you get stuck or just can't get a step to work, the finish files can be a great way to check your work or to see the finished product in action.
The app you'll be working with in this course is professionally designed and includes a number of asset files. You'll be writing your code in the all.js file, which is in the js folder in the site subfolder. The main HTML file for the site, index.html, is in the root folder. If you're viewing this course on a mobile device or a set-top device or if your membership doesn't provide access to the exercise files, that's okay. I encourage you to still follow along as we go through the course.
If you are working on a computer, you need three applications, a web browser, a code editor, and an HTTP server. You undoubtedly already have a web browser installed on your machine, and any major modern browser, Chrome, Firefox, or Microsoft Edge, is fine for this course. I'll be using Chrome in these videos, which is a popular choice among web developers because of the extensive and powerful developer tools it has built in. Because we'll only be using the Console though, that really won't make a difference for this course.
Note that if you're on a Mac and you want to use Safari, you need to go into the Advanced tab in Preferences and check the Show Develop menu in menu bar box in order to be able to access developer tools using the menu. A number of great code editors are available, both free and paid apps. Any editor that lets you edit and save plain text is fine for this course. So if you have a code editor you like, such as Sublime Text or Atom, it's fine to use it.
I use Visual Studio Code in these videos, which is a version of Microsoft's Visual Studio created specifically for web development. Visual Studio Code is free and has Windows, Mac, and Linux releases. The code is available on GitHub, and users can submit issues there as well. I've customized my editor with one extension. Open in Browser, created by TechER, let's you open the current HTML file directly in your default browser using the Alt + B or Option + B keyboard shortcut.
So this just saves a trip to the File Manager to open a file in the browser the first time. An HTTP server is the final tool you need for this course. As a web developer, this is an application you'll need to have access to. So if you don't have one installed at this point, use this as your excuse to install it. I'm using http-server, which is a command-line utility that runs under Node and is installed through the Node Package Manager, or npm. You can install Node by downloading a GUI installer from nodejs.org.
Then, once that's installed, at the command line, you simply type npm install http-server -g, where -g installs the package globally. Now, if you run into errors, you may need to use sudo to install this package. To do so, you use the same command, but you type sudo, S-U-D-O, at the start of it. Then, when you're prompted, you enter your password for your current login on your computer.
Once that install is complete, you can use the command http-server that serves the files in the current directory. Now let's get started.