# Adding Pages<a name="EN-US_TOPIC_0000001054607703"></a>

## Creating the Home Page<a name="section16935511143715"></a>

Upon creation of the project, the  **index**  page is automatically generated, which is the home page of AirQuality.  [Figure 1](#fig16545205773718)  shows the project directory.

**Figure  1**  Project directory<a name="fig16545205773718"></a>  
![](figures/project-directory.png "project-directory")

## Creating the Details Page<a name="section122131729173819"></a>

To the details page, perform the following steps:

1.  Right-click  **pages**  and choose  **New**  \>  **JS Page**  from the shortcut menu.

    **Figure  2**  Adding a page<a name="fig18740145216410"></a>  
    ![](figures/adding-a-page.png "adding-a-page")

2.  Enter the page name.

    **Figure  3**  Entering the page name<a name="fig48491266714"></a>  
    ![](figures/entering-the-page-name.png "entering-the-page-name")

3.  Confirm the creation.

    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\).

    **Figure  4**  Complete project directory<a name="fig103015177819"></a>  
    ![](figures/complete-project-directory.png "complete-project-directory")