ProjectsJanuary 9, 2026

Edu-Tajwid: Digital Educational Platform for Tajweed

TajwidApps (Edu-Tajwid)

TajwidApps is a web-based educational platform designed to help users learn the rules of reading the Qur'an (Tajweed), articulation points of letters, and characteristics of letters fluently and precisely. This application is built as a modern, responsive, and interactive Static Web Application, making it easier for users to learn tajweed anywhere via desktop or mobile devices.

Key Features

1. Structured & Comprehensive Learning

Provides a systematically arranged curriculum from basic to advanced levels. The material is divided into 16 main chapters covering all essential aspects of Tajweed science.

2. Serverless Contact Form (Web3Forms)

Utilizes Web3Forms integration to handle messages from users directly to email without requiring a PHP backend, keeping the application lightweight and static.

3. Modern & Responsive Interface

Adaptive Design: Built using Bootstrap v5.3.3, ensuring the site layout automatically adjusts across various screen sizes (Mobile, Tablet, Desktop).
Mobile-Friendly Navigation: Easily accessible navigation menu with off-canvas support for mobile devices.

4. User Interactivity

Smooth Animations: Uses AOS (Animate On Scroll) to provide attractive visual effects as users scroll through the page.
Media Gallery: Integration of GLightbox to display learning videos or illustrations without leaving the main page.
Statistics & Sliders: Displays statistical data with PureCounter and user reviews using Swiper.

Course Curriculum

This application covers 16 Tajweed topics available on separate pages:

Rules of Nun Sukun and Tanwin (Izhar, Idgham, Iqlab, Ikhfa)
Rules of Mim Sukun
Rules of Mim Tasydid and Nun Tasydid
Rules of Lam Tarif (Syamsiyah & Qamariyah)
Rules of Thick and Thin Lam (Lafzul Jalalah)
Idgham Mutamatsilain
Idgham Mutaqaribain
Idgham Mutajanisain
Rules of Prolongation (Mad)
Rules of Reciting Ra
Rules of Qalqalah
Imalah and Isymam (Gharib)
Naql and Tashil (Gharib)
Saktah and Rules for Reading Sad as Sin
Mad Fathah Read Short
Rules of Waqaf and Ibtida'

Technologies Used

Frontend: HTML5, CSS3, JavaScript (Vanilla).
CSS Framework: Bootstrap v5.3.3.
Form Handling: Web3Forms.
External Libraries:
- AOS - Scrolling animations.
- GLightbox - Media gallery lightbox.
- Swiper - Responsive touch slider.
- PureCounter - Number counting animations.

Project Structure

Text

TajwidApps/
├── assets/
│   ├── css/           # Main stylesheet (main.css)
│   ├── img/           # Image assets (logo, illustrations, avatars)
│   ├── js/            # Main JavaScript logic (main.js)
│   └── vendor/        # Third-party libraries (Bootstrap, AOS, etc.)
├── index.html         # Homepage (Landing Page)
├── materi-tajwid.html # Course Index Page
└── [Course Files]     # Individual HTML course files (1Hukum... to 16Hukum...)

Related projects

Rumio.id: Next-Generation Property Marketing & Exploration Platform

Rumio.id is a comprehensive property marketing and exploration platform designed to connect seekers, owners, and property agents with an interactive 360° experience using modern web technologies.

Read case study View project

Panggih Sedulur: Unsoed Student Club Aptitude Questionnaire

An interactive questionnaire platform for Unsoed student clubs, featuring a 5-category scoring system, branching questions, and personalized recommendations.

Read case study View project

Official Website of BEM Universitas Jenderal Soedirman

Development and management of the official website for the Student Executive Board of Universitas Jenderal Soedirman (BEM-U) using WordPress, Elementor, and custom HTML inject.

Read case study View project

URL Shortener BEM Unsoed Edition

Development of a professional URL shortener application with a Glassmorphism interface for the publication needs of BEM Universitas Jenderal Soedirman.

Read case study View project

GrowTo: Delivery Order Directory Platform for Purwokerto

Development of an information platform for delivery order services in the Purwokerto area as the Final Project for the Soedirman Digital School 2025 program.

Read case study View project

NiceGuy Sound Board

For hungry streamers wanting to ride the Bigmo train via Soundboard, we've provided an app bundled with sounds frequently used by our rector, BIGMO.

Read case study View project

Digital Transformation of Rabiha Tour & Travel: Branding and Website Development

Development of a visual identity, social media content design using CorelDRAW & Photoshop, and building a company profile website using WordPress Elementor.

Read case study

Najmi Calculator: Interactive Calculator with Real-Time Features

Development of a responsive calculator app using Vanilla JavaScript, featuring Dark Mode and a custom Error Handling system.

Read case study View project