This is the exciting part. We'll go slowly, and by the end you'll have a real website with its own link.
Let's build something that's truly yours, Lisa. All those Trinidadian recipes you have stored away on paper — the pelau, the callaloo, the doubles, the black cake — we're going to bring them to life as a beautiful recipe web app. Something you can search, share with family anywhere in the world, and never lose. By the end of this lesson, it'll be live on the internet. 🌿
Today's goal: your recipe collection, turned into a lovely little web app that's live online with its own link. Follow along at your own pace — there's no way to break anything.
💚 A promise from Mentor Ria: You will never do this part alone, Lisa. Bringing your recipes to life is exactly what we'll do together in our next tutoring session — so there's nothing to fear. For now, just read through and picture it. I'll be right there with you.
What a website actually is
A website is just a file written in HTML — think of it like the layout of a nicely designed flyer. You will never have to write it yourself; the AI does that. You only need to recognize it. Here's a tiny peek:
<h1>Lisa's Trini Kitchen</h1>
<h2>Trinidad Pelau</h2>
<p>A one-pot family favourite.</p>
<button>See the recipe</button>
See how it almost reads like plain English? That's all there is to it underneath.
Step by step
1
Open Claude or ChatGPT. The free version is perfect.
2
Paste the recipe app prompt below. Just copy it — it's written for you. You'll add your real recipes in Step 5.
🍲 Your ready-to-paste recipe app prompt
Build a complete recipe web app as a single HTML file called "Lisa's Trini Kitchen." It should hold my Trinidadian family recipes. Include a warm welcome header, a search box that filters recipes as I type, and category buttons (Mains, Sides, Sweets, Drinks). Show each recipe as a card with its name, a short description, an ingredients list, and step-by-step instructions. Start it with 3 example Trinidadian recipes (Pelau, Callaloo, Coconut Bake) that I can replace with my own. Make it warm and welcoming with green and gold colors, and make sure it works beautifully on a phone.
Don't worry about getting it perfect — just paste it and watch the AI build your whole app. You can change everything after. 💛
👀 See where you're headed: open the finished recipe app preview and its cookbook cover — both full of Trini recipes. That's a preview of what's possible. The real reward is building your own, hands-on, right here — so it holds your recipes and feels truly yours. 💚
3
Copy the full code it gives you.
4
Save it. Open Notepad, paste, and save the file as index.html. Double-click it — it opens in your web browser. That's your website!
5
Add your real recipes. This is the special part. Tell the AI: "Add a recipe for my black cake with these ingredients and steps…" — one at a time, straight from your recipe box. Also: "Use softer colors," "Make the titles bigger." Keep going until it feels like your kitchen.
6
Put it online. Visit netlify.com/drop and drag your file onto the page. It instantly gives you a real link you can share. It's free and takes under a minute. 🎉
✅ Your checklist
Tick these off as you go — it remembers where you left off.
Key takeaways
A website is just an HTML file — the AI writes it for you.
Prompt → copy → save as index.html → open it.
Netlify Drop puts it online, free, in under a minute.
You just created something many people pay to have made.
Next → How to turn this into a real little business.