60 mins

Step 2: Board Grid & Cards Layout

2. Board Grid & Cards Layout

Configure visual container cards and columns.

Detailed Implementation Steps:

Create components: Board.tsx, Column.tsx, and TaskCard.tsx. Design the board layout using CSS flexbox or grid columns to position columns side-by-side.

Each column must represent a status (e.g. 'Todo', 'In Progress', 'Done'). Style columns with rounded borders, title headers, and spacing. Design task cards with rounded corners, elevated backing, priority tags, and subtle shadows.

Verification Checklist:

  1. Verify board displays three columns side by side on desktop.

Knowledge Check

Ready to test your understanding of Step 2: Board Grid & Cards Layout?

No Quiz Available
Back