First, your boss did you a huge disservice by not properly bullet pointing what they expected, though most rarely even know what Joomla or a CMS are.
Basically writing a template is not very difficult at all, if you already have a bunch of HTML and CSS this pretty much acts as your "mockup". Next I would suggest grabbing a copy of the "blank" template. What that is is exactly what it sounds like; it sets up and lays out everything that will be required to make a Joomla-recognizable template, but without any of the HTML or CSS markup of it.
You will have to tweak the XML a bit to include your meta information as well as the module positions you intend to use (there are tons of tutorials for this so I won't detail).
The next step will be to do a quick readup on how to implement module positions and content positions into a template; it's really very easy; you put <jdoc:include type="component" />
where you want your Joomla-defined content to show, and you put <jdoc:include type="modules" name="left-column" style="well" />
where you want a module position to be (note the names will be different for your implementation).
Remember, content does NOT get hardcoded into Joomla templates; that completely defeats the purpose of Joomla. Instead the template should just pretty much be a bunch of divs that layout where content will go. The actual content is done by writing or using existing modules and components.
A Joomla template consists of several files that house the JavaScript, CSS, HTML, logic PHP, and template data separately, but the template itself where the markup is, is fairly easy to design and work with. An example from my site:
<?php defined( '_JEXEC' ) or die;
include_once JPATH_THEMES.'/'.$this->template.'/logic.php';
?><!doctype html>
<html lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="apple-touch-icon-precomposed" href="<?php echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">
<!-- Le HTML5 shim and media query for IE8 support -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="<?php echo $tpath; ?>/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="<?php echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('site')).' '.$active->alias.' '.$pageclass; ?>">
<div class="page_wrapper">
<div class="page_header_wrapper hidden-xs">
<div class="page_header fixed_width">
<div class="headerbar_left">
<jdoc:include type="modules" name="headerbar-left" style="blank"/>
</div>
<div class="headerbar_right">
<jdoc:include type="modules" name="headerbar-right" style="blank"/>
</div>
</div>
</div>
<div class="main_menu_wrapper navbar">
<nav class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="120">
<jdoc:include type="modules" name="main-menu" />
</nav>
</div>
<div class="page_top_wrapper">
<div class="page_top fixed_width">
<jdoc:include type="modules" name="top" />
<jdoc:include type="message" />
</div>
</div>
<div class="column_wrapper fixed_width">
<?php if ($this->countModules( 'left-column' )) : ?>
<div class="left_column">
<jdoc:include type="modules" name="left-column" style="well" />
</div>
<?php endif; ?>
<div class="main_column">
<jdoc:include type="modules" name="main-column-top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="main-column-bottom" />
</div>
<?php if ($this->countModules( 'right-column' )) : ?>
<div class="right_column">
<jdoc:include type="modules" name="right-column" style="well" />
</div>
<?php endif; ?>
</div>
<div class="page_bottom">
<jdoc:include type="modules" name="bottom" />
</div>
<footer class="page_footer">
<jdoc:include type="modules" name="footer" />
</footer>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
You will see that laying out the HTML is quite simple.