Build a landing page with zero dependencies: 5 rules from 56 single-file templates

Segcam spa — Tue, 14 Jul 2026 01:28:44 +0000

Most "free HTML template" downloads end the same way: you unzip it, and there's a package.json, a gulpfile, a node_modules you have to install, and a build step you have to run before you can even see the thing. For a page that is 90% text and images.

Here is the same landing page, built the other way: one file, zero dependencies.

The whole thing is this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Your product</title>
  <style>
    /* everything lives here */
  </style>
</head>
<body>
  <!-- your sections -->
  <script>
    // and here
  </script>
</body>
</html>

That's it. No CDN links, no font imports, no bundler. Open it in a browser and it runs — even with the wifi off.

The five rules that keep it clean

I've built 56 templates under this constraint. These are the rules that mattered:

1. Zero external requests. No Google Fonts, no Font Awesome, no jQuery from a CDN. Use font stacks:

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

You lose the custom typeface. You gain a page that renders instantly and never breaks because someone else's CDN is down.

2. Decorate with CSS, not images. Gradients, box-shadow and solid colors replace 90% of background images:

.hero {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 60%, #1a2332 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

No image requests, no layout shift, and the client can recolor the whole page by changing two hex values.

3. Icons as inline SVG primitives. Not <path> — primitives:

<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="9"></circle>
  <line x1="12" y1="8" x2="12" y2="13"></line>
  <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</svg>

circle, rect, line, polyline, polygon. They weigh almost nothing, they inherit currentColor, and unlike a copy-pasted <path> you can actually read what they do.

4. A mobile menu in six lines. No framework needed:

document.querySelector('.burger').addEventListener('click', function () {
  document.querySelector('.nav-links').classList.toggle('open');
});

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; }
  .burger { display: block; }
}

5. Keep it under ~650 lines. If a landing page doesn't fit in 650 lines, it's not a landing page anymore — it's an app, and you should reach for a real framework.

When this is the wrong tool

I'll be honest about the trade-off, because it's real:

App with routing, auth and state? Use a framework. Don't do this.
Site with 200 pages and a CMS? Use a static site generator.
Team of 6 editing the same page? You want components, not one big file.

But for a landing page, a portfolio, a restaurant menu, a clinic site, a coming-soon page — the toolchain is pure overhead. It costs you build errors, dependency upgrades, and a client who can't change a phone number without calling you.

Take one and try it

Here's a complete coming-soon page built this way — live countdown, email capture, responsive, one file. Free, no signup, no email wall:

👉 Download the free template

If you want to see the approach at scale, there are 56 of them (SaaS, agency, restaurant, clinic, gym, real estate, crypto, esports and more) at segcom.net — every demo is the actual file running in your browser, not a screenshot.

What would you add to the rules list?

I built 42 landing page templates as single HTML files (no npm, no build step)

Segcam spa — Mon, 13 Jul 2026 22:55:37 +0000

I got tired of downloading a "simple landing page template" and finding a 400 MB folder with npm, a build step, a config file and three CSS frameworks I never asked for.

So we built the opposite: templates that are one single HTML file. All the CSS in a <style> tag, all the JS inline. No frameworks, no CDNs, no build step, no dependencies. You open the file, you edit the text, you upload it anywhere. It works offline.

Free one: a coming-soon page

Take it, no signup, no email wall:

👉 Free coming-soon template (live demo + download)

It has a working countdown, an email capture form, feature highlights and social links. Commercial use allowed — just don't resell the template itself.

Why single-file?

Because most landing pages don't need a toolchain. They need to load fast and be easy to change.

Editable by anyone. Your client can change the phone number without calling you.
Deploy anywhere. Cloudflare Pages, Netlify, GitHub Pages, a $3 shared host, an S3 bucket.
Nothing to break. No node_modules, no lockfile, no "works on my machine".
Fast by default. One request for the HTML, zero render-blocking libraries.

The trade-off is real and I won't hide it: if you're building an app with state, routing and a dozen components, a single HTML file is the wrong tool. This is for landing pages, portfolios, restaurant menus, coming-soon pages, clinic sites — the stuff that is 90% content.

What we ended up with

We kept building them for different niches and now there are 42: SaaS, agency, e-commerce, restaurant, gym, real estate, law firm, medical clinic, crypto/Web3, podcast, esports, construction, car dealership, interior design, and more. Every one is a single file, fully responsive, with real copy instead of lorem ipsum.

You can browse the live demos here: segcom.net — the demos are the actual templates running in your browser, not screenshots.

The technical rules we follow

If you want to build your own single-file templates, these are the constraints that kept ours clean:

No external requests, at all. No Google Fonts, no icon CDNs. Font stacks only (-apple-system, Segoe UI, Roboto...).
Decoration with CSS, not images. Gradients, box-shadow and solid colors instead of background images.
Icons as inline SVG primitives or Unicode. Simple shapes (circle, rect, line) — they never break, and they weigh nothing.
Keep it under ~650 lines. If it doesn't fit, the page is doing too much.
Mobile nav must actually work. A hamburger that toggles a class, vanilla JS, 6 lines.

That's it. No magic.

If you grab the free one and it saves you an afternoon, that's a win. If you want the rest, they're at segcom.net — and if you think a niche is missing, tell me in the comments and I'll build it.

DEV Community: Segcam spa