Project Overview

A look behind the scenes at CodeMentor JS

Project Name

CodeMentor JS is an interactive web application designed to help beginners learn JavaScript fundamentals through structured lessons, interactive examples, and practice exercises.

Intended Users

  • Beginner programmers (primarily my classmate/client)
  • Students learning JavaScript basics
  • Self-taught coders needing structured materials
  • Anyone interested in web development fundamentals

Website Content Overview

  • Interactive JavaScript tutorials
  • Code examples with live editors
  • Practice exercises with solutions
  • Concept explanations with visual aids
  • Progress tracking (client-side only)
  • Resource recommendations

Wireframe Site Map

    A[Home] --> B[Lessons]
    A --> C[Exercises]
    A --> D[Resources]
    A --> E[About]
    B --> B1[Variables]
    B --> B2[Functions]
    B --> B3[Loops]
    C --> C1[Beginner]
    C --> C2[Intermediate]
    D --> D1[References]
    D --> D2[Tools]

Page Designs

Home Page

Purpose: Introduce the platform

Content: Welcome message, featured lessons, quick start guide, recent updates

Interactivity: Interactive code snippet demo, newsletter form

Lessons Page

Purpose: Provide learning materials

Interactivity: Expandable cards, filter by difficulty

Exercises Page

Purpose: Practice coding

Interactivity: Code editor, run button, syntax checking

Resources Page

Purpose: Offer additional learning links

Interactivity: Filterable, opens in new tabs

About Page

Purpose: Info about the platform

Interactivity: FAQ accordion, contact form with validation

Dynamic Functionality

  • Interactive Code Editor: Browser-based using CodeMirror
  • Concept Visualizer: Animates JavaScript ideas with jQuery/SVG
  • Progress Tracker: Tracks learning via localStorage
  • Interactive Quiz: End-of-lesson challenge with feedback
  • Responsive Navigation: Hamburger menu using jQuery

Technical Notes

  • All data storage via localStorage
  • No server-side functionality required
  • jQuery UI for UI components
  • AJAX for loading code samples
  • Form validation with JavaScript

References

  • CodeMirror (code editor)
  • jQuery UI (UI widgets)
  • MDN Web Docs (developer documentation)
  • W3Schools (interactive examples)