A website you can take home

A website you can download has an unusually persuasive feature: its editor cannot accidentally replace it with a pricing page next Tuesday.

Site Workshop builds a single-page site from Bootstrap components. You edit the layout in your browser, keep a local project, and export HTML, CSS, JavaScript and images together. The useful outcome is a folder you can understand and host somewhere else.

Build a project page that earns its space

Start with Project landing page. Give it one job: explain something you made and help a visitor take the next step.

1. Rename the project in the toolbar. This is the name you see in your local project list.
2. Click the main heading. Replace it with what the project actually does. “A quieter enclosure for my printer” tells somebody more than “Innovation, reimagined.”
3. Add a photograph through Images. Select the placeholder on the canvas and choose Use image. Supply alternative text that conveys the image’s useful information; a purely decorative image can have empty alt text.
4. Edit the feature cards into three concrete points: the problem, the approach, and what changed. Remove a card if you only have two points. Three is not a law of nature.
5. Use Layers to move sections. Use the section’s ID field and the link destination picker to connect navigation to the right place.
6. Set the page title and description under Page settings, then choose colors and typography under Page theme.

The initial layouts use Bootstrap’s responsive grid and components. Their structure is a starting point; the writing, images and usefulness still need a person. Bootstrap examples

Preview the behavior, not just the screenshot

The editing canvas lets you reach content inside an accordion. Preview shows the packaged page with its real expand/collapse behavior. Test the navbar on the phone preview, follow your section links, and open every FAQ answer.

Check at narrow and wide widths. Read the page using the keyboard. A library supplies useful mechanisms, but accessibility still depends on the author’s markup, labels, color choices and content. Bootstrap explicitly describes this shared responsibility. Bootstrap accessibility

For a concrete review, imagine someone asking: “What is this, is it relevant to me, and where do I go next?” If the page answers all three without a scavenger hunt, the layout is doing its job.

Two downloads, two purposes

Download website ZIP is the finished site. Extract it and open index.html. Keep the assets folder beside it when uploading to a static host. Bootstrap files and used images travel with the page; there is no build command to run.

Editable backup is the design project. Reopen that ZIP through Projects to continue in Site Workshop, including the component structure and images. GrapesJS recommends preserving its project JSON for reliable editing rather than reconstructing a project from HTML and CSS. GrapesJS storage documentation

The website ZIP contains ordinary files you can modify elsewhere. It does not contain the editor itself. Keep both downloads if you want the deployable result and the convenient route back to visual editing.

Test the departure

Before publishing your page:

• Extract the website ZIP into a new folder.
• Open index.html and check that images appear.
• Disconnect the network and test its layout and accordion again. External destinations naturally need their usual network connection or application.
• Serve the same folder through your intended static host and repeat the navigation checks.
• Open your editable backup in Site Workshop and confirm the content and images survived.

Site Workshop supports single-page static websites. Email links open a mail application; they are not a contact-form service. There is no checkout, database, login system or arbitrary JavaScript editor hiding behind a decorative button.

Local save is not an archive

Your browser keeps working projects in IndexedDB. Browser storage quotas and eviction policies vary, and clearing site data can remove the saved projects. An editable backup is the copy you control outside that storage. MDN: storage quotas and eviction

Once the editor has loaded, you can continue editing and exporting offline. Reloading the editor offline is outside this version’s guarantee.

The point of portability is pleasantly unglamorous: when you leave the tool, you still have the thing you made.

Put this to work

• Open Site Workshop — Assemble, edit and export your page.
• Browser Capability Lab — Try browser operations and inspect what succeeds.
• What your lockfile actually proves — Understand what a dependency record does and does not establish.

Sources reviewed 15 September 2026. The project-page scenario above is illustrative, not a report of a physical build or measured printer performance.

More field notes