JS Guide

A static, browser-based JavaScript learning platform and portfolio of interactive demo projects. The repository contains Arabic RTL lesson pages, a responsive landing page, project showcase pages, and several small browser experiments built with plain HTML, CSS, and JavaScript.

Overview

JS Guide is an educational website for learning JavaScript from fundamentals to more advanced topics. It is not a framework app or full React/Vite project; it is a lightweight static site composed of HTML pages, targeted CSS files, and vanilla JavaScript modules.

The project includes:

• Lesson and concept pages for JavaScript fundamentals
• Interactive code examples and notification-based demos
• A project gallery page with embedded preview iframes
• Several UX experiments such as 3D scenes, animations, and interactive product-style layouts
• A floating assistant panel for page navigation and simple JavaScript playground interactions

Features

• Arabic-language learning content with RTL layout
• Homepage with navigation and introductory content
• Lesson pages covering JavaScript basics and advanced function topics
• Interactive examples using browser notifications, console logging, and UI demos
• Local page search and section navigation support in the floating assistant UI
• JavaScript playground panel for running custom snippets in-browser
• Projects showcase page with embedded previews for multiple mini-experiments
• Responsive navigation for smaller screens
• No build step required for the front-end experience

Project Structure

js-guide/
├── .gitignore
├── AUDIT_REPORT_EDUCATIONAL_COMMENTS.md
├── MONSTER_LEVEL_RESTYLING_REPORT.md
├── README.md
├── index.html
├── package.json
├── package-lock.json
├── assets/
│   └── images/
│       └── favicon.png
├── css/
│   ├── advancd.css
│   ├── basics.css
│   ├── compiler.css
│   ├── monsterLevel.css
│   ├── navigation.css
│   ├── projects.css
│   └── style.css
├── js/
│   ├── compiler.js
│   ├── level.js
│   ├── main.js
│   ├── particles.js
│   └── server.js
├── pages/
│   ├── advanced.html
│   ├── basics.html
│   ├── compiler.html
│   ├── monsterLevel.html
│   └── Projects/
│       ├── projects.html
│       ├── fish/
│       │   ├── fish.css
│       │   ├── fish.html
│       │   └── fish.js
│       ├── professionalism/
│       │   ├── professionalism.css
│       │   ├── professionalism.html
│       │   └── professionalism.js
│       ├── sales/
│       │   ├── sales.css
│       │   ├── sales.html
│       │   └── sales.js
│       ├── simple_3d/
│       │   ├── simple_3d.css
│       │   ├── simple_3d.html
│       │   └── simple_3d.js
│       ├── space_globe/
│       │   ├── space_globe.css
│       │   ├── space_globe.html
│       │   └── space_globe.js
│       └── walks/
│           ├── walks.css
│           ├── walks.html
│           └── walks.js
└── node_modules/

node_modules is present because dependencies were installed locally and is not part of the source design itself.

Pages

Homepage

• index.html is the landing page for the course.
• It includes the site nav, a hero/header section, a start button, social links, a particle background, and the floating assistant UI.

Lesson Pages

• pages/basics.html contains introductory JavaScript learning content in Arabic.
• pages/advanced.html covers functions, arguments, return values, and more advanced explanations.
• pages/monsterLevel.html focuses on arrays and advanced conceptual breakdowns.
• pages/compiler.html is a minimal HTML shell for the browser compiler/panel experience.

Projects Page

• pages/Projects/projects.html renders a gallery of interactive JavaScript project previews.
• Each card contains a project summary and an embedded iframe for the related demo.
• The project list includes Fish, Professionalism, Sales, Simple 3D, Space Globe, and Walks.

Project Demos

