Online Courses Website Template
From $29.00
A friendly website template for online academies, fully bilingual in English and Arabic (true RTL): searchable course catalog with filters, course pages with curriculum, instructors, pricing with a monthly/yearly toggle, testimonials, FAQ and sign-up.
- Secure payment via PayPal
- Instant digital delivery
- Clear licensing
- Support available
Overview
A complete website for an online academy, course marketplace, training company or bootcamp, delivered in two full language versions: English and Arabic. The Arabic pages are genuinely right-to-left: navigation, cards, filters, accordions, forms and direction-sensitive icons are mirrored, Arabic fonts are included, and dates and plural forms read the way Arabic speakers expect.
Pages (in each language): home, course catalog, course detail, instructors, pricing, learner stories (testimonials), FAQ, sign-up and contact, and 404, plus a language chooser.
Built around your courses. All courses, instructors and topics live in one easy-to-edit file, data/courses.js, with the English and Arabic text side by side. Add a course there and it appears in the catalog, gets its own detail page with its curriculum, and is counted on the home page and on its instructor's card, in both languages. Lesson counts and total durations are calculated for you. No database and no build step.
What visitors can do
- Search the catalog and filter by topic, level, price, teaching language and saved courses; sort by popularity, rating, newest, price or length; share filtered results by link
- Open a course page with what they will learn, a curriculum accordion with "expand all", requirements, the instructor, a rating breakdown, reviews and related courses
- Save courses to their list and copy a course link
- Compare plans with a monthly / yearly toggle and a feature table
- Browse instructors by topic, filter learner stories and search the FAQ with highlighted matches
- Fill in a sign-up form (password strength meter, plan choice) or a contact form, with clear validation and a confirmation screen
Original artwork: 14 course cover illustrations, 6 illustrated instructor portraits, a hero illustration and supporting art, all original SVG and easy to replace with your own images.
The design is bright and friendly without being childish: sky blue, sunflower and coral on white, rounded type (Fredoka and Nunito in English, Baloo Bhaijaan 2 and Almarai in Arabic), pill buttons, big rounded cards and progress motifs such as progress rings, completion bars and a reading-progress line. Fonts are self-hosted, so nothing loads from outside your site.
Forms validate in the browser and show a confirmation with a reference number. Out of the box they run in demo mode and send nothing. To receive submissions, set one form address in assets/js/config.js; the README explains how. The sign-up form is a front-end design that you connect to your own learning platform.
What's included
- Complete product files (ZIP)
Languages
The product description and details are provided in these languages.
Features
- Two complete language versions: English (LTR) and Arabic (true RTL), with a language switch on every page that keeps the current page and filters
- 9 pages per language: home, catalog, course detail, instructors, pricing, testimonials, FAQ, sign-up/contact and 404, plus a language chooser
- All courses, instructors and topics in one data file, with English and Arabic text side by side
- Catalog search plus filters for topic, level, price, teaching language and saved courses
- Six sort options, shareable filter links, removable filter chips and a helpful empty state
- Course detail pages generated from the data file, with a curriculum accordion and an "expand all" button
- Lesson, project and quiz counts and total course length calculated automatically
- Rating breakdown, learner reviews and related courses on every course page
- Enrol box with price, discount, what the course includes, save to list and copy link
- Instructor cards with course counts, learner totals, average ratings, topic filter and search
- Pricing plans with an accessible monthly / yearly toggle and a feature comparison table
- Filterable learner stories and outcome progress rings
- Searchable FAQ with categories and highlighted matches
- Tabbed sign-up and contact forms with validation, error summary, password strength meter and confirmation screen
- Optional form endpoint setting to receive submissions; demo mode works out of the box
- 14 original course cover illustrations, 6 instructor portraits and page illustrations, all in SVG
- Bright, friendly design: sky blue, sunflower and coral, rounded fonts, pill buttons and progress motifs
- Self-hosted fonts: Fredoka, Nunito, Baloo Bhaijaan 2 and Almarai (SIL Open Font License)
- Responsive from phones to large screens, with a mobile menu and collapsible catalog filters
- Keyboard-friendly menus, accordions, tabs and filters, visible focus, WCAG AA contrast and reduced-motion support
- Plain HTML, CSS and JavaScript: no build step, no frameworks, works offline and straight from disk
- Detailed README on setup, editing courses, images, fonts, colours, forms and deployment
Requirements
No server, database or build tools are required. The template is plain HTML5, CSS3 and vanilla JavaScript with no frameworks or external libraries. Open index.html directly from disk or upload the folder to any static web host. A text editor is all you need to customise it.
Compatibility
Built with standard HTML, CSS and JavaScript for current versions of Chrome, Edge, Firefox and Safari on desktop, Android and iOS. Responsive from small phones (360 px) to large desktop screens. Automated tests were run in Chromium at 1440, 1024, 768 and 390 px widths, in English and Arabic.
Installation
- Unzip
online-courses-website-template-1.0.0.zip. - Double-click
index.htmland choose English or العربية. Everything works from disk, including the catalog filters, course pages and forms. - Or preview with a local web server from inside the folder, for example
python3 -m http.server 8000, then open http://localhost:8000/. - To publish, upload the contents of the
online-courses-website-templatefolder to any static host (Netlify, Vercel, Cloudflare Pages, GitHub Pages or classic hosting via FTP).
The README covers every step in detail, including the custom 404 page and choosing a default language.
User guide
Edit courses, instructors and topics in data/courses.js. Each text has an "en" and an "ar" value. Copy a course block to add a course; it appears in the catalog and gets its own page at course.html?id=your-course-id. Set "featured": true to show it on the home page and "price": 0 to make it free.
Edit page texts in the HTML files: English pages are in en/, Arabic pages in ar/, with the same file names.
Change colours with the CSS variables at the top of assets/css/style.css (for example --sky-600, --sun-400, --coral-400, --ink).
Change fonts by adding WOFF2 files to assets/fonts/ and updating the @font-face rules and the --font-display / --font-body variables.
Replace images by putting your own files in assets/img/courses/ (16:10) and assets/img/instructors/ (square) and updating the paths in the data file.
Receive form submissions by setting formEndpoint in assets/js/config.js to a URL that accepts a JSON POST. Without it, forms run in demo mode and only show the confirmation. The password is never sent.
Pricing plans are edited in en/pricing.html and ar/pricing.html: the visible text, the data-monthly and data-yearly values used by the toggle, and the yearly note in data-note-yearly.
License
| Personal$29.00 | Commercial$45.00 | Extended$149.00 | |
|---|---|---|---|
| Projects | 1 | 5 | Unlimited |
| Users or sites | 1 | 1 | 5 |
| Commercial use | Not allowed | Allowed | Allowed |
| Modification | Allowed | Allowed | Allowed |
| Resale | Not allowed | Not allowed | Not allowed |
| Redistribution | Not allowed | Not allowed | Not allowed |
| Updates | 12 months | 12 months | Lifetime |
| Support period | 6 months | 12 months | 12 months |
| License key | Yes | Yes | Yes |
Pay with PayPal or a debit or credit card. We send your product once the payment is confirmed.
Support & Updates
Questions or problems? Contact TowerCaty support using the details in your order email. Please include the product name and version (Online Courses Website Template 1.0.0), your browser, and a short description or screenshot of the issue.
Changelog
1.0.0
- Version 1.0.0: first release in the store.
Last Updated
- Last update
- Oct 7, 2026
- Version
- 1.0.0
