Deep Dive Learning & Development

Interactive E-Learning: Sales Fundamentals

A self-paced micro-course on core sales techniques - designed, written, and coded from scratch inside a custom LMS-style player, complete with lessons, gamification, and a graded knowledge check.

Instructional Design E-Learning Gamification HTML / CSS / JS

Self-built demonstration. This course was designed and coded as a portfolio sample to show interactive e-learning craft - the content is illustrative and not drawn from any client's proprietary material.

The Challenge

Show the work, not just claim it

A résumé can say "designs e-learning," but recruiters want to actually experience a course. The portfolio had write-ups of training work - but no interactive sample that demonstrated instructional design and front-end build together.

The Approach

A complete course, built by hand

Storyboarded a five-lesson micro-course around real, widely-taught sales best practices, then built the entire LMS-style player - navigation, progress, graphics, gamification, and assessment - in plain HTML, CSS, and JavaScript with no authoring tool.

The Outcome

A course that doubles as a demo

A fully interactive, self-paced course - lesson breadcrumbs, an XP and badge system, and a knowledge check with instant feedback - that works as both a learning experience and a live demonstration of design plus front-end skill.

5
Interactive lessons
4
Knowledge-check questions
Zero
Dependencies or frameworks
Self-paced
With progress & gamification

Interactive Showcase

Take the Course

This is the real, working course running in a simulated LMS. Move through the lessons, watch your progress and XP build, then try the knowledge check at the end.

Secure learn.beckerlms.io/courses/sales-fundamentals

Fully interactive demo - navigate lessons, earn XP and badges, and complete the graded knowledge check. Best viewed on a larger screen.

Process

How It Was Built

A condensed version of the instructional-design process, from scoping the topic to building the assessment.

ANL

Analyze & Scope

Chose a universally understood topic - basic sales technique - and scoped it to five short lessons plus an assessment, keeping the focus on the learning design rather than the subject matter.

STB

Design & Storyboard

Mapped objectives to a logical arc - rapport, discovery, objections, closing - then storyboarded each screen around one clear takeaway, a supporting graphic, and a reinforcing interaction.

DEV

Develop

Hand-built the LMS-style player: sidebar outline, breadcrumbs, lesson navigation, inline SVG graphics, and content cards - all in vanilla HTML, CSS, and JavaScript, no authoring tool.

ASMT

Assess & Gamify

Added an XP system, a progress ring, completion badges, and a four-question knowledge check with instant, explanatory feedback - to drive engagement and measure understanding.

Technology

Tech Stack

Semantic HTML5
CSS Custom Properties
Vanilla JavaScript
Inline SVG Graphics
Font Awesome 6
CSS Grid & Flexbox
Gamification Logic
No build step - runs anywhere

See More Projects

This is one example of interactive learning design. The full portfolio includes knowledge systems, AI-powered tools, training programs, and platform migrations.

Back to Portfolio View Résumé