Stock & Crypto Trading Dashboard

One repository. Every weekly milestone. One visible engineering story.

This hub is the permanent project entry point. Each week is preserved in its own subdirectory, while the highlighted “latest build” link advances as the capstone grows.

Open Latest Build · Week 07
Architecture

How the public URLs stay stable

trading-dashboard/
├── index.html
├── project.css
├── week02/
│   ├── index.html
│   └── styles.css
├── week03/
└── ...

The root page never gets replaced. New weekly directories are added beside earlier ones, so the project can show progress without erasing its history.

Milestones

Week-by-week progress

Planned

Week 01 · Project Foundation

The project entry point and capstone direction are reserved here before the Week 02 design-system milestone.

View Week 01 View Code Week 01

Published

Week 02 · Design System Tokens

OKLCH color roles, light/dark themes, accessible contrast, fluid typography, and relative spacing constants.

View Week 02 View Code Week 02

Published

Week 03 · Semantic Layout Frame

Semantic HTML5 landmarks, a CSS Grid application shell, token-driven spacing, keyboard-ready navigation, and responsive trading workspace zones.

View Week 03 View Code Week 03

Published

Week 04 · Asymmetric Responsive Content Grid

A six-card market workspace uses a two-column, two-row featured card, fluid fractional tracks, dense auto-placement, and the established design tokens.

View Week 04 View Code Week 04

Published

Week 05 · Cascade Layers & Native CSS Nesting

The Week 04 dashboard appearance is preserved while its local stylesheet is reorganized into reset, base, layout, and components layers with browser-native nesting.

View Week 05 View Code Week 05

Published

Week 06 · Component-Level Flexibility with CSS Container Queries

The Week 05 dashboard foundation is preserved while reusable cards gain named inline-size container contexts, @container layout switching, and bounded container-relative units.

View Week 06 View Code Week 06

Current · Published

Week 07 · High-Performance Micro-Interactions & CSS Scroll-Driven Animations

The Week 06 dashboard is preserved while transform/opacity micro-interactions, keyboard-visible focus, a CSS-only reading progress bar, view-timeline reveals, and reduced-motion safeguards bring the interface to life without JavaScript scroll listeners.

View Week 07 View Code Week 07