1e41f4b71Sopenharmony_ci# Adding Pages<a name="EN-US_TOPIC_0000001054607703"></a> 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci## Creating the Home Page<a name="section16935511143715"></a> 4e41f4b71Sopenharmony_ci 5e41f4b71Sopenharmony_ciUpon creation of the project, the **index** page is automatically generated, which is the home page of AirQuality. [Figure 1](#fig16545205773718) shows the project directory. 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ci**Figure 1** Project directory<a name="fig16545205773718"></a> 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci## Creating the Details Page<a name="section122131729173819"></a> 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciTo the details page, perform the following steps: 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci1. Right-click **pages** and choose **New** \> **JS Page** from the shortcut menu. 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci **Figure 2** Adding a page<a name="fig18740145216410"></a> 17e41f4b71Sopenharmony_ci  18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci2. Enter the page name. 20e41f4b71Sopenharmony_ci 21e41f4b71Sopenharmony_ci **Figure 3** Entering the page name<a name="fig48491266714"></a> 22e41f4b71Sopenharmony_ci  23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ci3. Confirm the creation. 25e41f4b71Sopenharmony_ci 26e41f4b71Sopenharmony_ci 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\). 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ci **Figure 4** Complete project directory<a name="fig103015177819"></a> 29e41f4b71Sopenharmony_ci  30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ci 32
