Fundamentals
How is this Fundamentals edition different from the old one?
If you have studied the old edition, or are still reading it, here is the fastest way to understand the change: the new edition is not just a few patchy updates. It has been reorganized into one clearer mainline storyline.
Positioning
The new edition is built around one continuous case: a personal homepage + digital twin. Instead of jumping back and forth between scattered examples and concepts, you follow one project all the way through your first full loop from idea to launch.
Strength
The new edition emphasizes building first, then understanding step by step. The chapter order follows a more realistic AI collaboration flow: generate the first version, bring it local, improve the interface, complete the content, tune the digital twin, and launch it.
Goal
The goal is not to turn you into a professional engineer overnight. It is to help you build three core abilities: make it real, keep changing it, and ship it. Once you finish your first real project, later technical learning becomes much easier to anchor.
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
Recommended learning approach
- Start hands-on, then review: If you tend to feel anxious, building something first will give you more confidence.
- Operate everything yourself in every chapter: This is not a tutorial you can master just by reading.
- Ask AI first when you run into problems: This tutorial will not require you to struggle on your own for half an hour first.
- 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
- If you are already eager to build the first version: after finishing Chapter 0, go straight to Chapter 1: The First Version