Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
📖 [01] - Developing a Quran Mushaf Web App
Part 8 of 8
A detailed multi-part series documenting the development of the Quran Page Viewer web app—covering design, API integration, frontend build, challenges, and future plans to help developers build similar projects.
[01] - Inspiration Behind The Project
The idea for this came from my desire to create a simple yet elegant way to browse the Quran online, page by page, with rich details about each Surah. While there are many Quran apps available, I wanted a lightweight web application that focuses on r...
More from this blog
[01] - 06 - Walking Through the User Experience 🌐📖
The Quran Page Viewer is designed with simplicity, clarity, and reverence in mind — offering a smooth and spiritually focused experience. Here's what a user can expect when they open the app: 🏠 Landing on the Home Page When a user visits the app at...
Apr 11, 20252 min read
[01] - 05 - Understanding the JavaScript Files 🧠📜
The Quran Page Viewer is powered by four JavaScript files that follow the MVC (Model-View-Controller) architecture. 1. model.js – The Data Layer 📡 This file is the Model in MVC. It handles data fetching from external APIs and supplies that data to ...
Apr 4, 20253 min read
[01] - 04 - Understanding styles.css 🎨
The styles.css file defines how the Quran Page Viewer looks and feels — from fonts and colors to layout and responsiveness. It ensures that the app is both beautiful and easy to use across devices. 🔤 Fonts @import url("https://fonts.googleapis.com/...
Mar 28, 20252 min read
[01] - 03 - Understanding index.html 📝
The index.html file is the main webpage structure for the Quran Page Viewer app. It sets up the page elements and connects all the styles and scripts that make the app interactive and visually appealing. Key Parts DOCTYPE & Language <!DOCTYPE html...
Mar 21, 20252 min read
W
Web Dev Projects
16 posts
A Hashnode blog sharing insights, code walkthroughs, and best practices from personal web development projects to help fellow developers learn and build.