Web Development

Build modern, responsive websites using HTML, CSS, and JavaScript with a focus on real projects.

Level: Beginner–Advanced Beginner: 1 month • Intermediate: 2 months • Advanced: 3 months Contact for pricing

Prerequisites

No prior experience required — open to beginners.

Certificate

Awarded by Rescue Academy on successful completion of the program's assessments and final project.

Learn Online — Live Classes

Register, receive your schedule, and join live instructor-led Web Development classes on Zoom. Assignments, instructor feedback, and a certificate on completion.

Learn In Person

Attend Web Development classes in person in Juba with hands-on labs, instructor mentorship, and a certificate on completion.

What You'll Learn

HTML structure and semantic tags
CSS layout: flexbox, grid, responsive design
JavaScript basics: DOM, events, forms
Accessibility (WCAG) and mobile-first patterns
Deploying a static website and offline basics

Curriculum

Beginner

Full lessons available below

Module 1: Web Foundations (HTML5 & CSS3)

Learning objectives

Write semantic HTML and modern CSS

Lessons

Semantic HTML
Modern CSS & Custom Properties

Module 2: Responsive Web Design

Learning objectives

Build layouts that adapt to any screen size

Lessons

Flexbox & Grid Layouts
Media Queries

Module 3: JavaScript Fundamentals

Learning objectives

Manipulate the DOM and handle user events

Lessons

Variables, Functions & the DOM
Events & Interactivity

Module 4: Modern JavaScript (ES6+) & Async

Learning objectives

Use modern syntax and handle asynchronous data

Lessons

Arrow Functions & Modules
Fetch & Async/Await

Module 5: Deployment & Hosting Basics

Learning objectives

Publish a website online

Lessons

Publishing a Website
Basic Hosting & Domains

Intermediate

Outline — full lessons coming soon

Module 1: Front-End Frameworks Introduction

Learning objectives

Understand component-based thinking

Lessons

Component-Based Thinking
Intro to a Modern Framework

Module 2: Working with APIs

Learning objectives

Consume REST APIs and handle errors gracefully

Lessons

Consuming REST APIs
Handling Data & Errors

Module 3: Version Control with Git & GitHub

Learning objectives

Track changes and collaborate using Git

Lessons

Git Basics
Collaborating on GitHub

Module 4: Basic Backend Concepts

Learning objectives

Understand the client-server model

Lessons

Client-Server Model
Simple Server-Side Logic

Module 5: Building a Multi-Page Website Project

Learning objectives

Plan and build a complete website project

Lessons

Planning a Real Project
Building & Testing

Advanced

Outline — full lessons coming soon

Module 1: Full-Stack Fundamentals

Learning objectives

Connect a database to a front-end application

Lessons

Databases for the Web
Connecting Front-End to Back-End

Module 2: Authentication & Security Basics

Learning objectives

Implement basic login and avoid common pitfalls

Lessons

User Accounts & Login
Common Web Security Pitfalls

Module 3: Performance & SEO

Learning objectives

Optimize site speed and apply basic SEO

Lessons

Site Speed Optimization
Basic SEO Practices

Module 4: Freelance/Client Web Projects

Learning objectives

Scope and maintain a client website

Lessons

Scoping a Client Website
Maintenance & Support

Module 5: Capstone Project

Learning objectives

Build and deploy a complete responsive website

Lessons

Build and Deploy a Responsive Website
Final Presentation

Full Lessons — Beginner Level

1. Foundations of the Web (HTML5 & CSS3)

Modern websites are built with semantic HTML5 tags (<header>, <nav>, <article>, <section>, <footer>) that describe the meaning of content, not just its appearance. CSS3 brings style with custom properties (variables), rounded corners, flex layouts, and modern system fonts — no more complex hacks.

