1
TYPESCRIPT
Model the dashboard data
Define a typed dashboard summary, filter state and chart/table row contract.
PROOF TO PRODUCEInclude at least one union for a finite state or filter mode.
🖥️ CROSS-ACADEMY CAPSTONE · 700 XP
Responsive Business Dashboard
Design a dashboard that adapts across phone, tablet and laptop, then add typed interaction and a data-query plan.
CSSJavaScriptTypeScriptSQL
WHAT TO FINISH FIRST
PROJECT RUNBOOK
Four stages. Four visible artifacts.
Use your own editor/notebook/tools. LearnCode gives the brief and records your self-check; it does not pretend to inspect files it cannot see.
2
CSS
Build the responsive shell
Create a layout that deliberately changes at phone, tablet and laptop widths without document overflow.
PROOF TO PRODUCERecord the layout at roughly 390px, 768px and 1366px widths.
3
JAVASCRIPT
Add interaction
Implement one useful filter or toggle and update visible dashboard state from a user event.
PROOF TO PRODUCEExplain the event, state change and resulting UI update.
4
SQL
Plan the evidence query
Write the SQL that would supply one dashboard metric and one grouped comparison.
PROOF TO PRODUCEName the table relationship and expected result columns.
FINAL SELF-REVIEW
What did you learn from combining the skills?
Write at least ~100 characters about the hardest tradeoff, one mistake you caught, and what you would improve next. This is a reflection gate, not automated grading.
0/4 artifacts self-checked · 0/100 reflection characters
Complete the required starter academies before self-checking or claiming capstone completion.