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:
- 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