AdvancedWeb DevelopmentIntermediate Version française

JavaScript: make a website come alive and interactive

An interactive catalog with a cart and WhatsApp ordering, coded in JavaScript by you

  • 16 h of training
  • 6 modules · 30 lessons
  • 83 exercises
  • 2 projects
  • Certificate included

What you will be able to do

  • Modern JavaScript ES2015+ (let, const, arrow functions, destructuring, template literals)
  • Data processing with arrays and objects (map, filter, reduce, JSON)
  • DOM manipulation and event handling
  • Form validation and persistence with localStorage
  • Asynchronous API calls with fetch and async/await
  • Organizing code into ES modules and debugging with developer tools

What you will produce

  • A library of tested utility functions: FCFA formatting, VAT calculation, phone number validation
  • An interactive quote calculator connected to a form
  • A sign-up form validated live with clear error messages
  • A page that displays data loaded from a public API, with a loading state and error handling
  • An online catalog with search, filters and a persistent cart
  • A prefilled WhatsApp order generated from the cart
  • A GitHub repository organized into ES modules with a README

Possible earnings

With HTML, CSS and JavaScript, a beginner freelancer can charge 200,000 to 500,000 FCFA (about $330 to $830) for a business website with a calculator, an advanced form or an interactive catalog, and add one-off features at 50,000 to 150,000 FCFA (about $85 to $250) for small businesses in Dakar or Abidjan in 2026; your portfolio and your clients determine where you land in that range.

Indicative estimate, depending on your market, pace and work. No income is guaranteed.

Tools used

  • VS Code
  • Google Chrome and its developer tools
  • JavaScript (ES2023)
  • Node.js to run scripts
  • JSON
  • localStorage
  • Fetch API
  • GitHub
  • Netlify

What you'll learn

  • Write readable modern JavaScript: variables, types, conditions, loops and functions
  • Work with arrays and objects using map, filter, reduce and find to process real data
  • Select and modify the DOM and respond to user events
  • Validate forms and calculate amounts in FCFA without rounding errors
  • Store state in the browser with localStorage
  • Load data from an API with fetch and async/await, handling errors and loading states
  • Organize code into ES modules and debug it with the console and breakpoints

Prerequisites

  • Level 2 of the track (HTML and CSS: build and lay out a real website) recommended, or the ability to build a responsive page in HTML and CSS
  • A computer with VS Code and Google Chrome installed
  • No prior JavaScript knowledge
  • 4 hours a week for 4 to 5 weeks

About this course

## Go from a website that displays to a website that responds A business website shows things. A JavaScript website does things: it calculates a quote live, checks a phone number before the form is sent, keeps a cart in memory, displays products from a data file and prepares a ready-to-send WhatsApp order. That is the difference between a 150,000 FCFA (about $250) page and a tool a small business uses every day. ### Who this course is for - You completed level 2 (HTML and CSS) or you can build a responsive page. - You have copied and pasted JavaScript without really understanding it, and that bothers you. - You want to prepare for React and Next.js on solid foundations, not on guesswork. ### What you do during the course - You learn the language step by step: variables, types, conditions, loops, functions, arrays and objects, with automatically graded coding exercises. - You manipulate the DOM and respond to clicks, typing and form submissions. - You validate forms, calculate amounts in FCFA and store data in the browser. - You call APIs with `fetch` and `async/await`, and you handle network errors and slow connections. - You organize your code into modules and learn to debug methodically. ### What you leave with An interactive quote calculator and an online catalog with search, filters, a persistent cart and a prefilled WhatsApp order, published online and ready to show a client. ### Your place in the Web Development track This is level 3: after level 2 (HTML and CSS: build and lay out a real website) and before level 4 (React and Next.js: build modern web applications). Level 5, Full-stack developer, covers JavaScript in two modules; here you spend sixteen hours on it.

Who it is for: HTML and CSS developers, computer science students, self-taught learners and freelancers in Dakar, Abidjan, Bamako, Cotonou or the diaspora who can build a page and want to make it interactive: calculations, forms, a cart, data loaded from an API.

Curriculum

