Homeroom — Free Student Portal Dashboard Template
Homeroom is a free Bootstrap 5 dashboard template for the student and parent side of a school management system. It uses a warm indigo and coral palette, rounded Nunito headings and soft cards so it reads as friendly rather than corporate. Six pages cover a student’s day: today’s lessons with the current one highlighted from the clock, assignments with a submission drawer, grades with a trend chart, a weekly timetable, messages with teachers, and a parent view for fees, permission slips and attendance. Everything runs on vanilla JavaScript with no jQuery.
Key features
- Student home with a greeting, attendance ring, recent grades, announcements and upcoming events
- Today’s timetable as a vertical timeline that marks done, current and next lessons from the clock
- Assignments list with To do, Submitted and Graded tabs, a subject filter and sorting by due date
- Assignment drawer with instructions, resources, a rubric table and a drag-and-drop file submission area
- Report card with term tabs, teacher comments and an SVG grade-trend line chart with a hover and keyboard tooltip
- Weekly timetable grid with a day and week toggle, a live now line and a print button
- Two-pane messages inbox with search, filters and a composer; phones show one pane at a time
- Parent view with a two-child switcher, fees with a pay dialog, permission slips to sign and attendance alerts
- Light and dark themes with the choice remembered, a top bar plus side rail on desktop and a bottom tab bar on phones
- Accessible markup: skip link, landmarks, labelled forms, ARIA tabs, visible focus styles and reduced-motion support
Best for
- Student and parent portals for school management or learning platforms
- EdTech startups prototyping a student dashboard
- Schools and academies that want a friendly front end for an existing SIS
- Developers who want a jQuery-free Bootstrap 5 dashboard with real school content
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 6 pages: index.html, assignments.html, grades.html, timetable.html, messages.html, parent.html
- Light and dark themes, hand-built SVG charts, no chart library
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser; there is no build step. Edit the copy directly in each HTML file, and the assignment briefs, rubrics and message threads in the data objects in js/main.js. Colours, fonts and radii live as custom properties at the top of css/style.css. The submission, payment and contact forms are front-end only, so connect them to your backend or a form service. Deploy the folder to any static host.
Frequently asked questions
Is Homeroom free for commercial projects?
Yes. Homeroom is free for personal and commercial use, including client work and SaaS products. Attribution is optional but always welcome. The full terms are on the uiCookies license page.
What is Homeroom built with?
Bootstrap 5.3.8, one stylesheet and one vanilla JavaScript file. There is no jQuery, no chart library and no build step. Charts and the attendance rings are hand-built SVG generated from small data sets in the page.
Which pages are included?
Six: a student home, assignments, grades, timetable, messages and a parent view. The parent view has a switcher for two children, fees with a pay dialog, permission slips, attendance alerts and a contact-teacher form.
Do the forms, file uploads and payments work?
They are front-end only. The pages validate input in the browser and show a success state, but nothing is uploaded, sent or charged. Connect the forms to your school system, storage or payment provider to make them live.
How does the timetable know which lesson is on now?
It reads the device clock and compares it with each lesson’s start and end time. Outside school hours the preview runs at 10:25 so you can see a live lesson; set DEMO_TIME to null in js/main.js to always follow the real clock.
