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 thegdi-theme.css
stylesheetimgs
- Contains GDI logo images and stock (Unsplash) imagesfonts
- Contains files for GDI's primary fonts:Gotham
,League Gothic
andSource Sans Pro
js
- ContainsrevealConfig.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.
-
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
toindex.html
- Delete the duplicate
index
file
- Delete the duplicate
- 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.
- Update course name in the
- Create course slides - (Instructions are included in template file - See also Slide Markup below)
- Rename
-
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
toindex.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
- OPTIONAL: Create an
- Create course slides - Make updates as outlined in the file's instructions
- Rename
-
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
- Use an image compression tool such as tinypng.com
- ❗ Do not add images to the
-
Need or want to use custom CSS? Create a
style.css
file or acss
folder in your course folder; add your custom code there- ❗ Do not add custom css to the shared
gdi-theme.css
file in theshared-assets
folder, or add custom css file to the folder - Link the custom stylesheet to your course
html
file(s)
- ❗ Do not add custom css to the shared
-
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
andexercises
- Create a
resources.html
file to curate recommended resources, links, etc., cited in the course
- Create folders for
Cohort course folder structure:
- CSS Grids Basic (Update in progress)
Single-class course folder structure:
- Intro to JavaScript (Update in progress)
-
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/orexercises
folder to store exercises you've used or recommend for future classes
- Add details such as instructions for teaching the course; FAQs; suggested improvements or changes; class management tips and best practices to the course
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>
Description coming...