Templates

Official Documentation: https://docs.joomla.org/Creating_a_basic_Joomla!_template

The easiest way to make a template is to copy the example template that Joomla comes with (in J3 it is Protostar) and then mess around with it.

Minimal File Structure

You need two files to make a template, an index.php and a templateDetails.xml

The Manifest

Location: /templates/templatename/templateDetails.xml

Listing your positions means that they'll show up in the module position select box which is handy.

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.8" type="template" client="site">
    <name>templatename</name>
    <creationDate>2018-01-01</creationDate>
    <author>Some Rando</author>
    <version>1.0.2</version>
    <description>My New Template</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
    </files>
    <positions>
        <position>top</position>
        <position>bottom</position>
    </positions>
</extension>

The Layout

Location: /templates/templatename/index.php 

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>

Further Things

The template above is too minimal to be practical so you should add at least a few things.

Display module positions only if they are populated, for example if you've got a side bar and want the page fullwidth if there's no module there.

<?php if ($this->countModules('side')) : ?>
    <div class="col-md-3">
        <jdoc:include type="modules" name="side" />
    </div>
    <div class="col-md-9">
<?php else: ?>
    <div class="col-md-12">
<?php endif; ?>

You can add parameters to the template which you can then use in the frontend like:

if ($this->params->get('backgroundcolor')){
    $this->addStyleDeclaration('body { background: #' . $this->params->get('backgroundcolor') . '; ';
}

If you want to make sure you've got the regular js frameworks always running then ask JHtml to load them like:

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');