Each task under pages/Projects/* is a standalone browser demo and uses its own CSS and JavaScript:

• fish – a Three.js-based animated fish/scene experiment
• professionalism – SVG-driven artistic motion composition
• sales – ecommerce/product slider concept
• simple_3d – layered depth card hover effect
• space_globe – 3D globe/scene demo
• walks – CSS animation character study

Technologies

The project uses the following technologies that are actually present in the repository:

• HTML5
• CSS3
• Vanilla JavaScript
• Node.js with Express (for the optional API server in js/server.js)
• OpenAI SDK (openai) for the server-side chat API
• dotenv for environment configuration
• Three.js loaded via CDN in several project pages
• particles.js loaded via CDN on the homepage
• Boxicons and Google Fonts loaded via CDN

Architecture

This project is a static multi-page educational site with a few interactive modules layered on top of plain HTML/CSS/JS.

Main architectural patterns:

• Shared site styling is organized in css/style.css, css/navigation.css, and css/compiler.css.
• Page-specific styling is separated into files like css/basics.css, css/monsterLevel.css, and css/projects.css.
• Shared behavior is handled in js/main.js, which manages the mobile menu and active nav highlighting.
• js/compiler.js contains the floating assistant UI, local search, page section navigation, and a small in-browser JS playground.
• js/particles.js configures the homepage particle background.
• js/level.js adds reveal-on-scroll behavior for lesson sections.
• js/server.js is a separate Express server that exposes a chat endpoint using the OpenAI API, but it is not the primary front-end runtime for the educational site.

JavaScript Functionality

Core navigation and UI

js/main.js handles:

• mobile navigation menu toggling
• active nav state based on the current page
• code syntax highlighting for lesson code blocks
• notifications and messages for educational interactions
• route transitions from the home page start button

Floating assistant panel

js/compiler.js includes a floating action button (FAB) UI with:

• AI chat panel
• JS compiler/playground panel
• About panel
• section navigation panel for the current page
• local search across predefined pages
• scroll-to-section behavior for lesson content

Interactive page behaviors

• js/level.js adds reveal animations for sections as they enter the viewport.
• particles.js adds the animated particles background used on the homepage.
• Project pages use their own scripts and libraries such as Three.js and custom animation logic.

Styling and Responsive Design

The project uses CSS files organized by section rather than a component framework.

Examples:

• css/style.css contains the general landing-page layout and shared styling.
• css/navigation.css handles the navigation bar and mobile menu behavior.
• css/basics.css and css/monsterLevel.css implement lesson-page presentation and animations.
• css/projects.css styles the project gallery layout and card-based preview experience.
• css/compiler.css styles the floating developer assistant and code terminal UI.

The site is responsive by design and includes mobile-friendly menu behavior through CSS media queries and JavaScript toggling.

Assets

The asset directory is minimal and currently contains:

• assets/images/favicon.png – site favicon

The project also loads external media from public CDNs, including:

• Google Fonts
• Boxicons
• particles.js CDN
• Three.js CDN
• several remote images used by the project demos

Dependencies

The project dependencies are defined in package.json:

{
  "dependencies": {
    "cors": "^2.8.6",
    "express": "^5.2.1",
    "node-fetch": "^3.3.2"
  }
}

These dependencies support the optional server-side API route; the front-end itself primarily runs as static HTML, CSS, and JS files.

Installation / Setup

Because the project is mostly static front-end content, installation is simple:

1. Clone the repository.
2. Open the project root in a terminal.
3. Ensure Node.js is installed.
4. Install dependencies:

npm install

Running the Project

The main educational site is a static site and can be served from the repository root with any local static web server.

Example:

cd "D:\HTML R\js-guide"
python -m http.server 8000

Then open:

http://localhost:8000

For the backend API scaffold:

node js/server.js

This server reads OPENAI_API_KEY from the environment and exposes an /api/chat endpoint.

Usage

• Open the site in a browser to browse JavaScript lessons.
• Use the navigation to move between the home page, basics, advanced lessons, and the projects gallery.
• Explore the embedded demo pages for interactive examples.
• Use the floating assistant panel to search sections and run small JavaScript snippets.
• Visit the project gallery to preview the different mini-applications.

Browser Compatibility

This project is designed for modern browsers that support:

• ES6+ JavaScript
• CSS Grid and Flexbox
• IntersectionObserver
• standard DOM APIs

Because it relies on browser-side JavaScript, compatibility is best with current Chrome, Edge, Firefox, and Safari versions.

Deployment

There is no formal deployment pipeline or hosting configuration in the repository. The site is effectively a static front-end project and can be deployed to any static host or web server that serves the root folder.

Examples include:

• GitHub Pages
• Netlify
• Vercel static hosting
• any Node/Express or simple HTTP server environment

The optional Express API is separate and requires environment configuration for OpenAI access.

Development Notes

• The project is intentionally plain HTML/CSS/JS and does not use a framework.
• Most content is authored in Arabic and uses RTL conventions.
• Several pages use CDN-loaded libraries rather than bundled local dependencies.
• The layout is static and educational rather than a production SaaS app.
• There is no build tool, bundler, or modern package script for front-end compilation.

Known Limitations

• There is no automated test suite configured in package.json.
• The test script is only a placeholder and currently exits with an error.
• The OpenAI-powered server is optional and not configured as part of the main static site flow.
• No environment example file (.env.example) or deployment configuration is provided in the repository.
• Some project demos rely on external CDN resources and remote image sources.

Contributing

Contributions are welcome if they remain consistent with the project’s educational goal and do not remove the existing design intent.

Recommended workflow:

1. Fork the repository.
2. Create a feature branch.
3. Make your changes in the relevant HTML/CSS/JS files.
4. Validate the affected pages locally in a browser.
5. Submit a pull request with a short summary of the change.

License

This project declares the ISC license in package.json.

ISC

Summary

JS Guide is a practical, browser-based JavaScript learning portal and demo collection. It combines educational lesson pages, a responsive navigation structure, a floating assistive UI, and several interactive visual experiments in a lightweight static site architecture without a modern framework.

It is best understood as a curated educational code playground for JavaScript concepts and browser experimentation, rather than a production backend application.