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 Introduction to Claude Code session. From this session on, we move up to expert level: Claude doesn't just answer on a chat screen, it works on your computer. In this episode we get to know Claude Code, understand the term vibe coding, and plan the project we'll work on until the end of the next session.
Step 1: From chat to Claude Code
Claude Code is a way to use Claude directly on your computer. Claude doesn't just give advice. It can open a project folder, read the files, and then create or change files there. The key word is permission. Every important step, like changing a file or running a command, is checked with us first before it happens. Let's compare it with what we already know. Chat works in a conversation window, Artifacts in a side panel, and Claude Code works in a folder on your computer. The results are different too. From chat we copy text. From an Artifact we get a page or a small tool. From Claude Code we get project files that are saved right away. Chat is good for writing and asking questions, Artifacts for quick prototypes, and Claude Code for real websites, apps, and automations. The biggest difference is the size of the job. Claude Code can handle many files at once, such as pages, styles, images, and forms in one project. What can Claude Code do for a small business? First, a business website: a profile page, the menu and prices, and even an order button that connects straight to WhatsApp. Second, work tools, such as a shipping calculator, an order form, or a simple report the admin uses every day. Third, tidying files and data. For example, renaming hundreds of product photos at once, or merging reports from many files into one. Fourth, explaining a project. If you receive a website folder someone else built, Claude Code can read it and explain it in simple language.
Step 2: Watching Claude Code work
How Claude Code works can be summed up in one cycle. First, we ask in everyday language, just like in chat. Second, Claude reads the relevant folders and files so it understands the project before acting. It's like a new employee looking around before starting work. Third, before creating or changing a file, Claude asks permission. We can approve, decline, or give different directions. Fourth, Claude summarizes what changed. Then the cycle repeats for the next request. Here's what it looks like. Raka, a college student learning to build websites, types an ordinary request: a page with the name Sunset Coffee, the opening hours, and a WhatsApp button. Claude replies with a short plan: it will create one file called index, the main file of a web page. The next line shows the tool being used. Write means writing a new file, and below it you can see how many lines were created. Before the file is actually saved, a permission box appears. Raka chooses Yes, because that's exactly what Raka asked for. Finally, Claude gives a summary. Raka didn't type a single line of code. This screen is a simulation, and menu names may differ slightly because Claude Code is updated often. Claude Code is also good at explaining. Raka asks: please explain what's in the index file in simple language, I'm not a programmer. This time Claude uses the Read tool, which means reading a file. Reading doesn't change anything, so it usually doesn't need permission. The explanation is easy to follow: a title at the top, the opening hours in the middle, and a green button that opens Sunset Coffee's WhatsApp. Claude also explains that text inside angle brackets just marks a section. We don't need to memorize it. We simply ask Claude to change it.
Step 3: What is vibe coding?
You've probably heard the term vibe coding lately. It means building software by describing what you want, a lot like giving a brief to a designer. Claude writes the code, along with a short explanation of what it built. Our job is to judge the result: open it in the browser, try the buttons, and ask for revisions if it's not right yet. It's the same ask, read, refine pattern we've practiced from the start. So when does vibe coding fit? First, for a business profile page with the menu, opening hours, and contact details. Exactly what Sunset Coffee needs. Second, for office tools, such as a price calculator, a sales report, or a schedule reminder. Dewi at Maju Bersama Co., for example, can build a stock report without waiting for the IT team. Third, for small automations that tidy files and data. We'll cover those in the automation session later. On the other hand, be careful with payment systems. When money is involved, anything built by AI should be reviewed by an expert before it's used. The same goes for storing customers' personal data. If a website has to store data like that, bring in a programmer to make sure it's secure.
Step 4: Our role: director and reviewer
To keep vibe coding safe, we hold on to three jobs. First, give clear direction: the goal, the content, the style, and the limits. Second, read before approving. Look at Claude's summary, which files it touched, and what changed. Third, try out the result. Open the page in the browser, click every button, and check numbers like prices and opening hours. Claude can be confidently wrong, so the final check is still our job. Here's an example. Raka gives an instruction that's too general: tidy up this project folder. Tidy can mean many things, and that's where problems often start. Claude takes tidy to mean deleting the folder of old photos. Luckily, commands like this always wait for permission. Raka reads the permission box carefully and chooses No. Laras still needs those old photos. Then Raka makes the direction clearer: don't delete anything, just move them to an archive folder. This is the director and reviewer role in practice.
Step 5: Project plan: the Sunset Coffee website
Now for our plan. Laras, the owner of Sunset Coffee, wants a simple website. Raka is ready to help. The first step is setting up the tools: installing Claude Code and getting to know the terminal. Second, getting to know the project: how Claude reads a folder, what each permission box means, and the CLAUDE.md file that gives Claude the business context. Third, building the page in the next session: a landing page, meaning the main page that introduces the business, then extra features and an order form. Fourth, making it look tidy on phones, then publishing the website for free so customers can open it. Raka writes down Laras's first brief. First, the full menu with prices: palm sugar iced coffee, cold brew, and gift hampers. Second, opening hours from eight in the morning to nine at night, along with the shop's address in Bandung. Third, an order button via WhatsApp, because that's where orders have always come in. Fourth, comfortable to open on a phone, since almost all of Laras's customers open links on their phones. Prepare a similar brief for your own business too.
Done!
We've met Claude Code, which works in your computer's folders, understood vibe coding and its limits, and planned the Sunset Coffee website with Raka. In the next episode we install Claude Code on your computer by following the official documentation, then run it for the first time. See you there!
Practice exercises
Try these on your own after watching to lock in what you learned.
Write a one-paragraph website brief for your own business or work
List the page sections you want, such as the menu, opening hours, and contact details
Mark which parts an Artifact can handle and which need Claude Code
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
52 video classes1,276 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.
