Programming Learning Platform with Visual Aids

This paper presents the design and development of a user-centric web-based programming learning platform aimed at novice programmers. The platform addresses common challenges in learning programming by integrating visual learning aids and interactive features. A real-time code visualization tool enables learners to trace code execution line-by-line, helping demystify abstract concepts and debug code logic. The system also incorporates progress tracking dashboards, formative assessments (quizzes and coding exercises), and a digital badge reward system to motivate continuous learning. The platform was implemented as a Single-Page Application using a cloud Backend-as-a-Service (Firebase) to support real-time data synchronization and user management. Development followed an iterative, user-centered approach, including usability testing with target users that informed subsequent refinements. Results indicate that the platform effectively engages beginners by bridging the gap between theoretical knowledge and practical application through interactive visual feedback. This work contributes an innovative e-learning solution that leverages visualization and gamification to enhance the learning experience for novice programmers.