# 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](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/development-setup#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
```