Adding Media and Resources

In this lesson, you will learn how to enhance your course by adding various types of media and resources. This includes images, videos, and downloadable files that can help illustrate concepts and provide additional value to your learners.

Adding Images

Images can significantly enhance your course content by providing visual explanations or examples. Here’s how to add images to your course:

Place your image files in the appropriate directory:
```
static/images/courses/<your-course-name>/
```

Use the following syntax in your Markdown content to embed an image:

![Alternative text](/images/courses/<your-course-name>/image-name.png)

Example:

![Git Workflow](/images/courses/git-basics/git-workflow.png)

Adding Videos

Videos can be particularly useful for demonstrating processes or explaining complex concepts. You can embed videos from various sources:

Place your video files in the appropriate directory if you want to use local files:
```
static/videos/courses/<your-course-name>/
```
Note: Local videos should only be used in exceptional cases (e.g., if no external platform like YouTube/Vimeo is possible), as they can significantly impact loading times and hosting requirements.

Specify the video source in the front matter of your lesson. You can use any of the following options:

---
video:
  local: /videos/courses/<your-course-name>/lesson-video.webm  # Local file
  # youtube: dQw4w9WgXcQ                # YouTube video ID
  # vimeo: 123456789                    # Vimeo video ID
  # external: https://.../video.mp4     # External video file
  # embed: "<iframe ...></iframe>"      # Any embed code
---

The video will automatically be displayed at the top of your lesson page, whether it is local, from YouTube, Vimeo, an external URL, or via embed code.

Tip: Use the existing image field in the front matter as the video thumbnail (poster).

Adding Downloadable Resources

You can provide additional resources for your learners to download, such as PDF guides, code examples, or practice files.

Place your downloadable files in the appropriate directory:
```
static/resources/courses/<your-course-name>/
```

Create a link to the downloadable resource in your Markdown content:

[Download practice files](/resources/courses/<your-course-name>/practice-files.zip)

Best Practices for Using Media

Use relevant media: Ensure that all media included directly supports your lesson content.
Optimize file sizes: Large files can slow down page load times. Compress images and videos wherever possible.
Provide alternative text: Always include descriptive alternative text for images to improve accessibility.
Balanced use of media: While media can enhance learning, avoid overuse. Find a balance between text and media content.

Exercise: Enhance Your Lesson with Media

Add at least one image to the lesson you wrote in the previous exercise.
If applicable, include a short video demonstration in your lesson.
Create a simple downloadable resource (e.g., a PDF cheat sheet) and add a link to it in your lesson.

In the next lesson, we will cover how to preview and test your course locally before submitting it.

Content Creation