Flagship Project: Deploy Your Own Website

Prove you can do it — build and ship a real website that lives on the internet under your own domain.

INFO

• Time: ~4-6 hours
• Difficulty: Intermediate
• Prerequisites: Modules 0-10
• Outcome: A live website you own and control

---

This Page Covers

• What you're building and why it matters
• Project options to choose from
• Step-by-step build guide
• Verification checklist
• What you've accomplished

---

Project Goal

What You're Building

This is your capstone project. You will build a real website that:

• Lives on the internet at a URL anyone can visit
• You own and control — not hosted on someone else's platform like Medium or LinkedIn
• Uses skills from the entire course — from prompting AI to deploying and maintaining
• Solves a real problem — whether for yourself, your business, or your career

This is not a practice exercise. When you finish, you will have a professional website that you can share, update, and maintain for years to come.

Why This Matters

Building something real is different from following tutorials. You will face real decisions: What should the homepage say? What color scheme fits your brand? How should the navigation work?

These decisions are where learning happens. By the end, you will not just understand the concepts — you will have proven you can apply them.

What You'll Prove

By completing this project, you demonstrate:

• [ ] You can build with AI assistance
• [ ] You understand what AI generates
• [ ] You can use version control
• [ ] You can deploy to production
• [ ] You can configure DNS
• [ ] You own and control your work

---

Project Options

Choose one based on your goals. All options use the same technical workflow — only the content differs.

Portfolio Site

Best for: Job hunters, freelancers, creatives, anyone who wants to showcase their work.

What to include:

• About section — Who you are and what you do
• Projects or work samples — 3-6 examples with descriptions and images
• Skills or services — What you offer
• Contact information — How people can reach you

Example prompt for AI:

Create a portfolio website for a freelance UX designer named Maya Chen.
Include a hero section with "Design that puts users first", an about
section, a portfolio grid showing 4 project thumbnails with titles,
a skills section listing Figma, user research, and prototyping, and
a contact section with email. Clean, minimal design with purple accents.

Business Landing Page

Best for: Side projects, small businesses, freelance services, consulting.

What to include:

• Value proposition — What problem you solve in one sentence
• Services or features — What you offer (3-4 items)
• Social proof — Testimonials, client logos, or results
• Call to action — What you want visitors to do (contact, sign up, buy)
• Contact information — How to get in touch

Example prompt for AI:

Build a landing page for a home organization service called "Clutter Free
Living". Include a hero with "Transform your space, transform your life",
three service cards (closet organization, garage cleanup, moving prep),
a testimonials section with 2 client quotes, pricing information, and
a contact form. Warm, calming colors with green and cream.

Personal Site

Best for: Establishing your online presence, having a "home base" on the internet.

What to include:

• Introduction — Who you are in a few sentences
• Interests or what you're working on — What matters to you
• Links — Social media, projects, writing, or other places you exist online
• Contact — How to reach you

Example prompt for AI:

Create a personal website for Alex Rivera. Include a short intro "Product
manager by day, amateur chef by night", a section about current interests
(AI tools, sustainable living, travel), links to Twitter, LinkedIn, and
a newsletter, and a simple contact section. Modern, friendly design with
dark mode colors.

Documentation Site

Best for: Open source projects, hobby projects, guides, or anything that needs organized information.

What to include:

• Overview — What this project or topic is about
• Getting started — How to begin
• Guides or tutorials — Step-by-step instructions
• Reference — Detailed information for specific topics
• FAQ — Common questions

Example prompt for AI:

Create a documentation website for a homebrew beer recipe collection.
Include a home page explaining the project, a "Getting Started with
Homebrewing" guide, a recipe index with categories (IPAs, stouts,
lagers), and a FAQ section. Clean, readable design with amber and
white colors.

Blog

Best for: Sharing your thoughts, building an audience, establishing expertise.

What to include:

• Home page — Latest posts or featured content
• Post list — Archive of all posts with dates
• About page — Who you are and what you write about
• Categories or tags — Optional, for organizing content
• Subscribe or contact — How to stay connected

Example prompt for AI:

Build a blog for a product manager who writes about AI tools and
productivity. Include a home page with the 3 latest posts, an about
page, a post archive organized by date, and a newsletter signup form.
Professional but approachable design with blue and white colors.

---

Step-by-Step Build Guide

No matter which project type you chose, the workflow is the same. Follow these steps in order.

Step 1: Plan Your Content

