₹0 for students · Certificate · Beginner

Web Development for Beginners

27 lessons: HTML, CSS and JavaScript through six real projects

27 lessons · ~23 hours · 30-question final exam · pass mark 70%

About the course

What you’ll learn

Learn the web by building it: a terrarium, a typing game, a browser extension, a space game, a banking app and an AI chat assistant. You start with how programming languages and GitHub work, then learn JavaScript, HTML, CSS, the DOM, forms, APIs, canvas and state management. Each lesson has a short study guide, the full lesson and its assignment, and a quiz. Pass every lesson quiz and the final exam to earn a verifiable certificate.

HTMLCSSJavaScriptDOMGit & GitHubAccessibilityWeb APIsCanvasFormsState management

Part of the career track: Web Developer

How the certificate works

  1. Read each lesson’s study guide, then the full lesson and any notebooks or exercises.
  2. Pass every lesson quiz with 70% or more.
  3. Pass the final exam: 30 questions in 45 minutes.
  4. Get a certificate with a public verification link, and add it to LinkedIn.

Syllabus

27 lessons in 8 parts

Getting started

1
Programming Languages and Tools of the Trade
45 min · A program is a set of instructions; a programming language is a readable way to write them.
2
Introduction to GitHub
60 min · Git tracks versions of your project; GitHub hosts repositories online and adds collaboration tools.
3
Accessibility Fundamentals
50 min · Accessible sites work for people with visual, hearing, motor and cognitive disabilities.

JavaScript basics

4
JavaScript Data Types
45 min · Declare with const by default, let when the value must change; avoid var.
5
Functions and Methods
45 min · Functions package reusable logic; define once, call many times.
6
Making Decisions
40 min · if / else if / else choose which block of code runs.
7
Arrays and Loops
45 min · Arrays hold ordered values; indexes start at 0; length gives the count.

Terrarium: HTML, CSS and the DOM

8
Introduction to HTML
50 min · HTML structures content with elements (tags) and attributes.
9
Introduction to CSS
55 min · A CSS rule = selector + declarations (property: value).
10
The DOM and Closures
55 min · The DOM is the page as a tree of objects that JavaScript can read and change.

Typing game: events

11
Event-Driven Programming: A Typing Game
60 min · Event-driven programs wait for events and run handler functions in response.

Browser extension: APIs and storage

12
About Browsers and Browser Extensions
45 min · Browsers fetch resources over HTTP(S) and render HTML, CSS and JavaScript.
13
APIs, Forms and Local Storage
60 min · APIs return data, usually JSON, over HTTP; fetch() makes requests and returns a Promise.
14
Background Tasks and Performance
50 min · Use the Performance panel and Lighthouse to measure where time goes.

Space game: canvas and game logic

15
Introduction to Game Development
50 min · Game objects share data (position, image) and behaviour (move, draw).
16
Drawing to Canvas
50 min · <canvas> is a drawing surface; getContext('2d') gives the drawing API.
17
Moving Elements Around
55 min · A game loop repeatedly updates state, clears the canvas and redraws.
18
Collision Detection
55 min · Bounding boxes approximate objects as rectangles for collision checks.
19
Keeping Score
40 min · Store score and lives on the hero (state), change them in collision handlers.
20
Ending and Restarting the Game
40 min · Win when all enemies are dead; lose when lives reach zero.

Banking app: routes, forms, data and state

21
HTML Templates and Routes
55 min · An SPA swaps screens with JavaScript instead of loading new pages.
22
Login and Registration Forms
55 min · Inputs need name, a linked <label>, and the right type.
23
Fetching and Displaying Data
55 min · fetch() loads data in the background so the page updates without reloading.
24
State Management
55 min · Keep app data in one state object and change it through one function.

Tools and AI

25
Using a Code Editor in the Browser
40 min · vscode.dev runs VS Code in the browser, with no installation.
26
Build an AI Chat Assistant
60 min · Language models generate text by predicting the next token.
27
Using an AI Framework
50 min · Frameworks like LangChain handle memory, prompts, streaming, structured output and tools.

Course content is adapted from Microsoft's "Web Development for Beginners" curriculum (https://github.com/microsoft/Web-Dev-For-Beginners), used under the MIT License, Copyright (c) Microsoft Corporation. Study guides and quiz questions are written by Vikosha. Certificates are issued by Vikosha and are not issued or endorsed by Microsoft. Licence: MIT License, Copyright (c) Microsoft Corporation. View the original curriculum