novio

Novio is a pure frontend showcase with 30+ custom HTML pages, simulating a premium online tech courses platform. Built entirely with HTML, CSS, and JavaScript, Novio demonstrates responsive layouts, interactive UI, and localStorage-based features—no backend required. Explore Novio to see modern frontend skills in action!

#bootstrap#css3#front-end#front-end-development#html5#javasciptArchived

View Repository on GitHub ↗

REPOSITORY OVERVIEW

Live repository statistics

★ 19Stars

⑂ 4Forks

◯ 0Open issues

◉ 19Watchers

16/100

OPENREPOHUB HEALTH SIGNAL

Limited signals

A transparent discovery signal based on current public GitHub metadata.

Recent activity35% weight

Community adoption25% weight

Maintenance state20% weight

License clarity10% weight

Project information10% weight

100

This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.

README preview

About

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.

Features

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

Tech Stack

Technology	Usage
HTML5	Semantic markup, ARIA, JSON-LD
CSS3	Custom properties, animations, gradients
Bootstrap 5

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

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.html in a browser or serve with any static server:
```
npx serve .
```
No build step required — pure HTML, CSS, and JavaScript.

novio

Live repository statistics

Limited signals

README preview

About

Features

Tech Stack

Project Structure

CSS Architecture

localStorage Schema

Getting Started

Browser Support

License

Author