> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-internet-of-things/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/code-internet-of-things/tutorials/create-smart-light/3.7-web-app-html.md).
# C-7 Web App HTML
Next, you'll create a web app that will interact with your Smart Light 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`.
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 HTML
Copy this HTML, and paste it into a **blank** HTML file named `index.html`:
```markup
Smart Light
My Smart Lights
Light 1
Connecting...
```
{% 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 %}
This HTML does three main things:
1. It loads a CSS stylesheet file.
2. It loads three JavaScript files.
3. It displays a "card" with the light's name, the light's status, and a button that can be clicked to remotely toggle the light on or off.
#### LOAD CSS STYLESHEET
In the `` section, line 7 of the HTML has a `` tag to load a CSS stylesheet file. The CSS stylesheet will be used to modify the appearance of certain HTML elements in your web app.
At the moment, your web app CSS file named `style.css` is either blank or hasn't been created yet.
#### LOAD JAVASCRIPT FILES
At the bottom of the `` section, lines 16-18 of the HTML contain `