Premium Online Tech Courses Platform
Master in-demand tech skills with expert-led courses
Live Demo • Features • Tech Stack • Pages • Getting Started
Novio is a premium online tech courses platform designed to empower learners worldwide with industry-expert instruction. It features a modern, responsive storefront with course discovery, filtering, cart management, and user account features — all built as a static frontend with localStorage-based persistence.
- 200+ Premium Courses — Web Development, Data Science, AI/ML, Cybersecurity, Cloud Computing, DevOps, Design, and more
- Smart Course Discovery — Category filters, level filters, price filters, duration filters, and real-time search with suggestions
- Horizontal Category Scrollbar — Quick-access category chips with horizontal scrolling on the courses page
- Shopping Cart — Full cart management with localStorage persistence and checkout flow
- User Authentication — Login, signup, forgot password with password strength meter
- Account Dashboard — Profile management, enrolled courses, achievements, social links, resume upload
- Responsive Design — Fully mobile-first with redesigned hamburger menu featuring quick links and social media
- Premium UI — Gradient buttons, smooth animations, glassmorphism navbar, testimonial carousel with 15 reviews
- SEO Optimized — Unique meta titles/descriptions, Open Graph, Twitter Cards, JSON-LD structured data on every page, sitemap.xml, robots.txt
- Accessibility — ARIA attributes on all forms, navigation, landmarks, and interactive elements
- Premium Certificates — Gold-accented course completion certificates with watermark, seal, ornaments, and Novio logo
- Credential Verification — Public verification page for validating certificate authenticity via unique certificate IDs
- Performance — Deferred script loading, lazy-loaded images, locally hosted WebP images, CSS architecture split into 16 modular files
- Form Validation — Regex patterns, min/max length, input types, and autocomplete attributes on all form fields
| Technology | Usage |
|---|---|
| HTML5 | Semantic markup, ARIA, JSON-LD |
| CSS3 | Custom properties, animations, gradients |
| Bootstrap 5 | Grid, components, responsive utilities |
| Bootstrap Icons | Icon library |
| JavaScript (ES5) | DOM manipulation, localStorage |
| jQuery 3.7.1 | Event handling, UI interactions |
novio/ ├── index.html # Homepage ├── courses.html # Course catalog with filters ├── course-detail.html # Individual course page ├── login.html # Login page ├── signup.html # Registration page ├── forgot-password.html # Password recovery ├── account.html # User dashboard ├── my-courses.html # Enrolled courses ├── cart.html # Shopping cart ├── payment.html # Checkout page ├── about.html # About Novio ├── contact.html # Contact form ├── blog.html # Blog articles ├── careers.html # Job openings ├── catalog.html # Full course catalog ├── novio-plus.html # Subscription plan ├── help-center.html # FAQ & support ├── settings.html # Account settings ├── achievements.html # Certificates & badges ├── purchases.html # Order history ├── updates.html # Notifications ├── podcast.html # The Novio Podcast ├── tech-blog.html # Engineering blog ├── press.html # Press center ├── investors.html # Investor relations ├── leadership.html # Leadership team ├── learners.html # For learners ├── partners.html # Partnerships ├── beta-testers.html # Beta program ├── affiliates.html # Affiliate program ├── privacy-policy.html # Privacy policy ├── terms-of-service.html # Terms of service ├── refund-policy.html # Refund policy ├── certificate.html # Course completion certificate ├── verify-certificate.html # Public credential verification ├── accessibility.html # Accessibility statement ├── sitemap.xml # XML sitemap ├── robots.txt # Robots directives └── assets/ ├── css/ │ ├── variables.css # CSS custom properties │ ├── base.css # Base styles & buttons │ ├── navbar.css # Navigation & mobile menu │ ├── hero.css # Hero sections │ ├── courses.css # Course cards & sections │ ├── components.css # Testimonials, toasts, etc. │ ├── pages-auth.css # Auth page styles │ ├── pages-browse.css # Courses page, filters │ ├── pages-legal.css # Legal page styles │ ├── pages-course.css # Course detail styles │ ├── pages-account.css # Account page styles │ ├── animations.css # Keyframes & transitions │ ├── layout-search.css # Search overlay styles │ ├── layout-footer.css # Footer styles │ ├── layout-menus.css # Dropdown & mega menu │ ├── responsive.css # Media queries │ └── bootstrap.min.css # Bootstrap 5 ├── images/ │ ├── courses/ # Course thumbnail images (WebP) │ ├── instructors/ # Instructor profile images (WebP) │ ├── reviewers/ # Reviewer avatar images (WebP) │ ├── hero/ # Hero & about images (WebP) │ ├── blog/ # Blog post images (WebP) │ ├── favicon/ # Favicon files │ └── logo/ # Logo assets └── js/ ├── data.js # Course data (coursesData array) ├── utils.js # Auth, cart, toast utilities ├── ui.js # Scroll, carousel, animations ├── courses.js # Course rendering & filtering ├── course-detail.js # Course detail page logic ├── cart-page.js # Cart & payment logic ├── auth-forms.js # Login, signup, forgot password ├── account.js # Account dashboard ├── account-pages.js # Account sub-pages (my-courses, etc.) ├── certificate.js # Certificate generation & display ├── animations.js # Typing effect & scroll animations ├── nav-search.js # Navbar search suggestions └── bootstrap.bundle.min.js The CSS is split into 16 modular files for maintainability:
- variables.css — Design tokens (colors, spacing, typography, shadows)
- base.css — Reset, global styles, premium button/link styles
- navbar.css — Navigation bar, mobile menu, button overrides
- hero.css — Hero banner, gradient text, trusted companies
- courses.css — Course cards, category cards, step cards, stat items
- components.css — Testimonials, carousel, toast notifications
- pages-*.css — Page-specific styles (auth, browse, legal, course, account)
- layout-*.css — Layout components (search, footer, menus)
- animations.css — Keyframe animations and transitions
- responsive.css — All media queries in one place
| Key | Type | Description |
|---|---|---|
novio_users | Array | Registered user accounts |
novio_user | Object | Currently logged-in user |
novio_cart | Array | Cart items (id, title, image, price, instructor) |
novio_enrollments | Array | Enrolled courses (id, title, image, enrolledDate, progress) |
novio_certificates | Array | Course completion certificates (certId, courseId, name, date, etc.) |
- Clone the repository:
git clone https://github.com/ahmershahdev/novio.git
- Open
index.htmlin a browser or serve with any static server:npx serve . - No build step required — pure HTML, CSS, and JavaScript.
- Chrome 90+
- Firefox 90+
- Safari 15+
- Edge 90+
This project is proprietary. See LICENSE for details.
Syed Ahmer Shah
- LinkedIn: syedahmershah
- GitHub: ahmershahdev
- Website: ahmershah.dev
- Email: syedahmershahofficial@gmail.com