Before you start building, spend 15-30 minutes planning. Open a notes app or grab paper and answer:

What is the purpose of this site? Write one sentence. "This site helps potential clients understand my services and contact me."

Who will visit? Describe your target visitor. "Hiring managers looking for UX designers" or "Friends and family who want to see what I'm up to."

What pages or sections do you need? List them. Most sites need at least:

• Home (with a clear message)
• About
• Main content (portfolio, services, posts)
• Contact

What content do you need to gather?

• Text: bio, descriptions, headlines
• Images: photos, project screenshots, logos
• Links: social media, email, other sites

Do not skip this step. Planning prevents wasted time rebuilding later.

Step 2: Build with AI

You have two options for building. Choose based on your comfort level.

Option A: Use Lovable (Easier)

If you completed Module 0, you already know how to use Lovable. This is the fastest path.

1. Go to lovable.dev
2. Start a new project
3. Describe your site using the prompts from your project type above
4. Iterate: ask for changes until you're happy
5. When ready, Lovable can connect directly to GitHub (look for "Connect to GitHub" in settings)

Option B: Use VS Code with AI (More Control)

If you want more control or prefer working in VS Code with Claude or Cursor:

1. Create a new folder for your project
2. Open it in VS Code
3. Use AI (Claude, Cursor, or GitHub Copilot) to generate your site
4. Start with: "Create a simple portfolio website with HTML, CSS, and JavaScript. Include a homepage with my name, about section, project gallery, and contact form."
5. Save files as the AI generates them
6. Preview locally using Live Server extension (right-click on index.html and select "Open with Live Server")

Tip: If using VS Code, start simple. Get a basic version working first, then add features one at a time.

Step 3: Test Locally

Before deploying, make sure everything works on your computer.

Check these things:

1. Does every page load? Click through all navigation links.
2. Does it look right on mobile? Use browser dev tools (F12) to test responsive design. Click the phone/tablet icon to simulate different screen sizes.
3. Do all links work? Click every link and button.
4. Are there console errors? Open dev tools (F12), check the Console tab for red error messages.
5. Is the content accurate? Read through everything. Fix typos and placeholder text.

Step 4: Set Up Git and Push to GitHub

Now let's save your work and put it on GitHub. If you used Lovable's GitHub integration, skip to Step 5.

If you have not initialized Git yet:

