Project 1 — Build Your AI Portfolio Website
You will build a real, live portfolio website using Claude as your AI co-builder — no coding experience needed. By the end, you will have a published URL you can put on your CV and LinkedIn today.
What You Build
Live Portfolio Website
Hero, About, Projects, Skills, Contact — all generated by Claude from your own content.
What You Learn
Prompt Engineering
Iterative prompting, the CIPHER framework, context injection, debugging AI output.
Time to Complete
2–3 Hours
Step-by-step guided build. No prior experience needed. Just follow each step.
Deliverables
3 Outputs
Published Netlify link + GitHub upload + Certificate of completion.
Your Complete Journey — 6 Steps
1
Concepts — What is iterative prompting?
Understand why one prompt is never enough, and how to think like an AI builder.
2
Prepare your content (your "raw material")
Extract your info from your CV and structure it — this becomes your prompt's context block.
3
Prompt 1 — Generate your first HTML draft
Use the CIPHER framework to generate your full single-file website.
4
Prompt 2 — Section-by-section refinement
Refine Hero, About, Projects, Skills, Contact with targeted iteration prompts.
5
Debug & Upgrade — Fix common problems
Mobile responsiveness, image issues, font problems — learn to debug with AI.
6
Deploy — Go live on Netlify in 60 seconds
Drop your HTML file on Netlify. Get a real URL. Share it everywhere.
Before you start: Open claude.ai in a new tab. You will be running all prompts there. Keep this module open alongside it. Everything you need — prompts, templates, examples — is built into this module.
The Final Result You Are Building
Hero Section
Name, title, tagline, and a CTA that makes recruiters click
About Section
Your story, education, and what makes you unique
Projects Section
3 projects with descriptions, tech stack, and GitHub links
Skills Section
Visual skill grid — technical + soft skills that match your roles
Contact Section
Email + LinkedIn + GitHub links, clean and professional
Concepts — How This Actually Works
Before you write a single prompt, understand these 4 ideas. They are the difference between getting a generic website and getting your website.
Iterative Prompting
One prompt almost never gives you a finished product. Professionals send 5–15 prompts in a conversation, refining each time. Think of it like editing a document — you write a draft, then improve it.
Context Injection
Claude only knows what you tell it. Your name, your projects, your design preferences — none of this exists unless you explicitly paste it in. The richer your context, the better the output.
CIPHER Framework
A 6-part prompt structure built for website generation. Context + Intent + Persona + Hierarchy + Examples + Refine. Each layer gives Claude a different type of information it needs.
Section-by-Section Refinement
Never try to perfect the whole website in one prompt. Once you have a draft, target one section at a time — "Fix only the Hero section" — so Claude does not accidentally break the rest.
Debugging AI Output
If something looks wrong, describe exactly what is broken and ask Claude to fix it. "The mobile nav menu is not closing when I click a link" gives Claude everything it needs to fix it instantly.
Single-File Architecture
Your entire website will live in one HTML file — HTML + CSS + JavaScript all in one place. This is the secret that makes deployment a 60-second drag-and-drop. No server. No backend. Just one file.
The CIPHER Framework — Built for Website Building
This is the exact framework from Module 0, applied to building your portfolio. Every letter is a layer of your prompt. Remove any layer and your output suffers.
C
CONTEXT
Tell Claude what you are building, for whom, with what constraints. Device targets, framework (plain HTML/CSS), what you are NOT including.
I
INTENT
State the exact goal with measurable success criteria. "I want a portfolio site that gets me interviews at product companies" is better than "I want a nice website."
P
PERSONA
Assign Claude an expert identity. "You are a Senior Frontend Developer at Vercel with 8 years of experience building developer portfolios." This activates different reasoning.
H
HIERARCHY
Tell Claude what matters most to least. Section order, priority on mobile, which information is non-negotiable vs optional.
E
EXAMPLES
Reference 2 real portfolio sites you admire. Describe their visual style in words. This is the most underused layer — it immediately improves design quality.
R
REFINE
Tell Claude to self-critique before delivering. Give it a checklist: "Before giving me the code, check: (1) mobile works at 375px, (2) hero has a clear CTA button, (3) all 5 sections are present."
Architecture Insight: Every professional website that Claude generates well has one thing in common — the prompt gave Claude a strong identity (P), clear success criteria (I), and a quality gate (R). Those 3 layers alone account for 80% of output quality.
Build It Live — Step by Step
Follow each step in order. Run every prompt in Claude, then come back here. This is a hands-on build — not theory.
1
Prepare Your Raw Content
Extract your CV info into a structured block
Active
Why this step matters: Claude can only write about you if you give it information about you. This step creates your "content block" — a structured summary of your CV that you will paste into every prompt.
Your Task: Fill In This Template
Copy the block below. Replace every
[PLACEHOLDER] with your actual information. Save it somewhere — you'll use it in Step 2.MY CONTENT BLOCK — [YOUR NAME]
================================
PERSONAL INFO
Name: [Your Full Name]
Current Role/Title: [e.g., "Final Year CS Student" or "Junior Data Analyst"]
Location: [City, Country]
Tagline: [One sentence — what you do and for whom, e.g., "I build data pipelines that help fintech companies move faster."]
Email: [your@email.com]
LinkedIn: [linkedin.com/in/yourhandle]
GitHub: [github.com/yourusername]
ABOUT ME (2-3 sentences — your story)
[Write about who you are, what you are passionate about, and what you are looking for.
Example: "I'm a final year Computer Science student at BITS Pilani, focused on AI/ML applications in healthcare. I've spent the last year building ML models for patient outcome prediction and writing about it publicly. I'm looking for a role where I can combine rigorous engineering with real-world impact."]
EDUCATION
Degree: [e.g., B.Tech in Computer Science]
University: [University Name]
Year: [2021 — 2025]
Key courses or achievements: [e.g., CGPA 8.7, Machine Learning, Data Structures]
PROJECTS (list 2-4, these are the most important part of your portfolio)
Project 1:
Name: [Project Name]
What it does: [One sentence]
Tech Stack: [e.g., Python, TensorFlow, FastAPI, PostgreSQL]
Impact/result: [e.g., 94% accuracy on test set, 500+ GitHub stars, deployed and used by 200 users]
GitHub link: [github.com/you/project]
Project 2:
Name: [Project Name]
What it does: [One sentence]
Tech Stack: [e.g., React, Node.js, MongoDB]
Impact/result: [e.g., Built for a college hackathon, won 1st place]
GitHub link: [github.com/you/project]
Project 3:
Name: [Project Name]
What it does: [One sentence]
Tech Stack: [...]
Impact/result: [...]
GitHub link: [...]
SKILLS
Technical: [e.g., Python, JavaScript, React, Node.js, SQL, TensorFlow, Docker, Git]
Familiar with: [e.g., AWS, Figma, MongoDB]
Languages: [e.g., English (fluent), Hindi (native)]
EXPERIENCE (if any — internships, part-time, freelance)
Role: [Job Title] at [Company Name]
Duration: [Month Year — Month Year]
What you did: [2-3 bullet points]
DESIGN STYLE PREFERENCE (choose one):
[ ] Dark mode — clean, minimal, developer aesthetic
[ ] Light mode — clean, professional, corporate feel
[ ] Bold & creative — lots of colour, stands out, memorable
PORTFOLIO REFERENCES (optional but powerful)
Site 1: [URL or description — e.g., "brittanychiang.com — dark mode, minimal, animated nav"]
Site 2: [URL or description — e.g., "stripe.com — clean sections, strong typography, lots of whitespace"]
Can't Think of Projects?
Use this prompt in Claude to generate 3 project ideas based on your skills:
I am a [your role/field] student/professional with skills in [list your skills].
I want 3 project ideas for my portfolio that:
- Are completable in 1-2 weeks
- Are specific to my field of interest: [your field]
- Will impress recruiters at [type of company you want to join]
- Include realistic tech stacks I can actually build
For each idea: give me the name, what it does in one sentence, the tech stack, and what makes it stand out.
I have filled in my Content Block with real information
I have at least 2 projects listed (even rough ideas are fine)
I have saved my Content Block somewhere (notepad, Notion, etc.)
2
Generate Your First Draft
The big CIPHER prompt — your full website in one go
Locked
What happens here: You will run one powerful prompt that generates your entire portfolio website as a single HTML file — with all 5 sections, proper CSS, and basic responsiveness. This is your "V1 draft" — not perfect, but 80% there.
Your Master CIPHER Prompt
Copy the prompt below. Replace the [PASTE YOUR CONTENT BLOCK HERE] section with your actual Content Block from Step 1. Then paste everything into Claude and run it.
[C — CONTEXT]
Build a complete single-file portfolio website.
Tech stack: Pure HTML + CSS + minimal vanilla JavaScript only.
No external frameworks. No npm. No backend.
Device targets: Mobile-first, fully responsive down to 375px.
Must work by opening the .html file directly in a browser.
Do NOT use placeholder images — use CSS gradient backgrounds or emoji icons instead.
[I — INTENT]
Goal: A portfolio website that gets me interviews at [your target companies/role].
Success criteria:
1. Hero section communicates who I am in under 5 seconds
2. Clear "Download CV" or "Contact Me" CTA above the fold
3. All 5 sections present: Hero, About, Projects, Skills, Contact
4. Mobile layout works perfectly — no horizontal scroll
5. Page loads fast — no heavy libraries
[P — PERSONA]
You are a Senior Frontend Engineer at Vercel with 8 years building developer portfolios.
You prioritise clean code, fast performance, and designs that stand out without being flashy.
You never use Bootstrap or jQuery. You write semantic HTML and elegant custom CSS.
You think in: visual hierarchy → contrast → whitespace → micro-animations.
[H — HIERARCHY]
SECTION ORDER (top to bottom):
1. Navigation bar (fixed, with smooth-scroll links)
2. Hero — name, title, tagline, 2 CTA buttons
3. About — story, education, what I'm looking for
4. Projects — cards with title, description, tech stack chips, GitHub link
5. Skills — visual grid with skill categories
6. Contact — email link, social links, simple footer
VISUAL HIERARCHY RULES:
- Name in the hero must be the largest text on the page
- Project cards must have a hover state
- CTA buttons must be visually distinct from regular links
[E — EXAMPLES]
Reference style 1: brittanychiang.com — dark teal theme, clean nav, animated underlines, excellent whitespace
Reference style 2: leerob.io — minimal, fast, clear typography, content-first, no distractions
[MY CONTENT]
[PASTE YOUR CONTENT BLOCK HERE — replace this line with everything from Step 1]
[R — REFINE]
Before delivering the code, check:
□ Does the hero show my name, title, and a CTA without scrolling?
□ Are all 5 sections present and linked from the nav?
□ Does the layout not break on a 375px wide screen?
□ Are project tech stacks shown as styled chips/badges?
□ Is the CSS clean with CSS variables for colors at the top?
If any check fails, fix it before delivering.
Deliver: ONE complete .html file. No explanations before the code. No code blocks after. Just the full file.
What To Do With Claude's Output
1. Claude will give you a large block of HTML code.
2. Select all of it and copy it.
3. Open a plain text editor (Notepad on Windows, TextEdit on Mac — set to plain text mode).
4. Paste the code and save the file as
5. Double-click the file to open it in your browser. That is your website.
2. Select all of it and copy it.
3. Open a plain text editor (Notepad on Windows, TextEdit on Mac — set to plain text mode).
4. Paste the code and save the file as
index.html5. Double-click the file to open it in your browser. That is your website.
Normal experience: Your first draft will have some issues — maybe the colours are not quite right, or a section looks plain. That is completely expected and perfectly fine. Steps 3 and 4 are specifically for fixing that.
I ran the CIPHER prompt in Claude with my Content Block pasted in
I saved the output as index.html and opened it in my browser
I can see all 5 sections (Hero, About, Projects, Skills, Contact)
3
Refine Section by Section
Targeted iteration prompts for each section
Locked
The golden rule of iteration: Always tell Claude exactly which section to fix and tell it to keep everything else identical. "Fix only the Hero section, do not change any other section." This prevents Claude from accidentally breaking parts that are already good.
How to continue the conversation in Claude
After Step 2, you are in the same Claude conversation. Do NOT start a new chat. Stay in the same thread and run these refinement prompts one at a time.
H
Refine the Hero Section
Run this if your hero looks bland or your name/title isn't making an impact:
Fix ONLY the hero section. Keep all other sections exactly the same.
The hero needs:
- My name in very large bold type (at least 3.5rem on desktop)
- A typing animation on my title (cycles through 2-3 roles I play)
- A one-line tagline that sounds compelling, not generic
- Two CTA buttons: "View My Work" (scrolls to projects) and "Download CV" (links to a placeholder #)
- A subtle animated gradient or particle background — nothing too heavy
- On mobile (375px): name still prominent, buttons stack vertically
Current problem with my hero: [DESCRIBE WHAT LOOKS WRONG — e.g., "the name is too small", "there's no animation", "the CTA button is hard to see"]
Keep the exact same colors, fonts, and CSS variables from the current code.
P
Refine the Projects Section
Projects are the most important section for getting interviews. Make them shine:
Fix ONLY the projects section. Keep everything else identical.
Each project card must have:
- Project name as a clickable heading (links to GitHub)
- 2-sentence description that explains WHAT it does and WHO it helps
- Tech stack displayed as small coloured badge chips (not bullet points)
- A "View on GitHub" button with an arrow icon
- A card hover effect — slight lift (translateY) and border glow
- On mobile: cards stack in a single column, full width
Card visual style: dark card background, slight border, clean whitespace inside.
Do NOT use placeholder "Lorem ipsum" text — use the actual project descriptions I provided earlier.
Add a featured/pinned indicator on my first project card (a small "Featured" badge in the top right corner).
S
Refine the Skills Section
Make your skills visual and scannable — recruiter should see your stack in 3 seconds:
Fix ONLY the skills section. Keep everything else identical.
Design the skills section as:
- Grouped categories: e.g., "Languages", "Frameworks", "Tools & Databases", "Currently Learning"
- Each skill as a pill/chip with a subtle background colour per category
- Skills I know well: full opacity; skills I am learning: slightly muted with a "Learning" badge
- Clean grid layout — 3-4 columns on desktop, 2 on tablet, 2 on mobile
- Each category has a small section heading
DO NOT use progress bars (they look fake and recruiters hate them).
DO NOT put percentages next to skills.
Use my exact skills from the content I provided — do not add or remove any.
A
Refine the About Section + Contact
Make your About section human and memorable, and your Contact section effortless:
Fix ONLY the About and Contact sections. Keep everything else identical.
ABOUT SECTION:
- Rewrite my about text to sound more conversational and human — not robotic, not a resume bullet list
- Add a small stats bar: e.g., "3 Projects Built · 2 Internships · 500+ GitHub commits" (use my real numbers)
- Include my education details cleanly
- Add a "What I'm currently working on:" line — make it sound authentic
- Keep it short: 150-200 words maximum
CONTACT SECTION:
- Clean, minimal layout — just my contact links
- Include: Email (mailto link), LinkedIn, GitHub
- Each link as a styled button/card with an icon (use emoji as icons: 📧 💼 🐙)
- A short, warm closing line above the links: something like "Let's build something together."
- Footer: just my name + year. No clutter.
Hero — name is large, has a typing animation, 2 CTA buttons visible
Projects — cards with tech chips, hover effects, GitHub links
Skills — grouped categories, pill chips, no fake progress bars
About + Contact — human writing, clean social links in footer
4
Visual Upgrade — Make It Memorable
Add scroll animations, a dark/light toggle, and final polish
Locked
This is where 80% of portfolios stop — and where yours will go further. Scroll animations and a dark/light toggle take ~5 minutes each to add via prompting, but they make your site look like a professional built it.
Upgrade Prompt 1 — Scroll Reveal Animations
Add scroll reveal animations to the existing website. Keep all content and styles identical.
Requirements:
- Use IntersectionObserver (pure JavaScript — no library)
- Sections fade in and slide up when they enter the viewport
- Project cards animate in with a stagger delay (card 1 first, then card 2, then card 3)
- Skills chips animate in with a cascading delay
- The animation should be subtle: 40px translateY, opacity 0 to 1, 0.5s ease
Add this without breaking any existing functionality.
Keep the same HTML structure — only add the CSS animation classes and the JS observer code.
Upgrade Prompt 2 — Dark/Light Mode Toggle
Add a dark/light mode toggle to the existing website.
Requirements:
- A small toggle button in the navigation bar (top right)
- Use CSS custom properties (variables) for all colors — switching modes just swaps variable values
- Dark mode: current style (dark background, light text)
- Light mode: clean white background (#fafafa), dark text, same accent color
- Remember the user's preference using localStorage
- Toggle icon: 🌙 for dark mode, ☀️ for light mode
- Smooth transition (0.3s) when switching modes
Add this without changing any existing content or breaking the layout.
Upgrade Prompt 3 — Custom Cursor + Active Nav Highlight
Add two final polish touches to the existing website:
1. ACTIVE NAV HIGHLIGHT
- The navigation link for the current section should be highlighted as the user scrolls
- Use IntersectionObserver to detect which section is in view
- Highlight style: accent color underline or border-bottom on the active nav link
- Smooth transition between active states
2. MOBILE HAMBURGER MENU
- On mobile (below 768px), hide the nav links and show a hamburger icon (☰)
- Clicking it reveals the nav links as a dropdown
- Clicking any link or clicking outside closes the menu
- Use smooth CSS transition for open/close
Add these without changing any existing styles or content.
Scroll animations are working — sections fade in as I scroll
Dark/light toggle is in the nav and working correctly
Mobile menu (hamburger) is working on small screens
Debug & Fix Common Problems
Every portfolio built with AI has at least one thing that needs fixing. Here are the 7 most common problems and the exact prompts to fix each one.
Problem 01
Layout breaks on mobile
Text overflows, sections have horizontal scroll, or cards are too wide.
Fix the mobile layout — the website breaks at screen widths below 768px.
Specific problems: [DESCRIBE exactly what you see — e.g., "the project cards are wider than the screen", "the nav links don't fit in one row", "text is cut off on the right side"]
Requirements for the fix:
- Target: iPhone SE (375px width) must look clean
- Use CSS flexbox wrap or CSS grid with auto-fill/minmax
- Remove any fixed pixel widths that are wider than the viewport
- Ensure padding/margin doesn't cause overflow
- Test: nav, hero, project cards, skills grid, contact section — all must fit within 375px without horizontal scroll
Fix only the mobile CSS. Do not change the desktop layout.
Problem 02
Fonts look ugly or default
Claude used Arial or system fonts. You want something clean and distinctive.
Upgrade the typography using Google Fonts (CDN link in the head).
Choose this font pairing:
- Display / Headings: "Syne" (weights 700, 800) — for my name, section titles, project names
- Body / Text: "DM Sans" (weights 400, 500, 600) — for all paragraph text, nav links, descriptions
- Code / Tech tags: "JetBrains Mono" (weight 400) — for tech stack chips and any code elements
Add the Google Fonts @import link at the top of the CSS.
Apply the fonts using CSS variables:
--font-display: 'Syne', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
Update all CSS selectors to use these variables.
Do not change any layout, colors, or content.
Problem 03
Colors look generic or boring
The site uses basic blue/white or looks like a template.
Retheme the entire website with a new color palette. Only change CSS variables — do not change any HTML or layout.
Choose ONE of these themes and apply it:
THEME A — "Dark Teal" (developer aesthetic)
--bg: #0a0f14; --bg-card: #111820; --accent: #14b8a6; --text: #e8f0f5;
THEME B — "Slate Purple" (creative/design aesthetic)
--bg: #0d0b14; --bg-card: #13101f; --accent: #8b5cf6; --text: #f0ecff;
THEME C — "Amber Dark" (warm, approachable)
--bg: #0d0b08; --bg-card: #161410; --accent: #f59e0b; --text: #fef3e0;
THEME D — "Ice Blue" (clean, corporate)
--bg: #f0f4f8; --bg-card: #ffffff; --accent: #0ea5e9; --text: #1e293b;
Apply [THEME LETTER] — only change the CSS variable values at the top of the :root block. All other CSS stays identical.
Problem 04
Nav links don't scroll smoothly
Clicking nav links jumps abruptly, or doesn't work at all.
Fix the navigation so all links work with smooth scrolling.
Requirements:
1. Add scroll-behavior: smooth to the html element in CSS
2. Ensure all nav links use href="#section-id" format (e.g., href="#projects")
3. Ensure all sections have matching id attributes (id="projects" etc.)
4. Offset scrolling by the nav height so sections don't scroll under the fixed nav — use scroll-margin-top: 70px on all section elements
5. On mobile: after clicking a nav link, the hamburger menu should automatically close
Fix only the navigation JS and scroll behavior. Do not change any content or visual styles.
Problem 05
The page looks like a template
Nothing memorable — it looks like 1000 other portfolios.
Add ONE memorable visual element that makes this portfolio stand out. Do not change the content, colors, or layout. Only add this element.
Choose ONE:
OPTION A — Geometric background pattern on the hero section (CSS-only SVG data URL pattern — no images)
OPTION B — A glowing cursor trail effect (pure JS, follows the mouse, leaves small glowing dots that fade out in 0.5s)
OPTION C — A subtle "noise/grain" texture overlay across the entire background (using CSS filter and a pseudo-element — no images)
OPTION D — A horizontal scrolling ticker above the nav showing my skills/tech stack cycling continuously (pure CSS animation)
Implement OPTION [CHOOSE A/B/C/D] cleanly without affecting any existing functionality.
Problem 06
Projects section has no real descriptions
Descriptions are vague or generic. Recruiters won't understand what you built.
Rewrite the project descriptions in the projects section. Keep the visual layout identical — only change the text content.
For each project, the description must follow this formula:
"I built [PROJECT NAME] — [what it does in one sentence]. It [specific technical achievement or metric, e.g., processes 10,000 requests/sec, achieves 94% accuracy, serves 200+ daily users]. Built with [key tech stack]. [One sentence about the challenge it solves or why you built it]."
Here are my project details:
[PASTE your project details from your Content Block]
Rewrite only the description text inside the project cards. Keep all styling, buttons, and tech chips identical.
Problem 07
Claude gave me incomplete or broken code
Claude stopped mid-response, the HTML is missing a closing tag, or JS throws errors.
The code you gave me is incomplete/broken. Do the following:
1. Give me the COMPLETE file from the very beginning (<!DOCTYPE html>) to the very end (</html>)
2. Do NOT truncate or summarise any section — include every single line
3. The file must be self-contained — no external files needed
4. If you need to split the response, tell me and I will ask "continue" to get the rest
Specific error I am seeing: [DESCRIBE THE ERROR — e.g., "the page is blank", "there's a syntax error on line X", "the JavaScript throws 'Cannot read property of null'"]
Fix this specific issue AND deliver the complete corrected file.
The Debugging Mindset: When something is broken, resist the urge to say "fix it." Instead, describe precisely what you see, what you expected, and what you actually got. The more specific your bug report, the faster and more accurately Claude fixes it. This skill — precise bug description — is what separates good developers from great ones.
Deploy — Go Live in 60 Seconds
Your website lives on your computer right now. Let's put it on the internet with a real URL you can share anywhere — for free, in under 60 seconds.
Netlify Drop — The Simplest Deployment on Earth
1
Go to netlify.com/drop — no account needed.
2
You will see a big drag-and-drop area that says "Drag and drop your site output folder here".
3
Create a folder on your desktop called
my-portfolio and put your index.html file inside it.4
Drag that folder onto the Netlify Drop area.
5
In about 5 seconds, Netlify gives you a URL like
random-name-123.netlify.app — that is your live website.★
Optional: Create a free Netlify account to get a custom subdomain like
yourname.netlify.app and keep the site permanent.GitHub Upload — For Your CV + Portfolio
Uploading to GitHub makes your project part of your public developer profile. Recruiters check GitHub. This takes 2 minutes.
1.Go to github.com and sign in (or create a free account).
2.Click the + icon → New repository. Name it
portfolio. Set it to Public. Click Create.3.On the repository page, click uploading an existing file.
4.Drag your
index.html into the upload area. Write a commit message: "Initial portfolio upload". Click Commit.5.Your file is now at
github.com/yourusername/portfolio — add this to your CV under Projects.Your LinkedIn Post (AI-Written)
Use this prompt to generate a LinkedIn post announcing your project. Run it in Claude, customise the output, and post it today:
Write me a LinkedIn post announcing that I just built and deployed my personal portfolio website using AI prompting.
Context:
- I am a [your role/student status] in [your field]
- I built the entire site using Claude as my AI co-builder — no traditional coding
- The site has: Hero, About, Projects, Skills, Contact sections
- It's live at: [YOUR NETLIFY URL]
- GitHub: [YOUR GITHUB LINK]
- I learned: iterative prompting, the CIPHER framework, and how to debug AI output
Post requirements:
- Start with a hook that makes people curious (not "Excited to share...")
- Mention the prompting approach specifically — this is the differentiator
- Invite others to ask how I built it (drives engagement)
- Include: the live link, 3 relevant hashtags
- Tone: confident but humble, genuine, not corporate
- Length: 150-200 words max
After deploying: Come back here and complete the Quiz to unlock your certificate. The certificate criteria requires uploading your Netlify link — that is how we verify you actually built it.
Final Quiz — 8 Questions
Test your understanding of iterative prompting, the CIPHER framework, and AI-assisted web building. Score 5/8 or above to unlock your certificate.
Score:
0
/ 8
Your Certificate
Complete the requirements below to unlock your Module 2 certificate from ASJPrompts & Studio · Claude Skill Engineering Bootcamp.
Steps Completed
0/4
Quiz Score
0/8
XP Earned
0
Certificate
Locked
Submit Your Live Website
Your certificate is tied to a real project you actually deployed. Paste your Netlify URL below to verify and unlock.