Responsive Student Dashboard UI

I’m putting together a clean, professional-looking student dashboard built with HTML, CSS, and the latest stable Bootstrap. The layout needs a fixed sidebar, a slim top navigation bar, and a central content area that automatically adapts from widescreen desktop to small mobile without breaking the visual rhythm.

Inside that framework I need three core data sections:
• Grades & assignments
• Attendance records
• Personal profile details

Each block should share the same corporate-style visual language—subtle color accents, generous whitespace, crisp typography—so the information feels cohesive and easy to scan. Charts or progress bars can be lightweight Bootstrap components or small vanilla-JS plugins as long as they respect the overall look.

A lightweight script should also poll a dummy JSON endpoint every few seconds so grades or attendance figures can flash an unobtrusive real-time badge when something changes. Keep the JavaScript modular so the polling interval or data source can be swapped later.

Deliverables
• Fully commented HTML, SCSS/compiled CSS, and JS files
• A single, self-contained demo page showing the sidebar/nav, the three data sections, and the live-update badge in action
• Clear instructions in a short README on how to extend or reskin the UI

I’ll review on Chrome, Firefox, and Safari at mobile, tablet, and desktop breakpoints; as long as the layout remains intact and the live-update badge triggers without blocking the UI, we’re good.