File Setup

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

PreviousAMCP Commands Review NextCreating the HTML

Last updated 4 years ago

Was this helpful?

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

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 { }

})();

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>