Start here Book

What Is Vibe Coding?What to Build Pick Your AI Tool Getting Started Chapters My First Project How to Talk to AI When Things Break How to Read Code Shipping Fast Glossary

Related Tools

AI Stack Picker Project Brief Builder Prompt Builder

View all start here chapters →

Designs Book

Make Your Website Pretty UI Elements Colors Typography Spacing & Sizing Icons & Assets Layout Patterns Sections Gallery CSS Design Concepts Responsive Design Accessibility Copy Good Websites Working with Designers Content & Copywriting Animations Dark Mode

Related Tools

Palette Generator Gradient Generator Font Picker Icon Picker Landing Page Planner

View all designs chapters →

Code Book

Frontend State Management Backend Project Structure Git Basics Database Design Forms & Validation Images & Media File Uploads Search & Filtering Authentication Social Login Notifications & Toasts Dashboards & Admin Environment Variables API Integration AI Integration Real-Time Features Debugging Mobile Apps

Related Tools

Database Planner Error Decoder Prompt Builder

View all code chapters →

Launch Book

SEO Basics Deploy Your Site Custom Domains Performance & Speed Analytics Payments Email & Notifications Legal Pages

Related Tools

Meta Tag Generator Deployment Checklist

View all launch chapters →

Optimize Book

Common Mistakes Git & Environments Testing Basics Error Monitoring Security Basics Collaboration Internationalization Monetization

Related Tools

Error Decoder Deployment Checklist

View all optimize chapters →

AI Coding Tools

SheCodes

Your AI coding journey starts here

Master AI coding with SheCodes' hands-on workshops and a supportive community.

Start learning→

CodeBooks.ai

The AI coder's library.

Built with 💜 by

SheCodes.io →

and Matt Delac, SheCodes Founder and Instructor

AI Tool Guides

Claude Code
Cursor
Bolt.new
Lovable
Codex
v0
GitHub Copilot
Replit
Windsurf

Product Guides

Supabase
Vercel
Netlify
Clerk
Stripe
Resend
Tailwind CSS
shadcn/ui
Neon
Sentry

Explore

Start Here
The Design Book
The Code Book
The Launch Book
The Optimize Book
AI Tool Comparisons
Glossary
Quizzes
What's New

Free AI Coding Tools

AI Stack Picker
Project Brief Builder
Prompt Builder
Landing Page Planner
Database Planner
Palette Generator
Gradient Generator
Font Picker
Icon Picker
Error Decoder
Meta Tag Generator
Deployment Checklist

🎉🏳️🎊Emoji Party — Can you find your flag?191 country flags hidden in emoji chaos. Find yours and share it! →

© 2026 CodeBooks.ai. All rights reserved.

Learn to code with AI.
Build great apps.

The complete guide to prompting AI for code. Everything from design fundamentals to deployment — described in plain English.

SheCodes

Built by SheCodes, trusted by 250,000+ women learning to code with AI

Explore Tools Quizzes

Built with 💜 by

SheCodes

“Every great app starts with an idea, not a line of code. CodeBooks is the library that bridges that gap.”

— Matt Delac, SheCodes Founder & Instructor

Person coding with AI tools on a laptop

The Library

Five books. Sixty chapters. Pick one off the shelf and start reading.

Start Here

Where every AI coder begins

The Design Book

Make it beautiful

The Code Book

How it all works under the hood

The Launch Book

Ship it to the world

The Optimize Book

Polish, scale, secure

01

Start Here

10 sections

What Is Vibe Coding?

How vibe coding works, how it differs from regular coding, and why to start here.

What to Build

Project ideas by difficulty, how to scope your first build, and a decision helper.

Pick Your AI Tool

Claude Code, Cursor, Bolt, v0, Lovable, Codex — compared.

Getting Started Guides

Step-by-step guides for Claude Code, Lovable, Bolt.new, and Cursor.

My First Project

Build your first website step by step, plus 14 project ideas sorted by difficulty.

How to Talk to AI

The prompt formula, before/after examples, error sharing, templates.

When Things Break

Page is blank? Scary error? AI making it worse? Stay calm, fix it.

How to Read Code

Understand what AI generated — without writing code yourself.

Shipping Fast

Build your MVP quickly. What to skip, what to keep, and how to launch.

Glossary

A-Z searchable glossary of 70+ web development terms.

02

Design

16 sections

Make Your Website Pretty

Design ideas, AI design tools, and trends to make your site look amazing.

Stitch · Dribbble

UI Elements

40+ components — buttons, modals, breadcrumbs, FABs, and more.

Colors

Hex, RGBA, HSL, palettes, gradients, and color converter.

Hex · RGB · HSL

Typography

Font sizes, weights, line height, Google Fonts, and pairing.

Fonts · Weights

Spacing & Sizing

The 4px grid, padding vs margin, recipes, and max-widths.

Icons & Assets

Lucide, Heroicons, stock photos, illustrations, backgrounds.

Lucide · Unsplash

Layout Patterns

Landing pages, dashboards, blogs, e-commerce, portfolios.

Sections Gallery

30+ website section variations: heroes, features, CTAs, footers.

CSS Design Concepts

Padding, margin, fonts, colors, layout — explained visually.

Responsive Design

Breakpoints, mobile-first, patterns, navigation strategies.

Mobile · Tablet

Accessibility

Make your site usable by everyone. Semantic HTML, ARIA, contrast.

Copy Good Websites

Study a site you love, describe it to AI, and recreate it.

Working with Designers

Take a Figma design and describe it to your AI coding tool.

