How to Make a Website for Your Girlfriend: The Build Order

How to Make a Website for Your Girlfriend: The Build Order

To make a website for your girlfriend, work in this order: write the words, pick a build route, gather the photos and the song, make it survive a phone, then decide what happens to the page afterwards. Tool choice is step two, not step one, and that inversion is why most attempts stall at a half-styled header with nothing in it.

Two numbers are worth knowing first, both measured here on 2026-09-15. Across 4,357 personalised pages, 94.1% of the ones people begin get finished, published and shared (4,098 of 4,357). And 49.0% of the 49,968 recorded opens happen on a phone (24,493), so the phone is the target device, not an edge case.

This guide covers what each of the three build routes demands of you, what to have ready before you open anything, and the two questions the pages ranking for this search do not answer: whether it works on her screen, and what it becomes in six months.

What making a website for your girlfriend actually involves

It is one web page, at a link you send her, holding a message you wrote, a handful of photos and usually a song. It is not a site in the multi-page sense. There is nothing to navigate, and adding navigation is the surest way to make it feel like a product instead of a letter.

The job splits into four things you supply and three a tool supplies. You supply the words, the photos, the song, and the decision about who is allowed to open it. The tool supplies layout, hosting and the link.

Across the 4,357 pages built here since 2026-03-12, spread over 16 page types, that is the whole shape of it. Everything below assumes you want a link this week rather than a hobby project — and if you want the hobby project, step two says so plainly.

Step 1: Write the page before you open any tool

Open a notes app and write what you want to say, in full, before you look at a template. Thirty to ninety minutes here saves the evening; the alternative is two hours choosing fonts and then nothing to put in them.

Aim for one specific thing she has not heard you say, with a date or a place attached. A 2012 Designing Interactive Systems study from TU Eindhoven found people have markedly more difficulty identifying digital objects they cherish than physical ones — an argument for one small, exact page over an archive of everything.

If you are not yet sure the gesture is right at all, that is a separate question with its own answer. Whether a website actually impresses a girlfriend depends on the relationship and the moment rather than the build, and it is cheaper to settle before you spend a weekend.

Step 2: Choose a build route

There are three honest routes. Pick by what you already know how to do, not by what sounds impressive.

1. Write the HTML yourself

A single index.html file with your own CSS, pushed to a static host. It suits anyone who already writes HTML and CSS for enjoyment — and if that is you, this is genuinely the best option here, because the result is yours in a way nothing else on the list is.

Budget four to twelve hours across two evenings, more if you have never done a responsive layout. The catch is hosting: no-cost tiers on the major code-hosting platforms generally apply to public projects, so anyone holding the URL can reach the page.

2. Use a general website builder

A drag-and-drop editor that publishes your page on a subdomain of the builder. It suits someone who has never opened a code editor and does not intend to start tonight.

Budget one to three hours, most of it deleting the template's stock content. The catch: the page lives inside an account, and stays live exactly as long as that account does.

3. Start from a ready-made personalised page

A page type already built and tested, where you supply the words, the photos and the song. It suits anyone whose deadline is tonight, or who would rather spend the evening on the message than the markup.

Budget twenty to forty minutes. The catch is that you choose from what exists — if the idea in your head is not on the list, this is the wrong route.

The most-built page here is the plain "I love you" page, 1,125 of 4,357 pages and 25.8% of everything created, which suggests most people want something simple rather than clever. If you want an interaction instead of a message — a photo jigsaw where each piece placed reveals a line of a letter and plays a note, and the last piece is not in the box — that is the sort of thing you do not hand-build in an evening.

Here is how the routes fall out against what is already true of you, with our own phone-open rate as the column that sets the testing:

The fourth row is not a joke; it is the row most guides leave out.

Step 3: Gather the photos, the song and the words

This is the step that actually consumes the evening, and no page ranking for this search mentions it. Budget an hour: three to six photos, one song, and the text from step one.

Three photos with dates beat thirty without. Pick ones she has not seen recently — a screenshot of an old message thread counts, and often lands harder than a posed picture.

Decide before you build whether the song plays by itself. Mobile browsers block autoplay with sound by default, so a page that depends on music starting will quietly fail on roughly half your opens; a play button she presses is the honest design.

Step 4: Make it work on her phone, then test it the way she will open it

Half of everything shared here is opened on a phone — 24,493 of 49,968 views, 49.0%, measured 2026-09-15. The phone is the target; the laptop is only the preview. Build at 360px wide and widen from there.

If you hand-coded it, the single most consequential line is the viewport meta element. MDN documents that a 640px phone screen may be handed a 980px virtual viewport and the whole page shrunk to fit, which is exactly why a hand-made page so often arrives as unreadable grey text.

Then test it as a stranger would meet it: open the link in a private window, on mobile data rather than wifi, and look at the preview card WhatsApp generates before she taps. Research applying source credibility theory to website design reports that users form judgements within the first few seconds of an online interaction, so that card and the first screen carry more weight than the rest of the page combined.

Step 5: Decide now what happens to the page afterwards

A web page keeps existing, which is the part almost everyone decides by accident. Settle three things on the day you send it: who can reach the link, how long it stays up, and who is able to take it down.

That third one is less obvious than it sounds. A study of 25 consumers and their digital possessions, published in the Journal of Consumer Research in December 2022, found a recurring gap between the affordances people imagine a digital object has and the ones it actually has — affordance misalignment. A page on a builder's subdomain is kind of yours and kind of not: it exists while the account does.

Then there is the case nobody competing for this search will raise. A NordiCHI 2016 study of digital possessions after a romantic break-up reported that partners' interwoven digital presence makes disconnecting difficult, and named "tainted digital possessions" as one of its five themes. A page you both loved is that shape, so building it on a link you can retire is kindness rather than pessimism.

When making a website is the wrong move

If she has no real smartphone habit, patchy connectivity, or would rather hold something, a printed photo book wins and it is not close. What we make is a link, and a link is worth nothing to someone who will not open it.

If the occasion is a birthday with a fixed date, the binding constraint is the deadline rather than the craft, and the routes price out differently under a clock — that calculation is in the four routes to a birthday website and what each one costs.

And if you enjoy writing code, do not let anyone argue you into a template. The measurable advantage of a ready-made page — 94.1% of pages started here get finished and shared — is a completion-rate advantage, and completion rates are worth nothing to someone who was always going to finish. Browse the page types that already exist if you want the shortcut, and ignore them if the building is the point.

Sources

• Digital Possessions After a Romantic Break Up — Herron, Moncur & van den Hoven, NordiCHI '16, 23 October 2016 (abstract read)
• "Kind of Mine, Kind of Not": Digital Possessions and Affordance Misalignment — Mardon, Denegri-Knott & Molesworth, Journal of Consumer Research, 13 December 2022
• Towards a more cherishable digital object — Golsteijn, van den Hoven, Frohlich & Sellen, DIS '12, 11 June 2012 (abstract read)
• A Picture is Worth a Thousand Words: Source Credibility Theory Applied to Logo and Website Design — Lowry, Wilson & Haig, International Journal of Human–Computer Interaction, 27 November 2013
• The viewport meta element — MDN Web Docs (continuously updated; no publication date stated)