> For the complete documentation index, see [llms.txt](https://bimwhale.gitbook.io/ifc-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bimwhale.gitbook.io/ifc-js/developer-guide/step-by-step/start-a-new-example.md).

# Start a New Example

Let's fork the project and create a new example. We can copy everything from `examples/00`.

Please note that we are **not** going to bundle the JS for our example. Therefore, I will add some nice folder strucutre. The main JS file will be called `main.js` and the rest of the files will be put in `assets/js/`. Make sure to update the HTML. We should have something like this:

{% tabs %}
{% tab title="index.html" %}

```markup
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../resources/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="./assets/css/styles.css" />
    <script src="../libs/three.js"></script>
    <script src="../libs/smooth-zoom.js"></script>
    <title>IFC.js</title>
  </head>
  <body>
    <div id="loading" class="loaderBackground">
      <div class="loader"></div>
    </div>
    <div id="generalContainer">
      <div id="GUI">
        <input readonly type="file" id="openFileDialog" />
        <button
          class="normalButton"
          onclick="document.getElementById('openFileDialog').click();"
        >
          Open
        </button>
      </div>
      <canvas id="c"></canvas>
    </div>
    <script src="../libs/chevrotain.min.js"></script>
    <script src="../libs/OrbitControls.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>
```

{% endtab %}

{% tab title="main.js" %}

```javascript
import { foo } from './assets/js/foo.js';
import { bar } from './assets/js/bar.js';
```

{% endtab %}
{% endtabs %}

Please note that I have moved the CSS into the assets folder.
