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, let's continue the Artifacts session. Today we create something that has always felt complicated: a web page, without writing any code ourselves. We'll plan the content of the Sunset Coffee page, write the request, revise the look, peek at the code behind it, then get it ready to share with customers.
Step 1: Planning the page content
A one-page website, often called a landing page, holds all the important information in a single scroll. Visitors don't need to jump between pages. For Sunset Coffee, that means just one link to share in the Instagram bio, a WhatsApp status, or a flyer. Customers no longer need to ask about the menu and prices one by one. For a small business, five sections are enough. First, the hero section at the top: the business name, a short slogan, and a mood you feel right away. Second, the menu and prices. Show your best sellers, not every product. Third, testimonials: words from happy customers. Make sure the customers have agreed to have their names shown. Fourth, how to order, usually a button that opens WhatsApp. Fifth, opening hours and location. These five sections answer almost every question a potential buyer has. Before building the page, Laras prepares the text first. She asks for three short slogan options, six words max, with a warm and relaxed feel. Claude gives three options. Laras picks the first because it names the signature product and the city right away. She saves the second one to try later. Preparing material like the slogan, menu, and testimonials first makes the web page request more complete, and the first result closer to what you want.
Step 2: Writing the request and first version
Now for the request. First, the purpose: a Sunset Coffee promo page that customers open on their phones through the Instagram bio link. Mentioning phones matters, because the layout has to work on a small screen. Second, the data: the menu and prices, opening hours, and the city. All the numbers come from Laras, not guesses. Third, the sections she wants, matching the five sections she planned. Fourth, the style: warm and relaxed, with coffee brown and cream colors, and large text that's easy to read. Fifth, the limits. The WhatsApp number is written as a placeholder, WA number in square brackets, which Laras will fill in herself. And don't make up testimonials; Laras will provide real ones. This request is longer than usual. But the more complete the request, the fewer revisions you'll need. Laras sends that request, plus two real testimonials from Rina and Budi, who have agreed to have their names used. The page appears in the right panel. From the top: the hero with the name and slogan, four menu cards with prices, Rina's and Budi's testimonials, opening hours and shipping, then an order via WhatsApp button. In one minute, Sunset Coffee has a web page. Laras didn't write a single line of code. She just explained her business clearly. But a first version is rarely perfect. Laras feels the order button is too far down and doesn't stand out. Time to revise.
Step 3: Revising the look
Laras writes a specific revision: move the WhatsApp button up, right below the slogan, make it bigger, and make sure it works well on a phone. Version two appears. The order button now sits right below the slogan, so customers see it immediately. Claude also changed the slogan to something warmer: your afternoon coffee friend in Bandung. Laras likes the new slogan. If she didn't, she could simply write: bring back the slogan from version one. The old version is still saved, so nothing is lost. Claude also explains that on a phone screen the menu cards stack in one column. Explanations like this matter, because most Sunset Coffee customers open the link on their phones. There are four things that get revised most often. First, colors and fonts. Name the colors clearly, such as a dark brown background with cream text. Second, section order, such as moving the testimonials below the menu. Third, text: a shorter slogan, more relaxed sentences, or a clearer call to action. Fourth, the phone view. Ask Claude to make sure buttons are easy to tap with a thumb and the text isn't too small. An important tip: ask for one or two changes per message. If you send ten changes at once, it's harder to check which ones are right.
Step 4: The code behind the page and how to use it
Now let's peek at the Code tab. A web page is made of HTML for the content and CSS for the look. What you see on this screen is the CSS part, which sets colors and sizes. Laras is curious and asks: which part makes the menu stack in one column on phones? Claude points to the very bottom, a special rule for small screens like phones. Above it are the hero section and the order button, which set the background color, font size, and button shape. Laras doesn't need to change this code herself. If she wants to change the look, she just asks in the chat. The Code tab is there for curiosity, and for copying the page somewhere else. The Code tab is also useful if one day you work with a professional web designer. You can hand them this code as a starting point, and they just refine it. So how does this page reach customers? There are three ways. First, share it directly from Claude through the Artifact sharing or publishing feature, if it's available on your account. Good for quick tries. Second, copy or download the code, then upload it to a web hosting service. This suits a permanent page at your own address. We'll do this with Claude Code in the expert part of this class. Third, paste parts of the code into the website builder you already use. Sharing features can differ by plan and version, so check the official Claude documentation. For this episode, just make sure the page is correct and tidy in the Artifact panel. We'll cover how to share Artifacts safely in full in the next episode.
Step 5: Checks before sharing
Before sharing the page, run through this checklist. First, the prices, opening hours, and spelling are checked. One wrong number on a public page can cause trouble. Second, the WA number placeholder has been replaced with the business WhatsApp number, and the button has been tested. Laras enters that number herself, not through the chat. Third, the page has been opened and tried on a phone, because that's where most customers open it. Fourth, the testimonials are real and approved by the customers. Never ask Claude to make up testimonials. And what must not be there: customers' personal data or confidential business information. A web page can be seen by anyone. Once everything is checked, Laras shares the page link with the Sunset Coffee loyal customers group. Three minutes later someone replies: the page looks neat, and they tapped the order button right away. Another customer orders two cold brews through the same button. One link answers the menu and price questions that usually get asked dozens of times every week. Nadia could build the same thing for her clients, or Mr. Hendra for a Cerdas Tutoring class sign-up page. The pattern is always the same: plan, request, revise, check, then share.
Done!
We've planned five page sections, written the request, revised the look, peeked at the code behind it, and prepared the page to be shared safely. In the next episode, the final episode of the Artifacts session, we dig into revising Artifacts, managing their versions, and sharing them safely. See you there!
Practice exercises
Try these on your own after watching to lock in what you learned.
Plan five sections of a web page for your business or activity
Build that page as an Artifact, then ask for two design revisions
Ask Claude to make sure the page reads well on a phone, then check the content yourself
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,286 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.
