# Part 1: Starting a Project

## Step 1: Logging into Monaca

1. Login to [Monaca](https://monaca.mobi/en/login).
2. Enter your Monaca account information.

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfWjDdeR7Tits3QiYMH%2F-MfWjjgAIt9fhrruP2ju%2Fimage.png?alt=media\&token=fe572c71-0778-4145-8c86-9fc3e8c2af48)

## Step 2: Creating a new project

After successfully signing in, you will be redirected to the Monaca dashboard. There you can create your first Monaca project. Do the following:

1. From the Monaca dashboard, choose **Create Project** or **Import** to create a new Monaca project. If you select **Create Project**, you can create a new project based on various templates or from scratch. If you choose **Import**, you can create a new project from an existing Cordova/Monaca project in a few of different ways:
   * import from URL (zip file) 
   * upload a project (zip file)
   * import from a Git repository (see [Git SSH Integration](https://en.docs.monaca.io/products_guide/monaca_ide/version_control/git_ssh_integration))
   * import from an existing GitHub repository (see [GitHub Integration](https://en.docs.monaca.io/products_guide/monaca_ide/version_control/github_integration)).

![Import a project dialog](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfWjzmPfLmaGx70RiEc%2F-MfWkQUXXzVI6qG__Ezo%2Fimage.png?alt=media\&token=70187025-1e8f-437e-8c8f-007d8c96be63)

![Create a project dialog](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgKCYVnyFVa5YdHfd-x%2F-MgKDAGeZ2uaRnUogCtj%2Fimage.png?alt=media\&token=b8b5ba5e-b753-42e0-a690-f9a2cee0e8ec)

2\. For this tutorial, we will choose the **Create Project** option. In the `Create Project` dialog, under `Sample Applications`, select the **jQuery TODO App** template by clicking its **Create New** button.

3\. Click the **Make Project** button.

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgKCYVnyFVa5YdHfd-x%2F-MgKDVBqzrGKJPVzkyAY%2Fimage.png?alt=media\&token=3e8e259d-44ff-4f61-b4b7-483b88d8b23d)

4\. You will then see the newly created project listed under the `Online` tab of the dashboard.

## Step 3: Previewing a project

Monaca Cloud IDE allows you to preview your project through a preview window without a mobile device.

{% hint style="info" %}
Some functionalities might not be previewed properly because the preview window has several limitations on Ajax requests, Cordova plugin APIs, etc. For the full list of limitations, please refer to [Usage and limitations of Live Preview](https://en.docs.monaca.io/products_guide/monaca_ide/overview#previewer-limitations).
{% endhint %}

1. From the Monaca Dashboard, open the project we just created. The Monaca Cloud IDE will open. The preview window is at the right side of the IDE by default.

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgKCYVnyFVa5YdHfd-x%2F-MgKDmwlc0FmNxzhKm0w%2Fimage.png?alt=media\&token=b5a937fd-e9eb-4550-afcd-df9636608959)

2\. Try adding some TODO items in the preview window.

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MgKCYVnyFVa5YdHfd-x%2F-MgKDpy3K-ThPlaXhziY%2Fimage.png?alt=media\&token=3572bb32-faa1-4368-aa86-cab3c8d3e952)

## Step 4: Editing a project

{% hint style="info" %}
 All editable files are listed under the `www` folder. 
{% endhint %}

1. From the `File Tree` panel, choose a file to edit. Make some changes in the `index.html` file using the code editor. For example, change the title of the app.
2. Save the changes. You will be able to see the updates instantly in the preview window. Feel free to edit the project as you wish. For a more detailed explanation about this template, please refer to [jQuery TODO App](https://en.docs.monaca.io/sampleapp/samples/todo).

{% hint style="info" %}
For more information regarding the code editor in the Monaca Cloud IDE, please refer to [Code editor](https://en.docs.monaca.io/products_guide/monaca_ide/overview#code-editor).
{% endhint %}