Building a Custom Local Start Page to Replace Cluttered Browser Tabs

Two plain files, one folder, and about fifteen minutes of editing will give your scattered tabs a permanent, readable home. This walkthrough builds that page from the ground up, explaining each choice as it goes.

Quick Nav

• Tabs Kept Open Only to Remember an Address
• Setting Up the start-page Folder and Its Two Files
• Writing index.html as Three Groups of Links
• Styling the Lists as an Adaptive Tile Grid
• Reloading, Testing Keys and Zoom, and Picking a Browser Setting
• Swapping the Everyday Placeholders for Your Own Destinations

Tabs Kept Open Only to Remember an Address

Look at your tab strip right now. Some of those tabs are probably open for one reason only: you didn't want to lose the address. A reference page, a writing tool, an odd little site you meant to come back to. Each one is a bookmark in disguise.

The habit compounds. Once a dozen pile up, finding the right one turns into its own search task, with favicons squeezed to slivers. Close the window by accident and the whole makeshift directory disappears with it.

This tutorial replaces that habit with a small, editable HTML page that groups your destinations into lists, plus a stylesheet that lays them out as a responsive grid. No account, no feed, no extension, nothing to sync. It borrows the spirit of the hand-built link pages from the early web: a personal web directory you own and can rewrite in a text editor, instead of one more dashboard demanding upkeep.

The page starts with three groups: Everyday, Make Something, and Explore. Treat them as sorting prompts for your own destinations. They aren't a recommended-tools list, and every sample link deliberately points nowhere.

Setting Up the start-page Folder and Its Two Files

Two files sitting side by side in one folder make up the entire architecture. You need:

• A plain-text editor (any editor that saves raw text, not a word processor)
• A web browser
• A folder named start-page, kept somewhere stable you won't tidy away next month

start-page/ index.html style.css

Keep both files at the same directory level. That way href="/style.css" resolves without any extra path segment, and the link between them can't drift.

Making Sure the Extensions Are Real

Some editors quietly append .txt when you save. In the save dialog, pick plain text or an "All Files" option where one exists. Then turn on filename-extension display in your file manager and confirm the names read index.html and style.css, not index.html.txt or style.css.txt. A hidden .txt is the most common reason a first attempt shows raw markup instead of a page.

Why file:// Is Enough Here

Double-clicking index.html opens it through a file:// address, shaped roughly like file:///path/to/start-page/index.html. Treat that as an illustration only; copy the actual address from your browser's address bar rather than assembling a path by hand. A localhost address means something different: a server process running on your own machine and answering requests. Server-side code needs one. A directory made of static links and a single relative stylesheet doesn't, so this tutorial stays on the local-file route throughout.

One side effect worth knowing: the HTML and CSS stay readable with no network connection at all. Following an https:// link is a separate trip to that website.

Writing index.html as Three Groups of Links

Here is the whole document. Paste it into index.html and save.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Personal Web Directory</title> <link rel="stylesheet" href="/style.css"> </head> <body> <main> <h1>My Personal Web Directory</h1> <p>A small home for places worth returning to.</p> <section aria-labelledby="everyday-heading"> <h2 id="everyday-heading">Everyday</h2> <ul class="link-grid"> <li><a href="https://example.invalid/daily-reference">Replace: daily reference</a></li> <li><a href="https://example.invalid/regular-task">Replace: regular task</a></li> </ul> </section> <section aria-labelledby="make-heading"> <h2 id="make-heading">Make Something</h2> <ul class="link-grid"> <li><a href="https://example.invalid/writing-space">Replace: writing space</a></li> <li><a href="https://example.invalid/creative-resource">Replace: creative resource</a></li> </ul> </section> <section aria-labelledby="explore-heading"> <h2 id="explore-heading">Explore</h2> <ul class="link-grid"> <li><a href="https://example.invalid/web-archive">Replace: web archive</a></li> <li><a href="https://example.invalid/unusual-site">Replace: unusual site</a></li> </ul> </section> </main> </body> </html>

Walk through the structure from the top:

1. The doctype, lang="en", and UTF-8 charset tell the browser how to parse and announce the page. The viewport line keeps narrow windows from rendering a shrunken desktop layout.
2. The only external resource is the local style.css. No fonts, no scripts, and no target="_blank" on the links.
3. One main landmark holds one h1 and three section elements, each labelled by its own h2. That gives screen readers and keyboard users a plain reading order.
4. Every list carries the same link-grid class. Adding a fourth group means copying a section and changing its heading and id. You never write a new layout rule.

Each example.invalid address is a deliberately broken placeholder. To replace one, edit the text between href="/ and the closing quote, then edit the label between > and </a>. Name the destination or the task. Six tiles that all say "click here" defeat the purpose.

Paste From Your Bookmarks

