How to Vibecode Your First Website (Using Claude Code)
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.
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.