ProjectsJanuary 9, 2026

Edu-Tajwid: Platform Edukasi Digital Ilmu Tajwid

TajwidApps (Edu-Tajwid)

TajwidApps adalah platform edukasi berbasis web yang dirancang untuk membantu pengguna mempelajari hukum bacaan Al-Qur'an (Tajwid), makharijul huruf, dan sifat huruf secara fasih dan tartil. Aplikasi ini dibangun sebagai Static Web Application yang modern, responsif, dan interaktif, memudahkan pengguna untuk belajar tajwid di mana saja melalui perangkat desktop maupun seluler.

Fitur Utama

1. Pembelajaran Terstruktur & Lengkap

Menyediakan kurikulum yang disusun sistematis mulai dari dasar hingga tingkat mahir. Materi dibagi menjadi 16 bab utama yang mencakup seluruh aspek penting ilmu Tajwid.

2. Formulir Kontak Serverless (Web3Forms)

Menggunakan integrasi Web3Forms untuk menangani pengiriman pesan dari pengguna langsung ke email tanpa membutuhkan backend PHP, menjaga aplikasi tetap ringan dan statis.

3. Antarmuka Modern & Responsif

Desain Adaptif: Dibangun menggunakan Bootstrap v5.3.3, memastikan tampilan situs menyesuaikan otomatis di berbagai ukuran layar (HP, Tablet, Desktop).
Navigasi Ramah Seluler: Menu navigasi yang mudah diakses dengan dukungan off-canvas untuk perangkat seluler.

4. Interaktivitas Pengguna

Animasi Halus: Menggunakan AOS (Animate On Scroll) untuk memberikan efek visual menarik saat pengguna menggulir halaman.
Galeri Media: Integrasi GLightbox untuk menampilkan video pembelajaran atau gambar ilustrasi tanpa meninggalkan halaman utama.
Statistik & Slider: Menampilkan data statistik dengan PureCounter dan ulasan pengguna menggunakan Swiper.

Kurikulum Materi

Aplikasi ini mencakup 16 topik pembahasan Tajwid yang tersedia dalam halaman terpisah:

Hukum Nun Sukun Dan Tanwin (Izhar, Idgham, Iqlab, Ikhfa)
Hukum Mim Sukun
Hukum Mim Tasydid Dan Nun Tasydid
Hukum Lam Tarif (Syamsiyah & Qamariyah)
Hukum Lam Tebal dan Tipis (Lafzul Jalalah)
Idgham Mutamatsilain
Idgham Mutaqaribain
Idgham Mutajanisain
Hukum Bacaan Panjang (Mad)
Hukum Membaca Ra
Hukum Qalqalah
Bacaan Imalah Dan Isymam (Gharib)
Bacaan Naql Dan Tashil (Gharib)
Bacaan Saktah Dan Hukum Sad Dibaca Sin
Mad Fathah Dibaca Pendek
Hukum Waqaf Dan Ibtida'

Teknologi yang Digunakan

Frontend: HTML5, CSS3, JavaScript (Vanilla).
Framework CSS: Bootstrap v5.3.3.
Form Handling: Web3Forms.
Library Eksternal:
- AOS - Animasi scrolling.
- GLightbox - Lightbox media galeri.
- Swiper - Slider sentuh responsif.
- PureCounter - Animasi angka statistik.

Struktur Proyek

Text

TajwidApps/
├── assets/
│   ├── css/           # File gaya utama (main.css)
│   ├── img/           # Aset gambar (logo, ilustrasi, avatar)
│   ├── js/            # Logika JavaScript utama (main.js)
│   └── vendor/        # Pustaka pihak ketiga (Bootstrap, AOS, dll)
├── index.html         # Halaman Beranda (Landing Page)
├── materi-tajwid.html # Halaman Indeks Materi
└── [File Materi]      # File HTML materi individu (1Hukum... s/d 16Hukum...)

Related projects

Rumio.id: Platform Marketing & Eksplorasi Properti Generasi Baru

Rumio.id adalah platform pemasaran dan eksplorasi properti komprehensif yang dirancang untuk menghubungkan pencari, pemilik, dan agen properti dengan pengalaman interaktif 360° menggunakan teknologi web modern.

Read case study View project

Panggih Sedulur: Kuisioner Minat Bakat UKM Unsoed

Platform kuisioner interaktif untuk UKM Unsoed dengan sistem scoring 5 kategori utama, branching questions, dan rekomendasi personalisasi.

Read case study View project

Website Resmi BEM Universitas Jenderal Soedirman

Pengembangan dan pengelolaan website resmi Badan Eksekutif Mahasiswa Universitas Jenderal Soedirman (BEM-U) menggunakan WordPress, Elementor, dan custom inject HTML.

Read case study View project

URL Shortener BEM Unsoed Edition

Pengembangan aplikasi pemendek URL profesional dengan antarmuka Glassmorphism untuk kebutuhan publikasi BEM Universitas Jenderal Soedirman.

Read case study View project

GrowTo: Platform Direktori Delivery Order Purwokerto

Pengembangan platform informasi layanan delivery order untuk area Purwokerto sebagai Final Project program Soedirman Digital School 2025.

Read case study View project

NiceGuy Sound Board

Buat para streamer laper yang pengen naik kereta Bigmo via Soundboard telah kami sediakan aplikasi yang sudah sepaket dengan sound2 yang sering digunakan oleh rektor kita BIGMO.

Read case study View project

Transformasi Digital Rabiha Tour & Travel: Branding dan Pengembangan Website

Pengembangan identitas visual, desain konten media sosial menggunakan CorelDRAW & Photoshop, serta pembangunan website company profile menggunakan WordPress Elementor.

Read case study

Najmi Calculator: Kalkulator Interaktif dengan Fitur Real-Time

Pengembangan aplikasi kalkulator responsif menggunakan Vanilla JavaScript dengan fitur Dark Mode dan sistem Error Handling kustom.

Read case study View project