₹0 for students · Certificate · Beginner to intermediate

Front-End Web Development (MDN)

24 lessons: semantic HTML, modern CSS layout, JavaScript in the browser and React

Start free in the app

24 lessons · ~19 hours · 30-question final exam · pass mark 70%

About the course

What you’ll learn

Go beyond the basics with Mozilla's MDN curriculum: forms, tables and media in HTML; the cascade, box model and units in CSS; flexbox, grid and responsive design; the DOM, events, JSON and fetch; debugging; and building an accessible app with React. Each lesson has a study guide, links to MDN's full lesson and exercises, and a quiz. Pass every quiz and the final exam to earn a verifiable certificate.

Semantic HTMLHTML formsCSS cascadeFlexboxCSS GridResponsive designDOMFetch APIReactWAI-ARIA

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

24 lessons in 6 parts

Structuring content with HTML

1
Document Structure and Metadata
45 min · Use semantic regions: header, nav, main, aside, article, section, footer.
2
Links and Images
45 min · <a href> links to pages, page fragments (#id), email (mailto:) and files (download).
3
HTML Tables
40 min · Use tables for tabular data only, never for layout.
4
Forms and Buttons
55 min · <form action method>: GET for searches (values in URL), POST for changes and sensitive data.
5
Video, Audio and Embedded Content
40 min · <video> and <audio> with <source> children let the browser choose a supported format.

CSS styling basics

6
CSS Selectors
50 min · Basic selectors: type, .class, #id, * ; group with commas.
7
The Cascade, Specificity and Layers
50 min · Cascade order: origin and importance, then specificity, then source order.
8
The Box Model, Sizing and Overflow
50 min · Box = content + padding + border + margin.
9
Values, Units, Backgrounds and Borders
45 min · px is absolute; em, rem, %, vw and vh are relative.
10
Styling Text and Web Fonts
45 min · font-family with fallbacks ending in a generic family.

CSS layout

11
Flexbox
55 min · display: flex makes children flex items along a main axis (row or column).
12
CSS Grid
55 min · display: grid with grid-template-columns/rows defines tracks.
13
Responsive Design and Media Queries
50 min · One site adapts to all screens: fluid layout, flexible media, media queries.
14
Positioning
45 min · relative offsets an element and creates a containing block for absolute children.

Dynamic scripting with JavaScript

15
JavaScript Objects
45 min · Objects hold key–value pairs; functions in objects are methods.
16
Events and Event Bubbling
50 min · addEventListener attaches handlers; removeEventListener needs the same function reference.
17
Manipulating the DOM
50 min · querySelector/querySelectorAll find elements with CSS selectors.
18
Network Requests with Fetch
55 min · fetch returns a Promise for a Response; read it with .json() or .text().
19
Debugging JavaScript
45 min · Syntax errors stop code running; logic errors give wrong results.

JavaScript frameworks: React

20
Why JavaScript Frameworks?
40 min · Frameworks keep the UI in sync with data declaratively.
21
Getting Started with React
55 min · Components are functions that return JSX.
22
React Events, State and Filtering
55 min · Events use camelCase props like onClick and onSubmit with function handlers.
23
Accessibility in React
45 min · SPAs must manage focus when content appears or disappears.

Accessibility in practice

24
WAI-ARIA and Accessibility Testing
50 min · ARIA roles, properties and states describe semantics to assistive technology.

This course is based on "Learn web development" on MDN Web Docs (https://developer.mozilla.org/en-US/docs/Learn_web_development) by Mozilla Contributors, licensed under CC BY-SA 2.5. Vikosha's study guides and quiz questions for this course adapt that material and are shared under the same licence (CC BY-SA 2.5). Certificates are issued by Vikosha and are not issued or endorsed by Mozilla. Licence: CC BY-SA 2.5, by Mozilla Contributors. View the original curriculum