1# Adding Pages<a name="EN-US_TOPIC_0000001054607703"></a> 2 3## Creating the Home Page<a name="section16935511143715"></a> 4 5Upon creation of the project, the **index** page is automatically generated, which is the home page of AirQuality. [Figure 1](#fig16545205773718) shows the project directory. 6 7**Figure 1** Project directory<a name="fig16545205773718"></a> 8![](figures/project-directory.png "project-directory") 9 10## Creating the Details Page<a name="section122131729173819"></a> 11 12To the details page, perform the following steps: 13 141. Right-click **pages** and choose **New** \> **JS Page** from the shortcut menu. 15 16 **Figure 2** Adding a page<a name="fig18740145216410"></a> 17 ![](figures/adding-a-page.png "adding-a-page") 18 192. Enter the page name. 20 21 **Figure 3** Entering the page name<a name="fig48491266714"></a> 22 ![](figures/entering-the-page-name.png "entering-the-page-name") 23 243. Confirm the creation. 25 26 The following figure shows the application project directory after the **detail** page is created. It contains a **.hml** layout file, a **.css** file, and a **.js** file \(containing service logic code\). 27 28 **Figure 4** Complete project directory<a name="fig103015177819"></a> 29 ![](figures/complete-project-directory.png "complete-project-directory") 30 31 32