Creating the Layout

Time to build! But remember our habit: plan first, build second.

Step 1: Plan it

/plan Create a root layout for a todo app with a header, centered main content area, and minimal modern design using Tailwind CSS

Review Claude Code's plan. It should mention which files it'll touch (likely layout.tsx and maybe globals.css) and the approach. Look good? Then let's build.

✅Tip

From now on, every build section starts with /plan. This is your habit. Plan → review → build → verify.

Step 2: Build it

Give Claude Code a clear, specific instruction:

"Update the root layout at src/app/layout.tsx to have a clean, centered layout for a todo app. Add a header with the title 'Todo App' and a main content area. Use Tailwind CSS. The design should be minimal and modern -- white background, subtle shadows, max-width container centered on the page."

✅Tip

Be specific about design preferences in your prompt. "Minimal and modern" is better than nothing, but adding details like "white background, subtle shadows" gives Claude Code concrete direction.

What Claude Code builds

Claude Code will update src/app/layout.tsx:

import type { Metadata } from 'next';
import './globals.css';
 
export const metadata: Metadata = {
  title: 'Todo App',
  description: 'A full-featured todo application',
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="bg-gray-50 min-h-screen">
        <div className="max-w-2xl mx-auto px-4 py-8">
          <header className="mb-8">
            <h1 className="text-3xl font-bold text-gray-900">
              Todo App
            </h1>
            <p className="text-gray-500 mt-1">
              Stay organized, get things done
            </p>
          </header>
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}

Update the home page

Now update the home page to show our sample todos (for now as simple text):

"Update src/app/page.tsx to import the sample todos and display them as a simple list. This is temporary -- we'll replace it with proper components next. Mark it as 'use client'."

'use client';
 
import { sampleTodos } from '@/data/sample-todos';
 
export default function Home() {
  return (
    <div className="space-y-4">
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 divide-y divide-gray-100">
        {sampleTodos.map((todo) => (
          <div key={todo.id} className="p-4">
            <span className={todo.completed ? 'line-through text-gray-400' : 'text-gray-900'}>
              {todo.title}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

Check it in the browser

"Start the dev server so I can see the layout"

Terminal

$npm run dev

▲ Next.js 14.x\n- Local: http://localhost:3000\n✓ Ready in 2s

⭐Important

Pause and look at your browser. You just built a working app layout — header, content area, styled todo list — by describing what you wanted in plain English. Every file, every CSS class, every component was written by Claude Code based on your instructions. This is the workflow you'll use for the rest of the course and beyond.

Open http://localhost:3000 and you should see a clean page with a header and your sample todos listed below.

💡Info

If something looks off, just tell Claude Code what's wrong: "The header is too close to the list" or "The text color is too light." It will adjust the Tailwind classes for you.

The file structure so far

File StructureYour structure may look different — that's OK

todo-app/ ├── src/ │ ├── app/ │ │ ├── layout.tsx — Updated with header and container │ │ ├── page.tsx — Showing sample todos │ │ └── globals.css │ ├── data/ │ │ └── sample-todos.ts — Our test data │ └── types/ │ └── todo.ts — Todo interface ├── package.json └── CLAUDE.md

We have a working layout. Next, let's extract that todo list into a proper reusable component.

⭐Important

Milestone: Your app is alive! Open your browser and look at what you just built. A working app layout with a header and content area — and you didn't write a single line of code yourself. Every file, every CSS class, every component — Claude Code wrote it from your instructions. This is the power of AI-assisted development.