Enough theory – let’s get to work. Because this is a new project, start by creating a new directory. Open Atom and choose File → Add Project Folder.... Select your front-end-dev-book directory and click New Folder. Name the new folder coffeerun and click Open.
Next, Control-click (right-click) your new coffeerun folder in Atom’s navigation panel. Choose New File and enter index.html for the filename. Control-click (right-click) on coffeerun again and choose New Folder. Name the folder scripts.
In your front-end-dev-book folder, you should now have a folder for each of your projects, ottergram and coffeerun, with similar file structures (Figure 8.5).
If you already have a terminal session open and running browser-sync,
close browser-sync using Control-C.
If you do not, open a new terminal window.
Either way, change to your new coffeerun directory
(refer to the commands in Chapter 1 if you are not sure about how to do this)
and start browser-sync again.
As a reminder, the command to start it is browser-sync start --server --files "stylesheets/*.css, scripts/*.js, *.html".
In index.html add the basic skeleton of your document. (Remember, Atom’s autocomplete will do most of this for you; just start typing “html.”)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>coffeerun</title>
</head>
<body>
</body>
</html>
You are now ready to create your first module!