Course එකට ආපසු

The One-Prompt Website Project

60 මිනිත්තු🛠️Project

The One-Prompt Website Project

This is it — the main event! You're going to create a complete, shareable website using only AI prompts. Let's build something real!

🎯 Lesson Objectives

By the end of this lesson, you will:

  • Create a complete, shareable webpage using only AI
  • Apply C.I.C. prompting techniques from Module 2
  • Practice the iterate-and-refine workflow
  • Get a live URL to your creation

The Challenge

🏆 Project Requirements

Your website MUST include:

  • A header with a title
  • At least one image or icon
  • Some text content (description, bio, info)
  • At least one interactive element (button, link)
  • An intentional color scheme

Time: ~60 minutes Deliverable: A shareable link to your creation

Step 1: Choose Your Project (5 minutes)

Pick ONE of these project types:

ProjectWhat It IsGood For
Personal Profile CardA card introducing yourselfPortfolio start
Recipe DisplayA beautiful recipe pageFood lovers
Event InvitationDigital invite for any occasionBirthdays, parties
Quote of the DayInspirational quote showcaseMotivation
Product ShowcaseSingle product landing pageBusiness ideas
📝

Reflection Journal

Saved privately on your device
0 characters
0 total characters

Step 2: Write Your Master Prompt (10 minutes)

Remember C.I.C. from Module 2? Let's use it!

C.I.C. Framework Reminder

  • Context — Set the scene, give background
  • Instruction — What you want AI to do
  • Constraint — Rules, limitations, requirements

Template:

Master Prompt Template
CONTEXT: You are a web designer creating a modern, mobile-friendly webpage. INSTRUCTION: Build a [YOUR PROJECT TYPE] that includes: - [Feature 1 - be specific] - [Feature 2 - be specific] - [Feature 3 - be specific] - [Feature 4 - be specific] - [Feature 5 - be specific] CONSTRAINTS: - Clean, minimal design - Must look good on mobile phones - Use [your color preference] colors - Modern typography
ChatGPTClaude

Example Prompts by Project Type:

Personal Profile Card:

Try this prompt
CONTEXT: You are a web designer creating a professional personal profile card. INSTRUCTION: Build a profile card for 'Saman Perera' that includes: - A circular profile photo placeholder - Name in bold heading - Job title: 'Software Developer' - Short bio: 'Passionate about building apps that help people' - Contact button that looks clickable - Social links section (LinkedIn, GitHub, Twitter icons) CONSTRAINTS: - Modern, clean design with rounded corners - Color scheme: Navy blue and white - Must look perfect on mobile - Subtle shadow for depth
ChatGPTClaude

Recipe Display:

Try this prompt
CONTEXT: You are a web designer creating a beautiful recipe page. INSTRUCTION: Build a recipe page for 'Chocolate Chip Cookies' that includes: - Attractive food image placeholder - Recipe title in elegant typography - Prep time: 15 min, Cook time: 12 min - Ingredients list (butter, sugar, flour, chocolate chips, eggs) - Step-by-step instructions - 'Save Recipe' button CONSTRAINTS: - Warm, inviting color scheme (cream, brown tones) - Easy to read on mobile while cooking - Clear visual hierarchy - Rounded corners on all elements
ChatGPTClaude
📝

Reflection Journal

Saved privately on your device
0 characters
0 total characters

Step 3: Generate First Version (10 minutes)

✅ Generation Steps

0/6

Don't Panic!

Your first result probably won't be perfect. That's completely normal!

The magic happens in the iteration phase.

Step 4: Review & Iterate (20 minutes)

Review Checklist

Look at your generated design and ask:

QuestionIf NO, try this prompt...
All required elements present?"Add [missing element]"
Layout looks right?"Fix the layout to be [description]"
Colors as expected?"Change colors to [new colors]"
Text is readable?"Improve text contrast and size"
Good on mobile?"Make this mobile-friendly"

Common Iteration Prompts:

Try this prompt
Center everything horizontally on the page
ChatGPTClaude
Try this prompt
Make the title larger and bolder
ChatGPTClaude
Try this prompt
Add more spacing between sections
ChatGPTClaude
Try this prompt
Use a softer, more pastel version of the colors
ChatGPTClaude
Try this prompt
Make the button more prominent with a shadow
ChatGPTClaude
Try this prompt
Add a subtle gradient to the background
ChatGPTClaude

Track Your Iterations:

📝

Reflection Journal

Saved privately on your device
0 characters
0 total characters

Step 5: Final Polish (10 minutes)

Before finishing, go through this checklist:

✅ Final Polish Checklist

0/8

Final Polish Prompts:

Try this prompt
Review this design and make any improvements for professionalism
ChatGPTClaude
Try this prompt
Ensure consistent spacing and alignment throughout
ChatGPTClaude
Try this prompt
Add subtle hover effects to interactive elements
ChatGPTClaude

Step 6: Get Your Shareable Link (5 minutes)

From v0.dev:

  1. Look for the Share icon (box with arrow)
  2. Click it
  3. Copy the generated link
  4. Test it in a new browser tab

From Replit:

  1. Click Run
  2. Look at the preview panel
  3. Click the expand/open icon
  4. Copy the URL from the browser bar
📝

Reflection Journal

Saved privately on your device
0 characters
0 total characters

✅ Link Verification

0/4

🎉 Congratulations!

What You Just Accomplished

✅ You had an idea

✅ You described it in natural language

✅ AI transformed your words into working code

✅ You refined it through conversation

✅ Now it lives on the internet

✅ Anyone with the link can see YOUR creation

This is vibe coding in action!

Reflection

📝

Reflection Journal

Saved privately on your device
0 characters
0 total characters

✅ Lesson Summary

What you created:

  • A complete, working webpage
  • Built entirely with AI prompts
  • Live on the internet
  • Shareable with anyone

Skills practiced:

  • C.I.C. prompting
  • Iteration and refinement
  • Design thinking
  • Shipping (making things live!)

➡️ Next Lesson

Your creation exists — now let's share it with the world and start building your portfolio!