136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
--------------------------------------------------------------------------------
/_course-template/README.md:
--------------------------------------------------------------------------------
1 | # GDI HTML Slides Template
2 |
3 |
4 |
5 | - [GDI HTML Slides Template](#gdi-html-slides-template)
6 | - [Usage Instructions](#usage-instructions)
7 | - [Using the CHANGELOG](#using-the-changelog)
8 | - [Live Demo and Template Slides](#live-template-slides)
9 | - [Example Courses](#example-courses)
10 | - [Course Creation Tips](#course-creation-tips)
11 | - [Slide Markup](#slide-markup)
12 | - [Publishing Your Course](#publishing-your-course)
13 |
14 |
15 |
16 | ---
17 |
18 | **Girl Develop It** uses a customized HTML slide template for its open-source course content.
19 |
20 | Our slides are powered by [Reveal.js](https://revealjs.com/), the popular HTML presentation framework. For simplicity and ease of use, the Reveal.js files are served via CDN.
21 |
22 | The template files reference a **`shared-assets`** folder in the [main repo](/shared-assets/) that hold the following folders:
23 |
24 | - `css` - Contains the `gdi-theme.css` stylesheet
25 | - `imgs` - Contains GDI logo images and stock (Unsplash) images
26 | - `fonts` - Contains files for GDI's primary fonts: `Gotham`, `League Gothic` and `Source Sans Pro`
27 | - `js` - Contains `revealConfig.js` file
28 |
29 | :exclamation: DO NOT ADD MATERIAL TO THE **`shared-assets`** FOLDER.:exclamation:
30 |
31 | :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.
32 |
33 | ---
34 |
35 | ## Usage Instructions
36 |
37 | - Fork the parent repo where your course folder will live
38 |
39 |
40 | - To create a new course, duplicate the `_course-template` folder
41 |
42 |
43 | - Rename the duplicate folder with your course title
44 |
45 |
46 | - Review `demo-gdi-slides.html` for recommended ways we use Reveal.js features
47 |
48 | - Copy or model the demo slides and code snippets as needed
49 | - Keep (rather than delete) the `demo-gdi-slides.html` for future reference
50 |
51 |
52 | - To build content for a [single-class course](#examples):
53 |
54 | - Rename `template_index.html` to `index.html`
55 | - Delete the duplicate `index` file
56 | - Make updates as outlined in the file's instructions, for example:
57 | - Update course name in the `` tag
58 | - Update course name in the `<footer>` tag
59 | - etc.
60 | - Create course slides - (Instructions are included in template file - See also [Slide Markup](#slide-markup) below)
61 | <br/>
62 |
63 | - To build content for a course with [more than one class / session](#examples) -- also known as a **mini-cohort** _[2-3 classes]_ or a **cohort** _[4+ classes]_:
64 |
65 | - Rename `template_cohort-index.html` to `index.html`; it serves as a cover page or 'dashboard' that links to all classes in the cohort
66 | - Duplicate `template_index.html` to create subsequent class files: `class1.html`, `class2.html`, etc.
67 | - OPTIONAL: Create an `intro.html` file for instructor and course introduction
68 | - Create course slides - Make updates as outlined in the file's instructions
69 | <br/>
70 |
71 | - If using new images for your slides, create an `images` folder in your course folder
72 |
73 | - :exclamation: Do not add images to the `shared-assets` folder
74 | - :bulb: Include credit /attribution for image(s) when possible
75 | - :bulb: Optimize images to reduce file size
76 | - Use an image compression tool such as tinypng.com
77 | <br/>
78 |
79 | - 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
80 |
81 | - :exclamation: 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
82 | - Link the custom stylesheet to your course `html` file(s)
83 | <br/>
84 |
85 | - **Recommended**: Update this `README` (delete original content first) with any of the following that can help future instructors to teach the course:
86 |
87 | - Course goals and objectives
88 | - Course outline or structure
89 | - Teaching tips
90 | - Suggested exercises
91 | - Resources
92 | - etc.
93 | <br>
94 |
95 | - **Optional / Useful Material to Include**:
96 | - Create folders for `demos` and `exercises`
97 | - Create a `resources.html` file to curate recommended resources, links, etc., cited in the course
98 |
99 | ### Using the CHANGELOG
100 |
101 | ## Live Template Slides
102 |
103 | - [GDI Demo Slides](https://girldevelopit.github.io/gdi-html-css/_course-template/demo-gdi-slides.html)
104 | - [Template Index Slides](https://girldevelopit.github.io/gdi-html-css/_course-template/template_index.html)
105 | - [Template Cohort Index / Dashboard](https://girldevelopit.github.io/gdi-html-css/_course-template/template_cohort-index.html)
106 |
107 | ## Example Courses
108 |
109 | Cohort course folder structure:
110 |
111 | - [CSS Grids Basic](https://github.com/girldevelopit/gdi-html-css/tree/main/css-grid-basics) (_Update in progress_)
112 | - [Live Slides](https://girldevelopit.github.io/gdi-html-css/css-grid-basics/)
113 |
114 | Single-class course folder structure:
115 |
116 | - Intro to JavaScript (_Update in progress_)
117 |
118 | ## Course Creation Tips
119 |
120 | - Limit the amount of content on each slide:
121 |
122 | - Avoid a long list of bullet points
123 | - Split long text content into two or more slides
124 | - If using RevealJS's [fragments feature](https://revealjs.com/fragments/) to present content, do so sparingly
125 | <br>
126 |
127 | - Lean more towards visual content (images, gifs, videos, code snippets) to support learning concepts
128 | <br>
129 |
130 | - To make the course curriculum helpful for future instructors to use:
131 |
132 | - 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`
133 | - Add a `demos` and/or `exercises` folder to store exercises you've used or recommend for future classes
134 |
135 | ## Slide Markup
136 |
137 | Markup hierarchy needs to be `<div class="reveal"> <div class="slides"> <section>` where the `<section>` represents one slide and can be repeated indefinitely.
138 |
139 | ```html
140 | <div class="reveal">
141 | <div class="slides">
142 | <section>Slide 1</section>
143 | <section>Slide 2</section>
144 | <section>Slide 3</section>
145 | </div>
146 | </div>
147 | ```
148 |
149 | ## Publishing Your Course
150 |
151 | _Description coming..._
152 |
--------------------------------------------------------------------------------
/_course-template/template_index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <head>
4 | <meta charset="utf-8" />
5 | <meta
6 | name="viewport"
7 | content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
8 | <meta
9 | name="description"
10 | content="Girl Develop It framework for easily creating beautiful presentations using HTML in GDI theme. Based on Hakim El Hattab's reveal.js" />
11 | <meta
12 | name="author"
13 | content="Girl Develop It" />
14 | <meta
15 | name="apple-mobile-web-app-capable"
16 | content="yes" />
17 | <meta
18 | name="apple-mobile-web-app-status-bar-style"
19 | content="black-translucent" />
20 |
21 | <!-- Update with GDI Course Name -->
22 | <title>GDI HTML Slides Template
23 |
24 |
28 |
29 |
30 |
33 |
36 |
40 |
41 |
42 |
45 |
46 |
47 |
50 |
51 |
52 |
55 |
56 |
57 |
71 | 
153 | 
213 |