1. Open your terminal (or VS Code's terminal)
2. Navigate to your project folder
3. Run these commands:

git init
git add .
git commit -m "Initial version of my website"

Create a GitHub repository:

1. Go to github.com and sign in
2. Click the "+" icon in the top right, then "New repository"
3. Name it something descriptive (like "my-portfolio" or "business-landing-page")
4. Keep it Public (required for free hosting)
5. Do NOT initialize with README (you already have files)
6. Click "Create repository"

Connect and push:

GitHub will show you commands. Copy and run them:

git remote add origin https://github.com/yourusername/your-repo-name.git
git branch -M main
git push -u origin main

Verify: Refresh your GitHub repository page. You should see your files.

Step 5: Deploy to Netlify

Time to put your site on the internet.

1. Go to app.netlify.com
2. Sign up or log in (use your GitHub account for easiest setup)
3. Click "Add new site" then "Import an existing project"
4. Click "Deploy with GitHub"
5. Select your repository
6. Configure build settings:
   • Build command: Leave blank for plain HTML, or use npm run build for frameworks
   • Publish directory: Usually . for plain HTML, out for Next.js, dist for Vite
7. Click "Deploy site"

Wait 1-2 minutes. Netlify will give you a URL like random-words-12345.netlify.app.

Test it: Open that URL in a new tab. Your site is live!

Step 6: Configure a Custom Domain (Optional but Recommended)

A custom domain like yourname.com looks more professional than random-words.netlify.app.

If you don't have a domain:

1. Go to namecheap.com or cloudflare.com/products/registrar
2. Search for available domains
3. Purchase one (typically $10-15/year for a .com)

Add your domain to Netlify:

1. In Netlify, go to "Site settings" then "Domain management"
2. Click "Add custom domain"
3. Enter your domain (like yourdomain.com)
4. Follow Netlify's instructions to configure DNS

There are two ways to configure DNS:

• Use Netlify DNS (easier): Change your domain's nameservers to Netlify's. Netlify handles everything.
• Add records manually: Keep your current DNS provider and add the records Netlify specifies.

Wait for it to work:

DNS changes take time to spread across the internet. Usually 15 minutes to a few hours, occasionally up to 48 hours.

Verify HTTPS:

Once DNS propagates, Netlify automatically sets up HTTPS. You will see a padlock icon in the browser's address bar.

Step 7: Verify Everything Works

Before celebrating, run through the final checks in the next section.

---

Verification Checklist

Go through every item. Do not skip any.

Site Loads Correctly

• [ ] Site loads at your URL — both the Netlify URL and custom domain (if configured)
• [ ] HTTPS is working — you see the padlock icon in the address bar
• [ ] No "mixed content" warnings — all resources load over HTTPS
• [ ] Page loads in under 5 seconds — on normal internet connection

All Content Works

• [ ] Every page loads — click through all navigation links
• [ ] No broken links — all links go somewhere (no 404 errors)
• [ ] No placeholder text — search for "lorem ipsum" or "TODO"
• [ ] No placeholder images — all images are real content
• [ ] Contact information is accurate — email, phone, social links

Mobile Responsive

• [ ] Site looks good on mobile — test in browser dev tools
• [ ] Navigation works on small screens — menu is accessible
• [ ] Text is readable — no tiny fonts or horizontal scrolling
• [ ] Buttons and links are tappable — large enough touch targets

Technical Health

• [ ] No console errors — check browser dev tools Console tab
• [ ] Images are optimized — not huge file sizes slowing load time
• [ ] Favicon is set — little icon appears in browser tab

Git and GitHub

• [ ] Repository is on GitHub — you can see your files at github.com
• [ ] Commits have clear messages — describes what changed
• [ ] No secrets in code — no API keys, passwords, or private data

Auto-Deploy Configured

• [ ] Changes deploy automatically — push to GitHub, site updates
• [ ] You know how to check deploy status — can view in Netlify dashboard

Documentation

• [ ] README exists — explains what the project is
• [ ] README includes local setup — how to run on your own computer
• [ ] You remember how everything works — could you update it in 6 months?

---

What You've Accomplished

Take a moment to appreciate what you just did.

Skills You Used From Each Module

Module 0 - Day 1 Quick Win You built with AI assistance, turning descriptions into working code.

Module 1 - How the Web Works You understand what HTML, CSS, and JavaScript do. You know what happens when someone visits your URL.

Module 2 - Development Environment You set up and used professional tools: VS Code, terminal, browser dev tools.

Module 3 - Understanding AI Tools You know the difference between AI tools and when to use each. You prompted effectively and iterated on results.

Module 4 - Prompt Engineering You wrote clear descriptions that got the results you wanted. You knew how to ask for changes.

Module 5 - Essential Formats You worked with files, folders, and web formats. You understand how your project is structured.

Module 6 - Security & Privacy You kept secrets out of your code. You understand HTTPS and why the padlock matters.

Module 7 - Version Control You used Git to track your work. Your code is backed up on GitHub with a history of changes.

Module 8 - Debugging You tested your site, found issues, and fixed them. You used browser dev tools to diagnose problems.

Module 9 - Deployment You deployed to Netlify, configured DNS, and set up automatic deployments.

Module 10 - Knowing When Not To You made smart decisions about scope. You shipped something real instead of planning forever.

What You Can Now Say

You can confidently say:

• "I built and deployed a website from scratch."
• "I understand version control and use Git."
• "I can deploy projects to production with custom domains."
• "I can debug issues using browser tools."
• "I work with AI as a collaborator, not a crutch."

You Are an AI-Enabled Builder

This is not just a title. You have the receipts:

• A live website at a real URL
• Code in a GitHub repository
• Skills to maintain and update your work
• Understanding of how it all fits together

Most importantly, you can do this again. The next project will be faster because you understand the workflow.

---

Ready for Level 2

You've completed the core curriculum. Now choose a specialization based on your interests:

Specialization	Best For
A: Knowledge System	Heavy note-takers, knowledge managers
B: MCP Integration	Power users wanting AI to work with their data
C: Browser Automation	Those with repetitive web tasks
Claude Code Workflows	Terminal-comfortable users wanting maximum AI power

View all specializations

---

Key Takeaways

• A flagship project proves you can build, ship, and maintain real projects
• Choose a project that's useful to you personally
• Follow the complete workflow: plan, build, version control, deploy, domain
• Verify everything works before considering it complete
• Document your work for future reference
• You are now an AI-Enabled Builder