Lesson 1: Ship Your First Portal from a Blank Folder
Time: about 90 minutes
Level: complete beginner
You need: a computer, a web browser, and Claude Code installed
A portal is a website where people sign in and see things that belong to them: projects, files, invoices, status updates. Clients expect one. Most makers assume building one is out of reach.
It isn't. In this lesson you will build a working client portal from an empty folder: a sign-in screen, a dashboard, a project list, a shared files list and an activity feed. You will do it by directing Claude Code, not by memorising syntax.
What you'll build
A three-file portal (index.html, styles.css, app.js) that opens by double-clicking, works on a phone, and can be published on any static host.
The four habits this lesson teaches
Write the brief down. Claude Code reads a file called CLAUDE.md at the start of every session. Put your rules there once instead of repeating them.
Plan before code. Ask for a plan, read it, and approve it. Mistakes are cheapest to fix here.
Build in small slices. One screen or one list at a time. Open the browser after every slice.
Verify before you trust. "It works" is a claim. Make Claude Code say what it actually checked.
Before you start
Download the lesson files attached to this post and unzip them. Open START-HERE.md first.
Then open reference-solution/index.html in your browser and sign in with any email and the password demo. That is the finish line. Look at it for a minute, then close it.
Install Claude Code by following the official instructions from Anthropic, and make sure you can start it by typing claude in a terminal.
Step 1: Make a blank folder and write the brief (10 min)
Create a new empty folder called my-portal. Copy starter/CLAUDE.md into it.
Open CLAUDE.md and replace the five placeholders in square brackets with your own details: business name, what clients see, who they are, and how you want it to look. Be specific about the look. "Quiet, minimal, one accent colour" gives much better results than "nice".
Checkpoint: your folder contains exactly one file, CLAUDE.md.
Step 2: Ask for a plan, not code (10 min)
In your terminal, go into the folder and start Claude Code:
cd my-portal
claude
Paste in prompts/01-plan.md. If your version of Claude Code offers a plan mode, use it. Either way, the prompt tells Claude Code not to write any files yet.
Read the plan. Does it list the screens you expect? Is the build order small enough to check in a browser? If not, tell Claude Code what to change. When you're happy, reply "Approved."
Checkpoint: you have an approved plan and still no code files.
Step 3: Scaffold the sign-in screen (15 min)
Paste in prompts/02-scaffold.md. Claude Code will create the three files.
Open index.html in your browser. You should see a sign-in form. Try a wrong password, then the right one.
Checkpoint: wrong password shows an error. Correct password reveals a placeholder dashboard.
Step 4: Build the dashboard in three slices (30 min)
Send the three prompts in prompts/03-dashboard.md one at a time: projects, then files, then activity and sign out. Refresh the browser after each.
Resist asking for everything at once. When something goes wrong in a small slice, you know exactly where to look.
Checkpoint: you can sign in, see all three lists, sign out, and sign in again without refreshing.
Step 5: Review before you trust it (20 min)
Paste in prompts/04-qa.md. This asks Claude Code to test its own work like a sceptical reviewer and to separate what it checked from what it assumed.
Then check two things yourself: shrink your browser window to phone width, and try the whole flow using only the Tab and Enter keys.
Checkpoint: no sideways scrolling on a phone, and every control is reachable by keyboard.
Step 6: Prepare to ship (5 min)
Paste in prompts/05-ship.md, then work through checklists/ship-checklist.md. Because this portal has no server, any static host can publish it. Claude Code will walk you through the steps for the host you pick.
Read this before you put real clients on it
The sign-in you built is a demo. It runs in the browser, and anyone can read the code and bypass it. It is perfect for learning and for showing a client what a portal will feel like. It is not safe for protecting real client data.
Real authentication needs a server. That is Lesson 2.
Common mistakes
Skipping the brief. Without CLAUDE.md, you will repeat yourself and get inconsistent results.
Asking for everything in one prompt. Big prompts produce big, hard-to-debug results.
Believing "done." Ask what was actually run or checked.
Letting extras creep in. If Claude Code adds frameworks or files you didn't ask for, tell it to remove them and follow CLAUDE.md.
Homework
Replace "Northfield Studio" and the sample data with your own business and content.
Add a fourth section of your choice, such as Invoices or Messages. Do it as one slice and verify it.
Post a screenshot of your portal in the comments.
What's in the attached zip
START-HERE.md: a map of everything
starter/CLAUDE.md: your project brief template
prompts/: the five prompts from this lesson, in order
reference-solution/: the finished portal to compare against
checklists/: ship checklist and troubleshooting guide
Next lesson: real sign-in, so your portal can protect real client data.