# File Setup
### HTML File Setup
To begin, let's create a new folder called `html-lower-third`. This will hold all the file we create during the guide.
Open the folder and create another folder called `html`. In the `html` folder create an HTML file called`lower-third.1.html`. After, open the file in your favorite code editor, we recommend [VS Code](https://code.visualstudio.com/), and add the following code snippet. This will give us a starting point to build the rest of the graphic from.
```markup
Lower Third 1
```
We can now start up the `http-server` package we installed in the [Development Setup section](/casparcg-html-template-guide/development-setup.md#using-the-web-server).
### SASS / CSS File Setup
Sass will watch our files for changes but it requires we put the files in a sub-directory. So we will first create two folders in our root folder, `scss` and `css`. Next we can create the SCSS file called `lower-third.1.scss` in the `scss` folder and add the following code to it. This will clean up the browser's default styling for the `body` element.
```css
/* SCSS File - lower-third.1.scss */
body {
background-color: transparent;
display: flex;
margin: 0;
}
```
We will also update our HTML file's style link.
```markup
```
### JavaScript File Setup
Finally, we can create a JavaScript file called `lower-third.1.js` in a new folder called `js`. We will use this to setup and animate the graphic.
```javascript
'use strict';
// lower-third.1.js
const _graphic = (function() {
// Variables and function defined here will not
// be available in the global scope
function handleError(e) {console.error(e)}
function handleWarning(w) {console.log(w)}
return { }
})();
```
The variable `_graphic` is assigned to an Immediately Invoked Function Expression or IIFE for short. A full breakdown on how IIFEs work can be found on [MDN's website](https://developer.mozilla.org/en-US/docs/Glossary/IIFE). For now, all you need to know is that any variables or functions defined inside the IIFE will not be usable outside the function. If we need to use a function defined inside the IIFE outside of it, then we can return a reference to the function. We will get more into this later.
We will also define a function called `hanleError` and `handleWarning` which log errors or warnings to the console.
Don't forget to update the `lower-third.1.html` file with the `script` tag.
```markup
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/html-templates/the-basics.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.