Browse Course Templates

Premade templates to browse and inspire your course content layouts. Ready to grab and go!

Warm Welcome

Set students up for success with a warm video greeting, a clear path for the rest of the semester, the week's agenda, and some visual imagery and inspiration!

Template Preview

Featured Widgets

Media Container

Welcome students with a introductory video and keep it responsive for any device.


Vocab Cards

More than just for vocab! Use these interactive cards to build on a standard list.


Table

Display tasks, due dates, and more in an organized and clear manner.


Image Gallery

Break up large chunks of text or add some flair with imagery.


Blockquote

Separate any block of text with attention-grabbing key quotes



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/css/themes/cards/styles.css">
<link rel="stylesheet" type="text/css" href="../../css/custom.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" defer></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/scripts2.js" defer></script>
<title>Course Overview</title>
</head>
<body>
<header class="header"> <img src="https://via.placeholder.com/1920X600" alt="">
  <div class="text-container">
    <h1>Course Overview</h1>
    <p>Welcome to Writing 101. This course will...</p>
  </div>
</header>
<div id="content-wrapper">
  <div class="content-body">
    <h2>Introduction to Academic Writing</h2>
    <p>In this course, you will learn the key elements of academic writing. We will...</p>
    <h3>Message from Your Instructor</h3>
    <div class="media-container">
      <div class="media-object">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/rFve845ScJ4" title="Course Introduction Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
    <h3>Course Objectives</h3>
    <p>Throughout this course, you will master the basics of writing, including...</p>
    <ul class="vocab-cards">
      <li class="vocab">
        <dt>Understanding Thesis Statements</dt>
        <dd>Learn how to craft a clear and concise thesis statement that...</dd>
        <ul>
          <li class="caption">Developing a strong argument</li>
          <li class="caption">Providing relevant evidence</li>
        </ul>
      </li>
      <li class="vocab">
        <dt>Essay Structure</dt>
        <dd>Explore the different components of an....</dd>
      </li>
      <li class="vocab">
        <dt>Evidence and Support</dt>
        <dd>Understand how to incorporate evidence from sources to support your...</dd>
        <ul>
          <li class="caption">Using credible sources</li>
        </ul>
      </li>
      <li class="vocab">
        <dt>Revision Techniques</dt>
        <dd>Practice strategies for revising and editing your work to...</dd>
      </li>
    </ul>
  </div>
</div>
<div id="second-column">
  <div class="content-body">
    <h2>Weekly Schedule</h2>
    <p>Follow the weekly schedule to stay on track with your...</p>
    <table class="display-lg">
      <thead>
        <tr>
          <th>Assignments</th>
          <th>Points</th>
          <th>Due Dates</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Read Introduction Module</td>
          <td>--</td>
          <td>Week 1</td>
        </tr>
        <tr>
          <td>Submit Thesis Statement</td>
          <td>10</td>
          <td>Week 2</td>
        </tr>
      </tbody>
    </table>
    <h3>Additional Resources</h3>
    <p>Refer to the additional resources provided to deepen your understanding of...</p>
    <div class="image-gallery">
      <div class="gallery-wrapper">
        <div class="image-box"> <img src="https://picsum.photos/id/1018/400/200" alt="Writing Tools" /> </div>
        <div class="image-box"> <img src="https://picsum.photos/id/1047/300/400" alt="Academic Books" /> </div>
        <div class="image-box"> <img src="https://picsum.photos/id/1059/500/300" alt="Study Space" /> </div>
        <div class="image-box"> <img src="https://picsum.photos/id/119/500/300" alt="Writing Desk" /> </div>
        <div class="image-box"> <img src="https://picsum.photos/id/143/800/200" alt="Research Materials" /> </div>
      </div>
    </div>
    <p>Use the images and resources provided to support your writing journey and...</p>
    <br>
    <hr>
    <blockquote class="text-center">"The art of writing is the art of discovering what you believe..." – Gustave Flaubert</blockquote>
    <hr>
  </div>
</div>
<footer>
  <div id="footer">
    <p class="text-center toggle-footnotes">[Show Footnotes]</p>
    <div class="footnotes">
      <p>For further information on academic writing, refer to the course materials and...</p>
      <ul>
        <li>Readings on...</li>
        <li>Guides on...</li>
      </ul>
    </div>
  </div>
</footer>
</body>
</html>