About this course
Variables, arrays, the live DOM and localStorage - building an interactive browser dashboard called PulseBoard.
This is a 6-week short course - enough depth to build real projects and a portfolio piece, without a long commitment. It runs online in the August 2026 cohort (starting 1 August 2026) and is taught the EchoLens way: you learn by doing real, gradeable work rather than just watching lectures.
What's included
- Live, instructor-led online sessions across 4 weeks (10 hours total).
- Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
- Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
- A verified certificate with a scannable QR code, ready to share on LinkedIn, when you finish.
- Completely free - no fee, just create an account and start.
What you will learn
Course outline - level by level
10 leveles, each with hands-on quests you clear in the portal.
- Level 1. console.log & Where JS Runs - JavaScript runs in the browser. console.log() prints to the developer console (F12), which is your main tool for testing logic before touching the page. console.log("PulseBoard ready"); const item = { text: "Ship v1", done: false }; console.table([item]);
- Level 2. Variables & Types (let / const) - let declares a variable you can reassign; const declares one you can't. JavaScript types include string, number, boolean, and object - you don't declare the type. const item = { text: "Ship v1", done: false }; let count = 0; count += 1;
- Level 3. Operators, Decisions & Loops - Arithmetic and comparison operators feed if/else and switch; for and while loops repeat. These drive all the logic behind the interface. const items = [{done:true},{done:false}]; let done = 0; for (const i of items) if (i.done) done++;
- Level 4. Functions (declarations & arrows) - Functions group reusable logic. Classic form: function add(){}. Arrow form: const add = () => {}. Arrows are shorter and common in modern JS, especially as callbacks. const addItem = (items, text) => { items.push({ text, done: false }); };
- Level 5. Arrays & Their Methods - Arrays hold ordered lists. Beyond push/splice, the power methods map (transform), filter (select) and find (locate) let you process data cleanly without manual loops. let items = []; items.push({ id: 1, text: "Ship v1" }); items = items.filter(i => i.id !== 1);
- Level 6. Objects - An object groups related data as key-value pairs: { id: 1, text: 'Buy milk', done: false }. This is how each board item is modeled, with named properties. const item = { id: Date.now(), text: "Buy milk", done: false, tag: "home" };
- Level 7. DOM Selection & Rendering - The DOM is the browser's live model of your HTML. querySelector finds elements; you can create and inject elements to display your data on the actual page. const container = document.querySelector('#list'); container.innerHTML = items.map(i => `<li>${i.text}</li>`).join('');
- Level 8. Events - Events are user actions - clicks, typing, submitting. addEventListener runs your function when they happen, connecting the interface to your logic. addBtn.addEventListener('click', () => { items.push({ id: Date.now(), text: input.value, done: false }); render(); });
- Level 9. Live Filtering & Counters - By reacting to input events, the interface updates instantly - filtering the list as the user types and recalculating counters on every change. searchBox.addEventListener('input', () => { const q = searchBox.value.toLowerCase(); render(items.filter(i => i.text.toLowerCase().includes(q))); });
- Level 10. localStorage & JSON - localStorage saves data in the browser that survives page refreshes and reopening. Since it only stores strings, you convert with JSON.stringify to save and JSON.parse to load. localStorage.setItem('items', JSON.stringify(items)); const saved = JSON.parse(localStorage.getItem('items')) || [];
How you submit: Coding quests solved in the built-in EchoLens compiler.
Who it's for
CS-105: Fundamentals of JavaScript suits learners at a beginner to intermediate level who want a practical, project-based route into CS-105. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.
Certificate
Finish every stage and EchoLens issues a verified certificate carrying a QR code anyone can scan to confirm it on our site. You can add it to your CV or share it to LinkedIn in one click.