Understand the Project Structure

Open the project folder in your editor.

The main files you will work with are:

index.html
css/style.css
js/app.js

Each has a clear responsibility.

index.html

This file describes the structure of the page.

It contains the header, Kanban columns, task containers, modal, and form fields.

css/style.css

This file contains the visual design.

The layout, spacing, colors, task cards, responsive behavior, and drop-zone styling are already handled here.

The course is about functionality, so you will not rebuild the visual design step by step.

js/app.js

This is the behavior layer.

As you progress through the course, this file will contain the task state, rendering logic, event handlers, drag-and-drop behavior, and persistence logic.

Checkpoint

Answer these three questions:

1. Which file describes the page structure?
2. Which file controls the appearance?
3. Which file will contain the application logic?

If you can answer all three, continue.