Editing the site

Open it

Double-click index.html — the site opens in your browser and every link works, straight from the folder. To see it exactly as a host serves it (and to test the forms), run a small local server from the folder:

npx serve .

Then edit the files in a code editor and reload the browser to see the change.

What is where

index.html, about.html, services.html, projects.html, blog.html, careers.html, contact.html
404.html                 shown for addresses that don't exist
style-guide.html         every component with its name (noindex; delete it if you don't want it)
services/*.html          one page per service
projects/*.html          one page per project
blog/*.html              one page per post
careers/*.html           one page per role
assets/css/style.css     the stylesheet (generated — see design.md)
assets/js/main.js        the site's scripts (don't edit)
assets/js/config.js      your settings: form endpoint
assets/images/           photos
assets/icons/            interface icons
assets/fonts/            Inter
favicon.ico, icon.svg, apple-icon.png, opengraph-image.png
sitemap.xml, robots.txt
src/css/style.css        the stylesheet's source: colours, breakpoints, fonts

Text

Find the words on the page and change them in the HTML. Keep the tags and classes around them — they carry the layout. A heading looks like this:

<h1 class="text-[46px] md:text-[58px] lg:text-[72px] leading-[1.1] font-medium">Your headline</h1>

Change Your headline, leave the class.

Some words appear twice on purpose: the menu and buttons animate by sliding a second copy into view (<span>About</span><span aria-hidden="true">About</span>). Change both.

Text that repeats on every page

The header, footer, contact details and the site’s name are copied into every page. Change them once for all files with your editor’s Find in Files / Replace in Files (VS Code: Ctrl/Cmd + Shift + H):

Replace	With
`https://nitip-html-marcframe.vercel.app`	your domain, e.g. `https://www.youragency.com` (canonical links, share cards, `sitemap.xml`, `robots.txt`)
`hello@nitip.com`	your email
`+44 20 7946 0854`	your phone
`Nitip Digital Agency 45 Shoreditch High Street, London, E1 6PQ, United Kingdom`	your address
`\| Nitip` in `<title>` and share tags	`\| Your Agency`

Include the .html, .xml and .txt files. Review each change before replacing all — “Nitip” also appears in text you may want to rewrite rather than replace.

Page titles and descriptions

Each page’s <head> holds what search engines and share cards show:

<title>About | Nitip</title>
<meta name="description" content="…" />
<link rel="canonical" href="https://yourdomain.com/about.html" />
<meta property="og:title" content="About | Nitip" />
<meta property="og:description" content="…" />
<meta property="og:url" content="https://yourdomain.com/about.html" />
<meta name="twitter:title" content="About | Nitip" />
<meta name="twitter:description" content="…" />

Keep the title, the og: and the twitter: versions the same, and the canonical and og:url equal to the page’s own address.

Images

assets/images/ holds every photo. The easiest change: replace a file with yours under the same name and the same proportions — every page that shows it updates. The download ships with grey placeholders that state the size each image was designed for (for example 1200 × 800).

To use a new file instead, change the src: <img src="assets/images/team-anna.jpg" …>. In pages inside a folder (blog/…, projects/…) the path starts with ../: src="../assets/images/team-anna.jpg".

Use .jpg for photos (around 2000 px wide for large images, 1200 px for cards, 400 px for avatars) and keep files small — compress them with Squoosh or TinyPNG. Write an alt text for images that carry meaning; leave alt="" for decorative ones.

Links

Pages link to each other as about.html, projects.html, blog/<post>.html; from inside a folder, add ../ (../contact.html). Keep the .html — it’s what lets the site work from any host and from disk.

Adding a project, post, service or role

The page. Copy an existing one in the same folder, e.g. blog/the-role-of-prototyping-in-product-design.html → blog/my-new-post.html. Use lower-case words joined by - for the file name; it becomes the address. Edit the text, images, <title>, description, canonical and og:url.
The card. Open the listing page (blog.html, projects.html, services.html, careers.html), copy the last card or row, paste it after the others, and change its link, image and text. Copying the last one matters: cards past the first page carry the classes that keep them hidden until Load More is pressed, and the button counts them by itself.
Elsewhere. The home page shows the first projects, services and posts, and each post or project page links to others (“More Blog”, “Next Project”). Update those if the new item should appear there.

The sitemap. Add a line to sitemap.xml:

<url><loc>https://yourdomain.com/blog/my-new-post.html</loc><lastmod>2025-05-01</lastmod></url>

To remove an item, do the reverse: delete the page, its card, any link to it, and its line in sitemap.xml.

This is the price of a site with no build step. If you expect to add posts every week, see Editing without touching HTML.

Adding a page

Copy careers.html or contact.html — their menus mark no item as the current page, which is what a new page needs — and rename it, e.g. pricing.html.
Replace the sections inside <main> with the ones you want. Every section in the template is a block you can copy from its page (or from style-guide.html) and paste between <main> and </main>.
Update the <head> (title, description, canonical, og:url).
Link to it: add the link to the header menu and/or the footer — in every page (find and replace in files helps) — and add it to sitemap.xml.

Removing a page

Delete the file, remove its links from the header and footer of every page, and its line from sitemap.xml. Search the folder for the file name to catch any link left behind.

The style guide

style-guide.html shows every component with its name — handy for copying a button or a card. It’s hidden from search engines. Delete it before publishing if you don’t want it online.