---
title: "Fundamentals"
description: "VibeVibe Fundamentals: centered on the personal homepage + digital twin case, guiding readers with no prior experience through their first complete closed loop from idea to launch."
---

# Fundamentals

<BasicEditionUpdateBox />

This Fundamentals series has been fully rewritten according to the new main storyline: centered on the single continuous case of “personal homepage + digital twin,” it takes you from your first generation, to local editing, interface optimization, content completion, digital twin calibration, and finally to official launch.

## What this Fundamentals series does

This is not a traditional textbook that says “learn syntax first, then frameworks, and finally build a project.”

It is more like a route you can follow all the way through directly:

- First build something that runs, can be shown, and can chat
- Then bring it back to your own computer and learn how to keep modifying it
- Then improve it step by step until it feels more like a real product
- Finally launch it officially and get a link that other people can access too

This Fundamentals series assumes by default that you are an **indie vibe coder**. You do not need to assume that you have frontend, backend, or testing teammates around you. What you need to learn is how to express your ideas clearly, how to treat AI as an execution partner, and how to judge whether the result is correct.

## What you will ultimately build

The main case in this tutorial is: **personal homepage + digital twin**.

| Section | What it is responsible for | Why it suits the Fundamentals edition |
|------|-------------|------------------|
| Personal homepage | Show who you are, what you have done, and how others can contact you | The result is intuitive and makes it easy to build a sense of accomplishment |
| Digital twin | Answer the questions people ask you most often on your behalf | Naturally suited for introducing AI, and the conversation results are also easy to verify |
| Official launch | Turn your work into a stable link and share it with others | Helps you complete your first closed loop “from idea to launch” |

## Chapter structure (v2)

| Chapter | What problem this chapter solves | Core deliverable |
|------|------------------|----------|
| Chapter 0 | Before starting, first understand what you are going to learn, how to learn it, and what to do when you get stuck | A clear learning map |
| Chapter 1 | Build the first version that can be previewed and can chat | `v1` prototype |
| Chapter 2 | Bring the project back to your local machine and gain long-term control | A project that can run locally and be modified |
| Chapter 3 | Make the homepage feel more like a real work, rather than a default template | A visually unified homepage |
| Chapter 4 | Make the content more complete, and also make the code easier to roll back | A more complete homepage + a minimal Git closed loop |
| Chapter 5 | Make the digital twin feel more like you, and learn basic troubleshooting | A more stable digital twin that feels more like you |
| Chapter 6 | Launch the work officially and collect real feedback | A stable public link accessible on the internet |

## How to use this tutorial series

::: tip Recommended learning approach
1. **Start hands-on, then review**: If you tend to feel anxious, building something first will give you more confidence.
2. **Operate everything yourself in every chapter**: This is not a tutorial you can master just by reading.
3. **Ask AI first when you run into problems**: This tutorial will not require you to struggle on your own for half an hour first.
4. **You do not need to read the appendix all at once**: The appendix is for “look it up when needed,” not “memorize everything in advance.”
:::

## Where you can start

- If you want to first figure out whether this route is right for you: start with [Chapter 0: Before Starting](/Basic/00-preface/)
- If you are already eager to build the first version: after finishing Chapter 0, go straight to [Chapter 1: The First Version](/Basic/01-awakening/)

---

[Go to Chapter 0: Before Starting →](/Basic/00-preface/)