Skip to content

README.md

Latest commit

 

History

History
82 lines (61 loc) · 3.73 KB

README.md

File metadata and controls

82 lines (61 loc) · 3.73 KB
Raw

Classio: Free School Management Dashboard Website Template (HTML)

An easy-to-read school management dashboard using an extra-legible font. It shows attendance by grade with day buttons, fee collection progress, a class timetable, upcoming exams, top students and a notice board.

Classio, a free school management dashboard website template

See the live demo and download it free  |  More free templates

What you get

  • One index.html file. The CSS and JavaScript are inside it, so there is nothing to install.
  • Works on phones, tablets and desktops.
  • SEO ready: page title, meta description, canonical link, social sharing tags and schema markup.
  • Easy to read for everyone: clear headings, alt text on every image and keyboard-friendly menus.
  • Loads fast: images load only when needed and the page uses just two Google Fonts.
  • Full example text, written like a real business, so you can see how your finished site will read.

Sections on the page

  • Blue sidebar with term progress
  • School KPI cards
  • Attendance by grade bar chart with day switch
  • Fee collection progress
  • Today's class timetable
  • Upcoming exams and top students
  • Notice board

Fonts and colours

  • Fonts: Atkinson Hyperlegible, both free from Google Fonts.
  • Colours: School blue, yellow, white. You can change every colour in the :root section at the top of the <style> block.

How to make it yours

  1. Open the live demo and click Download this template (free) in the black bar at the top.
  2. Open the file in a text editor (VS Code, Sublime Text or Notepad++).
  3. Delete the black notice bar at the top. Look for the comment Template notice bar and remove that block.
  4. Change the business name, text, phone number, email and address.
  5. Swap the photo links (they start with https://images.unsplash.com/) for your own photos.
  6. In the <head>, update the title, description and the canonical, og:url and og:image links to your own website address.
  7. Replace the schema markup with details of your own business (example below).
  8. Upload the file to your web host, GitHub Pages or Netlify.

Contact form

The form sends messages through Formspree. Make a free account at formspree.io, create a form, and replace your-form-id in the form's action with your own form ID.

Schema markup for your business

Replace the structured data block in the <head> with your own details. For a local business it looks like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "url": "https://www.yourwebsite.com/",
  "telephone": "+1-000-000-0000",
  "email": "hello@yourwebsite.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "Your City",
    "postalCode": "00000",
    "addressCountry": "US"
  },
  "openingHours": "Mo-Fr 09:00-17:00"
}
</script>

Credits

License

MIT. Use it for personal or commercial projects. A link back is nice but not required. If this template saved you time, please give the repository a star so other people can find it.

Search terms: school management dashboard template, school admin panel HTML free, education dashboard template, free HTML template, one page website template, responsive website template download