At most one email a week. Unfollow anytime with one click.
Transcript
The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.
Show transcript
Introduction
Hi, and welcome to the Building a Website with Claude Code session. All the preparation is done, and now it's time to build a real page. In this episode Raka builds the Sunset Coffee landing page: writing a brief, approving the plan, viewing the result in the browser, revising the look, and saving the first version.
Step 1: Brief and plan
Raka writes a brief with four elements. First, the goal: a Sunset Coffee home page that invites visitors to order via WhatsApp. Second, the context. Raka doesn't need to rewrite the prices and hours, just say that they're all in CLAUDE.md, and that the materials are in the assets folder. Third, the task: five sections from yesterday's plan, namely a hero with product photo one, the menu, the story, testimonials, and contact details. Fourth, the limits: one page only, no paid services, and most importantly, plan first and don't write any files until it's approved. Raka sends that brief to Claude Code, along with the request to plan first. For a job this size, plan mode works too. Claude replies with a plan: an index file for the page content, a style file for colors and layout, and an images folder. Claude also mentions that the order buttons follow the WhatsApp rule in CLAUDE.md. The plan makes sense, and no other files are touched. Raka replies briefly: approved, go ahead.
Step 2: Claude builds the page
Claude gets to work. First, it writes the index file, ninety-six lines long. This is the file that holds the page's text and structure. A permission box appears. The file name matches the plan, so Raka chooses Yes. Second, Claude writes the style file. It contains the display rules: colors, font sizes, and spacing between sections. The second permission is approved too, because it still matches the plan. If a file name suddenly appears that isn't in the plan, that's the moment to stop and ask. Third, Claude copies product photo one into the images folder. The photo is copied, not moved, so the original materials stay intact. Finally, a three-point summary, following the work rules in CLAUDE.md: five sections with official prices, the brand colors, and the hero photo. Raka only needs to read these three lines to know what happened. To avoid confusion, get to know the project file map. The index file holds the page content: text, menu, and buttons. If you want to change the wording, that change happens here. The style file controls the look: colors, font type and size, and spacing. If you want to change a color, that change happens here. The images folder stores the photos shown on the page. If Laras wants to replace the hero photo, just replace the file in this folder and ask Claude to update the name. And CLAUDE.md is the notes for Claude. This file doesn't appear on the website. With this map, we can read a permission box and know right away which part is changing.
Step 3: Checking the result in the browser
Raka double-clicks the index file, and the page opens in the browser. In the right panel, Raka notes the check results. First, the title, opening hours, and shipping info are showing. Second, the prices on the menu cards match CLAUDE.md. Eighteen thousand, eighty-five thousand, and fifty-five thousand. The hamper is further down after scrolling. Third, Raka clicks the order button, and the business WhatsApp opens. The most important part of this page works. But there's one note: the colors are too pale and the title doesn't stand out. It doesn't match the coffee brown and cream that Laras asked for. Besides checking personally, Raka asks Claude to check too: do all the prices and opening hours on the page match CLAUDE.md, and are there any typos? Notice the last sentence: don't change anything yet, just report. Claude uses Grep to find every price and the opening hours in the index file, then compares them one by one with the notes in CLAUDE.md. The report: all four prices and the opening hours match. But there's one typo in the contact section: it says Bandug, missing the letter n. Claude asks first before fixing it. Raka replies: yes, fix just that typo. This small limit keeps Claude from changing anything else. The change box has just one red line and one green line. The p in angle brackets marks a paragraph, and the only thing that changes is the word Bandung. Raka approves it. Two pairs of eyes, human and Claude, are more thorough than one. Get into the habit of using the same checklist every time you view the result. First, every planned section is showing. Second, prices, opening hours, and shipping match the official data. Don't take it on trust, even with CLAUDE.md in place. Third, every button and link is tried, not just looked at. Fourth, no typos, especially in the title and the menu names. Fifth, colors and fonts match the brand style. This fifth point is the one that hasn't passed yet, so let's fix it now.
Step 4: Revising the look
Raka asks for a revision by stating the problem and the expected result: the colors are too pale, use coffee brown and cream, and make the title bigger and bolder. Claude uses Edit on the style file, because that's where colors live. The index file isn't touched. Let's read the gist. The first red line is the old background color, light gray. The green line replaces it with cream. Color codes start with a hash sign; we don't need to memorize them. The next line changes the title: its color becomes coffee brown, its size goes from thirty-two to forty-four, and the letters are made bold. That's what was asked for, so Raka chooses Yes. The summary confirms three things: a cream background, a brown title that stands out more, and the index file unchanged. Raka reloads the page in the browser. Now the prices show in coffee brown and the feel is warmer. The point that failed earlier now passes. Raka sends a screenshot to Laras on WhatsApp, and Laras approves it as the first version. The screens in this video are simulations; your result may differ slightly, because what Claude writes isn't exactly the same every time.
Step 5: Saving the first version
The page is approved, so Raka saves a version. Raka asks Claude to use git with the note: first landing page version approved by Laras. Git is a version tracking tool. Think of it as taking a photo of everything in the folder, then writing a caption on the back. Claude runs the commands. Because this runs a command, a permission box appears. Raka reads it, which says it will create version tracking in this folder, and chooses Yes. The first version is saved. If the next revision goes wrong, we can ask Claude to go back to this version. If you're not comfortable with git yet, copying the project folder as a backup is enough. Let's sum up the pattern. Start with a brief that covers the goal, content, style, and limits. Then a plan that's approved before any files are created. Five seconds of reading the plan can save dozens of minutes of revisions. Next, check the result in the browser with the same checklist, and ask for revisions one at a time. Finally, save a version every time a result is approved. Try this pattern for your own business, starting with a one-paragraph brief.
Done!
The first version of the Sunset Coffee landing page is done and approved by Laras: a hero photo, menu, story, testimonials, and contact details, in coffee brown and cream. In the next episode we add new features to this page and learn to report and fix bugs with Claude. See you there!
Practice exercises
Try these on your own after watching to lock in what you learned.
Write a landing page brief for your business with the goal, content, style, and limits
Ask Claude to plan first, then approve before any files are created
Check the result in the browser and ask for one design revision
Ask the class material
Type a question or keyword; we find the part of this episode that explains it and jump the video there.
My notes
Notes are saved with the current video time and are only visible to you.
Questions & answers
Stuck on a step? Ask here; the instructor and other learners can answer.
No questions yet.
Your instructor
Cerdas Inovasi Digital Team
Software developers, BIM & 3D engineers, and AI practitioners
53 video classes1,290 episodes
We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.
