Getting started

Download a Freeframe template, open it locally and find your way around the files.

Every Freeframe template is a complete website: real pages, working navigation, forms with validation, a 404 page and SEO tags. This guide takes you from a download to a site running on your computer.

Download a template#

Browse the templates and open one that fits your project.
Use the live preview to click through every page, at desktop, tablet and phone sizes.
Pick a stack (HTML + Tailwind, Next.js, Astro or WordPress) and click Download .zip. No account is needed.
Unzip it. You get a folder named after the template, for example launch/.

Each template also has its own guide, linked from its page as Documentation. It lists every page, where each setting lives and how each interactive feature works.

Run the HTML version#

Double-click index.html. Every page and link works straight from your computer, because the CSS is already compiled and all links are relative.

For a closer match to a real host, serve the folder with any static server:

cd launch
python3 -m http.server 8000   # then open http://localhost:8000

You only need Node.js if you change the Tailwind source or add Tailwind classes that the template doesn't use yet. See Rebuilding the CSS.

Run the Next.js version#

You need Node.js 24 and pnpm (npm works too).

cd launch
pnpm install
pnpm dev        # http://localhost:3000, reloads as you edit

Tailwind runs as part of the dev server, so there's no separate CSS step.

Run the Astro version#

The same tools as Next.js: Node.js 24 and pnpm (or npm).

cd launch
pnpm install
pnpm dev        # http://localhost:4321, reloads as you edit
pnpm build      # static site in dist/

Each Astro template's DOCS.md describes its folders and where its content lives.

Install the WordPress theme#

You need a WordPress 7.1 (or later) site. Don't unzip the download: WordPress installs the zip itself.

In your WordPress admin, go to Appearance > Themes > Add New Theme > Upload Theme, choose the zip and click Install Now, then Activate.
Go to Appearance > Template name setup and click Create the demo pages. It creates the pages, sets the home page and builds the menu. It never overwrites pages you already have.
Edit any page in the block editor, or the header, footer and styles in Appearance > Editor.

To try the theme first, open the template's page and click Try in WordPress Playground: a complete WordPress site with the theme installed runs in your browser, with nothing to set up.

What's in the folder#

All HTML templates share the same layout, so once you know one you know them all:

launch/
├─ index.html            home page
├─ about.html, ...       other pages
├─ 404.html              "page not found" page
├─ assets/
│  ├─ css/style.css      compiled Tailwind CSS (don't edit by hand)
│  ├─ js/main.js         menus, dark mode, forms, animations, interactive features
│  └─ img/               favicon, social image and SVG artwork
├─ src/input.css         Tailwind source: colours, fonts, components
├─ package.json          scripts to rebuild the CSS
├─ README.md             short overview
├─ DOCS.md               the full guide for this template
├─ CHANGELOG.md          what changed in each version
└─ LICENSE.txt           MIT license

The Next.js versions are standard App Router projects:

launch/
├─ src/app/              one folder per page (page.tsx), layout.tsx, globals.css, not-found.tsx
├─ src/components/       header, footer, sections and interactive pieces
├─ src/data/             content: navigation, plans, team, products...
├─ public/               images, icons and the social preview image
├─ next.config.ts        static export settings
├─ package.json          dev, build, lint and typecheck scripts
└─ DOCS.md, README.md, CHANGELOG.md, LICENSE.txt

Next steps#

Choose a stack if you're not sure which download to use.
Customise colours, fonts, text and images.
Connect the forms so messages reach you.
Deploy your site.