LearnGrokThe smallest useful thing you can build is one page that says who you are and what you do. It is also the fastest way to find out whether building things with Grok suits you, because the whole loop (ask, look, change) takes minutes.
You need no software beyond a text editor and a browser.
1. Write the words first
Not the design. The words.
Open a note and write, in plain language: who this is for, what you do, one thing you want them to do next. Six sentences is plenty. If you skip this step you will spend the afternoon on fonts and end up with a beautiful page that says nothing.
2. Ask for one file
The trick that makes this easy for a first-timer: ask for a single file, with everything inside it. No separate stylesheet, no build step, no framework.
Write me a complete single-file HTML page. Everything (styles and any scripts) inside that one file; no external links and no libraries. It is a personal page for [who you are]. Sections: a heading with my name, two paragraphs about what I do, a list of three projects, and an email link at the bottom. Here is my text: [paste your words]. Make it work on a phone as well as a laptop, and make it readable in dark mode as well as light.
Save the answer as index.html (the name matters), somewhere you can find it.
Double-click it. It opens in your browser. That is your site.
Checkpoint: a page on your own screen with your own words on it.
3. Change it by describing the change
You do not need to understand the file to change it. Describe what you want in the terms you would use to a person:
Make the heading smaller and the space above the project list bigger. Move the email link up under the paragraphs. Give me the whole file back.
Save over index.html, refresh the browser. That is the entire loop.
Ask for the whole file every time. Patches and fragments are where a first project turns into an afternoon of confusion about which bit goes where.
4. Look at it on a phone
Narrow your browser window until it is phone-shaped. Things that look fine wide often break narrow: text runs off the side, a list becomes a wall.
If it breaks, say so plainly: "when the window is narrow the project list runs off the right side; fix that and give me the whole file", and refresh.
5. Put it online
Free static hosts will take a folder containing your index.html and give you a
web address. Most of them accept a drag-and-drop of the folder in the browser
and are done in under a minute; several also publish directly from a code
repository if you would rather work that way. Pick one, follow its own current
instructions (they change more often than anything on this page) and drop your
folder in.
Two things to know before you do:
- Anything in that folder is public. Do not put a draft, a spreadsheet or a photo you have not looked at recently in the same folder.
- The address you get first is theirs, not yours. Your own domain name is a separate purchase and a separate step, worth doing only once the page is actually finished.
Checkpoint: an address you can send to someone.
6. The three things worth adding next
Ask for these one at a time, checking after each:
- A title and description for search and link previews: the
<title>and meta description. It is what people see before they click. - A favicon: the small icon in the browser tab.
- A sensible heading structure: one main heading, section headings under it. This is most of what makes a page readable by a screen reader.
What to watch out for
- Ask it not to use external files or libraries unless you know why you want them. A page that quietly depends on something it downloads from elsewhere can break later without you touching it.
- Read the words on the finished page. If you pasted your text and got back something more polished, check that the polish did not change a fact. It is your page and your claims.
- Keep the last version that worked. Before a big change, save a copy as
index-backup.html. It costs nothing and saves an afternoon.
Where to go next
- Prompting fundamentals that survive model updates, on why "give me the whole file" belongs in nearly every request.
- Build an iOS app with Grok, the same loop, with a compiler in the way.
- Writing and editing prompts, for the six sentences in step one.
