File Setup

A detailed description of the major components used to create an HTML Template.

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 calledlower-third.1.html. After, open the file in your favorite code editor, we recommend VS Code, and add the following code snippet. This will give us a starting point to build the rest of the graphic from. 

<!DOCTYPE html>
<!-- lower-third.1.html -->
<html>
    <head>
        <meta charset="utf-8">
        <title>Lower Third 1</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <script src=""></script>
    </body>
</html>

We can now start up the http-server package we installed in the Development Setup section.

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. 

/* SCSS File - lower-third.1.scss */

body {
    background-color: transparent;
    display: flex;
    margin: 0;
}

We will also update our HTML file's style link.

<!-- lower-third.1.html -->
<link rel="stylesheet" href="../css/lower-third.1.css">

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.

'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. 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.

<!-- lower-third.1.html -->
<script src="../js/lower.1.js"></script>
PreviousAMCP Commands ReviewNextCreating the HTML

Last updated