Skip to main content
AI / Machine Learning

Phase 3: Vibe Coding Mastery

10 Modules
Chapter 8: Chapter 6: Resources — Continue Creating80%

Chapter 6: Resources — Continue Creating

Introduction: Your Vibe Coding Toolkit

This resource collection supports your ongoing journey as a vibe coder. Everything is organised by what you need, when you need it — from your first solo project after the workshop to advanced techniques you'll explore over the coming months.

AI Coding Tools Directory

Claude Code (Recommended for Vibe Coding)

What It Is: Anthropic's AI coding agent. Describe what you want in the terminal or desktop app; it reads your files, writes code, runs commands, and iterates based on your feedback.

Links:

Getting Started:

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start a vibe coding session
mkdir my-project && cd my-project
claude

# Useful commands inside Claude Code
/cost          # Check how much you've spent this session
/compact       # Summarise conversation to free up context

Cost Tips:

  • Use /cost regularly to monitor spending
  • Set a monthly budget in the Anthropic Console
  • Shorter, focused sessions are more cost-effective than marathon ones
  • The /compact command helps manage context on long sessions

Cursor AI

What It Is: A VS Code fork with deep AI integration. Chat with your codebase, get inline suggestions, and make multi-file changes through conversation.

Links:

Best For: People who want a familiar VS Code experience with built-in AI. Good middle ground between Claude Code's terminal approach and browser-based tools.

Pricing: Free tier available; Pro from $20/month with increased usage.

Windsurf

What It Is: An AI-native code editor (formerly Codeium). Its "Flow" mode can complete multi-step tasks autonomously.

Links:

Best For: Autonomous multi-step tasks. Good at understanding larger project context.

Pricing: Free tier available; Pro from $10/month.

GitHub Copilot

What It Is: Microsoft/GitHub's AI coding assistant. Works inside VS Code with inline suggestions, chat, and workspace-level understanding.

Links:

Best For: Inline code suggestions and chat within VS Code. Excellent if you already have a GitHub account.

Pricing: Free for verified students and OSS maintainers; Individual from $10/month.

Browser-Based Chat Tools

For quick prototyping without installing anything:

ToolBest ForLink
Claude.ai (Artifacts)Single-file prototypes with live previewclaude.ai
ChatGPT (Canvas mode)Conversational code generation with visual editingchatgpt.com
Google AI StudioLarge context window for big projectsaistudio.google.com

Free and Open Source Options

ToolWhat It IsLink
Continue.devFree, open-source AI extension for VS Codecontinue.dev
AiderFree terminal-based pair programmeraider.chat
OllamaRun AI models locally, completely freeollama.com

Deployment and Hosting

GitHub Pages (Free — Used in This Workshop)

Links:

Quick Reference:

# Deploy a page to GitHub Pages using Claude Code:
# 1. Create repo
gh repo create my-site --public

# 2. Push your files
git init
git add index.html
git commit -m "Initial site"
git remote add origin https://github.com/USERNAME/my-site.git
git push -u origin main

# 3. Enable Pages in Settings → Pages → Source: main branch

# Your site: https://USERNAME.github.io/my-site/

Other Free Hosting Options

ServiceBest ForLimitLink
NetlifyStatic sites with forms and serverless functions100GB bandwidth/monthnetlify.com
VercelReact/Next.js projects and static sites100GB bandwidth/monthvercel.com
Cloudflare PagesGlobal CDN, very fastUnlimited bandwidthpages.cloudflare.com
RenderStatic sites and simple backends100GB bandwidth/monthrender.com

Custom Domain Names

If you want a professional URL (e.g., www.yourname.com):

Prompt Writing Resources

Prompt Libraries and Examples

General Prompt Engineering:

Vibe Coding Prompt Templates

Landing Page Template:

Create a landing page for [BUSINESS/PROJECT].

Hero: [heading text], [subheading], [call-to-action button text], 
[background description].

