Skip to content

Commit 4b55b3b

Browse files
jdwilkin4jdwilkin4
authored
Update catalog docs to include creating video courses (#1192)
1 parent c8e10bb commit 4b55b3b

File tree

1 file changed

+154
-126
lines changed

1 file changed

+154
-126
lines changed

‎src/content/docs/how-to-create-catalog-items.mdx‎

Lines changed: 154 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -4,138 +4,166 @@ sidebar:
44
label: How to create catalog items
55
---
66

7-
import { Steps } from '@astrojs/starlight/components';
7+
import { Steps, Aside } from '@astrojs/starlight/components';
8+
9+
The purpose of the catalog is to offer a wide range of courses on everything from Computer Science, Math, Full Stack development and more.
10+
Some of the courses will be video based with comprehension check questions along the way. Others will be interactive with lessons, projects and quizzes.
811

912
Catalog items are standalone learning units (superblocks) that are made from a collection of blocks.
10-
These units could be created from existing blocks, or new blocks, or a mix or both.
13+
These units could be created from existing blocks, or new blocks, or a mix of both.
1114

12-
:::note
13-
In the chapter-mocule-block stucture, modules are also a collection of blocks. As a result, existing modules could be easily referenced and re-arranged into a catalog item without the need to create new block and challenge files.
14-
:::
15+
<Aside>
16+
In the chapter-module-block structure, modules are also a collection of
17+
blocks. As a result, existing modules could be easily referenced and
18+
re-arranged into a catalog item without the need to create new block and
19+
challenge files.
20+
</Aside>
1521

1622
## Creating catalog items from new blocks
1723

18-
<p>
19-
The followings are all the steps needed to create a new catalog item. Skip the
20-
block and challenge file creation steps if block and challenge files already
21-
exist.
22-
</p>
24+
The followings are all the steps needed to create a new catalog item. Skip the
25+
block and challenge file creation steps if block and challenge files already
26+
exist.
2327

2428
<Steps>
25-
<ol>
26-
<li>
27-
Add a superblock json file that includes the superblocks contents.
28-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/superblocks/learn-python-for-beginners.json'>
29-
example
30-
</a>
31-
</li>
32-
<li>
33-
List the new superblock in the superBlocks list.
34-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/curriculum.json'>
35-
example
36-
</a>
37-
</li>
38-
<li>
39-
Add the superblock to the superBlocks shared config
40-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/curriculum.ts'>
41-
example
42-
</a>
43-
</li>
44-
<li>
45-
List the new superblock in the curriculum config.
46-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/curriculum.json'>
47-
example
48-
</a>
49-
</li>
50-
<li>
51-
Add the superblock enum value in shared config.
52-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/curriculum.ts'>
53-
example
54-
</a>
55-
</li>
56-
<li>
57-
Register the superblock name mapping in the curriculum build.
58-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/src/build-curriculum.ts'>
59-
example
60-
</a>
61-
</li>
62-
<li>
63-
Include the superblock name in the certification settings.
64-
<a href='https://github.com/ahmaxed/freeCodeCamp/blob/main/packages/shared/src/config/certification-settings.ts'>
65-
example
66-
</a>
67-
</li>
68-
<li>
69-
Add superblock name in the curriculum schema.
70-
<a href='https://github.com/ahmaxed/freeCodeCamp/blob/main/curriculum/schema/curriculum-schema.js'>
71-
example
72-
</a>
73-
</li>
74-
<li>
75-
Add block configuration files.
76-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/blocks/learn-python-setup-first-steps.json'>
77-
example
78-
</a>
79-
</li>
80-
<li>
81-
Add a challenge files in the block.
82-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-intro-video.md'>
83-
example
84-
</a>
85-
</li>
86-
<li>
87-
Add the superblock page file.
88-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/pages/learn/learn-python-for-beginners/index.md'>
89-
example
90-
</a>
91-
</li>
92-
<li>
93-
Add the translation string for the superblock.
94-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/i18n/locales/english/translations.json'>
95-
example
96-
</a>
97-
</li>
98-
<li>
99-
Add the intro title and summary.
100-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/i18n/locales/english/intro.json'>
101-
example
102-
</a>
103-
</li>
104-
<li>
105-
Add the catalog entry and a topic if the topic is new.
106-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/catalog.ts'>
107-
example
108-
</a>
109-
</li>
110-
<li>
111-
Add the superblock to the catalog stage list.
112-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/curriculum.ts'>
113-
example
114-
</a>
115-
</li>
116-
<li>
117-
Add the superblock icon.
118-
<a href='https://github.com/ahmaxed/freeCodeCamp/blob/main/client/src/assets/superblock-icon.tsx'>
119-
example
120-
</a>
121-
</li>
122-
<li>
123-
Add label styling for new topics.
124-
<a href='https://github.com/ahmaxed/freeCodeCamp/blob/main/client/src/templates/Introduction/intro.css'>
125-
example
126-
</a>
127-
</li>
128-
<li>
129-
Keep the catalog test in sync.
130-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/catalog.test.ts'>
131-
example
132-
</a>
133-
</li>
134-
<li>
135-
Ensure the catalog page imports catalog config.
136-
<a href='https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/pages/catalog.tsx'>
137-
example
138-
</a>
139-
</li>
140-
</ol>
29+
30+
1. Add a superblock JSON file that includes the superblock's contents.
31+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/superblocks/learn-python-for-beginners.json)
32+
33+
2. List the new superblock in the `superBlocks` list.
34+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/curriculum.json)
35+
36+
3. Add the superblock to the `superBlocks` shared config.
37+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/curriculum.ts)
38+
39+
4. List the new superblock in the curriculum config.
40+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/curriculum.json)
41+
42+
5. Add the superblock enum value in shared config.
43+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/curriculum.ts)
44+
45+
6. Register the superblock name mapping in the curriculum build.
46+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/src/build-curriculum.ts)
47+
48+
7. Include the superblock name in the certification settings.
49+
[Example](https://github.com/ahmaxed/freeCodeCamp/blob/main/packages/shared/src/config/certification-settings.ts)
50+
51+
8. Add the superblock name in the curriculum schema.
52+
[Example](https://github.com/ahmaxed/freeCodeCamp/blob/main/curriculum/schema/curriculum-schema.js)
53+
54+
9. Add block configuration files.
55+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/structure/blocks/learn-python-setup-first-steps.json)
56+
57+
10. Add challenge files in the block.
58+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/learn-python-setup-first-steps/learn-python-intro-video.md)
59+
60+
11. Add the superblock page file.
61+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/pages/learn/learn-python-for-beginners/index.md)
62+
63+
12. Add the translation string for the superblock.
64+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/i18n/locales/english/translations.json)
65+
66+
13. Add the intro title and summary.
67+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/i18n/locales/english/intro.json)
68+
69+
14. Add the catalog entry and a topic if the topic is new.
70+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/catalog.ts)
71+
72+
15. Add the superblock to the catalog stage list.
73+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/curriculum.ts)
74+
75+
16. Add the superblock icon.
76+
[Example](https://github.com/ahmaxed/freeCodeCamp/blob/main/client/src/assets/superblock-icon.tsx)
77+
78+
17. Add label styling for new topics.
79+
[Example](https://github.com/ahmaxed/freeCodeCamp/blob/main/client/src/templates/Introduction/intro.css)
80+
81+
18. Keep the catalog test in sync.
82+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/packages/shared/src/config/catalog.test.ts)
83+
84+
19. Ensure the catalog page imports catalog config.
85+
[Example](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/pages/catalog.tsx)
86+
14187
</Steps>
88+
89+
## Creating Video Courses
90+
91+
### Selecting a New Course
92+
93+
A list of available video courses can be found on the catalog of courses spreadsheet located in the curriculum staff chat. Once you select a course, assign your name on the sheet so other team members know it is taken.
94+
95+
### Downloading the Video
96+
97+
All of the videos will be coming from the main [freeCodeCamp YouTube Channel](https://www.youtube.com/freecodecamp).
98+
99+
freeCodeCamp does not keep any of the original full video files. This means you will need to download the original video. There are many tools to do this but the recommended one is `yt-dlp`. This is a free and open source command line tool used for downloading videos.
100+
101+
Copy the video URL of the course and add it to this command here:
102+
103+
```bash
104+
yt-dlp \
105+
--extractor-args "youtube:player_js_variant=tv" \
106+
-f "bestvideo[vcodec^=avc1]+bestaudio[acodec^=mp4a]/best[ext=mp4]" \
107+
--merge-output-format mp4 \
108+
--cookies-from-browser chrome \
109+
-o "%(title)s [%(id)s].%(ext)s" \
110+
video-url-goes-here
111+
```
112+
113+
It should only take a minute or two for the download to complete. Please make sure to double check the video quality to ensure the download was successful.
114+
115+
<Aside type='tip'>
116+
It is recommended to create folders for these downloaded videos in a backup
117+
external drive to free up space on your computer. Once the video has been
118+
added to the catalog, you can delete the video from your backup.
119+
</Aside>
120+
121+
### Breaking the Video Down Into Chapters
122+
123+
Once you have downloaded the video, you will need to break it down into chapters. If you go to the original video on YouTube, the video description will provide a detailed course contents breakdown with timestamps.
124+
125+
To separate the video into chapters, you will need to use video editing software. Many editors will work for this. There are paid options like Final Cut Pro and free options like DaVinci Resolve or other similar tools.
126+
127+
Open the video in your editor of choice and add it to the timeline. Then, use your editor's cutting or splitting tool to divide the video at the timestamps listed in the description.
128+
129+
After splitting the video into sections, review each segment carefully and adjust the start and end points as needed. Once everything is aligned correctly, export each chapter as a separate video file and save them to a folder on your computer.
130+
131+
Once the video is ready, please review it to make sure the export was successful.
132+
133+
<Aside type='tip'>
134+
The timestamps in a video description do not always align perfectly with the
135+
actual beginning of a chapter. Be sure to review each section and make small
136+
adjustments before exporting.
137+
</Aside>
138+
139+
### Adding Video Chapters to the freeCodeCamp Concepts YouTube Channel
140+
141+
All of these videos will be on the [freeCodeCamp Concepts YouTube Channel](https://www.youtube.com/@freecodecampconcepts). You will need to be added as a manager of the account in order to upload the video. If you need access, please reach out to Beau.
142+
143+
Once you have access, you can start adding the videos. The video title should follow this naming convention:
144+
145+
```md
146+
chapter-course
147+
```
148+
149+
Here are some examples:
150+
151+
```md
152+
- Sum and Difference Formulas - Precalculus Course
153+
- Ensuring Correctness of Merge Sort - Introduction to Algorithms and Data Structures
154+
```
155+
156+
All videos need be unlisted and have monetization turned off.
157+
158+
<Aside type='caution'>
159+
It is really important to check all videos before uploading them to YouTube.
160+
Once you upload a video, you will not have permissions to remove it. If there
161+
is an issue with the video and it needs to be removed, you will need to change
162+
the title to `Delete video` and ask Beau to remove it from the channel.
163+
</Aside>
164+
165+
### Creating Comprehension Check Questions
166+
167+
Each video in the course will have a comprehension check question associated with it. This is to ensure that campers will engage with the video and understand the material.
168+
169+
You can review how to create comprehension check questions in this [detailed guide](/how-to-help-with-video-challenges/).

0 commit comments

Comments
 (0)