A module-by-module path: lessons, exercises, quizzes and projects to submit.

  1. Module 1· 13 exercises

    The language fundamentals

    You write your first JavaScript programs with variables, types, conditions and loops, and you read error messages without panicking.

    • Where JavaScript runs: the browser, the console and a file linked to the pageFree preview15 min
    • Variables and types: let, const, numbers, strings and booleansFree preview18 min
    • Conditions and operators: deciding based on an amount or a delivery zoneFree preview18 min
    • Loops: repeating a calculation over a list of ordersFree preview15 min
    • Module handout (PDF)Free preview5 min
    • Quiz: the language fundamentalsModule quiz

  2. Module 2· 14 exercises

    Functions, arrays and objects

    You split your code into reusable functions and process lists of products or customers with array methods.

    • Functions: parameters, return values and arrow functions18 min
    • Arrays and methods: map, filter, find and reduce20 min
    • Objects, destructuring and JSON18 min
    • Numbers, dates and FCFA amounts: formatting without errors15 min
    • Module handout (PDF)5 min
    • Quiz: functions, arrays and objectsModule quiz

  3. Module 3· 13 exercises

    The DOM and events

    You modify the page from JavaScript and respond to clicks, typing and scrolling.

    • The DOM: selecting elements and changing their content18 min
    • Creating elements and rendering a list from an array18 min
    • Events: click, input, submit and delegation18 min
    • Dynamic CSS classes: tabs, mobile menu and accordion15 min
    • Module handout (PDF)5 min
    • Quiz: the DOM and eventsModule quiz

  4. Module 4· 14 exercises

    Forms, validation and local storage

    You build forms that guide the user and you store data in the browser.

    • Reading a form with FormData and preventing the default submission15 min
    • Live validation: Senegalese and Ivorian numbers, emails and required fields18 min
    • Dynamic calculations: quotes, discounts, 18% VAT and delivery fees18 min
    • localStorage: keeping a cart or a draft after the page is closed15 min
    • Module handout (PDF)5 min
    • Quiz: forms, validation and storageModule quiz
    • Quote calculator for a Dakar service providerProject to submit

  5. Module 5· 15 exercises

    Asynchronous code, fetch and APIs

    You load data from a JSON file or a public API, handling waiting times, errors and slow connections.

    • Understanding asynchronous code: the event loop, callbacks and Promises18 min
    • async and await: writing readable asynchronous code15 min
    • fetch: loading a JSON file and a public API18 min
    • Loading states, network errors and 3G connections15 min
    • Module handout (PDF)5 min
    • Quiz: asynchronous code, fetch and APIsModule quiz

  6. Module 6· 14 exercises

    Organize, debug and publish

    You structure a real project into modules, fix bugs methodically and publish a clean application.

    • ES modules: import, export and splitting up a project15 min
    • Debugging methodically: the console, breakpoints and the Network tab18 min
    • Handling errors: try, catch and useful messages for the user15 min
    • Best practices, README and deploying a JavaScript application15 min
    • Module handout (PDF)5 min
    • Quiz: organize, debug and publishModule quiz
    • Final project: interactive catalog with a cart and WhatsApp orderingCapstone

  7. Certificate included

Your certificate at the end

A numbered certificate with your validated skills, a public page and a verification QR code. Add it to LinkedIn in one click.

Kolonell Academy
Verified by Kolonell Academy

Certificate of skills

Your name

has completed and validated the course

JavaScript: make a website come alive and interactive

Certified skills

  • Modern JavaScript ES2015+ (let, const, arrow functions, destructuring, template literals)
  • Data processing with arrays and objects (map, filter, reduce, JSON)
  • DOM manipulation and event handling
  • Form validation and persistence with localStorage
  • Asynchronous API calls with fetch and async/await
  • Organizing code into ES modules and debugging with developer tools

Number KOL-CERT-2026-XXXXX

Mohamed Bah

Founder, Kolonell Academy

Poster for JavaScript: make a website come alive and interactive

Course poster

Download the poster to print it, send it to your employer or share it with colleagues. The full programme details every module.

Download PNGDownload PDFFull programme (PDF)

This course is part of the track

Développement web

Level 3 of 5 · Advanced

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
See the 5 track levels

Next level · 4/5 Career

React and Next.js: build modern web applications

The full job, with a portfolio

Two live React and Next.js applications in your portfolio

100,000 FCFA 24 h

View the next level

Your instructor

Mohamed Bah

PhD in computer science and founder of Kolonell, a digital agency and platform based in Dakar. He designs and deploys websites and web applications for SMEs in Senegal, Côte d'Ivoire and the diaspora, using the tools taught in this track.

Questions about this course

I have never written any JavaScript. Is this too advanced for me?

No. Module 1 starts the language from scratch. It only assumes you can write a page in HTML and CSS, which is what level 2 of the track covers.

Are the coding exercises graded?

Yes. Every coding exercise is checked automatically by tests in your browser: you immediately see what passes and what fails, with a message telling you what to fix.

Why not go straight to React?

Because React is JavaScript. Developers who skip this step get stuck on map, objects, asynchronous code and network errors. Sixteen hours here save you a lot of time at level 4.

Do we cover back-end development or databases?

No. Everything happens in the browser, with localStorage and public APIs. Servers, databases and authentication are covered at level 5, Full-stack developer.

Can the cart take a Wave payment?

Not at this level. The cart generates a prefilled WhatsApp order, which matches how many shops sell in Senegal. Real online payment requires a server, covered at level 5.

How much time should I plan?

About 16 hours including the exercises and the two projects. At 4 hours a week, allow 4 to 5 weeks.

How do I pay?

Via Wave or Orange Money. After enrolling you receive a pro forma invoice by email with the number to pay. Send the proof on WhatsApp: your access is activated within 24 business hours.

How long do I keep access?

For life, updates included. Learn at your own pace and revisit lessons as often as you need.

How do I get the certificate?

Complete the lessons and pass each module quiz with at least 70%. The certificate is generated automatically, with a unique number and a public verification page.

Our commitments

  • Lifetime access, updates included
  • Publicly verifiable certificate
  • Wave / Orange Money payment, activation within 24 business hours
  • WhatsApp support

75,000 FCFA · 115 €

Advanced