How to create catalog items

The purpose of the catalog is to offer a wide range of courses on everything from Computer Science, Math, Full Stack development and more. Some of the courses will be video based with comprehension check questions along the way. Others will be interactive with lessons, projects and quizzes.

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

Note

In the chapter-module-block structure, 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.

Creating catalog items from new blocks

The following are all the steps needed to create a new catalog item. Skip the block and challenge file creation steps if block and challenge files already exist.

1. Add a superblock JSON file that includes the superblock’s contents.
   Example

2. List the new superblock in the superblocks array in the curriculum config.
   Example

3. Add the superblock to the SuperBlocks enum in shared config. If its structure uses chapters and modules, also add it to chapterBasedSuperBlocks.
   Example

4. Register the superblock in superBlockNames in the curriculum build.
   Example

5. Add the superblock to superBlockToCertMap in the certification settings. Use null if the superblock does not award a certification.
   Example

6. Add the superblock name in the curriculum schema.
   Example

7. Add block configuration files.
   Example

8. Add challenge files in the block.
   Example

9. Add the translation string for the superblock. Example

10. Add the superblock’s entry to intro.json, following the documented format. Include a summary for the catalog and entries for every block, even when reusing existing blocks. If the superblock uses chapters and modules, include their titles and any coming-soon module introductions. Example

11. Add an entry to catalog with the superblock, level, estimated hours and topic. If the topic is new, add it to the Topic enum. Example

12. Add the superblock to superBlockStages[SuperBlockStage.Catalog]. Example

13. Add the superblock icon. Example

14. For a new topic, add its display name under curriculum.catalog.topic in the English translation file and add a .block-label-<topic> rule for its styling. Translations and label styles

Creating Video Courses

Selecting a New Course

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.

Downloading the Video

All of the videos will be coming from the main freeCodeCamp YouTube Channel.

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.

You need to have yt-dlp installed to download the video.

You also need FFmpeg installed to merge the separate video and audio streams selected by the command below. Depending on how you installed yt-dlp, you may need additional setup for YouTube support. Follow the yt-dlp JavaScript setup guide to check whether you need to install a JavaScript runtime or the challenge solver scripts.

Copy the video URL of the course and replace video-url-goes-here in this command. The command reads cookies from Chrome; replace chrome with your browser if needed:

yt-dlp \
 -f "bestvideo[vcodec^=avc1]+bestaudio[acodec^=mp4a]/best[ext=mp4]" \
 --merge-output-format mp4 \
 --cookies-from-browser chrome \
 -o "%(title)s [%(id)s].%(ext)s" \
 "video-url-goes-here"

Download time depends on the video size and your connection. Check the video and audio after the download finishes.

Tip

It is recommended to create folders for these downloaded videos in a backup external drive to free up space on your computer. Once the video has been added to the catalog, you can delete the video from your backup.

Breaking the Video Down Into Chapters

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.

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.

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.

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.

Once the video is ready, please review it to make sure the export was successful.

Tip

The timestamps in a video description do not always align perfectly with the actual beginning of a chapter. Be sure to review each section and make small adjustments before exporting.

Adding Video Chapters to the freeCodeCamp Concepts YouTube Channel

All of these videos will be on the freeCodeCamp Concepts YouTube Channel. You will need channel access with permission to upload videos, such as the Editor or Manager role. If you need access, please reach out to Beau.

Once you have access, you can start adding the videos. The video title should follow this naming convention:

chapter-course

Here are some examples:

- Sum and Difference Formulas - Precalculus Course
- Ensuring Correctness of Merge Sort - Introduction to Algorithms and Data Structures

All videos need to be unlisted and have monetization turned off.

Caution

Check all videos before uploading them to YouTube. Editors cannot delete published videos; Managers can. If a video needs to be removed and your role does not allow it, change the title to Delete video and ask Beau to remove it from the channel.

Creating Comprehension Check Questions

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.

You can review how to create comprehension check questions in this detailed guide.