Features: [number] cards showing [what each card contains].

Social proof: [testimonials / stats / logos].

Call to action: [final CTA section description].

Footer: [what to include].

Style: [mood — professional/playful/minimal/bold]. 
Colours: [primary], [secondary], [accent].
Responsive. Single HTML file.

Portfolio Template:

Create a personal portfolio for [NAME], a [PROFESSION].

Sections: Hero with name and tagline, About with bio and photo 
placeholder, Work with [number] project cards, Skills as tags, 
Contact form, Footer.

Style: [aesthetic]. Colours: [palette].
Include: dark mode toggle, smooth scroll navigation, 
fade-in animations on scroll. Responsive. Single HTML file.

Dashboard Template:

Create a data dashboard titled "[TITLE]".

Metrics row: [list cards with values and accent colours].
Chart: [type] showing [data points].
Table: [columns and sample data].
Activity feed: [recent events].

Style: clean dashboard, white background, card shadows.
Responsive. Single HTML file, CSS-only charts.

Learning and Reference

Web Design Fundamentals (No Code Required)

Understanding design principles helps you describe what you want more effectively:

  • Refactoring UI — design tips that non-designers can apply immediately
  • Laws of UX — simple, visual explanations of user experience principles
  • Typescale — choose font sizes that work together harmoniously
  • Coolors — generate colour palettes to reference in your prompts
  • Realtime Colors — preview colour combinations on a live page layout

CSS and HTML Reference (When Curiosity Strikes)

You don't need to learn these, but knowing they exist helps you understand what AI generates:

Responsive Design

Understanding responsive concepts helps you describe mobile behaviour:

Free Assets for Your Projects

Images:

  • Unsplash — free high-quality photographs
  • Pexels — free stock photos and videos
  • Undraw — free, customisable illustrations

Icons:

Fonts:

Community and Continued Learning

Communities for Vibe Coders

Newsletters and Blogs

Video Learning

Troubleshooting Guide

Common Issues and Solutions

Problem: AI generates code but it doesn't display correctly

Solution: Ensure your file is saved as .html (not .txt). Open 
it directly in a browser — File → Open, or drag the file onto 
a browser window. If using Live Server in VS Code, right-click 
the file and select "Open with Live Server".

Problem: Page looks fine on desktop but broken on mobile

Solution: In your next prompt, describe specifically what breaks:
"On phone screens, the three columns overlap. Make them stack 
into a single column on screens narrower than 768px."

Check mobile view by resizing your browser window, or use 
Chrome DevTools (F12 → toggle device toolbar).

Problem: GitHub Pages shows a 404 error

Solution: 
1. Ensure your file is called index.html (lowercase)
2. Check Settings → Pages — is it enabled?
3. Wait 2-3 minutes after enabling (first deploy takes time)
4. Verify the URL: https://USERNAME.github.io/REPO-NAME/
5. Ensure you pushed to the correct branch (usually main)

Problem: Claude Code says "I can't access the internet"

Solution: Claude Code generates code locally — it doesn't need 
internet for code generation. For deployment, use git commands 
which Claude Code can run. If API calls fail, check your API 
key and credit balance at console.anthropic.com.

Problem: The AI keeps changing things I already liked

Solution: Be specific about what to keep:
"Change only the footer — everything else should stay exactly 
as it is. In the footer, make the text smaller and add a 
second row with privacy and terms links."

In Claude Code, you can also use /compact to summarise the 
conversation and reduce context confusion.

Problem: I've run out of free API credits

Solution: 
- Switch to Claude.ai free tier (limited but functional)
- Use ChatGPT free tier as a fallback
- Try Continue.dev with free Groq or Gemini API access
- Consider adding $5-10 credit — a full workshop session 
  typically costs under $2

Cost Management

Typical Vibe Coding Costs

