Studylab

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Studylab is an HTML website template for online courses, academies and tutoring. It has eight pages: Home, About, Courses, Instructors, Instructor Details, Blog, a blog post with comments and Contact. The home page has a hero with an interest form, course categories, course cards, counters, an about block, a testimonial slider, service highlights and recent posts; the course page has a search box and category and instructor filters that work. It is plain HTML, CSS and JavaScript, so some coding knowledge is needed to turn it into a working site; the Sass source and a short README are included.

What’s new in 3.0

• Rebuilt on Bootstrap 5.3.8 and vanilla JavaScript: jQuery and its plugins are gone. Swiper powers the testimonial slider and the icons are Lucide SVGs.
• Lighter: the nine pages now load 6.1 MB in 183 requests, down from 17.9 MB in 334. The home page goes from 3.9 MB to 1.5 MB. Photos ship as AVIF with JPEG fallbacks.
• No third-party requests: fonts are self-hosted and the contact map loads only when a visitor clicks it (OpenStreetMap, no API key).
• Readable by default: the brand colours are darker so button labels, links and small text pass WCAG AA contrast, hero text sits on a dark overlay, and the pages have a skip link, a main landmark and visible keyboard focus.
• Working forms: the interest, contact and comment forms post to a PHP handler with a spam trap and show their result in the page, and the search boxes are real search fields.
• New photos from Unsplash, initials avatars for testimonials and comments, fictional contact details, working links, unique page titles and descriptions.