Edumark is a website template for online courses, academies and course creators, built on Bootstrap 5. The layout is responsive and works in all popular web browsers. It comes with eight pages: home, courses, course details, about, blog, blog post, contact and a UI elements page.
The home page has a full-screen hero, a numbers section, a course catalogue with category tabs, a testimonial, a feature section, a newsletter form and the latest blog posts. The inner pages add a course page with an outline accordion, a preview video and a feedback form, instructor profiles, a blog with a sidebar and comments, and a contact page with a working form and a click-to-load map. A log in and registration dialog is included as a demo.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.0 and jQuery 1.12), compiled from Sass together with the theme and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. A built-in menu panel replaces SlickNav, PhotoSwipe replaces Magnific Popup in the gallery, and Lucide SVG icons replace three icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: all nine HTML pages together went from 26.2 MB and 511 requests to 5.7 MB and 217 requests, and the download from 15.4 MB to about 3.6 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading, and unused plugins such as Isotope, Counter-Up, WOW.js, Owl Carousel and the date picker are gone.
No third-party requests: Poppins and Crimson Text are self-hosted, the social logos come from a small Font Awesome subset (the Twitter bird is now the X logo), the contact map loads from OpenStreetMap only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Google Fonts and the Google Maps script.
Working forms: the contact, comment, feedback and newsletter forms send through php/send-email.php and php/subscribe.php, with validation, a spam trap and an in-page message. Before, most forms had no action and unnamed fields, so nothing could be sent.
Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, names on icon-only links, labelled form fields, visible focus rings, reduced-motion support and WCAG AA text contrast, with darker text and button colours and readable footer text.
Fixed: broken favicon and missing image references, missing page headings, an unclosed section on the course page, duplicate and mistyped ids on the elements page, and sign-in forms nested inside each other.
Demo content: online-learning copy in place of lorem ipsum, a course catalogue of six distinct courses, fictional instructors, new photos from Unsplash, initials avatars instead of portraits, and placeholder contact details.