Educational ProfileMa'had Alam Nurul Ilmi2025

Mahad Nurul Ilmi: Islamic Education Website

Ma'had Nurul Ilmi is a newly founded pesantren whose only presence was scattered posts across YouTube, Instagram, TikTok, and Facebook. So it needed an official website to introduce its programs and curriculum to prospective students and parents from outside the area.

Visit Website Back to Projects

Preview

Walk Through the Site

A scrollable look at the finished site, exactly as a visitor would browse it.

Desktop

Mobile

Tech Stack

Technologies Powering the Build

The tools and technologies that came together to bring this project to life.

Roles

A Skill-by-Skill Breakdown

Each project draws on a mix of disciplines, here's how they came together on this one.

Web Development

Purchased the school's domain, configured DNS, and pointed it to Hostinger.
Installed and set up WordPress from scratch on Hostinger hosting.
Built and structured the site with WordPress, Elementor, and the Blocksy theme.
Installed and configured every plugin the site needed.
Set up the blog architecture and templates for publishing articles.
Configured SSL, routine backups, and site speed optimization for reliability.
Performed ongoing maintenance: updating plugins and themes, and monitoring performance and uptime.

Web Design

Customized Blocksy's global styles, colors, and typography for the school's branding.
Structured programs, curriculum, and activities into clear, separate sections.
Laid out the student activity photo gallery as a bento grid for visual variety.
Made page-by-page responsive adjustments for parents browsing on mobile.

Graphic Design

Adapted the school's existing logo for web use, adjusting sizing, format, and background.
Designed simple icons to distinguish each program and curriculum category.
Selected and edited student activity photos for the gallery.
Created the site's favicon.
Compressed every image to WebP and under 200KB before upload, without a visible drop in quality.

Digital Marketing

Wrote the site's program, curriculum, and page copy to build credibility with prospective parents.
Wrote SEO-targeted blog articles, averaging AIOSEO scores above 90.
Used the blog to publish religious articles, Islamic education content, PPDB admission announcements, and student activity updates.
Set up Google Search Console and Google Analytics to monitor traffic.

Highlights

Behind the Scenes

A closer look at what the finished product offers, the obstacles along the way, and what came out of it.

Key Features

Fully responsive design across desktop and mobile devices.
Optimized images for fast loading.
Google Analytics and Search Console integration.
Detailed school profile, including the boarding facility (pondok).
Breakdown of educational programs offered.
Curriculum overview covering subjects and Islamic studies.
Overview of student entrepreneurship activities.
Photo gallery of school activities in a bento grid layout.
Blog covering religious articles, Islamic education, PPDB announcements, and student activities.
Contact page with an embedded Google Maps location.
Links to the school's official social media accounts.

Challenges Faced

Structuring a Wide Range of Programs and Curriculum

The school offers many programs, subjects, and areas of Islamic study, plus entrepreneurship activities, so content was organized into clear categories instead of one long list.

Dense Information Navigation

Programs, curriculum, and activities were grouped into separate menus so visitors wouldn't feel overwhelmed by one long page.

Building Credibility for a New Institution

As a newly founded pesantren, the site needed to build trust through detailed program information and real activity photos rather than institutional history.

Lessons Learned

Learned to build a new institution's credibility through concrete program and curriculum details instead of relying on institutional history.
Saw firsthand how grouping a wide curriculum into clear categories reduces overwhelm for parents unfamiliar with pesantren life.

Impacts

Problems Solved After Launch

How this project changed things for the business and its users after launch.

Verifiable program details

Images under 200KB

Reach beyond the local area

Critical Fix

Strengthening Trust for a New Institution

Before

As a newly founded pesantren, prospective parents had little to go on when evaluating its programs before enrolling their children.

After

Detailed program information, curriculum breakdown, and real activity photos give prospective parents something concrete to evaluate as the institution continues to grow.

Performance

Slow-Loading Pages From Unoptimized Images

Before

High-resolution images across the site, not just one section, risked slowing down every page.

After

Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality.

Improvement

Reach to Prospective Students Outside the Area

Before

Information about the ma'had only spread through YouTube, Instagram, TikTok, and Facebook posts, with no single authoritative source.

After

Prospective parents from outside the city can now learn about programs, curriculum, and facilities on their own before visiting.