Free course · Lesson 5 of 5

Web Hosting & Offline-First Web Concepts

In this lesson you will

Publish a site from a Git repository
Check a site before launch

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.

Worked exampleOnline / Offline Status

HTML

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

Practice exercise

Publish your profile page on a free static host from a Git repository and run the launch checklist on it.

Key takeaways

Git keeps a history and is what many hosts publish from
HTTPS is expected for every site
Compress images before launch — they are usually the heaviest part

In the full program Module 5: Publishing a Website See how this topic is taught in depth, with practical activities and an assessment.

Free self-study lesson — no certificate. For the full instructor-led program, see registration options.