添加区块和内容
完善主视觉区、功能区和页脚。
添加区块和内容 是 CoddyKit 上的免费 Vibe Coding 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vibe Coding 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vibe Coding 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
From Skeleton to Story
Your page is styled, but the words are still placeholders. Now you fill it with real sections and content.
A landing page tells a small story: here is the problem, here is your solution, here is why to trust it, and here is the button to act.
Write the Headline
The headline is the most important line on the page. It should say the main benefit in a few words.
You can ask the AI to suggest a few options, then pick your favorite. Describe what the product does and who it helps.
Write three short headline options for the PlantPal hero.
PlantPal sends gentle reminders so houseplants never get forgotten.
Keep each headline under eight words.Add a Features Section
A features section lists what your product does, usually as three or four short points with small titles.
Tell the AI your top features and ask it to lay them out neatly, often in a row of cards.
Fill the features section with three feature cards:
1. Smart watering reminders
2. Care tips for each plant
3. Track all your plants in one place
Give each card a short title and one sentence.Explain How It Works
People feel safer when they know what to expect. A "How It Works" section shows the steps in simple terms.
Three steps is a friendly number. Ask the AI to number them and keep each step to one short line.
Add a "How It Works" section with three numbered steps:
1. Add your plants
2. Set a watering schedule
3. Get reminders on your phone
Keep each step to one short sentence.Add Social Proof
Social proof means showing that others like your product. Short quotes from happy users build trust.
For a practice page, you can ask the AI to create example testimonials. Just remember they are samples, not real reviews.
Add a testimonials section with two short sample quotes from imaginary happy users.
Label them clearly as example reviews with a first name and city.The Final Call to Action
Near the bottom, repeat your main button so ready visitors do not have to scroll back up.
Add one encouraging line above it. This last nudge often turns an interested visitor into a user.
Add a final call-to-action section near the bottom.
Include a short encouraging line like "Start caring for your plants today" and a "Get Started" button.Keep Copy Short
On landing pages, short text wins. Visitors scan rather than read every word.
If a paragraph feels long, ask the AI to trim it. "Make this shorter and simpler" is a request the AI handles instantly.
The features text feels too long.
Make each feature description shorter and simpler, just one clear line each.Match Tone to Audience
The way you write should fit who you are talking to. A plant app for beginners should sound warm and easy, not technical.
Tell the AI the tone you want, such as "friendly and encouraging", so the words feel right.
Rewrite all the text in a warm, friendly, encouraging tone.
Imagine talking to a busy beginner who loves their plants but forgets to water them.Add an Image Placeholder
Images make a page feel real. Even before you have photos, you can ask the AI for image placeholders in the right spots.
Later you can swap in a real picture. For now, a labeled placeholder box shows where the visual will go.
Add an image placeholder in the hero section next to the headline.
Label it "App screenshot goes here" so I know where to add a real image later.Check the Flow
Read your page from top to bottom. Does it move smoothly from headline, to features, to how it works, to proof, to the button?
If a section feels out of order, ask the AI to move it. The story should feel natural and lead to one clear action.
A Complete Page
Your page now tells a full story: a clear headline, real features, simple steps, friendly proof, and a final button.
You built all of it by describing what you wanted in plain words. Next, you will preview the page and make small tweaks.
Review the whole PlantPal page and make sure the sections flow in this order:
hero, features, how it works, testimonials, final call to action, footer.Quick Check
Let's review building content.
Recap: Sections and Content
You filled your skeleton with a real story: headline, features, how it works, testimonials, and a final call to action.
You learned to keep copy short, match the tone to your audience, and add image placeholders. Next comes previewing and tweaking the finished page.
常见问题解答
「添加区块和内容」课时是免费的吗？
是的 — 「添加区块和内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vibe Coding 课程的其余内容，请升级到 CoddyKit PRO。 Vibe Coding 课程共包含 4 节课。
「添加区块和内容」这节课中我会学到什么？
完善主视觉区、功能区和页脚。 你通过在浏览器中直接运行的动手代码来练习 Vibe Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vibe Coding 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vibe Coding 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「添加区块和内容」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vibe Coding 课中编写并运行代码吗？
能。每节 Vibe Coding 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。