> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/code-internet-of-things-2.0/tutorials/create-security-system/4.7-web-app-html.md).

# D-7 Web App HTML

Next, you'll create a web app that will interact with your Smart Security device through Particle Cloud.

Your web app will consist of an HTML file named`index.html`, a CSS file named `style.css`, and a JavaScript file named `script.js`.

Remember that Particle Build is only used to code your Photon device app. You'll need to use a different code editor to create the HTML, CSS, and JS files for your web app. Consult your teacher to determine which code editor will be most appropriate to use for your web app files.

## Add Starter HTML

[Copy this starter HTML for your web app](https://docs.idew.org/code-internet-of-things/references/web-app#html), and paste it into a **blank** HTML file named `index.html`.

The starter HTML contains blank lines where you'll add custom HTML for your specific web app.

## Add Custom HTML

Copy this HTML, and paste it into the blank lines **within** the `<body>` of your starter HTML code:

```markup
        <h2>Smart Security System</h2>
        <div class="card">
            <h2 id="system-mode">Connecting...</h2>
            <label class="switch">
                <input type="checkbox" name="toggle" onclick="toggleMode();">
                <span class="slider round"></span>
            </label>
            <h3>Last Motion Event</h3>
            <p id="event-time">None</p>
        </div>
        <div id="motion-alert" class="card">
            <h2>Motion Detected</h2>
        </div>
```

{% hint style="success" %}
**COPY CODE:** When using this IoT code guidebook, you can copy a code block simply by clicking the **copy icon** displayed in the upper right of the code block.
{% endhint %}

## Preview Web App

If you preview the web app at this point, it's very plain (because there's no CSS in the `style.css` file) and it doesn't function yet (because there's no JS in the `code.js` file).

<div align="left"><img src="https://1128190565-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEGLBX3AeXb13IcoB4Q%2F-LKI8PaURktUe_cbO93c%2F-LKI9AMz5UL6LmL0S3n8%2Fsmart-security-web-app-html.jpg?alt=media&amp;token=312d0eb5-f682-4a5b-9733-9e356a7d5527" alt=""></div>

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/code-internet-of-things-2.0/tutorials/create-security-system/4.7-web-app-html.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.