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 followings 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 list.
   Example

3. Add the superblock to the superBlocks shared config.
   Example

4. List the new superblock in the curriculum config.
   Example

5. Add the superblock enum value in shared config.
   Example

6. Register the superblock name mapping in the curriculum build.
   Example

7. Include the superblock name in the certification settings.
   Example

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

9. Add block configuration files.
   Example

10. Add challenge files in the block.
    Example

11. Add the superblock page file.
    Example

12. Add the translation string for the superblock.
    Example

13. Add the intro title and summary.
    Example

14. Add the catalog entry and a topic if the topic is new.
    Example

15. Add the superblock to the catalog stage list.
    Example

16. Add the superblock icon.
    Example

17. Add label styling for new topics.
    Example

18. Keep the catalog test in sync.
    Example

19. Ensure the catalog page imports catalog config.
    Example

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.

Copy the video URL of the course and add it to this command here:

yt-dlp \
 --extractor-args "youtube:player_js_variant=tv" \
 -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

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.

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 to be added as a manager of the account in order to upload the video. 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 be unlisted and have monetization turned off.

Caution

It is really important to check all videos before uploading them to YouTube. Once you upload a video, you will not have permissions to remove it. If there is an issue with the video and it needs to be removed, you will need to 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.