E-Learning Platform - Dzaleka Online Services

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.

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

User Experience

Course Discovery

Browse Courses

View all published courses at /e-learning/courses in a visual grid layout.

Filter by Category

Choose from Technology, Business, Languages, Arts, Health, Science, Professional Skills, or Other.

Filter by Level

Select Beginner, Intermediate, or Advanced to match your skill level.

Explore Featured Courses

See highlighted courses with the Featured badge for top recommendations.

View Course Details

Click any course card to see full curriculum, modules, and learning outcomes.

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

Self-Paced Learning

Study at your own speed - no deadlines or pressure

Practical Focus

Real code examples and hands-on projects in every course

Community-Created

Courses designed by community members who understand local context

Completely Free

No paywalls, no subscriptions - 100% free education

Content Schema

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

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:

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:

## 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)
...

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.

How to Create a Course

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

Create Course File

Create Markdown file in src/content/courses/:

touch src/content/courses/introduction-to-python.md

Add Course Metadata

Fill in frontmatter:

---
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
---

Write Curriculum

Structure your course with clear sections:

## 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

</Step>

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

Course Submission Flow

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

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

Technical Implementation

Filtering System

Client-side filtering for responsive UX:

Course Filtering

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:

Pagination Logic

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:

Level Badges

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

Course Card Component

<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

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

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

Tables

| Module | Topic | Duration |
|--------|-------|----------|
| 1 | Introduction | 1 hour |
| 2 | Advanced Topics | 3 hours |

Callouts

> **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

## Learning Objectives

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

Best Practices

Clear Structure

Use headings (##, ###) to organize modules and lessons logically.

Practical Examples

Include working code examples students can copy and run immediately.

Progressive Difficulty

Start simple, build complexity gradually. Reinforce concepts.

External Resources

Link to documentation, practice sites, and supplementary materials.

Quality Guidelines

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).

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

Writing for Beginners

Define technical terms when first used
Use simple, clear language
Explain WHY, not just HOW
Anticipate common mistakes
Provide troubleshooting tips

Troubleshooting

Course not appearing on platform

Check:

status: "published" (not “draft”)
File is in src/content/courses/ directory
YAML frontmatter is valid (proper indentation)
Required fields are filled (title, author, category, level, duration)

Code blocks not rendering properly

Ensure:

Language is specified: ```javascript
Opening and closing ``` are on separate lines
No extra spaces before closing backticks

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)

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

Jobs

Find employment opportunities

Services

Educational organizations

Community Voices

Share your learning journey

Get Started

Core Features

Cultural Heritage

Content Management

​Overview

​User Experience

​Course Discovery

​Course Page Structure

Self-Paced Learning

Practical Focus

Community-Created

Completely Free

​Content Schema

​Real Example from Source

​How to Create a Course

​Resources

​Course Submission Flow

​Technical Implementation

​Filtering System

​Pagination

​Level Badge Styling

​Dynamic Course Cards

​Course Categories

​Markdown Tips for Course Content

​Code Blocks

​Tables

​Callouts

​Lists

​Best Practices

Clear Structure

Practical Examples

Progressive Difficulty

External Resources

​Quality Guidelines

​Troubleshooting

​Course Ideas

​Technology

​Business

​Languages

​Professional Skills

​Related Features

Jobs

Services

Community Voices

Overview

User Experience

Course Discovery

Course Page Structure

Content Schema

Real Example from Source

How to Create a Course

Resources

Course Submission Flow

Technical Implementation

Filtering System

Pagination

Level Badge Styling

Dynamic Course Cards

Course Categories

Markdown Tips for Course Content

Code Blocks

Tables

Callouts

Lists

Best Practices

Quality Guidelines

Troubleshooting

Course Ideas

Technology

Business

Languages

Professional Skills

Related Features