Use semantic tags for better accessibility and SEO.
CSS custom properties (--color-primary: #1D448A) keep themes consistent.
Modern system font stacks (system-ui, sans-serif) load instantly.
Browsers in 2026 fully support Grid, Flexbox, and border-radius.

Try it Yourself — Card Component

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Demo - Rescue Academy</title>
  <style>
    :root {
      --color-primary: #1D448A;
      --color-accent: #F2C035;
      --radius: 12px;
      --font: system-ui, -apple-system, sans-serif;
    }
    * { margin: 0; box-sizing: border-box; }
    body {
      font-family: var(--font);
      background: #f0f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 1rem;
    }
    article.card {
      background: white;
      border-radius: var(--radius);
      padding: 2rem;
      max-width: 360px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    .card h2 {
      color: var(--color-primary);
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    .card p {
      color: #374151;
      line-height: 1.6;
      margin-bottom: 1rem;
    }
    .card .badge {
      display: inline-block;
      background: var(--color-accent);
      color: #111;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Rescue Academy</h2>
    <p>Where Quality is Achieved. Build practical skills for the digital economy in South Sudan.</p>
    <span class="badge">Free Online Learning</span>
  </article>
</body>
</html>

2. Responsive Web Design

Responsive design means one website works perfectly on phones, tablets, and desktops. We use CSS Grid (or Flexbox) to create flexible layouts, and media queries to adjust styles at different screen widths.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) auto-stacks columns on small screens.
Flexbox flex-wrap: wrap does the same for simpler layouts.
Always use <meta name="viewport" content="width=device-width"> for mobile.
Test by shrinking your browser — no media query needed for basic Grid auto-fit!

Try it Yourself — 3-Column Grid

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Grid - Rescue Academy</title>
  <style>
    :root { --font: system-ui, -apple-system, sans-serif; }
    * { margin: 0; box-sizing: border-box; }
    body { font-family: var(--font); padding: 1rem; background: #f9fafb; }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      max-width: 800px;
      margin: 2rem auto;
    }
    .card {
      background: white;
      border-radius: 10px;
      padding: 1.5rem;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .card h3 { color: #1D448A; margin-bottom: 0.5rem; }
    .card p { color: #4b5563; font-size: 0.9rem; line-height: 1.5; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="card"><h3>HTML</h3><p>Structure your content with semantic tags.</p></div>
    <div class="card"><h3>CSS</h3><p>Style with modern layouts and variables.</p></div>
    <div class="card"><h3>JavaScript</h3><p>Add interactivity and dynamic behavior.</p></div>
  </div>
</body>
</html>

3. JavaScript Essentials for the Web

Modern JavaScript (ES6+) brings websites to life. You can select elements with document.querySelector(), listen for clicks with .addEventListener(), and update content or classes on the fly.

document.querySelector('.btn') finds an element on the page.
.classList.toggle('dark') adds/removes a CSS class with one command.
Arrow functions (=>) and const/let are standard in 2026.
Always use <script defer> or place scripts before </body>.

Try it Yourself — Dark Mode Toggle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo - Rescue Academy</title>
  <style>
    :root { --bg: #ffffff; --text: #111827; --font: system-ui, sans-serif; }
    body.dark { --bg: #1f2937; --text: #f9fafb; }
    * { margin: 0; box-sizing: border-box; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2rem;
      transition: background 0.3s, color 0.3s;
    }
    button {
      padding: 12px 24px;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      background: #1D448A;
      color: white;
      cursor: pointer;
      margin-top: 1.5rem;
    }
    button:hover { background: #143166; }
  </style>
</head>
<body>
  <h1>Hello, South Sudan!</h1>
  <p>Click the button to toggle dark mode.</p>
  <button id="themeBtn">Toggle Dark Mode</button>

  <script>
    const btn = document.getElementById('themeBtn');
    btn.addEventListener('click', () => {
      document.body.classList.toggle('dark');
      btn.textContent = document.body.classList.contains('dark')
        ? 'Switch to Light' : 'Toggle Dark Mode';
    });
  </script>
</body>
</html>

4. Content Management Systems (CMS)

A CMS (like WordPress, Strapi, or a headless CMS) separates content from code. Editors write content in a dashboard; developers build templates. Modern headless CMS sends data via an API (JSON), and your HTML/JS fetches it dynamically.

Content lives in the CMS database — not hardcoded in HTML.
Your frontend calls an API endpoint and renders the data with JavaScript.
This means you can update text without touching code.
Below is a simulation: a local JSON array acting as a "CMS API."

Try it Yourself — Fetching Data from a CMS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CMS Demo - Rescue Academy</title>
  <style>
    :root { --font: system-ui, sans-serif; }
    * { margin: 0; box-sizing: border-box; }
    body {
      font-family: var(--font);
      padding: 2rem;
      background: #f0f4f8;
    }
    h1 { color: #1D448A; margin-bottom: 1rem; }
    ul { list-style: none; padding: 0; max-width: 500px; }
    li {
      background: white;
      padding: 1rem 1.5rem;
      margin-bottom: 0.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .price {
      background: #F2C035;
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.85rem;
    }
  </style>
</head>
<body>
  <h1>Our Programs <small style="font-weight:400;font-size:1rem;">(from CMS)</small></h1>
  <ul id="programList"></ul>

  <script>
    // Simulated CMS API response (JSON)
    const programs = [
      { title: "Web Development", price: "$150" },
      { title: "Graphic Design", price: "$120" },
      { title: "Cybersecurity", price: "$180" }
    ];

    const list = document.getElementById('programList');
    list.innerHTML = programs.map(p =>
      `<li><span>${p.title}</span><span class="price">${p.price}</span></li>`
    ).join('');
  </script>
</body>
</html>

5. Web Hosting & Offline-First Web Concepts

Modern sites are hosted on CDNs (Content Delivery Networks) that serve files from servers close to the user — fast load times worldwide. Offline-First means your site works even without internet using a Service Worker that caches files in the browser.

A Service Worker is a script that runs in the background, intercepting network requests.
It can serve cached pages when the user is offline.
Use navigator.onLine and the online/offline events to show connection status.
Start small: check online status first, add a Service Worker later.

Try it Yourself — Online / Offline Status

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Online Status - Rescue Academy</title>
  <style>
    :root { --font: system-ui, sans-serif; }
    * { margin: 0; box-sizing: border-box; }
    body {
      font-family: var(--font);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2rem;
      background: #f0f4f8;
    }
    #status {
      padding: 1rem 2rem;
      border-radius: 10px;
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .online { background: #d1fae5; color: #065f46; }
    .offline { background: #fee2e2; color: #991b1b; }
    p { color: #4b5563; }
  </style>
</head>
<body>
  <div id="status">Checking...</div>
  <p>Disconnect your internet to see the status change.</p>

  <script>
    const statusEl = document.getElementById('status');

    function updateStatus() {
      const isOnline = navigator.onLine;
      statusEl.textContent = isOnline ? '✅ You are ONLINE' : '❌ You are OFFLINE';
      statusEl.className = isOnline ? 'online' : 'offline';
    }

    window.addEventListener('online', updateStatus);
    window.addEventListener('offline', updateStatus);
    updateStatus(); // run on load
  </script>
</body>
</html>

Quick Quiz — Foundations

💡 Quick Tip: You are reading the free online version of this lesson. To get a certificate, attend in-person training and complete all assessments.

Tools & Technologies

VS Code
Web Browser Developer Tools

Career Opportunities

Junior web or software developer
Freelance developer for local businesses and NGOs
IT/software role in a company or government office

Practical Projects

Build and deploy a complete, responsive multi-page website for a real or fictional local business
Recreate a simple landing page from a design reference, matching layout and responsiveness

Ready to register for Web Development?

WhatsApp: +211926196668 Email: rescueacademy26@gmail.com