> ## Documentation Index
> Fetch the complete documentation index at: https://dos.dzaleka.com/llms.txt
> Use this file to discover all available pages before exploring further.

# E-Learning Platform

> Complete guide to the community courses and educational content feature - free learning resources created by and for the Dzaleka community

## Overview

The E-Learning Platform empowers community members to share knowledge and learn new skills through free, community-created courses. From technology and business to languages and professional skills, the platform democratizes education and enables skill-building for employment and personal growth.

<Note>
  All courses are 100% free and created by educators, professionals, and experienced community members. The platform emphasizes practical, hands-on learning.
</Note>

## User Experience

### Course Discovery

<Steps>
  <Step title="Browse Courses">
    View all published courses at `/e-learning/courses` in a visual grid layout.
  </Step>

  <Step title="Filter by Category">
    Choose from Technology, Business, Languages, Arts, Health, Science, Professional Skills, or Other.
  </Step>

  <Step title="Filter by Level">
    Select Beginner, Intermediate, or Advanced to match your skill level.
  </Step>

  <Step title="Explore Featured Courses">
    See highlighted courses with the Featured badge for top recommendations.
  </Step>

  <Step title="View Course Details">
    Click any course card to see full curriculum, modules, and learning outcomes.
  </Step>
</Steps>

### Course Page Structure

Each course (`/e-learning/courses/[slug]`) includes:

* **Course header**: Title, description, difficulty level, duration
* **Author information**: Creator name and credentials
* **Thumbnail image**: Visual course representation
* **Learning objectives**: What students will achieve
* **Table of contents**: Modules and lessons outline
* **Full curriculum**: Detailed lessons with code examples, exercises
* **Resources section**: External links, references, practice sites
* **Tags**: Keywords for searchability

<CardGroup cols={2}>
  <Card title="Self-Paced Learning" icon="clock">
    Study at your own speed - no deadlines or pressure
  </Card>

  <Card title="Practical Focus" icon="code">
    Real code examples and hands-on projects in every course
  </Card>

  <Card title="Community-Created" icon="users">
    Courses designed by community members who understand local context
  </Card>

  <Card title="Completely Free" icon="heart">
    No paywalls, no subscriptions - 100% free education
  </Card>
</CardGroup>

## Content Schema

Courses are stored in `src/content/courses/` as Markdown files:

```yaml theme={null}
title: "Course Title"                         # Required
author: "Instructor Name"                     # Required
authorEmail: "instructor@email.com"           # Required
description: "Brief course overview"          # Required (for listings)
category: "technology"                        # Required - see categories
duration: "10 weeks"                          # Required (e.g., "4 weeks", "20 hours")
level: "beginner"                             # Required: beginner | intermediate | advanced
tags:                                         # Array of keywords
  - web development
  - html5
  - css3
  - javascript
thumbnail: "https://image-url.com/thumb.jpg" # Required - course image
featured: true                                # Boolean - homepage display
status: "published"                           # published | draft | archived
datePublished: 2025-11-20                     # Date (YYYY-MM-DD)
```

### Real Example from Source

From `introduction-to-web-development.md`:

```yaml theme={null}
title: "Introduction to Web Development"
author: "Dzaleka Online Services"
authorEmail: "info@mail.dzaleka.com"
description: "A comprehensive guide to modern web development covering HTML5, CSS3, JavaScript (ES6+), and essential tools. Build real-world projects from scratch."
category: "technology"
duration: "10 weeks"
level: "beginner"
tags:
  - web development
  - html5
  - css3
  - javascript
  - responsive design
  - git
thumbnail: "https://images.unsplash.com/photo-1510915228340-29c85a43dcfe"
featured: true
status: "published"
datePublished: 2025-11-20
```

With comprehensive markdown content:

```markdown theme={null}
## Course Overview

Welcome to **Introduction to Web Development**! This course is designed to 
take you from a complete beginner to a confident web developer...

**By the end of this course, you will:**
- Build professional, responsive websites
- Write clean, semantic HTML and modern CSS
- Create interactive experiences using JavaScript (ES6+)
- Use professional tools like Git, GitHub, and VS Code
- Deploy your projects to the live web

## Module 1: Getting Started

### 1.1 How the Web Works
Before writing code, it's crucial to understand the ecosystem...

### 1.2 Setting Up Your Developer Environment
...

## Module 2: HTML Fundamentals

### 2.1 Semantic HTML5
(HTML code examples here)
...
```

<Warning>
  The Web Development course example is **415 lines long** with 8 complete modules, code examples, and resources. See the full source at `src/content/courses/introduction-to-web-development.md`.
</Warning>

## How to Create a Course

