Home / Work / Code Crate
09 / E-Learning Platform
Platform Web Application
Live Web Concept

Code CrateCoding Platform

A 6-page e-learning frontend platform for developers and graphic designers. Features 12 comprehensive courses across 4 tracks (Programming, Web Development, Modern Frameworks, and Graphic Design), custom high-res vector branding, AOS (Animate On Scroll) animations, floating smooth scroll navigators, and strict pattern-based registration validation.

HTML5 / CSS3 (6 Pages) Vanilla JavaScript AOS (Animate On Scroll) Custom Vector SVGs
Launch Live Preview
Repository Access Private Repo
SCREENSHOTS
5
TIMELINE
3 Weeks
LEVEL
Starter
01. Overview 02. Engineering Highlights 03. Tech Matrix 04. Screenshots (5)

Engineering Highlights.

[01]

12-Course Multi-Track Curriculum

Structured 12-course catalog across 4 distinct learning tracks: Core Programming (Python, C++, Java), Web Dev (HTML, CSS, JS, TS, Tailwind), Frameworks (React, Next.js), and Graphic Design (Photoshop, Illustrator) with custom SVG emblems.

Curriculum & SVG Assets
[02]

AOS Motion & Floating Scroll Controls

Viewport scroll orchestration powered by the AOS (Animate On Scroll) engine (1500ms fade-up), combined with scroll-position listeners dynamically toggling floating buttons for smooth bidirectional page navigation.

AOS Library & Scroll Engine
[03]

Modular Stylesheets & Strict Form Regex

Modular multi-page architecture with 5 distinct CSS stylesheets, custom branding colors (#360c8a), and rigorous HTML5 registration validation enforcing exact phone digit counts and password complexity patterns.

Modular CSS & Form Regex

Core Frontend

  • Semantic HTML5 (6 Pages)
  • 5 Modular CSS Stylesheets
  • Vanilla JavaScript (ES6)
  • Zero Backend Dependencies

Motion & Controls

  • AOS (Animate On Scroll 1500ms)
  • Dynamic Scroll-to-Top Handlers
  • Dynamic Scroll-to-Bottom Button
  • Native Smooth Scroll Behavior

Curriculum & Design

  • 12 Tech & Design Courses
  • Custom SVG Course Logos
  • Kanit Google Font (400-900)
  • Primary Brand Palette (#360c8a)

Assets & Validation

  • Font Awesome 6.4.0 & Material Icons
  • Strict HTML5 Pattern RegEx
  • 11-Digit Phone Validation
  • GitHub Pages Deployment

Screenshots.

Showing 5 of 5 screens Click any image to zoom & inspect
Home Page Courses
Home Page
Courses Courses
Courses
About Courses
About
Sign Up Auth
Sign Up
Contact Us Courses
Contact Us
Keep exploring

More projects

All projects
Div Store E-Commerce

Div Store

18-page multi-category electronics e-commerce prototype with client-side state engine and specification selectors.

HTML CSS JavaScript
Jewelry System ERP & Financial

Jewelry System

Enterprise .NET 10 ERP with formula pricing, dual-currency accounting, and QuestPDF invoices.

ASP.NET Core C# SQL Server QuestPDF
IP Inspector Tools & Analytics

IP Inspector

Real-time IP intelligence tool revealing public IPv4, network metrics, and geolocation data.

HTML CSS JavaScript