500ms
Filter Transition WindowCoordinated fadeOutDown & fadeInUp CSS transitions
6 Tracks
Core Technology DisciplinesWeb, AI, Data Science, C#, Python, Mobile Android
5 Portals
Dedicated Multi-Page ViewsHome, About, Course, Team, Bootcamp, and Login
3 Developers
Collaborative Student TeamAdyvka (Front-End), Abdullah (Back-End), Rosan (Design)
0ms
Zero-Build Load LatencyPure vanilla web execution without runtime bundle overhead
100%
Responsive AdaptabilityCustom CSS Flexbox and Grid layouts across all viewports
The Operational Mandate
Context & High-Stakes Constraints
In the fast-moving landscape of software engineering, aspiring developers frequently struggle to find structured, beginner-friendly learning paths that bridge the gap from foundational syntax to practical development. IDNCourse was conceived to address this challenge: a collaborative online learning platform providing curated courses across modern tech stacks including Web Development, Python, C#, and Mobile Development.
Core Mandate: Build an engaging, responsive e-learning web platform combining smooth category-filtered course animations, interactive modal syllabi, and transparent team collaboration for a student programming competition.
02E-LEARNING & COURSE INTERFACES
The IDNCourse Digital Experience in Action
Explore the core interactive touchpoints of IDNCourse — spanning category-filtered course animations, multi-layer course popups, interactive team showcases, and client-side session persistence.
🔒idncourse.local/index.html
01 / 05Official Brand Presentation
Official Project Showcase & Course Flyer
Official competition presentation flyer showcasing IDNCourse's programming academy, hands-on development curricula, and interactive multi-track learning system.
◆ Signature Coding Academy Visual Branding◆ Comprehensive IT Education Tracks◆ Interactive Multi-Page Learning Architecture
03CAPABILITIES & WORKFLOW
Core Capabilities & Student Learning Workflow
IDNCourse empowers students to master modern programming languages through clean category navigation and structured learning modules.
Animated Course Filter Engine
Vanilla JavaScript animation pipeline dynamically coordinating exit and entrance keyframes for seamless technology category switching.
Structured Course Catalog & Syllabi
Modular course cards with enrollment counters, rating badges, and modal overlays detailing learning outcomes.
Collaborative Team Architecture
Built as a competition collaboration uniting dedicated front-end engineering, back-end API thinking, and modern visual design.
Session Persistence & Interactive FAQ
Client-side localStorage session hydration paired with accordion-based knowledge discovery.
8 Mission-Critical Modules
Each module is engineered with robust transactional boundaries, modular isolation, and comprehensive audit trails.
MODULE // 01 OF 08Interactive DOM
Asynchronous Animated Course Filtering Engine
Custom JavaScript state coordinator (animateCourses and hideAllCourses) managing smooth exit and entrance animation cycles when users filter by tech stack.
- Applies fadeOutDown animation class to current cards with a 500ms completion countdown
- Filters target category cards (C#, Python, HTML/CSS, AI, Java) and triggers fadeInUp entrance
- Synchronizes active button pill state (setActiveButton) with blue brand highlight styling
- Dynamically toggles course section container sizing between all-size and default-size
Course Discovery & Student Enrollment Lifecycle
From animated technology filtering to verified student enrollment — guiding learners through an intuitive educational discovery pathway.
Stage 01Curriculum Discovery
Category Filtering & Track Exploration
Student clicks a technology filter (C#, Python, Web, AI) in the course section. The engine animates matching courses with fade transitions.
Select Tech Category → View Filtered Cards
Stage 02Syllabus Inspection
Modal Inspection & Skill Prerequisites
Student clicks a course card to open the interactive popup modal, inspecting syllabus topics, student review metrics, and instructor background.
Click Course Card → Review Modal Syllabus
Stage 03Enrollment & Session
Enrollment Registration & Session Activation
Student submits registration. If logged in via localStorage, the platform activates course access and reflects enrollment status on the navigation bar.
Submit Registration → Store Session & Begin Course
Collaborative Quality & Accessible Learning Guarantee
IDNCourse represents the combined dedication of a 3-developer team to make programming education intuitive and accessible. Every course card, modal syllabus, and interactive filter is engineered to remove friction for beginner developers starting their tech journey.
04SYSTEM ANATOMY & ARCHITECTURE
Multi-Page Semantic Architecture & Vanilla State Controller
Engineered with a clean separation between independent semantic HTML5 portals, modular CSS stylesheets, a centralized animation controller, and client-side session storage.
Pattern: Multi-Page Semantic Web + Vanilla Animation Controller
Protocol: Client-Side DOM Manipulation & LocalStorage Persistence
Client Presentation & Multi-Page Portals
HTML5 + Poppins TypographyDiscrete semantic portals (index, about, course, ourteam, bootcamp, login) styled with clean typography hierarchy and responsive layout containers.
Modular Styling & Keyframe Engine
CSS3 (Flexbox, Grid & Keyframes)Page-specific stylesheets managing card shadows, layout grids, and hardware-accelerated fadeInUp and fadeOutDown animation classes.
Interactive Filter & State Coordinator
Vanilla JavaScript (ES6+)Asynchronous animation pipeline coordinating hideAllCourses and animateCourses transitions with active button state switching.
Client Session & Storage Layer
Web Storage API (localStorage)Client-side credential cache persisting active student username states across page transitions without backend database dependencies.
Graphic Asset & Iconography Layer
PNG & SVG Vector GraphicsOptimized language badges (Python, C#, Java, HTML), hero illustrations, and avatar photography.
Curated Technology Stack
A modern engineering stack combining high-throughput user interfaces, modular backend architecture, and resilient data layers.
Frontend & UI Architecture
HTML5Semantic Markup across 6 Specialized Portal Pages
CSS3 Grid & FlexboxModular Responsive Layouts & Card Containers
CSS3 KeyframesCustom Hardware-Accelerated fadeInUp & fadeOutDown Transitions
Google Fonts (Poppins)Clean Multi-Weight Typography Hierarchy (300 to 700)
Vanilla JavaScript (ES6+)Animated Course Filter Engine & Modal Overlays
State & Storage
Web Storage APILocalStorage Session State & Active Username Hydration
DOM Event ArchitectureEvent Listeners, Class Toggling & Window Click Handlers
Interactive FAQ ControllerGlyph-Toggling (+/-) Accordion Expansion Logic
Team & Collaboration
Tri-Role Team EngineeringAdyvka (Front-End), Abdullah (Back-End), Rosan (Design)
VS Code Live ServerLocal Development Server Environment
Git & GitHubSource Control & Collaborative Competition Repository
Static Web HostingGlobal Edge CDN Distribution with Zero Build Overhead
Codebase Structure & Data Models
Clear boundary separation between system components, paired with modular schemas and structured repositories.
📁 Root Portals (Multi-Page Architecture)
├──index.html — Main landing hub with hero stats, course filter grid, team & FAQ
├──about.html — Platform vision, mission, and learning advantages
├──course.html — Comprehensive tech course catalog and curriculum views
├──bootcamp.html — Specialized intensive training bootcamps (IELTS & coding)
├──ourteam.html — Dedicated developer team profile directory with hover rotation
├──login.html — User authentication portal with localStorage session hydration
Database Entities & Schema Models
Data Model: Course
Defines educational offerings with title, technologyTrack (CSharp, Python, Web, AI, Android), studentCount, starRating, and syllabusDescription.
Data Model: Bootcamp
Stores intensive training cohorts with cohortTitle, instructorName, academicInstitution, prerequisiteSkills, and registrationDeadline.
Data Model: TeamMember
Captures development team profiles with memberName, roleSpecialization (Front-End, Back-End, UI/UX), biography, and avatarAsset.
Data Model: UserSession
Represents client-side authentication state cached in localStorage: username, sessionToken, and lastActiveTimestamp.
05SECURITY, API & PRODUCTION IMPACT
Hardened Perimeter & Data Safety Standards
Client-side security architecture ensuring safe session handling, clean DOM insertion, and resilient static distribution.
API Endpoints & Routing Architecture
Interactive Course Filter Controller
POSTshowAllCourses(event)Coordinates hideAllCourses callback and triggers fadeInUp on all catalog cards
POSTshowCsharpCourses(event)Filters and displays C# course cards with active button highlighting
POSTshowPythonCourses(event)Filters and displays Python course cards with active button highlighting
POSTshowHtmlCourses(event)Filters and displays Web Development cards with active button highlighting
Multi-Page Portal Navigation
GET/course.htmlRenders complete technology curriculum catalog
GET/bootcamp.htmlServes specialized intensive cohort bootcamps
GET/ourteam.htmlDelivers development team member directory with hover animations
Enterprise Security & Governance Standards
LocalStorage Origin Isolation
User credentials stored in localStorage are strictly scoped to the site's origin protocol, port, and domain, preventing cross-origin session hijacking.
Defensive textContent DOM Rendering
Dynamic session names and modal strings are injected strictly through textContent properties, mitigating Cross-Site Scripting (XSS) risks from untrusted input.
Pre-Compiled Static Distribution
Served over TLS 1.3 encrypted HTTPS channels as pre-rendered static files, providing immunity against server-side injection and unauthorized script execution.
Zero-Tracker Privacy Architecture
The entire platform operates without third-party tracking scripts, advertising pixels, or telemetry beacons, protecting student privacy.
Engineering Challenges & Production Results
How critical technical bottlenecks were overcome and verified under real production conditions.
Challenge // 01
Synchronizing multi-element exit and entrance animations in vanilla JavaScript without visual glitches or DOM flashing. Solved by implementing a callback countdown pattern (hideCount) that ensures all currently displayed cards complete their fadeOutDown keyframe before target category cards receive fadeInUp.
Challenge // 02
Managing dynamic container dimensions when switching between the full catalog and single-course categories. Engineered container state classes (all-size and default-size) that smoothly adjust parent height constraints during category transitions.
Challenge // 03
Coordinating engineering deliverables across a 3-developer team under competition deadlines. Established strict file conventions and clean separation between front-end DOM manipulation, back-end API alignment, and visual design assets.