CodePrep Hub

A frontend-only educational platform for CS students, built with HTML, CSS, and JavaScript.

Features

• Home Page: Hero section, stats, featured blogs, popular courses, global search
• Blog: Article listing with filtering and search, single post view with syntax highlighting
• Courses: Micro-course catalog with filtering, detailed course pages with lessons
• QB Solver: Question bank search with full solutions in modal
• Dashboard: Mock student dashboard with progress tracking
• Responsive Design: Works on desktop and mobile

Tech Stack

• HTML5
• CSS3 (Custom design system)
• JavaScript (ES6+)
• Prism.js for code syntax highlighting

Project Structure

codeprep-hub/
├── index.html          # Home page
├── blog.html           # Blog listing + single post
├── courses.html        # Course catalog
├── course-detail.html  # Course detail view
├── qb-solver.html      # Question bank
├── dashboard.html      # Student dashboard
├── login.html          # Login page
├── css/
│   └── style.css       # Main stylesheet
├── js/
│   ├── main.js         # Shared utilities
│   ├── blog-data.js    # Blog posts data
│   ├── course-data.js  # Courses data
│   └── qb-data.js      # Question bank data
└── assets/
    └── images/         # Images (placeholder)

Getting Started

1. Clone or download the project
2. Open index.html in a web browser
3. Navigate through the site using the navbar

Hosting

Host for free on:

• GitHub Pages
• Netlify
• Vercel

Just upload the files and open index.html.

Mock Data

All content is stored in JavaScript files:

• blog-data.js: Blog posts with HTML content
• course-data.js: Courses with lessons
• qb-data.js: Questions with solutions

Design System

• Primary: #4F46E5 (Indigo)
• Secondary: #10B981 (Emerald)
• Background: #F9FAFB
• Text: #1F2937
• Font: Inter/Poppins from Google Fonts

Features Implemented

• ✅ Responsive navbar with navigation
• ✅ Hero section with CTAs
• ✅ Statistics display
• ✅ Card-based layouts
• ✅ Search functionality
• ✅ Filtering by tags/subjects
• ✅ URL-based routing for single views
• ✅ Modal dialogs
• ✅ Syntax highlighting for code
• ✅ Mock user dashboard
• ✅ Mobile-responsive design

Future Enhancements

• Add more courses and blog posts
• Implement user authentication (currently mock)
• Add progress tracking
• Include more interactive elements
• Add animations and transitions