Vibe Coding 入门
这些免费课只是非常基础的入门，内容是用 HTML 和 CSS 做一个简单的网页。视频为英文，录于 2025 年，当时用的工具是 Cursor 和 Windsurf。它们只是让你先感受一下，和周末营教的内容完全不是一回事。周末营会深入得多：规划一个真正的产品，用 Claude Code 把它做出来，再放到网上。
1 / 6 · 0:47
Why You Should Take This Course
Hey future vibe coders! I'm excited to help you turn that what-if idea into something real. I've run this course in person many times, and it's incredible to see people with zero coding experience showcase their working prototypes at the end. I want that same vibe for you too! Let's get started on building and launching your idea!
2 / 6 · 1:00
Module Overview & Tools Needed
In this first module, I'm excited to kick things off with the Vibe coding method and get you hands-on right away. We’ll set up your workspace and dive into front-end basics like structure, styling, and simple interactions. By the end, you’ll have built some small sites and your very first webpage, which is something you can see and be proud of. I encourage you to jump in and start creating! Let's get started!
3 / 6 · 5:20
What is Vibe Coding & Workspace Setup
In this video, I introduced VibeCoding, a relaxed and creative approach to coding that leverages natural language and AI to make coding accessible to everyone, regardless of their background. I discussed the two main tools for VibeCoding, Cursor and Windsurf, both of which are AI-enhanced code editors based on VS Code. I also walked you through setting up your workstation by creating a project folder and a test file. For those interested, I encouraged you to download either Cursor or Windsurf to get started. In the next class, we'll dive deeper into building projects using these tools.
4 / 6 · 5:00
Front End Basics
In this video, I quickly introduce the fundamentals of front-end development, focusing on HTML, CSS, and JavaScript. HTML, created by Tim Berners-Lee in 1991, is the backbone of web pages, while CSS is used to style them, and I recommend using Tailwind CSS for a cleaner approach. JavaScript adds interactivity and dynamic behavior, making websites come alive. My goal is to prepare you for hands-on practice in the next video, so stay tuned for some cool stuff!
5 / 6 · 12:00
A Step-by-Step Guide to Create Your First Site
In this video, I guide you through the process of creating your first website using HTML, CSS, and JavaScript. We start by setting up a basic HTML file and then enhance it with styles and interactivity, demonstrating how to use Tailwind CSS for a more modern look. I also show you how to incorporate JavaScript to add dynamic features to your site. I encourage you to experiment with the code and even use generative AI tools like ChatGPT to help you generate ideas and code snippets. Feel free to reach out with any questions as you explore these concepts!
6 / 6 · 6:00
The Powerful Inspect Elements
In this video, I demonstrate the powerful tool of Inspect Element, which allows us to see how our website displays on both web and mobile platforms. I walk you through the process of inspecting elements on any website, including our cat's hello world website and Google, highlighting the difference between visual representation and underlying functionality. I encourage you to experiment by replicating a design you like using Inspect and to customize it in Cursor. Additionally, I emphasize the importance of ensuring mobile responsiveness for your website. As a final exercise, I ask you to find something you admire, replicate it, and make it your own.