A downloaded ZIP is useful when someone else can tell how to open it and what it can do. This lesson exports the daily-plan project, which uses local HTML, CSS and JavaScript. The result is source code. It is not an Android APK, an iPhone installation file or an automatically published website.
Check the version before exporting
Import the tutorial example and change its heading to My study plan. Run the project, check one task and add another. Export reads the current contents of all three editor tabs, so run again after editing. Otherwise, the code you download may differ from the last preview you inspected.
Export, extract and open
- Choose the workspace's project ZIP download button. It generates
haoword-app-project.zip. Your browser decides where to save it. - Locate the ZIP and extract it into a new folder. Do not test by opening just one file inside an archive viewer.
- Keep index.html, styles.css and app.js in the same directory.
- Open index.html in a browser. Its heading should match the version you exported, and its colors and spacing should be present.
- Check a task and add a new task. Compare the behavior with the workspace, then make the browser narrow to check the responsive layout.
What is in the project export?
| File | Purpose |
|---|---|
| index.html | The page entry point: headings, form and task list. |
| styles.css | Colors, spacing and mobile layout rules. |
| app.js | Task creation and completion counting. |
| brief.json | The requirements you entered in the workspace's brief form. |
| README.txt | Opening instructions and the scope of the export. |
The downloadable tutorial sample has four files; the workspace export additionally includes brief.json. During export, the workspace points the page to the same-folder stylesheet and script. It does not automatically package extra images, fonts, external libraries or a backend.
Fix differences after download
- Missing styles: check that styles.css was extracted with index.html and that you did not rename it.
- Missing interactions: confirm app.js is in the same folder and inspect any filename or path changes.
- Your own project depends on fetch or modules: unlike this dependency-free example, it may require an HTTP server, a build step or a configured backend. Opening a file directly is not a universal launch method.
- No download appears: check the browser's download panel and permissions before generating repeated copies.
Before sharing the folder
Test from a fresh extraction rather than your editing folder. Review both the code and brief.json for private information, passwords or API keys. Include an honest note: this is a static demo, tasks reset on reload, and there is no account, payment or cloud storage service. To share a public link, separately deploy the public files to a website host.
Success means you can open the extracted project independently, see the expected styling and heading, add and complete tasks, and use the narrow layout. The presence of a ZIP file alone is not the final check.