Beginner5 min readShare
Was this chapter helpful?
Share
The top mistakes beginners make and exactly how to fix them. Learn from others so you don't have to learn the hard way.
Don't: Cramming everything together with tiny padding and margins.
Do: Use generous padding (p-6), section spacing (py-16), and gaps (gap-6).
💡 When in doubt, add MORE space. Professional sites breathe.
Don't: Using 7+ different colors with no system.
Do: Pick 1 primary, 1 accent, and use neutrals. Success/warning/error colors only for feedback.
💡 Tell AI: 'Use #8B5CF6 as primary and #F472B6 as accent. All other colors should be neutral grays.'
Don't: Random font sizes, paddings, and element sizes across the page.
Do: Use a consistent scale (Tailwind's default). Same padding for all cards, same gap for all grids.
💡 Pick your spacing values once and reuse them: p-5 for cards, gap-5 for grids, py-16 for sections.
Don't: Everything is the same size and weight — nothing stands out.
Do: Clear hierarchy: h1 (5xl bold) > h2 (2xl bold) > h3 (lg bold) > body (base normal) > caption (sm muted).
💡 Use font-size AND color to create hierarchy. Headings are dark, body text is muted gray.
Don't: Only testing on desktop. Tiny text and broken layouts on phones.
Do: Design mobile-first. Test at 375px width. Use responsive classes (sm:, md:, lg:).
💡 Always check your site at 375px wide (iPhone SE). If it works there, it works everywhere.
Don't: Light gray text on white background. Looks 'clean' but is unreadable.
Do: Body text should be at least 4.5:1 contrast ratio. Use text-gray-600+ on white backgrounds.
💡 Tell AI: 'Make sure all text meets WCAG AA contrast requirements.'
Don't: Everything bounces, slides, and fades. Page feels chaotic.
Do: Subtle hover effects and scroll-triggered fade-ins only. Less is more.
💡 Use animation to guide attention, not to show off. If users notice the animation more than the content, it's too much.
Don't: Every element has the same visual weight. Users don't know where to look.
Do: Make the most important thing biggest and boldest. De-emphasize secondary elements.
💡 Squint at your page. Can you tell what's most important? If not, increase contrast between elements.
Don't: Putting an entire page (500+ lines) in one file with all components inline.
Do: Break components out into separate files in components/. Each file under 150 lines.
💡 If a component is reused OR if the file gets over 150 lines, extract it into its own file.
Don't: Using plain JavaScript with no type checking. Bugs found at runtime.
Do: Use TypeScript. It catches bugs as you type and makes AI-generated code more reliable.
💡 Tell AI: 'Use TypeScript with proper types. No any types.'
Don't: Hardcoding API keys, database URLs, or passwords in code.
Do: Use .env.local for secrets. Add .env* to .gitignore. Use NEXT_PUBLIC_ prefix only for public values.
💡 NEVER commit .env files. If you accidentally did, the key is compromised — rotate it immediately.
Don't: Editing files directly with no version control. Can't undo mistakes.
Do: Use Git from day one. Commit often with clear messages. Push to GitHub regularly.
💡 Tell AI: 'Initialize a git repository, create a .gitignore, and make an initial commit.'
Don't: Wrapping everything in try/catch and silently swallowing errors.
Do: Show user-friendly error messages. Log errors for debugging. Use error boundaries in React.
💡 Every API call should handle 3 states: loading, success, and error. Show appropriate UI for each.
Don't: Page just shows nothing while data is loading. User thinks it's broken.
Do: Show skeleton loaders or spinners while fetching data. Disable buttons during form submission.
💡 Tell AI: 'Add loading states with skeleton loaders that match the shape of the content.'
Don't: Adding 'use client' to every file. Defeats the purpose of server components.
Do: Default to server components. Only add 'use client' when you need useState, useEffect, or event handlers.
💡 Server components are faster and use less JavaScript. Only use client components for interactivity.
Don't: Form submits silently fail. No validation, no feedback.
Do: Validate on client and server. Show inline errors. Disable submit while loading. Show success message.
💡 Tell AI: 'Add validation with Zod, inline error messages, loading state on submit, and a success toast.'
Don't: App works locally but crashes in production. API keys aren't set on the hosting platform.
Do: Add every .env variable to your hosting dashboard (Vercel, Netlify) before deploying.
💡 Tell AI: 'List all environment variables this project needs so I can add them to Vercel.'
Don't: Only testing localhost. Broken images, wrong links, and CORS errors in production.
Do: Deploy early, even before it's finished. Check the real URL on your phone too.
💡 Deploy after every major feature. Don't wait until 'it's done' — that first deploy always reveals surprises.
Don't: fetch('http://localhost:3000/api/data') in production code.
Do: Use relative URLs ('/api/data') or environment variables for API endpoints.
💡 Search your code for 'localhost' before deploying. Every instance is a bug waiting to happen.
Don't: 'It works on my machine' but the build logs show 10 warnings.
Do: Fix warnings before they become errors. Read build logs when deploys fail.
💡 Tell AI: 'I got these build warnings. Fix them all:' then paste the warning output.
Don't: Users see an ugly default error page when something goes wrong.
Do: Create a custom 404 page and error boundary so broken pages still look professional.
💡 Tell AI: 'Create a custom 404 page and a global error boundary that match my site design.'
Don't: Uploading 5MB photos directly. Page takes 10 seconds to load.
Do: Use Next.js Image component, serve WebP format, and resize images to the size they're displayed.
💡 Tell AI: 'Replace all img tags with the Next.js Image component and set appropriate width/height values.'
PRE-DEPLOY CHECKLIST
"Review my project for deployment readiness. Check for: hardcoded localhost URLs, missing environment variables, unoptimized images, console.log statements left in production code, missing error pages, and missing meta tags. List everything that needs fixing before I deploy."
Don't: 'Make me a website' or 'Add a nice button'
Do: 'Create a Next.js landing page with a hero, 6 feature cards, testimonials, and footer using Tailwind. Primary color #8B5CF6.'
💡 Include: tech stack, component name, layout details, colors, and behavior.
Don't: 'Build me a full e-commerce site with payments, auth, admin panel, and blog.'
Do: Break it into steps: 1) Layout, 2) Product grid, 3) Cart, 4) Checkout.
💡 Build in layers. Get one thing working before adding the next.
Don't: AI guesses what framework to use and might pick the wrong one.
Do: Always start with: 'I'm using Next.js with the App Router, TypeScript, and Tailwind CSS.'
💡 This single sentence prevents 90% of AI misunderstandings.
Don't: Using whatever AI generates without reviewing or iterating.
Do: Review the output. Ask for specific changes: 'Make the padding larger, change the blue to purple, add hover effects.'
💡 The first result is a draft. Always iterate 2-3 times for a polished result.
Don't: 'Fix the bug' — with no error message, no screenshot, no explanation.
Do: Share the error message, what you expected, and what happened instead. Paste the relevant code.
💡 The more context you give, the better the fix. Include the full error, not just 'it doesn't work.'
Don't: Scrapping everything when something goes wrong and starting a new conversation.
Do: Ask AI to fix the specific issue. It already knows your code and can make targeted changes.
💡 Iteration beats restart. Say 'the button doesn't work — here's the error' instead of 'build it again.'
IMPROVE MY AI PROMPTS
"I want to improve how I prompt AI coding tools. Review my project and suggest 5 specific things I could have described better in my prompts to get better results. Focus on: layout specifics, color choices, component behavior, responsive design, and edge cases."
Copy-paste these prompts into your AI tool to apply what you just learned.
FULL CODE REVIEW
"Review my entire codebase for common beginner mistakes: missing error handling, hardcoded values, console.logs left in, unused imports, missing loading states, hardcoded localhost URLs, unoptimized images, and accessibility issues. Fix everything you find and explain what you changed."
FIX A HYDRATION ERROR
"I'm getting a hydration error in my Next.js app. The component works on the server but breaks on the client. Help me find and fix the issue."