ActivityApproximate Cost
Building a single-page site (30 min session)$0.50-2.00
Full workshop session (3 hours)$2.00-5.00
Complex multi-page project (2-3 hours)$3.00-8.00
Quick refinement session (10 minutes)$0.10-0.50

Keeping Costs Low

  1. Write detailed first prompts — fewer iterations means less cost
  2. Use /compact in Claude Code — reduces context and token usage
  3. Use /cost to monitor — check spending regularly
  4. Set budget alerts — configure at console.anthropic.com
  5. Use free tiers for experimentation — save paid access for real projects
  6. Use Claude.ai artifacts for quick single-file prototypes (often free)

Cheat Sheets

Vibe Coding Quick Reference

+-----------------------------------------------+
|           VIBE CODING QUICK REFERENCE          |
+-----------------------------------------------+
|                                                |
| START A PROJECT                                |
|   mkdir project && cd project && claude        |
|                                                |
| FIRST PROMPT CHECKLIST                         |
|   [ ] What is the page for?                    |
|   [ ] What sections does it need?              |
|   [ ] What colours and style?                  |
|   [ ] Responsive? (almost always yes)          |
|   [ ] Any interactivity?                       |
|   [ ] Single HTML file? (simplest to start)    |
|                                                |
| REFINEMENT PHRASES                             |
|   "Make it more [spacious/bold/subtle/clean]"  |
|   "The [X] feels too [big/small/bright/dark]"  |
|   "Add [animation/hover effect/transition]"    |
|   "On mobile, [stack/hide/resize/simplify]"    |
|   "Like [website.com]'s [feature/layout]"      |
|                                                |
| DEPLOY TO GITHUB PAGES                         |
|   1. Push to GitHub repository                 |
|   2. Settings > Pages > Source: main           |
|   3. Wait 2 min > visit the URL                |
|                                                |
| USEFUL CLAUDE CODE COMMANDS                    |
|   /cost     - check session spending           |
|   /compact  - summarise conversation           |
|   /clear    - start fresh context              |
|                                                |
+-----------------------------------------------+

Describing Colours

Instead of memorising hex codes, use these descriptive approaches:

What You SayWhat You Get
"Corporate navy"Dark blue, trustworthy
"Sunset gradient"Orange-to-pink blend
"Sage green"Soft, muted green
"Warm cream background"Off-white, cosy
"Electric blue accent"Bright, energetic blue
"Charcoal text"Dark grey, softer than black

Or provide specific hex codes from Coolors for precision.

Describing Layout

What You SayWhat You Get
"Three cards in a row"Horizontal grid
"Stack vertically on mobile"Responsive column
"Centred narrow column"Medium-style layout
"Full-width hero"Edge-to-edge section
"Sticky navigation"Nav stays on scroll
"Lots of breathing room"Generous padding/margins

Next Steps

This Week

  • Build one new page using vibe coding
  • Deploy it to GitHub Pages
  • Share the URL with someone
  • Try a different AI tool than you used in the workshop
  • Bookmark this resources page for reference

This Month

  • Complete the 7-day challenge from Chapter 5
  • Build something for real use (business, portfolio, personal)
  • Explore adding a custom domain to your GitHub Pages site
  • Help a colleague or friend try vibe coding
  • Join one of the communities listed above

This Quarter

  • Maintain 3+ live web pages on GitHub Pages
  • Try building a multi-page site
  • Experiment with adding a backend (forms that email you, databases)
  • Consider using Tailwind CSS through vibe coding for more polished designs
  • Explore building simple web applications, not just static pages

Getting Help

Workshop Support

AI Tool Support

Final Thought

Vibe coding is not a workaround or a hack. It is a genuine paradigm shift in who gets to create on the web. The tools will keep improving, the possibilities will keep expanding, and the skills you practised today — describing clearly, iterating thoughtfully, deploying confidently — will remain valuable regardless of which AI tool you use.

The web is now your canvas. Go create something.

Workshop Complete!

Back to Assessment | Back to Phase Overview | Return to Phase 2