<Steps>
  <Step title="Plan Your Course">
    * Choose a topic you're knowledgeable about
    * Define learning objectives (what will students achieve?)
    * Outline modules and lessons
    * Prepare code examples, exercises, or resources
  </Step>

  <Step title="Create Course File">
    Create Markdown file in `src/content/courses/`:

    ```bash theme={null}
    touch src/content/courses/introduction-to-python.md
    ```
  </Step>

  <Step title="Add Course Metadata">
    Fill in frontmatter:

    ```yaml theme={null}
    ---
    title: "Introduction to Python Programming"
    author: "Jane Doe"
    authorEmail: "jane@example.com"
    description: "Learn Python from scratch - variables, loops, functions, and building real programs"
    category: "technology"
    duration: "6 weeks"
    level: "beginner"
    tags:
      - python
      - programming
      - beginner
    thumbnail: "https://unsplash.com/python-code.jpg"
    featured: false
    status: "published"
    datePublished: 2025-03-09
    ---
    ```
  </Step>

  <Step title="Write Curriculum">
    Structure your course with clear sections:

    ````markdown theme={null}
    ## Course Overview

    This course teaches Python programming to complete beginners...

    **What you'll learn:**
    - Python syntax and fundamentals
    - Writing functions and classes
    - Working with files and data
    - Building real-world projects

    ## Table of Contents

    | Module | Topic | Duration |
    |--------|-------|----------|
    | 1 | Python Basics | 2 hours |
    | 2 | Control Flow | 3 hours |
    | 3 | Functions | 2 hours |

    ## Module 1: Python Basics

    ### 1.1 Installing Python

    Download Python from python.org...

    ### 1.2 Your First Program

    ```python
    print("Hello, Dzaleka!")
    name = input("What's your name? ")
    print(f"Welcome, {name}!")
    ````

    Try this code yourself...

    ## Resources

    * [Official Python Tutorial](https://docs.python.org/3/tutorial/)
    * [Python for Everybody (Free Book)](https://py4e.com)
    * [Practice on HackerRank](https://hackerrank.com/python)

    ````
    </Step>

    <Step title="Test & Preview">
    Run dev server and review:
    ```bash
    npm run dev
    # Visit: http://localhost:4321/e-learning/courses/introduction-to-python
    ````
  </Step>
</Steps>

## Course Submission Flow

Educators can submit courses via `/e-learning/courses/submit`:

1. **Course Proposal**: Fill out form with course details
2. **Content Upload**: Submit curriculum outline or full content
3. **Review**: Admin team reviews for quality and appropriateness
4. **Collaboration**: Work with admin to refine content if needed
5. **Publication**: Course goes live on platform
6. **Success**: Redirected to `/e-learning/courses/submit-success`
7. **Student Enrollment**: Community members can now access the course

## Technical Implementation

### Filtering System

Client-side filtering for responsive UX:

```javascript title="Course Filtering" theme={null}
function filterCourses() {
  const category = categoryFilter.value;  // technology, business, etc.
  const level = levelFilter.value;        // beginner, intermediate, advanced

  filteredCards = courseCards.filter(card => {
    const cardCategory = card.getAttribute('data-category');
    const cardLevel = card.getAttribute('data-level');

    const matchCategory = category === 'all' || cardCategory === category;
    const matchLevel = level === 'all' || cardLevel === level;

    return matchCategory && matchLevel;
  });

  currentPage = 1;
  render();
}
```

### Pagination

6 courses per page:

```javascript title="Pagination Logic" theme={null}
const itemsPerPage = 6;
let currentPage = 1;

function render() {
  const totalPages = Math.ceil(filteredCards.length / itemsPerPage);
  
  // Hide all cards first
  courseCards.forEach(card => card.style.display = 'none');

  // Show current page cards
  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const visibleCards = filteredCards.slice(start, end);
  
  visibleCards.forEach(card => card.style.display = 'flex');
  
  // Update pagination controls
  renderPaginationControls(currentPage, totalPages);
}
```

### Level Badge Styling

Color-coded difficulty levels:

```javascript title="Level Badges" theme={null}
const levelColors = {
  beginner: 'bg-green-100 text-green-700',
  intermediate: 'bg-yellow-100 text-yellow-700',
  advanced: 'bg-red-100 text-red-700',
};

// In template
<span class={levelColors[course.data.level || 'beginner']}>
  {course.data.level || 'Beginner'}
</span>
```

### Dynamic Course Cards

```astro title="Course Card Component" theme={null}
<a
  href={`/e-learning/courses/${course.id}`}
  class="course-card"
  data-category={course.data.category}
  data-level={course.data.level}
>
  <div class="aspect-video bg-gray-100">
    {course.data.thumbnail ? (
      <img src={course.data.thumbnail} alt={course.data.title} />
    ) : (
      <div class="placeholder-gradient">
        <!-- Book icon SVG -->
      </div>
    )}
    {course.data.featured && (
      <span class="featured-badge">⭐ Featured</span>
    )}
  </div>
  
  <div class="p-6">
    <div class="flex items-center gap-3 mb-4">
      <span class={levelColors[course.data.level]}>Level</span>
      <span class="category-tag">{course.data.category}</span>
    </div>
    
    <h3>{course.data.title}</h3>
    <p>{course.data.description}</p>
    
    <div class="footer">
      <div class="author">
        <div class="avatar">{course.data.author.charAt(0)}</div>
        <span>{course.data.author}</span>
      </div>
      <span class="duration">⏱️ {course.data.duration}</span>
    </div>
  </div>
</a>
```

