# Guide Overview

Welcome to the HTML Template guide for CasparCG! The goal of this guide is to provide you will all prerequisites and knowledge for creating high quality HTML templates as well as walk you though a basic example and some advanced concepts.&#x20;

### This Guide Will Cover

* Where to start if you have zero developing experience.
* Reference links for installing and setting up a CasparCG Server.
* How to create HTML graphics that can handle a variety of situations.
* Some advanced concepts for making HTML templates more diverse.

### This Guide Will Not Cover

* How to install or setup the CasparCG Server. But, we will provide you will some download links and resources.
* Other production related devices that can be controlled or connected to by CasparCG ( Including Decklink or Atem setup )

### About this Guide

* The word template and graphic will be used interchangeably.&#x20;
* We won't show all the code in each code snippet. Most of the time, the code will be abbreviated like in the following example. Please do not replace the previous code with the comment. We recommend cloning the [GitHub repository](https://github.com/chrisryanouellette/casparcg-guide-html-template) if you want to copy and paste since there are no abbreviations.&#x20;

```javascript
function someFunction() {
    const string = "I'm a big block of variable declarations";
    const antherString = "Me too!!!!"
}

// In another code block later in the guide

function someFunction() {
    /* Variable declarations */
    
    const hasAnA = string.includes("a");
    if(hasAnA) console.log('Yep, there is an A');
}
```

### Ending Goal

Our goal in this guide is to create a single lower third using HTML, CSS, and JS that works with CasparCG. Our finished graphic will look like the image attached below.&#x20;

![Finished HTML Template](/files/-M1qB3L-2PvK4FLkEKFg)

Although this is a basic graphic, it will provide us with the knowledge needed to scale up to a graphic of any size and complexity.&#x20;

### Contributors Wanted!

If you have completed this guide and would like to contribute any updates please [contact me](mailto:chrisryanouellette@gmail.com)!

#### Resources

* The completed [HTML Template](https://github.com/chrisryanouellette/casparcg-guide-html-template) code in this guide on GitHub's website.


---

# 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/master.md?ask=<question>
```

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.
