# How to Vibecode Your First Website (Using Claude Code) Source: https://www.youtube.com/watch?v=ji_xpQzZDHo Recap page: https://rapidrecap.app/video/ji_xpQzZDHo Generated: 2026-01-22T15:05:47.491+00:00 --- ## Quick Overview Kevin Roose demonstrates using Claude Code, an agentic coding tool, to build a functional website for the "Hard Fork" podcast from scratch, successfully implementing features like dynamic episode feeds, host bios, and a guestbook, despite encountering minor issues like a broken YouTube embed and a fake visitor counter that required manual fixes. **Key Points:** - Kevin Roose used Claude Code to build a complete website for the 'Hard Fork' podcast from scratch, including features like dynamic episode feeds, host bios, and a guestbook. - Claude Code successfully executed installation commands, navigated Chrome, took screenshots, and performed web searches to gather required information for the site build. - The AI encountered minor issues, such as a broken embedded YouTube video (Error 153) and a fake visitor counter showing '848,292', which required manual fixes. - The Konami code Easter egg was successfully tested by prompting Claude to input the key sequence in the terminal. - The final deployed site included features like ASCII art for the hero section, working YouTube embeds (after fixing the embed URL), and a functional guestbook that updates dynamically. - Roose notes that while Claude Code is very capable, there are still limitations, such as needing to explicitly tell it to fix certain errors or when its memory context is lost, requiring tasks to be re-queued. ![Screenshot at 00:12: The initial screen of the Claude Code session showing the AI's interface, prompting the user to start by creating a 'Hot Tub Time Machine' maintenance companion, which sets the stage for the coding demonstration.](https://ss.rapidrecap.app/screens/ji_xpQzZDHo/00-00-12.jpg) **Context:** The video features Kevin Roose, a New York Times Tech Columnist and co-host of the 'Hard Fork' podcast, demonstrating the capabilities of Claude Code, an agentic AI coding tool developed by Anthropic, to build a functional website for the podcast. Roose interacts with the AI via a terminal interface, giving it high-level instructions to create and modify the site, showcasing how these tools can handle complex development tasks, including web navigation, code editing, and debugging. ## Detailed Analysis Kevin Roose performs a live demonstration of using Claude Code to develop a website for the 'Hard Fork' podcast. Roose begins by asking Claude to build the site from scratch, prompting the AI to install itself via a terminal command, which succeeds (01:29). The initial instructions included creating a distinctive website for the podcast, featuring episode feeds based on YouTube presence, host bios, and a GeoCities-style guestbook. Claude successfully installed the necessary tools and began executing tasks, such as navigating to the podcast's existing Apple Podcasts page to gather initial information (03:54). The AI successfully implemented features like the ASCII art hero section and the guestbook, noting that the aesthetic pairs nicely with the GeoCities theme (10:37). However, the process revealed limitations: the YouTube video embed produced an 'Error 153' (04:24), and the visitor counter was fake (04:58). Roose specifically asked Claude to fix these issues, which involved updating the iframe source URL for the YouTube embed and replacing the static visitor count with a real counter API call (10:38, 10:42). The AI successfully navigated YouTube, extracted the video ID, and updated the HTML (10:49). Roose also mentions that while the AI is powerful, it sometimes requires manual intervention or prompts to fix bugs or complete tasks that exceed a certain time limit (10:28, 11:11). After fixing the video embed and implementing the real visitor counter, the site was deployed to GitHub Pages (20:40). The final successful deployment confirmed the fixed video embed and the functional visitor counter. ### Initial Setup & Installation - Claude Code installed via terminal command (01:25) - Initial prompt requested building a website for 'Hard Fork' podcast (01:30) ### Feature Implementation - Claude successfully implemented ASCII art hero section (07:50) - Implemented host bios, episode feeds (pulled from YouTube), and a GeoCities-style guestbook (02:52) ### Debugging & Iteration - Identified broken YouTube embed (Error 153) and fake visitor counter (04:24) - Claude fixed the video embed using youtube-nocookie.com and added a real visitor counter API (10:38, 10:42) ### Easter Egg Activation - The Konami code sequence was successfully executed via keyboard commands in the terminal, activating a 'Hard Fork Party Mode' animation on the website (03:09, 07:32) ### Conclusion & Deployment - The site was deemed complete and deployed to GitHub Pages (20:40) - Roose noted the AI's ability to document its own work and the risk of relying solely on the AI for complex debugging (15:35, 18:57) ![Screenshot at 00:03: Kevin Roose introducing the demonstration topic: using Claude Code for vibe coding a website.](https://ss.rapidrecap.app/screens/ji_xpQzZDHo/00-00-03.jpg) ![Screenshot at 00:12: The Claude Code interface displaying the initial prompt for creating the 'Hot Tub Time Machine' web app, setting the context for the live coding session.](https://ss.rapidrecap.app/screens/ji_xpQzZDHo/00-00-12.jpg) ![Screenshot at 01:25: The terminal output confirming that Claude Code successfully installed itself via the provided command, marking the start of the development process.](https://ss.rapidrecap.app/screens/ji_xpQzZDHo/00-01-25.jpg) ![Screenshot at 04:24: The website displaying the broken YouTube embed error \(Error 153\) after Claude attempted to load the latest episode video.](https://ss.rapidrecap.app/screens/ji_xpQzZDHo/00-04-24.jpg) ![Screenshot at 10:37: The terminal output showing Claude's summary of fixes, including issues with the hero artwork and the fake visitor counter, indicating progress in debugging.](https://ss.rapidrecap.app/screens/ji_xpQzZDHo/00-10-37.jpg)