You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# From Zero to ICSP (Ines Course Starter - Python)
2
2
3
-
Course Starter python is a starter repo based on the course framework [Ines Montani](https://ines.io/) developed for her [online opensource spaCy course](https://course.spacy.io/). Since creating this framework in April 2019, it has since become a useful tool and plateform for Data Scientists and Devellopers alike to implement their own courses in a manner similar to other popular online Data science educational plateforms.
3
+
Course Starter python is a starter repo based on the course framework [Ines Montani](https://ines.io/) developed for her [online open-source spaCy course](https://course.spacy.io/). Since creating this framework in April 2019, it has since become a useful tool and platform for Data Scientists and Developers alike to implement their own courses in a manner similar to other popular online Data science educational platforms.
4
4
5
-
This course gives the developer the versatility of a lecture slidetype informational piece followed by multiplechoice questions and coding exercises equiped with verification of the students submitted answers.
5
+
This course gives the developer the versatility of a lecture slide-type informational piece followed by multiple-choice questions and coding exercises equipped with verification of the students' submitted answers.
6
6
7
7
Ines Montani has created this framework using Gatsby and Reveal.js in the front-end and Binder and Docker in the back-end. This framework was made possible thanks to the useful JavaScript library [`Juniper`](https://github.com/ines/juniper) Ines created which can add interactive, editable and runnable code snippets to websites.
8
8
9
9
***Please Note:***
10
-
This project is under active development and there is a possibility of changes. If you would like to contribute or point out corrections, please create a new issue addressing your concern, suggestions or contribution.
10
+
This project is under active development and there are possibilities of changes. If you would like to contribute or point out corrections, please create a new issue addressing your concern, suggestions or contribution.
I hope that this thorough documentation will help you deploy, customize and troubleshoot your own Starter course. Although the Ines provides some read intructions in her `README.md` file, there were a few notes I wanted to add to it for my colleagues and others attempting to make their own course so that they can save time on troubleshooting.
16
+
I hope that this thorough documentation will help you deploy, customize and troubleshoot your Starter course. Ines provides some wonderful instructions in her `README.md` file, but I noticed there were a few notes I wanted to add to it for my colleagues and others attempting to make their course so that they can save time on troubleshooting.
17
17
18
18
You will be working with different file types including `.md` (and potentially `.rmd`), `.json`, `.py` and `.txt`.
19
-
You may need to know _some_html for additional customization, however by no means indepth.
19
+
You may need to know _some_Html for additional customization, however by no means in-depth.
20
20
21
21
let's get started.
22
22
@@ -33,18 +33,18 @@ _Make sure that you have homebrew installed in order to download `Node`_
33
33
The most important part of this installation is making sure that you are running some version of 10.
34
34
35
35
36
-
Check if you have Nodealready using command :
36
+
Check if you have `Node` installed already by using the command :
37
37
```
38
38
node --version
39
39
```
40
40
41
-
If that produces an error than you can simply download version 10 with the following command:
41
+
If that produces an error then you can simply download version 10 with the following command:
42
42
43
43
```
44
44
brew install node@10
45
45
```
46
46
47
-
If it's a version other than 10, you will **need** to downgrade/upgrade to version 1- or Gatsby will not be able to start a development server or build a page.
47
+
If it's a version other than 10, you will **need** to downgrade/upgrade to version 10 - or Gatsby will not be able to start a development server or build a page.
48
48
49
49
To change to version 10 follow the following commands:
Next you will want to install version 10 with command:
63
+
Next, you will want to install version 10 with the command:
64
64
65
65
```
66
66
brew install node@10
67
67
```
68
68
69
-
if the checkmark is currently on `node` we then unlink node from it's current version first using:
69
+
if the checkmark is currently on `node` we then unlink node from its current version first using:
70
70
71
71
```
72
72
brew unlink node
73
73
```
74
74
75
-
Everyone, will need to link version 10 that was just installed:
75
+
Everyone will need to link version 10 that was just installed:
76
76
77
77
```
78
78
brew link node@10
@@ -101,7 +101,7 @@ this should output the following:
101
101
v10.13.0
102
102
```
103
103
104
-
Now that we have this done, Gatsby installation and building the page should be must easier.
104
+
Now that we have this done, Gatsby's installation and building the page should be must easier.
105
105
106
106
### Install Gatsby
107
107
@@ -114,12 +114,12 @@ npm install -g gatsby-cli
114
114
115
115
## Running on local Server
116
116
117
-
Next to install all relavent dependencies run the following:
117
+
Next, we must install all relevant dependencies by running the following:
118
118
```
119
119
npm install
120
120
```
121
121
122
-
***NOTE: you will be prompted to `run "npm audit fix" to fix them`. I do not recommending doing this as it will burn your site down.
122
+
***NOTE: you will be prompted to `run "npm audit fix" to fix them`. I do not recommend doing this as it will burn your site down.
123
123
the output below will still build your course:
124
124
```
125
125
found 572 vulnerabilities (4 low, 4 moderate, 564 high)
@@ -138,18 +138,98 @@ You can now view DSCI-571 in the browser.
138
138
```
139
139
140
140
141
-
## Customizing
141
+
## Customization
142
142
143
-
There is a lot of different areas to make your site unique but below we are going to edit the files in a systematic way.
143
+
There is a lot of different areas to make your site unique but below we are going to edit the files systematically.
144
144
145
-
### Introduction on homepage
146
-
Unlike Ines's [Spacy Course](https://course.spacy.io/), you may want an introduction similar to what [Julia Silge]() and [Naome Ross]() did for their courses.
145
+
### Introduction on Homepage
147
146
148
-
![alt-text-1](img/julia.png"Julia Silge's course front page")![alt-text-2](naome.png"Naome Ross's course front page")
149
-
###### caption
147
+
_It's important to attribute Naome Ross and Julia Silge's courses for this section as they are responsible for the code pasted below_
150
148
151
-
To add this to your course you'll need to edit
149
+
Unlike Ines's [Spacy Course](https://course.spacy.io/), you may want an introduction similar to what [Julia Silge](https://supervised-ml-course.netlify.com/) and [Naome Ross](https://noamross.github.io/gams-in-r-course/) did for their courses.
152
150
153
151
152
+
They introduced their courses with a brief summary
| Julia Silge's course front page | Naome Ross's course front page|
155
157
158
+
This can be done by doing the following:
159
+
160
+
- Navigate into the `src/pages/` and open `index.js`
161
+
162
+
You will be adding a new `<section>` (Html code) under `<Layout isHome>` and inbetween the following two lines shown below : between
163
+
```
164
+
<Layout isHome>
165
+
<Logo className={classes.logo} aria-label={siteMetadata.title} /> # HERE
166
+
{chapters.map(({ slug, title, description }) => (
167
+
```
168
+
Here is an example of the code you can add.
169
+
170
+
```
171
+
<section>
172
+
<h1 className={classes.subtitle}> INSERT CATCHY TAG LINE HERE </h1>
173
+
<div className={classes.introduction}>
174
+
<p>
175
+
FILLER WORDS HERE. WHAT IS YOUR COURSE ABOUT? DINOSAURS? NEURAL NETS? HOW TO SURVIVE EVENTS WITH THE INLAWS? WRITE IT HERE!
176
+
</p>
177
+
</div>
178
+
</section>
179
+
```
180
+
181
+
Since we are adding new class names will are going to need to edit the document that formats the class name. This can be found in `src/styles/` in the doc `index.module.sass`.
182
+
183
+
you will need to paste the new classes as follows below into the document.
184
+
185
+
```
186
+
.subtitle
187
+
font-family: var(--font-display)
188
+
width: 600px
189
+
height: auto
190
+
max-width: 100%
191
+
margin: 0 auto 1rem
192
+
display: block
193
+
text-align: center
194
+
195
+
.introduction
196
+
width: var(--width-container)
197
+
max-width: 100%
198
+
padding: 1rem
199
+
margin: 0 auto
200
+
display: block
201
+
text-align: left
202
+
```
203
+
204
+
If you want to play with the measurements this is a welcomed opportunity to customize your course further.
205
+
206
+
### Course Homepage Information
207
+
208
+
Here is where we will be changing all the homepage information including Course Name, "About This Course", "About Me", Website and Source. All of these factors are edited in the `meta.json` file located at the root of the repo. Ines has provided [a detailed discription](https://github.com/ines/course-starter-python#metajson) of what each component is responsible for. I am simply going to add some points that could be considered helpful when navigating in this documents
209
+
210
+
| Setting | Additional Notes: |
211
+
| -------------------- | ----------------- |
212
+
|`courseId`| Ines does not have this parameter in her spacy course, however deleting this will not let the course function properly so not having this setting is not an option unless you want to explore what makes her spacy course repo different than her course-starter repo. |
213
+
|`slogan`| This will show up once you deploy your site and it will be show in the image of the link that you send. |
214
+
|`juniper.branch`| We will address this further when building a binder but note that the branch here specified is called binder. That means that we will need to edit the `requirements.txt` file and push it to the binder branch|
215
+
216
+
for guidance on the other settings refer to [Ines Montani's Documentation](https://github.com/ines/course-starter-python#metajson)
217
+
218
+
### Images, Logos, Icons, Videos and Audio files
219
+
220
+
If you have been following along here while you construct your course you may notice at this point that you have yet to change and graphics.
221
+
222
+
The `static` file is where any additional images, videos and audio files are store that you will need for the questions or slides part of your course.
223
+
224
+
I find it particularly useful to create additional files in here to address the different chapters you will be making for added clarity and organization. aka I add a folder for each chapter and save the images in it's corresponding folder.
225
+
226
+
See architechture below. Make sure to add this to your path when calling them in your md file.
227
+
228
+
```
229
+
230
+
231
+
```
232
+
233
+
To address the standard Course and bio images Ines has added a discriptive table in her course [`README.md`](https://github.com/UBC-MDS/course-starter-python#static-assets)
0 commit comments