Creating Your First Project

Follow this guide to create a simple web page, upload it, and share the live link with your teacher or classmates.

Step 1: Write Your HTML

On your computer or mobile phone, create a new folder named my-first-site. Inside this folder, create a file named index.html.

Open the file in a text editor (like Notepad, VS Code, or a mobile code editor) and paste this template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aking Unang Website</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      text-align: center;
      padding: 50px;
      background: #fafafa;
      color: #333;
    }
    h1 { color: #ff6a4d; }
  </style>
</head>
<body>
  <h1>Kamusta, Mundo!</h1>
  <p>Ito ang aking unang website na ginawa gamit ang ClassHost.</p>
</body>
</html>

html

Save the file.

Step 2: Package into a ZIP File

To deploy a folder, you must compress it into a ZIP file.

Windows: Right-click the folder my-first-site → Send to → Compressed (zipped) folder.
macOS: Right-click the folder → Compress "my-first-site".
Android/iOS: Use your file manager to compress or "zip" the folder.

[!IMPORTANT]

Ensure that index.html is sitting directly in the root of the ZIP file, not nested inside another folder level.

Step 3: Deploy via ClassHost

Click Deploy Project in the navigation bar.

Drag your ZIP file into the upload zone, or tap to select it from your device.

ClassHost will read the ZIP file in-browser and list the files detected.

Type a project name (e.g., first-project).

6. Set the visibility to Public so others can see it.

7. Tap Deploy.

Step 4: Go Live!

ClassHost will talk to GitHub to create the repository and push your code. Once deployed, you will see a card with your live URL:

https://username.github.io/first-project/

The initial activation by GitHub Pages can take up to 2 minutes. If you see a 404 Page Not Found error, don't worry! Wait one minute and refresh the page.