Skip to content

Latest commit

 

History

History
151 lines (105 loc) · 5.84 KB

README.md

File metadata and controls

151 lines (105 loc) · 5.84 KB
Raw

GDI HTML Slides Template

Girl Develop It uses a customized HTML slide template for its open-source course content.

Our slides are powered by Reveal.js, the popular HTML presentation framework. For simplicity and ease of use, the Reveal.js files are served via CDN.

The template files reference a shared-assets folder in the main repo that hold the following folders:

  • css - Contains the gdi-theme.css stylesheet
  • imgs - Contains GDI logo images and stock (Unsplash) images
  • fonts - Contains files for GDI's primary fonts: Gotham, League Gothic and Source Sans Pro
  • js - Contains revealConfig.js file

❗ DO NOT ADD MATERIAL TO THE shared-assets FOLDER.:exclamation:

❗ If you're using new images or custom CSS or custom JS for your course, create a course-specific images, css, or js folder in your course folder and place files there.

Usage Instructions

  • Fork the parent repo where your course folder will live

  • To create a new course, duplicate the _course-template folder

  • Rename the duplicate folder with your course title

  • Review demo-gdi-slides.html for recommended ways we use Reveal.js features

    • Copy or model the demo slides and code snippets as needed
    • Keep (rather than delete) the demo-gdi-slides.html for future reference

  • To build content for a single-class course:

    • Rename template_index.html to index.html
      • Delete the duplicate index file
    • Make updates as outlined in the file's instructions, for example:
      • Update course name in the <title> tag
      • Update course name in the <footer> tag
      • etc.
    • Create course slides - (Instructions are included in template file - See also Slide Markup below)

  • To build content for a course with more than one class / session -- also known as a mini-cohort [2-3 classes] or a cohort [4+ classes]:

    • Rename template_cohort-index.html to index.html; it serves as a cover page or 'dashboard' that links to all classes in the cohort
    • Duplicate template_index.html to create subsequent class files: class1.html, class2.html, etc.
      • OPTIONAL: Create an intro.html file for instructor and course introduction
    • Create course slides - Make updates as outlined in the file's instructions

  • If using new images for your slides, create an images folder in your course folder

    • ❗ Do not add images to the shared-assets folder
    • 💡 Include credit /attribution for image(s) when possible
    • 💡 Optimize images to reduce file size
      • Use an image compression tool such as tinypng.com

  • Need or want to use custom CSS? Create a style.css file or a css folder in your course folder; add your custom code there

    • ❗ Do not add custom css to the shared gdi-theme.css file in the shared-assets folder, or add custom css file to the folder
    • Link the custom stylesheet to your course html file(s)

  • Recommended: Update this README (delete original content first) with any of the following that can help future instructors to teach the course:

    • Course goals and objectives
    • Course outline or structure
    • Teaching tips
    • Suggested exercises
    • Resources
    • etc.

  • Optional / Useful Material to Include:

    • Create folders for demos and exercises
    • Create a resources.html file to curate recommended resources, links, etc., cited in the course

Using the CHANGELOG

Live Template Slides

Example Courses

Cohort course folder structure:

Single-class course folder structure:

  • Intro to JavaScript (Update in progress)

Course Creation Tips

  • Limit the amount of content on each slide:

    • Avoid a long list of bullet points
    • Split long text content into two or more slides
    • If using RevealJS's fragments feature to present content, do so sparingly

  • Lean more towards visual content (images, gifs, videos, code snippets) to support learning concepts

  • To make the course curriculum helpful for future instructors to use:

    • Add details such as instructions for teaching the course; FAQs; suggested improvements or changes; class management tips and best practices to the course README.md
    • Add a demos and/or exercises folder to store exercises you've used or recommend for future classes

Slide Markup

Markup hierarchy needs to be <div class="reveal"> <div class="slides"> <section> where the <section> represents one slide and can be repeated indefinitely.

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
    <section>Slide 3</section>
  </div>
</div>

Publishing Your Course

Description coming...