## Course Categories

* `technology` - Programming, web dev, software, IT
* `business` - Entrepreneurship, marketing, finance
* `languages` - English, French, Swahili, etc.
* `arts` - Creative writing, music, visual arts
* `health` - Wellness, nutrition, mental health
* `science` - Biology, chemistry, physics, math
* `professional-skills` - Communication, leadership, project management
* `other` - Miscellaneous topics

## Markdown Tips for Course Content

### Code Blocks

````markdown theme={null}
```python
def greet(name):
    return f"Hello, {name}!"

print(greet("Dzaleka"))
```
````

### Tables

```markdown theme={null}
| Module | Topic | Duration |
|--------|-------|----------|
| 1 | Introduction | 1 hour |
| 2 | Advanced Topics | 3 hours |
```

### Callouts

```markdown theme={null}
> **Note:** Make sure to install Python 3.8 or higher.

> **Warning:** This command will delete all files!

> **Tip:** Use virtual environments for each project.
```

### Lists

```markdown theme={null}
## Learning Objectives

- Understand Python syntax
- Write functions and classes
- Build command-line programs
- Work with external libraries
```

## Best Practices

<CardGroup cols={2}>
  <Card title="Clear Structure" icon="list">
    Use headings (##, ###) to organize modules and lessons logically.
  </Card>

  <Card title="Practical Examples" icon="code">
    Include working code examples students can copy and run immediately.
  </Card>

  <Card title="Progressive Difficulty" icon="arrow-up">
    Start simple, build complexity gradually. Reinforce concepts.
  </Card>

  <Card title="External Resources" icon="link">
    Link to documentation, practice sites, and supplementary materials.
  </Card>
</CardGroup>

## Quality Guidelines

<Accordion title="Course Length Recommendations">
  * **Beginner courses**: 4-8 weeks, 20-40 hours
  * **Intermediate courses**: 6-10 weeks, 30-60 hours
  * **Advanced courses**: 8-12 weeks, 40-80 hours

  Break content into digestible modules (1-2 hours each).
</Accordion>

<Accordion title="Code Example Standards">
  * Always include language tag: ` ```python `
  * Add comments explaining complex logic
  * Use realistic variable names (not `x`, `y`, `z`)
  * Show complete, runnable examples
  * Include expected output when relevant
</Accordion>

<Accordion title="Writing for Beginners">
  * Define technical terms when first used
  * Use simple, clear language
  * Explain WHY, not just HOW
  * Anticipate common mistakes
  * Provide troubleshooting tips
</Accordion>

## Troubleshooting

<Accordion title="Course not appearing on platform">
  Check:

  1. `status: "published"` (not "draft")
  2. File is in `src/content/courses/` directory
  3. YAML frontmatter is valid (proper indentation)
  4. Required fields are filled (title, author, category, level, duration)
</Accordion>

<Accordion title="Code blocks not rendering properly">
  Ensure:

  * Language is specified: ` ```javascript `
  * Opening and closing ` ``` ` are on separate lines
  * No extra spaces before closing backticks
</Accordion>

<Accordion title="Thumbnail image not displaying">
  Thumbnails can be:

  * **Local**: `/images/courses/thumb.jpg` (in `public/images/courses/`)
  * **External**: Full HTTPS URL (Unsplash, Imgur, etc.)

  Recommended size: 1280x720px (16:9 aspect ratio)
</Accordion>

## Course Ideas

Popular topics for the Dzaleka community:

### Technology

* Introduction to Computer Basics
* Web Development (HTML/CSS/JavaScript)
* Mobile App Development
* Graphic Design with Free Tools (GIMP, Canva)
* Video Editing for Beginners

### Business

* Starting a Small Business in Dzaleka
* Digital Marketing on Social Media
* Financial Literacy and Budgeting
* Writing Business Plans

### Languages

* English for Beginners
* French Conversation Practice
* Swahili Essentials
* Professional English Writing

### Professional Skills

* Resume Writing and Job Applications
* Interview Skills and Preparation
* Public Speaking Confidence
* Project Management Basics
* Remote Work Best Practices

## Related Features

<CardGroup cols={3}>
  <Card title="Jobs" href="/features/jobs" icon="briefcase">
    Find employment opportunities
  </Card>

  <Card title="Services" href="/features/services" icon="building">
    Educational organizations
  </Card>

  <Card title="Community Voices" href="/features/community-voices" icon="book-open">
    Share your learning journey
  </Card>
</CardGroup>