Developer Guide

Complete setup instructions for the "Voices of Lao Cinema" website project

Project Version: 1.0 | Last Updated: 2026 | For: Junior Developers

Quick Start

Save this page as DEVELOPER_GUIDE.html and open it in your browser anytime.

Start Reading Guide

Table of Contents

  1. Part 1: Folder & File Structure
  2. Part 2: File Copy Process
  3. Part 3: Uploading to Neocities
  4. Part 4: Troubleshooting
  5. Part 5: Next Steps

Part 1: Folder & File Structure

1 Create Project Folder

Create a main folder called lao_cinema_website on your computer.

2 Create This Exact Structure

lao_cinema_website/ ← Main project folder ├── index.html ← Homepage (Main showcase) ├── events.html ← Events & Deadlines page ├── festivals.html ← At The Festivals page ├── submit.html ← Submission Form page ├── about.html ← About & Permissions page └── assets/ ← Folder for shared files ├── images/ ← For all website images └── css/ ← For all stylesheets └── core-styles.css ← MAIN STYLE FILE (You'll create this)

Important

The folder structure MUST match exactly. File paths in the HTML code depend on this structure.

Part 2: File Copy Process

Critical Warning

Follow these steps IN ORDER. Skipping steps will break the website.

Step 2.1: Create the CORE STYLE FILE

Action: Extract all visual styles into one shared file

  1. Open the original index.html (the first prototype)
  2. Find the HUGE <style> block (lines ~20 to ~200)
  3. Copy EVERYTHING from <style> to </style>
  4. Create assets/css/core-styles.css
  5. Paste the copied styles into this file
  6. REMOVE the opening <style> and closing </style> tags from what you pasted
/* What core-styles.css should look like (first few lines): */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f8fafc; color: #1e293b; line-height: 1.6; } .dev-banner { background: linear-gradient(90deg, #dc2626, #ea580c); color: white; text-align: center; padding: 15px; } /* ... and hundreds more lines of styles ... */

Step 2.2: Update ALL HTML Files

Action: Make all 6 HTML files use the shared CSS

For EACH of these files: index.html, events.html, festivals.html, submit.html, about.html

  1. Open the file in a text editor
  2. Find and DELETE the entire <style>...</style> block
  3. Add this line in the <head> section:
<link rel="stylesheet" href="assets/css/core-styles.css">

Step 2.3: Special Cases for Each File

A. For the NEW index.html (homepage):

  1. At the bottom, find this comment: <!-- Modal and Scripts -->
  2. Copy TWO things from OLD index.html:
    • The entire <div id="filmmakerModal">...</div>
    • The entire <script>...</script> block
  3. Paste them BEFORE </body> in the NEW index.html

B. For other pages (events.html, festivals.html, etc.):

These files have EXTRA styles specific to each page. DO NOT DELETE THESE!

Only remove the MAIN style block (the one with comment /* COPY AND PASTE... */)

Keep the <style> blocks that come AFTER that comment.

<!-- What festivals.html <head> should look like --> <head> <link rel="stylesheet" href="assets/css/core-styles.css"> <style> /* ONLY additional styles for festivals page stay here */ .festival-spotlight { background: white; padding: 30px; } .film-list { display: flex; flex-direction: column; } /* etc. */ </style> </head>

Part 3: Uploading to Neocities.org

1 Create Neocities Account

  1. Go to neocities.org
  2. Click "Sign Up" (free tier is enough)
  3. Choose a site name: voicesoflaocinema or similar

2 Prepare Files for Upload

Method A (Easy): Zip your entire folder

1. Right-click 'lao_cinema_website' folder 2. Select "Send to" → "Compressed (zipped) folder" 3. Upload the .zip file to Neocities

Method B (Recommended): Use Neocities CLI tool

# Install the CLI tool first npm install -g neocities # Deploy your site neocities push lao_cinema_website/

3 Upload Structure

On Neocities dashboard, upload files to match this exact structure:

[Your Site Root]/ ← Neocities automatically creates this ├── index.html ├── events.html ├── festivals.html ├── submit.html ├── about.html └── assets/ └── css/ └── core-styles.css

4 Test Your Live Site

  • Visit: https://[your-site-name].neocities.org
  • Click through ALL 5 pages
  • Test ALL navigation links
  • Test the modal on homepage (click filmmaker cards)
  • Test the form on submit.html

Part 4: Troubleshooting

Problem Likely Cause Solution
Page looks plain/no styles Forgot to link core-styles.css Add <link rel="stylesheet" href="assets/css/core-styles.css"> in <head>
Navigation links don't work Wrong file paths Links should be like href="events.html" (no leading slash)
Images don't show Wrong image paths Use src="assets/images/filename.jpg"
Modal doesn't open JavaScript not copied Copy <script> block from old index.html
Form doesn't submit No backend setup Form is static. Use Formspree.io for real forms later
Styles messed up on mobile Missing responsive CSS Ensure core-styles.css has @media queries

Pro Tips for Neocities

  • Enable HTTPS: Go to Site Settings → Enable HTTPS (free)
  • Check stats: Dashboard shows visitor statistics
  • Join webring: Get more visibility by joining Neocities webring
  • Backup regularly: Download your site files monthly
  • Custom domain: Can connect your own domain later

Part 5: Next Steps After Launch

Quick Launch Checklist

  • Created all 5 HTML files
  • Extracted styles to core-styles.css
  • Updated all HTML files to link to shared CSS
  • Copied modal & JavaScript to new index.html
  • Created Neocities account
  • Uploaded all files in correct structure
  • Tested all pages live
  • Tested all navigation links

Ready to Launch!

Your site will be live at: https://[your-site-name].neocities.org

Once everything is uploaded and tested, start the permission phase - contacting filmmakers to be featured.