Copy the full https:// address from an existing bookmark or the address bar instead of retyping it. A dropped character in a hand-typed URL is easy to miss until the tile fails.

Styling the Lists as an Adaptive Tile Grid

Three values carry most of this layout: a 64rem maximum page width, a 0.75rem gap between tiles, and a 12rem preferred tile width. Everything else is spacing and colour. Paste this into style.css:

:root { --page-width: 64rem; --tile-gap: 0.75rem; --page-bg: #f5f2e9; --text: #242824; --tile-bg: #ffffff; --link: #174c75; --border: #a5afa7; --hover-bg: #e4eee6; --focus: #7b2d12; } * { box-sizing: border-box; } body { margin: 0; background: var(--page-bg); color: var(--text); font-family: system-ui, sans-serif; line-height: 1.6; } main { max-width: var(--page-width); margin-inline: auto; padding: 2rem 1rem 3rem; } h1, h2 { line-height: 1.25; } h1 { margin: 0 0 1rem; } section { margin-top: 2.5rem; } h2 { margin: 0 0 0.75rem; }.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--tile-gap); list-style: none; margin: 0; padding: 0; }.link-grid li { min-width: 0; }.link-grid a { display: block; height: 100%; padding: 1rem; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--tile-bg); color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: anywhere; }.link-grid a:hover { background: var(--hover-bg); text-decoration-thickness: 0.15em; }.link-grid a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

The grid line deserves a closer read. repeat(auto-fit, minmax(..., 1fr)) lets the browser decide how many columns fit, so you never hard-code a count. The inner min(100%, 12rem) handles the edge case: when the container itself is narrower than 12rem, a tile may shrink to the full available width instead of overflowing sideways.

Making the anchor display: block with height: 100% and 1rem of padding turns the whole tile into the click target. Underlines stay on. Hover thickens the underline and tints the background, while keyboard focus gets a separate 3px outline, so the two states never look identical. overflow-wrap: anywhere and min-width: 0 on the list item let a long label wrap inside its tile rather than stretching the grid.

Three controls cover most customization:

• --page-width: try 48rem for a more compact directory.
• --tile-gap: try 1rem for more breathing room between tiles.
• The colour variables: change them as a set, keeping text readable and the focus outline clearly visible against neighbouring backgrounds.

A caveat on those numbers: I picked the padding, spacing, and outline width as deliberate design settings, and they haven't been through a formal accessibility audit. Check your own colour changes against your own eyes and tools.

Reloading, Testing Keys and Zoom, and Picking a Browser Setting

Open index.html from the folder in your browser. Now change one visible label in the editor, save, and reload the tab. Seeing your edit appear connects the two halves of the workflow, and from here on every change follows that same save-and-reload loop.

Trace the Stylesheet Chain

If the links show up as a plain bulleted list, leave the grid rules alone for now. Follow the chain first: local index.html, its href="/style.css" reference, then a sibling file with exactly that name. Letter case matters on case-sensitive filesystems, and a stray .txt breaks the match.

Once all six placeholders hold real addresses, run this sequence:

1. Follow every destination and confirm it lands where you expect.
2. Press Tab repeatedly. Focus should move in document order, Everyday then Make Something then Explore, and each focused tile should show the outline. Press Enter to open one.
3. Narrow the window until the content is roughly 320 to 400 CSS pixels wide. Tiles should stack without horizontal scrolling.
4. Zoom to 150%, then 200%, and look for clipped or overlapping labels.

Those widths and zoom levels are inspection settings. Passing them on your machine tells you about your browser today, nothing more.

Homepage, Startup Page, and New Tab Are Three Settings

Browsers separate these. The homepage is what the Home button loads. The startup page controls what appears when the browser launches. The new-tab page is a third thing entirely, and setting your homepage leaves new tabs untouched. Whether a file:// address is accepted in any of these fields, and what each setting is called, differs between browsers and versions. The dependable fallback works everywhere: bookmark the local file and pin its tab.

Swapping the Everyday Placeholders for Your Own Destinations

Start with the Everyday row. Fill its two tiles with the destinations you keep searching for or leave open purely so you can get back to them. Here's the editing pattern on one anchor:

<!-- Before --> <a href="https://example.invalid/daily-reference">Replace: daily reference</a> <!-- After (URL is still a placeholder) --> <a href="https://example.invalid/your-bookmarked-reference">My daily reference</a>

The "after" address still goes nowhere. Swap https://example.invalid/your-bookmarked-reference for the full address copied from your own bookmark.

Save Before Closing Tabs

A tile stores an address. It holds none of the unsaved text, scroll position, or application state living in the tab it replaces. Save your work in each tab before you close it, then back up index.html and style.css together, keeping their names and shared folder intact.

So look at your tab strip one more time: which tab is open only because you fear losing its address, and does it earn a place in Everyday, or should it simply close?