Open the preview panel in the bottom right, you shoud see our default app. It's not very exciting, but that's OK.

The HTML page that displays "Nothing here yet!". The code contains some key Angular elements that we will need as we progress.

Course Introduction

1. The left panel has two parts: the upper half contains documentation and code explanation, the lower half is the exercise we want you to complete.

2. The right panel contains code editor and preview window. Every time an exercise is submitted, we will save your code and run it. So the result will show up in the preview window.

3. A webapp is a complex project, which often contains dozens' of files (html, js, css, library dependencies ...). For the interesting of learning, we only show the most relevant files to an exercise. If you need to get an overall picture of the project, you can check the code in your github account (We push all your code in the courses to your github account).

Code structure for this course

1. We have three <meta> tags in the main index.html file which are not relevant to the course. They are used to prevent brower caching so as to see the latest result in preview window. Normally You do not need them in your own project.

2. We put the library files in the lib folder. There are references to them in index.html. We will not show them in code editor (they are quite long). The library files are angular, jquery and bootstrap css framwork.