Content & Copywriting

Headlines, CTAs, and descriptions that make your site professional.

Animations

CSS transitions, Tailwind animations, Framer Motion.

Dark Mode

Implement light/dark theme toggle with Tailwind and next-themes.

03

Code

20 sections

Frontend

HTML, CSS, JS, React, Next.js, Vue, Tailwind, and build tools.

Languages · Frameworks

State Management

Why buttons don't update, how forms remember data, local vs global state.

useState · Props · Zustand

Backend

Node.js, Python, databases, APIs, BaaS, and authentication.

Servers · Databases

Project Structure

File organization, naming conventions, Next.js App Router.

Files · Folders

Git Basics

Save your work, undo mistakes, and collaborate — no memorization needed.

Database Design

Tables, relationships, schemas, ORMs, and example structures.

Forms & Validation

Form elements, React Hook Form, Zod, common patterns.

Images & Media

Formats (WebP, SVG, PNG), optimization, responsive images.

WebP · SVG · Video

File Uploads

Drag & drop, image preview, storage services, validation.

S3 · Uploadthing

Search & Filtering

Search bars, filters, sorting, pagination, and autocomplete.

Algolia · Fuse.js

Authentication

Login, signup, Clerk, NextAuth, Supabase Auth, protected routes.

Clerk · NextAuth

Social Login

Add 'Sign in with Google' — one-click login with existing accounts.

Google · GitHub

Notifications & Toasts

Success messages, error alerts, and pop-up notifications.

Sonner · Toasts

Dashboards & Admin

Data tables, stat cards, charts, and admin panel layouts.

Tables · Charts

Environment Variables

API keys, secrets, and .env files — keep your data safe.

Secrets · .env

API Integration

Fetch data, handle loading/error states, build API routes.

AI Integration

Add chatbots, content generation, and AI features to your app.

OpenAI · Anthropic

Real-Time Features

Live chat, notifications, collaborative editing, WebSockets.

Supabase · Pusher

Debugging

Read errors, DevTools, console.log tips, common Next.js fixes.

Mobile Apps

Turn your website into a phone app — PWA, Capacitor, or React Native.

04

Launch

8 sections

SEO Basics

Meta tags, Open Graph, structured data, sitemaps.

Deploy Your Site

Hosting platforms, buy a domain, connect DNS, go live.

Custom Domains

Go from yoursite.vercel.app to yourname.com — step by step.

Performance & Speed

Core Web Vitals, image optimization, caching, lazy loading.

Analytics

Track visitors with Vercel Analytics, Google Analytics, PostHog.

Payments

Stripe, checkout flows, subscription billing, pricing pages.

Email & Notifications

Resend, SendGrid, push notifications, React Email.

Legal Pages

Privacy policy, terms of service, cookie consent, GDPR.

Privacy · GDPR

05

Optimize

8 sections

Common Mistakes

20 mistakes beginners make in design, code, and prompting.

Git & Environments

Git basics, branching, environments, env variables, CI/CD.

Testing Basics

Unit tests, integration tests, E2E with Vitest and Playwright.

Error Monitoring

Catch bugs in production with Sentry, LogRocket, and alerts.

Security Basics

XSS, CSRF, rate limiting, headers, and protecting your app.

OWASP · Headers

Collaboration

Working with others, Git workflow, project handoff, pair coding.

Internationalization

Multi-language support, translation files, locale switching.

next-intl · i18n

Monetization

Revenue models, subscriptions, ads, affiliate, digital products.

Interactive Tools

Try our free tools

AI Stack PickerGet a personalized tool recommendation

Project Brief BuilderGenerate a ready-to-paste AI prompt

Prompt BuilderCraft the perfect AI coding prompt

Landing Page PlannerPick sections, arrange your page

Database PlannerPlan your app's data the easy way

Palette GeneratorPick a vibe, get a color palette

Gradient GeneratorBuild gradients visually

Font PickerBrowse and preview Google Fonts

Icon PickerBrowse & copy 200+ Lucide icons

Error DecoderPaste an error, get a plain English fix

Meta Tag GeneratorSEO & social tags in one click

Deployment ChecklistLaunch your app with confidence

Build This10 project challenges by difficulty

Frequently Asked Questions

New to prompting AI? You're in the right place.

What is AI coding?+

Vibe coding means building websites and apps by describing what you want to AI tools like Claude Code, Cursor, or Lovable — instead of writing code by hand. You focus on the ideas, the AI writes the code.

Do I need to know how to code?+

Not at all. This site is built specifically for people with zero coding experience. Every guide is written in plain English and focuses on what to tell AI, not how to write code yourself.

What will I learn here?+

Everything you need to go from idea to live website — design basics, how to prompt AI effectively, project structure, databases, deployment, and more. All explained without jargon.

Which AI tools does this cover?+

We cover Claude Code, Cursor, Bolt.new, Lovable, v0, Codex, and more. Each guide includes ready-to-paste prompts that work across tools.

Is this really free?+

Yes, 200% free. Every guide, tool, and resource on this site is completely free. No paywalls, no sign-ups, no hidden costs.

I feel overwhelmed — where do I start?+

Head to the "Start Here" section above. Begin with Getting Started Guides to pick your AI tool, then follow My First Project to build and deploy your first website step by step.

Who's behind this website?+

This site is built by SheCodes — a global coding community trusted by 250,000+ women learning to code with AI. We created CodeBooks to make web development accessible to everyone, even if you've never written a line of code.

Got a Question?

Click the chat button in the bottom-right corner to ask about any web dev term, tool, or concept.