# kb

id: challenge-typesetting-a-community-school-homepage-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Typesetting a community school homepage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:02.003045+00:00
instance: kb-cron
parent: challenge-typesetting-a-community-school-homepage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage-1.md

summary:
### [Navigation menu styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage#navigation_menu_styling) Style your navigation menu so that it harmonizes with the page. We'll leave this largely up to you, but here are some tips/suggestions: 1. Make the links look like buttons, which are as wide as the column they are in, and tall enough that the nav items fill a decent amount of space. 2. Apply the same font to your nav link text as you applied to your headings. 3. Make sure the hit area of each link is expanded to fill the entirety of its parent list item. 4. Center the text inside each link. 5. Uppercase the text (using CSS, not by editing the HTML!) ## [Hints and tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage#hints_and_tips) * You don't need to edit the HTML for this exercise, unless required to apply the fonts to the page. ## [Example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage#example) The following screenshot show what the page looks like to begin with: ![A screenshot of the starting state of the page. The top heading reads 'St Huxley's Community College' and the footer provides a copyright notice. There are red lines separating the header and footer from the content. The main content has three columns, one containing body text and two containing lists of

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage


id: challenge-typesetting-a-community-school-homepage-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Typesetting a community school homepage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:02.003045+00:00
instance: kb-cron
parent: challenge-typesetting-a-community-school-homepage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 31, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/text_styling/typesetting_a_homepage/index.md?plain=1 "Folder: en-us/learn_web_development/core/text_styling/typesetting_a_homepage \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FText_styling%2FTypesetting_a_homepage&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Ftext_styling%2Ftypesetting_a_homepage%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FText_styling%2FTypesetting_a_homepage%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Ftext_styling%2Ftypesetting_a_homepage%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9f7e7e9075e9f2b1937d2c8000f52a8ff76bff52%0A*+Document+last+modified%3A+2025-10-31T15%3A27%3A28.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage


id: challenge-typesetting-a-community-school-homepage-learn-web-development-mdn-20260505-3
category: reference
title: Challenge: Typesetting a community school homepage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:02.003045+00:00
instance: kb-cron
parent: challenge-typesetting-a-community-school-homepage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage-3.md


id: web-fonts-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts-0.md
category: reference
title: Web fonts - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
date_saved: 2026-05-05T05:58:04.297241+00:00
instance: kb-cron
parent: web-fonts-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: web-fonts-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts-1.md
category: reference
title: Web fonts - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
date_saved: 2026-05-05T05:58:04.297241+00:00
instance: kb-cron
parent: web-fonts-learn-web-development-mdn-20260505-0
summary:
## [Font families recap](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts#font_families_recap) As we looked at in [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals), the fonts applied to your HTML can be controlled using the [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family) property. This takes one or more font family names. When displaying a webpage, a browser will travel down a list of font-family values until it finds a font available on the system it is running on: This system works well, but traditionally web developers' font choices were limited. There are only a handful of fonts that you can guarantee to be available across all common systems — the so-called [Web-safe fonts](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals#web_safe_fonts). You can use the font stack to specify preferred fonts, followed by web-safe alternatives, followed by the default system font. However, this increases your workload because of the testing required to make sure that your designs work with each font. ## [Web fonts](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts#web_fonts) There is an alternative that works well. CSS allows you to specify font files, available on the web, to be downloaded along with your website as it's accessed. This means that any browser supporting this CSS feature can display the fonts you've specifically chosen. Amazing! The syntax required looks something like this: First of all, you have a [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face) ruleset


id: web-fonts-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts-2.md
category: reference
title: Web fonts - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
date_saved: 2026-05-05T05:58:04.297241+00:00
instance: kb-cron
parent: web-fonts-learn-web-development-mdn-20260505-0
summary:
After the ZIP file is downloaded, unzip it and move it into the same directory as your HTML and CSS. ### [Implementing the code in your demo](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts#implementing_the_code_in_your_demo) Inside the unzipped directory, you'll see some useful items: * Two versions of each font: the `.woff`, `.woff2` files. * A demo HTML file for each font — load these in your browser to see what the font will look like in different usage contexts. * A `stylesheet.css` file, which contains the generated @font-face code you'll need. To implement these fonts in your demo, follow these steps: 1. Rename the unzipped directory to something easy and simple, like `fonts`. 2. Open up the `stylesheet.css` file and copy the two `@font-face` rulesets into your `web-font-start.css` file — you need to put them at the very top, before any of your CSS, as the fonts need to be imported before you can use them on your site. 3. Each of the `url()` functions points to a font file that we want to import into our CSS. We need to make sure the paths to the files are correct, so add `fonts/` to the start of each path (adjust as necessary). 4. Now you can use


id: web-fonts-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts-3.md
category: reference
title: Web fonts - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
date_saved: 2026-05-05T05:58:04.297241+00:00
instance: kb-cron
parent: web-fonts-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 24, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/text_styling/web_fonts/index.md?plain=1 "Folder: en-us/learn_web_development/core/text_styling/web_fonts \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FText_styling%2FWeb_fonts&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Ftext_styling%2Fweb_fonts%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FText_styling%2FWeb_fonts%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Ftext_styling%2Fweb_fonts%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F5ae8d1a1cb0f8d845168183536cd65684cc9406e%0A*+Document+last+modified%3A+2026-04-24T16%3A28%3A29.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: version-control-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control-0.md
category: reference
title: Version control - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control
date_saved: 2026-05-05T05:58:06.727434+00:00
instance: kb-cron
parent: version-control-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: version-control-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control-1.md
category: reference
title: Version control - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control
date_saved: 2026-05-05T05:58:06.727434+00:00
instance: kb-cron
parent: version-control-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 29, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Version_control/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/version_control/index.md?plain=1 "Folder: en-us/learn_web_development/core/version_control \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FVersion_control&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fversion_control%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FVersion_control%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fversion_control%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F57bc2729e3963907c0b54158ae1a31318a2ebbd1%0A*+Document+last+modified%3A+2025-10-29T15%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: resources-for-educators-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Educators-0.md
category: reference
title: Resources for educators - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators
date_saved: 2026-05-05T05:58:09.037984+00:00
instance: kb-cron
parent: resources-for-educators-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: resources-for-educators-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Educators-1.md
category: reference
title: Resources for educators - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators
date_saved: 2026-05-05T05:58:09.037984+00:00
instance: kb-cron
parent: resources-for-educators-learn-web-development-mdn-20260505-0
summary:
You could also consider using an advanced turnkey solution such as an interactive video course. We would recommend [The Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) from our learning partner, [Scrimba](https://scrimba.com/?via=mdn), which teaches all of the learning outcomes in the MDN Curriculum Core and more. **Note:** Scrimba offers multiple license deals — see [Scrimba for Teams](https://scrimba.com/teams?via=mdn-edu). The Frontend Developer Career Path features fun interactive lessons and challenges, knowledgeable teachers, and a supportive community; it aims to give students all they need to land their first junior developer job. Many of the course components are available as standalone free versions. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators#see_also) * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/) * [Complete MDN Curriculum download](https://github.com/mdn/curriculum/releases/latest/download/MDN-Curriculum.pdf) (PDF) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/educators/index.md?plain=1 "Folder: en-us/learn_web_development/educators \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FEducators&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Feducators%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FEducators%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Feducators%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F974d1679140c0fe8051e468c63dd5ce4f76cd281%0A*+Document+last+modified%3A+2025-10-21T10%3A54%3A03.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2.


id: extension-modules-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions-0.md
category: reference
title: Extension modules - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions
date_saved: 2026-05-05T05:58:11.342996+00:00
instance: kb-cron
parent: extension-modules-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: extension-modules-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions-1.md
category: reference
title: Extension modules - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions
date_saved: 2026-05-05T05:58:11.342996+00:00
instance: kb-cron
parent: extension-modules-learn-web-development-mdn-20260505-0
summary:
[Testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing) Any codebase past a certain level of complexity needs to have a system of tests associated with it, to make sure that as new code is added, the codebase continues to function correctly and performantly, and continues to meet the users' needs. This module lists the fundamentals that you should start with. ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on May 23, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/index.md?plain=1 "Folder: en-us/learn_web_development/extensions \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F6f1b8165480af394b283e25a609d2eb176f8eb83%0A*+Document+last+modified%3A+2025-05-23T13%3A42%3A02.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content


id: advanced-javascript-objects-learn-web-development-mdn-20260505-0
category: reference
title: Advanced JavaScript objects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:13.713051+00:00
instance: kb-cron
parent: advanced-javascript-objects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects


id: advanced-javascript-objects-learn-web-development-mdn-20260505-1
category: reference
title: Advanced JavaScript objects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:13.713051+00:00
instance: kb-cron
parent: advanced-javascript-objects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects-1.md

summary:
[Learn JavaScript](https://learnjavascript.online/) An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment. ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F46c276b76c9fbf1468070686ecd3abbf64761500%0A*+Document+last+modified%3A+2025-08-21T12%3A24%3A09.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata)

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects


id: advanced-javascript-objects-learn-web-development-mdn-20260505-2
category: reference
title: Advanced JavaScript objects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:13.713051+00:00
instance: kb-cron
parent: advanced-javascript-objects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects


id: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Adding features to our bouncing balls demo - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:16.150880+00:00
instance: kb-cron
parent: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features


id: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Adding features to our bouncing balls demo - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:16.150880+00:00
instance: kb-cron
parent: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features-1.md

summary:
**Note:** Make sure to create the `Shape` class above the existing `Ball` class, otherwise you'll get some error like: "Uncaught ReferenceError: Cannot access 'Shape' before initialization" The `Ball` constructor should define a new property called `exists`, which is used to track whether the balls exist in the program (have not been eaten by the evil circle). This should be a boolean (`true`/`false`), initialized to `true` in the constructor. The `collisionDetect()` method of the `Ball` class needs a small update. A ball needs to be considered for collision detection only if the `exists` property is `true`. So, replace the existing `collisionDetect()` code with the following code: As discussed above, the only addition is to check if the ball exists — by using `ball.exists` in the `if` conditional. The ball `draw()` and `update()` method definitions should be able to stay exactly the same as they were before. At this point, try reloading the code — it should work just the same as it did before, with our redesigned objects. ### [Defining EvilCircle](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features#defining_evilcircle) Now it's time to meet the bad guy — the `EvilCircle()`! Our game is only going to involve one evil circle, but we are still going to define it using

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features


id: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Adding features to our bouncing balls demo - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:16.150880+00:00
instance: kb-cron
parent: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features-2.md

summary:
### [Implementing the score counter](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features#implementing_the_score_counter) To implement the score counter, follow the following steps: 1. In your HTML file, add a [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p) element just below the [h1](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) element containing the text "Ball count: ". 2. In your CSS file, add the following rule at the bottom: 3. In your JavaScript, make the following updates: * Create a variable that stores a reference to the paragraph. * Keep a count of the number of balls on screen in some way. * Increment the count and display the updated number of balls each time a ball is added to the scene. * Decrement the count and display the updated number of balls each time the evil circle eats a ball (causes it not to exist). * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice) * [ Overview: Advanced JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 12, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/adding_bouncing_balls_features/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects/adding_bouncing_balls_features \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FAdding_bouncing_balls_features&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fadding_bouncing_balls_features%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FAdding_bouncing_balls_features%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fadding_bouncing_balls_features%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2530db14de9ac226cf06f84540fa0101e804ca9b%0A*+Document+last+modified%3A+2025-08-12T00%3A41%3A20.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software)

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features


id: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-3
category: reference
title: Challenge: Adding features to our bouncing balls demo - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:16.150880+00:00
instance: kb-cron
parent: challenge-adding-features-to-our-bouncing-balls-demo-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features-3.md


id: classes-in-javascript-learn-web-development-mdn-20260505-0
category: reference
title: Classes in JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:18.495651+00:00
instance: kb-cron
parent: classes-in-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript


id: classes-in-javascript-learn-web-development-mdn-20260505-1
category: reference
title: Classes in JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:18.495651+00:00
instance: kb-cron
parent: classes-in-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript-1.md

summary:
Given the class declaration code above, you can create and use a new `Person` instance like this: Note that we call the constructor using the name of the class, `Person` in this example. ### [Omitting constructors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#omitting_constructors) If you don't need to do any special initialization, you can omit the constructor, and a default constructor will be generated for you: ## [Inheritance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#inheritance) Given our `Person` class above, let's define the `Professor` subclass. We use the [`extends`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends) keyword to say that this class inherits from another class. The `Professor` class adds a new property `teaches`, so we declare that. Since we want to set `teaches` when a new `Professor` is created, we define a constructor, which takes the `name` and `teaches` as arguments. The first thing this constructor does is call the superclass constructor using [`super()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super), passing up the `name` parameter. The superclass constructor takes care of setting `name`. After that, the `Professor` constructor sets the `teaches` property. **Note:** If a subclass has any of its own initialization to do, it **must** first call the superclass constructor using `super()`, passing up any parameters that the superclass constructor is expecting. We've also overridden the `introduceSelf()` method from the superclass, and added a new

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript


id: classes-in-javascript-learn-web-development-mdn-20260505-2
category: reference
title: Classes in JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:18.495651+00:00
instance: kb-cron
parent: classes-in-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects/classes_in_javascript \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FClasses_in_JavaScript&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fclasses_in_javascript%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FClasses_in_JavaScript%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fclasses_in_javascript%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F46c276b76c9fbf1468070686ecd3abbf64761500%0A*+Document+last+modified%3A+2025-08-21T12%3A24%3A09.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript


id: classes-in-javascript-learn-web-development-mdn-20260505-3
category: reference
title: Classes in JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:18.495651+00:00
instance: kb-cron
parent: classes-in-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript-3.md


id: object-oriented-programming-learn-web-development-mdn-20260505-0
category: reference
title: Object-oriented programming - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:21.080562+00:00
instance: kb-cron
parent: object-oriented-programming-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming


id: object-oriented-programming-learn-web-development-mdn-20260505-1
category: reference
title: Object-oriented programming - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:21.080562+00:00
instance: kb-cron
parent: object-oriented-programming-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming-1.md

summary:
This constructor takes two parameters, so we can initialize the `name` and `teaches` properties when we create a new concrete professor. Now that we have a constructor, we can create some professors. Programming languages often use the keyword `new` to signal that a constructor is being called. This creates two objects, both instances of the `Professor` class. ## [Inheritance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming#inheritance) Suppose in our school we also want to represent students. Unlike professors, students can't grade papers, don't teach a particular subject, and belong to a particular year. However, students do have a name and may also want to introduce themselves, so we might write out the definition of a student class like this: ``` class Student properties name year constructor Student(name, year) methods introduceSelf() ``` It would be helpful if we could represent the fact that students and professors share some properties, or more accurately, the fact that on some level, they are the _same kind of thing_. **Inheritance** lets us do this. We start by observing that students and professors are both people, and people have names and want to introduce themselves. We can model this by defining a new class `Person`, where we define all the common properties of

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming


id: object-oriented-programming-learn-web-development-mdn-20260505-2
category: reference
title: Object-oriented programming - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:21.080562+00:00
instance: kb-cron
parent: object-oriented-programming-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming-2.md

summary:
But it's worth understanding the differences between these features and the "classical" OOP concepts described above. We'll highlight a couple of them here. First, in class-based OOP, classes and objects are two separate constructs, and objects are always created as instances of classes. Also, there is a distinction between the feature used to define a class (the class syntax itself) and the feature used to instantiate an object (a constructor). In JavaScript, we can and often do create objects without any separate class definition, either using a function or an object literal. This can make working with objects much more lightweight than it is in classical OOP. Second, although a prototype chain looks like an inheritance hierarchy and behaves like it in some ways, it's different in others. When a subclass is instantiated, a single object is created which combines properties defined in the subclass with properties defined further up the hierarchy. With prototyping, each level of the hierarchy is represented by a separate object, and they are linked together via the `__proto__` property. The prototype chain's behavior is less like inheritance and more like **delegation**. Delegation is a programming pattern where an object, when asked to perform a task,

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming


id: object-oriented-programming-learn-web-development-mdn-20260505-3
category: reference
title: Object-oriented programming - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:21.080562+00:00
instance: kb-cron
parent: object-oriented-programming-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming-3.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/object-oriented_programming/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects/object-oriented_programming \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FObject-oriented_programming&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fobject-oriented_programming%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FObject-oriented_programming%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fobject-oriented_programming%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F48d220a8cffdfd5f088f8ca89724a9a92e34d8c0%0A*+Document+last+modified%3A+2025-04-11T19%3A13%3A37.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: object-oriented-programming-learn-web-development-mdn-20260505-4
category: reference
title: Object-oriented programming - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:21.080562+00:00
instance: kb-cron
parent: object-oriented-programming-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming-4.md


id: object-building-practice-learn-web-development-mdn-20260505-0
category: reference
title: Object building practice - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:23.409755+00:00
instance: kb-cron
parent: object-building-practice-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice


id: object-building-practice-learn-web-development-mdn-20260505-1
category: reference
title: Object building practice - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:23.409755+00:00
instance: kb-cron
parent: object-building-practice-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice-1.md

summary:
The first part of the script looks like so: This script gets a reference to the `<canvas>` element, then calls the [`getContext()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) method on it to give us a context on which we can start to draw. The resulting constant (`ctx`) is the object that directly represents the drawing area of the canvas and allows us to draw 2D shapes on it. Next, we set constants called `width` and `height`, and the width and height of the canvas element (represented by the `canvas.width` and `canvas.height` properties) to equal the width and height of the browser viewport (the area which the webpage appears on — this can be gotten from the [`Window.innerWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth) and [`Window.innerHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight) properties). Note that we are chaining multiple assignments together, to get the variables all set quicker — this is perfectly OK. Then we have two helper functions: The `random()` function takes two numbers as arguments, and returns a random number in the range between the two. The `randomRGB()` function generates a random color represented as an [`rgb()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/rgb) string. ## [Modeling a ball in our program](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice#modeling_a_ball_in_our_program) Our program will feature lots of balls bouncing around the screen. Since these balls will all behave in the same way, it

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice


id: object-building-practice-learn-web-development-mdn-20260505-2
category: reference
title: Object building practice - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:23.409755+00:00
instance: kb-cron
parent: object-building-practice-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice-2.md

summary:
In each case, we include the `size` of the ball in the calculation because the `x`/`y` coordinates are in the center of the ball, but we want the edge of the ball to bounce off the perimeter — we don't want the ball to go halfway off the screen before it starts to bounce back. The last two lines add the `velX` value to the `x` coordinate, and the `velY` value to the `y` coordinate — the ball is in effect moved each time this method is called. This will do for now; let's get on with some animation! ## [Animating the ball](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice#animating_the_ball) Now let's make this fun. We are now going to start adding balls to the canvas, and animating them. First, we need to create somewhere to store all our balls and then populate it. The following will do this job — add it to the bottom of your code now: The `while` loop creates a new instance of our `Ball()` using random values generated with our `random()` and `randomRGB()` functions, then `push()`es it onto the end of our balls array, but only while the number of balls in the array is less than 25. So when we

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice


id: object-building-practice-learn-web-development-mdn-20260505-3
category: reference
title: Object building practice - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:23.409755+00:00
instance: kb-cron
parent: object-building-practice-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice-3.md

summary:
You also need to call this method in each frame of the animation. Update your `loop()` function to call `ball.collisionDetect()` after `ball.update()`: Save and refresh the demo again, and you'll see your balls change color when they collide! **Note:** If you have trouble getting this example to work, try comparing your JavaScript code against our [finished version](https://github.com/mdn/learning-area/blob/main/javascript/oojs/bouncing-balls/main-finished.js) (also see it [running live](https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)). ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice#summary) We hope you had fun writing your own real-world random bouncing balls example, using various object and object-oriented techniques from throughout the module! This should have given you some useful practice in using objects, and good real-world context. That's it for object lessons — all that remains now is for you to test your skills in the module challenge. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice#see_also) * [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) — a beginner's 2D canvas tutorial. * [requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) * [2D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection) * [3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection) * [2D breakout game using pure JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) — a great beginner's tutorial showing how to build a 2D game. * [2D breakout game using Phaser](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser) — explains the basics of building a 2D game using a JavaScript game library. * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript) * [ Overview: Advanced JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features) ## Help


id: object-building-practice-learn-web-development-mdn-20260505-4
category: reference
title: Object building practice - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:23.409755+00:00
instance: kb-cron
parent: object-building-practice-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice-4.md


id: object-prototypes-learn-web-development-mdn-20260505-0
category: reference
title: Object prototypes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:25.900755+00:00
instance: kb-cron
parent: object-prototypes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes


id: object-prototypes-learn-web-development-mdn-20260505-1
category: reference
title: Object prototypes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:25.900755+00:00
instance: kb-cron
parent: object-prototypes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes-1.md

summary:
What is the prototype for `myObject`? To find out, we can use the function `Object.getPrototypeOf()`: This is an object called `Object.prototype`, and it is the most basic prototype, that all objects have by default. The prototype of `Object.prototype` is `null`, so it's at the end of the prototype chain: ![Prototype chain for myObject](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes/myobject-prototype-chain.svg) The prototype of an object is not always `Object.prototype`. Try this: This code creates a `Date` object, then walks up the prototype chain, logging the prototypes. It shows us that the prototype of `myDate` is a `Date.prototype` object, and the prototype of _that_ is `Object.prototype`. ![Prototype chain for myDate](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes/mydate-prototype-chain.svg) In fact, when you call familiar methods, like `myDate2.getTime()`, you are calling a method that's defined on `Date.prototype`. ## [Shadowing properties](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes#shadowing_properties) What happens if you define a property in an object, when a property with the same name is defined in the object's prototype? Let's see: This should be predictable, given the description of the prototype chain. When we call `getTime()` the browser first looks in `myDate` for a property with that name, and only checks the prototype if `myDate` does not define it. So when we add `getTime()` to `myDate`, then the version in `myDate` is called.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes


id: object-prototypes-learn-web-development-mdn-20260505-2
category: reference
title: Object prototypes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:25.900755+00:00
instance: kb-cron
parent: object-prototypes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/object_prototypes/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects/object_prototypes \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FObject_prototypes&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fobject_prototypes%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FObject_prototypes%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Fobject_prototypes%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F48d220a8cffdfd5f088f8ca89724a9a92e34d8c0%0A*+Document+last+modified%3A+2025-04-11T19%3A13%3A37.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes


id: object-prototypes-learn-web-development-mdn-20260505-3
category: reference
title: Object prototypes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:25.900755+00:00
instance: kb-cron
parent: object-prototypes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes-3.md


id: test-your-skills-advanced-javascript-objects-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Advanced JavaScript objects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:28.260337+00:00
instance: kb-cron
parent: test-your-skills-advanced-javascript-objects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills


id: test-your-skills-advanced-javascript-objects-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Advanced JavaScript objects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:28.260337+00:00
instance: kb-cron
parent: test-your-skills-advanced-javascript-objects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/test_your_skills/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects/test_your_skills \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FTest_your_skills&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Ftest_your_skills%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FTest_your_skills%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Ftest_your_skills%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F46c276b76c9fbf1468070686ecd3abbf64761500%0A*+Document+last+modified%3A+2025-08-21T12%3A24%3A09.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills


id: test-your-skills-advanced-javascript-objects-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Advanced JavaScript objects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:28.260337+00:00
instance: kb-cron
parent: test-your-skills-advanced-javascript-objects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills


id: test-your-skills-object-oriented-javascript-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Object-oriented JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:30.511550+00:00
instance: kb-cron
parent: test-your-skills-object-oriented-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript


id: test-your-skills-object-oriented-javascript-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Object-oriented JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:30.511550+00:00
instance: kb-cron
parent: test-your-skills-object-oriented-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/advanced_javascript_objects/test_your_skills/object-oriented_javascript/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/advanced_javascript_objects/test_your_skills/object-oriented_javascript \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FTest_your_skills%2FObject-oriented_JavaScript&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Ftest_your_skills%2Fobject-oriented_javascript%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAdvanced_JavaScript_objects%2FTest_your_skills%2FObject-oriented_JavaScript%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fadvanced_javascript_objects%2Ftest_your_skills%2Fobject-oriented_javascript%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F46c276b76c9fbf1468070686ecd3abbf64761500%0A*+Document+last+modified%3A+2025-08-21T12%3A24%3A09.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript


id: test-your-skills-object-oriented-javascript-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Object-oriented JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:30.511550+00:00
instance: kb-cron
parent: test-your-skills-object-oriented-javascript-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Test_your_skills/Object-oriented_JavaScript


id: asynchronous-javascript-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS-0.md
category: reference
title: Asynchronous JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS
date_saved: 2026-05-05T05:58:32.961856+00:00
instance: kb-cron
parent: asynchronous-javascript-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: asynchronous-javascript-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS-1.md
category: reference
title: Asynchronous JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS
date_saved: 2026-05-05T05:58:32.961856+00:00
instance: kb-cron
parent: asynchronous-javascript-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jul 3, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/async_js/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/async_js \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fasync_js%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F73a73bc44e12181c778910f3b7d73962e0dd9a29%0A*+Document+last+modified%3A+2025-07-03T05%3A54%3A05.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: how-to-implement-a-promise-based-api-learn-web-development-mdn-20260505-0
category: reference
title: How to implement a promise-based API - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:35.228467+00:00
instance: kb-cron
parent: how-to-implement-a-promise-based-api-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API


id: how-to-implement-a-promise-based-api-learn-web-development-mdn-20260505-1
category: reference
title: How to implement a promise-based API - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:35.228467+00:00
instance: kb-cron
parent: how-to-implement-a-promise-based-api-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API-1.md

summary:
## [Using the alarm() API](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API#using_the_alarm_api) This part should be quite familiar from the last article. We can call `alarm()`, and on the returned promise call `then()` and `catch()` to set handlers for promise fulfillment and rejection. Try setting different values for "Name" and "Delay". Try setting a negative value for "Delay". ## [Using async and await with the alarm() API](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API#using_async_and_await_with_the_alarm_api) Since `alarm()` returns a `Promise`, we can do everything with it that we could do with any other promise: promise chaining, `Promise.all()`, and `async` / `await`: ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API#see_also) * [`Promise()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) * [Using promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises) * [ Overview: Asynchronous JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FImplementing_a_promise-based_API&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fimplementing_a_promise-based_api%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FImplementing_a_promise-based_API%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fimplementing_a_promise-based_api%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F48d220a8cffdfd5f088f8ca89724a9a92e34d8c0%0A*+Document+last+modified%3A+2025-04-11T19%3A13%3A37.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API


id: how-to-implement-a-promise-based-api-learn-web-development-mdn-20260505-2
category: reference
title: How to implement a promise-based API - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:35.228467+00:00
instance: kb-cron
parent: how-to-implement-a-promise-based-api-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API


id: introducing-asynchronous-javascript-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing-0.md
category: reference
title: Introducing asynchronous JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing
date_saved: 2026-05-05T05:58:37.852541+00:00
instance: kb-cron
parent: introducing-asynchronous-javascript-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: introducing-asynchronous-javascript-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing-1.md
category: reference
title: Introducing asynchronous JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing
date_saved: 2026-05-05T05:58:37.852541+00:00
instance: kb-cron
parent: introducing-asynchronous-javascript-learn-web-development-mdn-20260505-0
summary:
We should note here that the browser effectively steps through the program one line at a time, in the order we wrote it. At each point, the browser waits for the line to finish its work before going on to the next line. It has to do this because each line depends on the work done in the preceding lines. That makes this a **synchronous program**. It would still be synchronous even if we called a separate function, like this: Here, `makeGreeting()` is a **synchronous function** because the caller has to wait for the function to finish its work and return a value before the caller can continue. ## [A long-running synchronous function](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing#a_long-running_synchronous_function) What if the synchronous function takes a long time? The program below uses a very inefficient algorithm to generate multiple large prime numbers when a user clicks the "Generate primes" button. The higher the number of primes a user specifies, the longer the operation will take. Try clicking "Generate primes". Depending on how fast your computer is, it will probably take a few seconds before the program displays the "Finished!" message. ## [The trouble with long-running synchronous functions](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing#the_trouble_with_long-running_synchronous_functions) The next example is just like the last one,


id: introducing-asynchronous-javascript-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing-2.md
category: reference
title: Introducing asynchronous JavaScript - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing
date_saved: 2026-05-05T05:58:37.852541+00:00
instance: kb-cron
parent: introducing-asynchronous-javascript-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 11, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/async_js/introducing/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/async_js/introducing \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FIntroducing&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fintroducing%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FIntroducing%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fintroducing%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F00f8a68014509bb2fe795ece956c7571a80b9fd9%0A*+Document+last+modified%3A+2026-02-11T18%3A45%3A41.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: introducing-workers-learn-web-development-mdn-20260505-0
category: reference
title: Introducing workers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:40.411995+00:00
instance: kb-cron
parent: introducing-workers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers


id: introducing-workers-learn-web-development-mdn-20260505-1
category: reference
title: Introducing workers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:40.411995+00:00
instance: kb-cron
parent: introducing-workers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers-1.md

summary:
The "index.html" file and the "style.css" files are already complete: The "main.js" and "generate.js" files are empty. We're going to add the main code to "main.js", and the worker code to "generate.js". So first, we can see that the worker code is kept in a separate script from the main code. We can also see, looking at "index.html" above, that only the main code is included in a `<script>` element. Now copy the following code into "main.js": * First, we're creating the worker using the [`Worker()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker "Worker\(\)") constructor. We pass it a URL pointing to the worker script. As soon as the worker is created, the worker script is executed. * Next, as in the synchronous version, we add a `click` event handler to the "Generate primes" button. But now, rather than calling a `generatePrimes()` function, we send a message to the worker using [`worker.postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage "worker.postMessage\(\)"). This message can take an argument, and in this case, we're passing a JSON object containing two properties: * `command`: a string identifying the thing we want the worker to do (in case our worker could do more than one thing) * `quota`: the number of primes to generate. * Next, we add a

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers


id: introducing-workers-learn-web-development-mdn-20260505-2
category: reference
title: Introducing workers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:40.411995+00:00
instance: kb-cron
parent: introducing-workers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jun 23, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/async_js/introducing_workers/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/async_js/introducing_workers \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FIntroducing_workers&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fintroducing_workers%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FIntroducing_workers%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fintroducing_workers%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F3e543cdfe8dddfb4774a64bf3decdcbab42a4111%0A*+Document+last+modified%3A+2025-06-23T16%3A41%3A39.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers


id: introducing-workers-learn-web-development-mdn-20260505-3
category: reference
title: Introducing workers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:40.411995+00:00
instance: kb-cron
parent: introducing-workers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers-3.md


id: how-to-use-promises-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises-0.md
category: reference
title: How to use promises - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises
date_saved: 2026-05-05T05:58:42.865621+00:00
instance: kb-cron
parent: how-to-use-promises-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: how-to-use-promises-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises-1.md
category: reference
title: How to use promises - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises
date_saved: 2026-05-05T05:58:42.865621+00:00
instance: kb-cron
parent: how-to-use-promises-learn-web-development-mdn-20260505-0
summary:
Note that `Started request…` is logged before we receive the response. Unlike a synchronous function, `fetch()` returns while the request is still going on, enabling our program to stay responsive. The response shows the `200` (OK) [status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status), meaning that our request succeeded. This probably seems a lot like the example in the last article, where we added event handlers to the [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) object. Instead of that, we're passing a handler into the `then()` method of the returned promise. ## [Chaining promises](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises#chaining_promises) With the `fetch()` API, once you get a `Response` object, you need to call another function to get the response data. In this case, we want to get the response data as JSON, so we would call the [`json()`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json "json\(\)") method of the `Response` object. It turns out that `json()` is also asynchronous. So this is a case where we have to call two successive asynchronous functions. Try this: In this example, as before, we add a `then()` handler to the promise returned by `fetch()`. But this time, our handler calls `response.json()`, and then passes a new `then()` handler into the promise returned by `response.json()`. This should log "baked beans" (the name of the first product listed in


id: how-to-use-promises-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises-2.md
category: reference
title: How to use promises - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises
date_saved: 2026-05-05T05:58:42.865621+00:00
instance: kb-cron
parent: how-to-use-promises-learn-web-development-mdn-20260505-0
summary:
The article [Let's talk about how to talk about promises](https://thenewtoys.dev/blog/2021/02/08/lets-talk-about-how-to-talk-about-promises/) gives a great explanation of the details of this terminology. ## [Combining multiple promises](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises#combining_multiple_promises) The promise chain is what you need when your operation consists of several asynchronous functions, and you need each one to complete before starting the next one. But there are other ways you might need to combine asynchronous function calls, and the `Promise` API provides some helpers for them. Sometimes, you need all the promises to be fulfilled, but they don't depend on each other. In a case like that, it's much more efficient to start them all off together, then be notified when they have all fulfilled. The [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) method is what you need here. It takes an array of promises and returns a single promise. The promise returned by `Promise.all()` is: * fulfilled when and if _all_ the promises in the array are fulfilled. In this case, the `then()` handler is called with an array of all the responses, in the same order that the promises were passed into `all()`. * rejected when and if _any_ of the promises in the array are rejected. In this case, the `catch()` handler is called with the


id: how-to-use-promises-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises-3.md
category: reference
title: How to use promises - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises
date_saved: 2026-05-05T05:58:42.865621+00:00
instance: kb-cron
parent: how-to-use-promises-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 20, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Promises/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/async_js/promises/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/async_js/promises \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FPromises&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fpromises%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FPromises%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fpromises%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F7dea5a04405d1bfce4f471d9284f7f7148bc9a4d%0A*+Document+last+modified%3A+2025-10-20T12%3A25%3A53.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: challenge-sequencing-animations-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Sequencing animations - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:45.525875+00:00
instance: kb-cron
parent: challenge-sequencing-animations-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations


id: challenge-sequencing-animations-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Sequencing animations - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:45.525875+00:00
instance: kb-cron
parent: challenge-sequencing-animations-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/async_js/sequencing_animations/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/async_js/sequencing_animations \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FSequencing_animations&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fsequencing_animations%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FAsync_JS%2FSequencing_animations%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fasync_js%2Fsequencing_animations%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F48d220a8cffdfd5f088f8ca89724a9a92e34d8c0%0A*+Document+last+modified%3A+2025-04-11T19%3A13%3A37.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations


id: challenge-sequencing-animations-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Sequencing animations - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:45.525875+00:00
instance: kb-cron
parent: challenge-sequencing-animations-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations


id: client-side-web-apis-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs-0.md
category: reference
title: Client-side web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs
date_saved: 2026-05-05T05:58:47.800109+00:00
instance: kb-cron
parent: client-side-web-apis-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: client-side-web-apis-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs-1.md
category: reference
title: Client-side web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs
date_saved: 2026-05-05T05:58:47.800109+00:00
instance: kb-cron
parent: client-side-web-apis-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jul 3, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F73a73bc44e12181c778910f3b7d73962e0dd9a29%0A*+Document+last+modified%3A+2025-07-03T05%3A54%3A05.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: client-side-storage-learn-web-development-mdn-20260505-0
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage


id: client-side-storage-learn-web-development-mdn-20260505-1
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-1.md

summary:
Often client-side and server-side storage are used together. For example, you could download a batch of music files (perhaps used by a web game or music player application), store them inside a client-side database, and play them as needed. The user would only have to download the music files once — on subsequent visits they would be retrieved from the database instead. **Note:** There are limits to the amount of data you can store using client-side storage APIs (possibly both per individual API and cumulatively); the exact limit varies depending on the browser and possibly based on user settings. See [Browser storage quotas and eviction criteria](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria) for more information. ### [Old school: Cookies](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#old_school_cookies) The concept of client-side storage has been around for a long time. Since the early days of the web, sites have used [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies) to store information to personalize user experience on websites. They're the earliest form of client-side storage commonly used on the web. These days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. However, this does not mean cookies are completely useless on the modern-day web — they are still used commonly

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage


id: client-side-storage-learn-web-development-mdn-20260505-2
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-2.md

summary:
### [Separate storage for each domain](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#separate_storage_for_each_domain) There is a separate data store for each domain (each separate web address loaded in the browser). You will see that if you load two websites (say google.com and amazon.com) and try storing an item on one website, it won't be available to the other website. This makes sense — you can imagine the security issues that would arise if websites could see each other's data! ### [A more involved example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#a_more_involved_example) Let's apply this new-found knowledge by writing a working example to give you an idea of how web storage can be used. Our example will allow you to enter a name, after which the page will update to give you a personalized greeting. This state will also persist across page/browser reloads, because the name is stored in web storage. You can find the example HTML at [personal-greeting.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/web-storage/personal-greeting.html) — this contains a website with a header, content, and footer, and a form for entering your name. ![A Screenshot of a website that has a header, content and footer sections. The header has a welcome text to the left-hand side and a button labelled 'forget' to the right-hand side. The content has a heading followed

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage


id: client-side-storage-learn-web-development-mdn-20260505-3
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-3.md

summary:
Your example is finished — well done! All that remains now is to save your code and test your HTML page in a browser. You can see our [finished version running live here](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html). **Note:** There is another, slightly more complex example to explore at [Using the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). **Note:** In the line `<script src="index.js" defer></script>` of the source for our finished version, the `defer` attribute specifies that the contents of the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element will not execute until the page has finished loading. ## [Storing complex data — IndexedDB](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#storing_complex_data_%E2%80%94_indexeddb) The [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) (sometimes abbreviated IDB) is a complete database system available in the browser in which you can store complex related data, the types of which aren't limited to simple values like strings or numbers. You can store videos, images, and pretty much anything else in an IndexedDB instance. The IndexedDB API allows you to create a database, then create object stores within that database. Object stores are like tables in a relational database, and each object store can contain a number of objects. To learn more about the IndexedDB API, see [Using IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB). However, this does come at a cost: IndexedDB is much more complex to use than the


id: client-side-storage-learn-web-development-mdn-20260505-4
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-4.md

summary:
### [Database initial setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#database_initial_setup) Now let's look at what we have to do in the first place, to actually set up a database. 1. Below the constant declarations, add the following lines: Here we are declaring a variable called `db` — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier. 2. Next, add the following: This line creates a request to open version `1` of a database called `notes_db`. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are [asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous), meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done. To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it `openRequest` here, so it is obvious what it is for). You then use event handlers to run code when the


id: client-side-storage-learn-web-development-mdn-20260505-5
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-5.md

summary:
### [Displaying the data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#displaying_the_data) We've referenced `displayData()` twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition: Again, let's break this down: * First, we empty out the [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul) element's content, before then filling it with the updated content. If you didn't do this, you'd end up with a huge list of duplicated content being added to with each update. * Next, we get a reference to the `notes_os` object store using [`IDBDatabase.transaction()`](https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase/transaction) and [`IDBTransaction.objectStore()`](https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction/objectStore) like we did in `addData()`, except here we are chaining them together in one line. * The next step is to use the [`IDBObjectStore.openCursor()`](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/openCursor) method to open a request for a cursor — this is a construct that can be used to iterate over the records in an object store. We chain a `success` event handler onto the end of this line to make the code more concise — when the cursor is successfully returned, the handler is run. * We get a reference to the cursor itself (an [`IDBCursor`](https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor) object) using `const cursor = e.target.result`. * Next, we check to see if the cursor contains a record from the datastore (`if (cursor){ }`)


id: client-side-storage-learn-web-development-mdn-20260505-6
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-6.md

summary:
So that's it! Your example should now work. If you are having trouble with it, feel free to [check it against our live example](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/) (see the [source code](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index.js) also). ### [Storing complex data via IndexedDB](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#storing_complex_data_via_indexeddb) As we mentioned above, IndexedDB can be used to store more than just text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data. To demonstrate how to do it, we've written another example called [IndexedDB video store](https://github.com/mdn/learning-area/tree/main/javascript/apis/client-side-storage/indexeddb/video-store) (see it [running live here also](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/)). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video) elements. The second time you run it, it finds the videos in the database and gets them from there instead before displaying them — this makes subsequent loads much quicker and less bandwidth-hungry. Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented. 1. For this example,


id: client-side-storage-learn-web-development-mdn-20260505-7
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-7.md

summary:
## [Offline asset storage](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#offline_asset_storage) The above example already shows how to create an app that will store large assets in an IndexedDB database, avoiding the need to download them more than once. This is already a great improvement to the user experience, but there is still one thing missing — the main HTML, CSS, and JavaScript files still need to be downloaded each time the site is accessed, meaning that it won't work when there is no network connection. ![Firefox offline screen with an illustration of a cartoon character to the left-hand side holding a two-pin plug in its right hand and a two-pin socket in its left hand. On the right-hand side there is an Offline Mode message and a button labeled 'Try again'.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage/ff-offline.png) This is where [Service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) and the closely-related [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) come in. A service worker is a JavaScript file that is registered against a particular origin (website, or part of a website at a certain domain) when it is accessed by a browser. When registered, it can control pages available at that origin. It does this by sitting between a loaded page and the network and intercepting network requests aimed at that origin. When it


id: client-side-storage-learn-web-development-mdn-20260505-8
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-8.md

summary:
If you refresh your example page again, you should still see it load just fine. Everything is stored offline — the page assets in a cache, and the videos in an IndexedDB database. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#summary) That's it for now. We hope you've found our rundown of client-side storage technologies useful. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage#see_also) * [Web storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) * [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) * [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics) * [ Overview: Client-side web APIs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/client-side_storage/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/client-side_storage \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FClient-side_storage&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fclient-side_storage%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FClient-side_storage%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fclient-side_storage%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fa4fcf79b60471db6f148fa4ba36f2cdeafbbeb70%0A*+Document+last+modified%3A+2025-10-30T21%3A49%3A49.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers


id: client-side-storage-learn-web-development-mdn-20260505-9
category: reference
title: Client-side storage - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:50.050120+00:00
instance: kb-cron
parent: client-side-storage-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage-9.md


id: drawing-graphics-learn-web-development-mdn-20260505-0
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics


id: drawing-graphics-learn-web-development-mdn-20260505-1
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-1.md

summary:
## [Graphics on the Web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#graphics_on_the_web) The Web was originally just text, which was very boring, so images were introduced — first via the [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) element and later via CSS properties such as [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-image), and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG). This however was still not enough. While you could use [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) and [JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) to animate (and otherwise manipulate) SVG vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited. The Web still had no way to effectively create animations, games, 3D scenes, and other requirements commonly handled by lower level languages such as C++ or Java. The situation started to improve when browsers began to support the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element and associated [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) in 2004. As you'll see below, canvas provides some useful tools for creating 2D animations, games, data visualizations, and other types of applications, especially when combined with some of the other APIs the web platform provides, but can be difficult or impossible to make accessible The below example shows a simple 2D canvas-based bouncing balls animation that we originally met in our [Introducing JavaScript objects](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice) module: Around 2006–2007, Mozilla started work on an

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics


id: drawing-graphics-learn-web-development-mdn-20260505-2
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-2.md

summary:
**Note:** You should generally set the size of the canvas using HTML attributes or DOM properties, as explained above. You could use CSS, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image, the canvas could become pixelated/distorted. ### [Getting the canvas context and final setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#getting_the_canvas_context_and_final_setup) We need to do one final thing before we can consider our canvas template finished. To draw onto the canvas we need to get a special reference to the drawing area called a context. This is done using the [`HTMLCanvasElement.getContext()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) method, which for basic usage takes a single string as a parameter representing the type of context you want to retrieve. In this case we want a 2d canvas, so add the following JavaScript line below the others in `script.js`: **Note:** Other context values you could choose include `webgl` for WebGL, `webgpu` for WebGPU, etc., but we won't need those in this article. So that's it — our canvas is now primed and ready for drawing on! The `ctx` variable now contains a [`CanvasRenderingContext2D`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) object, and all drawing operations on the canvas will involve manipulating this object. Let's do one last thing before

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics


id: drawing-graphics-learn-web-development-mdn-20260505-3
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-3.md

summary:
Now you should see that your white outline has become much thicker! That's it for now. At this point your example should look like this: You can press the **Play** button to open the example in MDN Playground and edit the source code. ### [Drawing paths](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#drawing_paths) If you want to draw anything more complex than a rectangle, you need to draw a path. Basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the shape you want to draw. Canvas includes functions for drawing straight lines, circles, Bézier curves, and more. Start the section off by making a fresh copy of your canvas template in which to draw the new example. We'll be using some common methods and properties across all of the below sections: * [`beginPath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath "beginPath\(\)") — start drawing a path at the point where the pen currently is on the canvas. On a new canvas, the pen starts out at (0, 0). * [`moveTo()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo "moveTo\(\)") — move the pen to a different point on the canvas, without recording or tracing the line; the pen "jumps" to the new position. * [`fill()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill "fill\(\)") — draw a filled shape


id: drawing-graphics-learn-web-development-mdn-20260505-4
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-4.md

summary:
#### Drawing circles Now let's look at how to draw a circle in canvas. This is accomplished using the [`arc()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc "arc\(\)") method, which draws all or part of a circle at a specified point. 1. Let's add an arc to our canvas — add the following to the bottom of your code: `arc()` takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (`false` is clockwise). **Note:** 0 degrees is horizontally to the right. 2. Let's try adding another arc: The pattern here is very similar, but with two differences: * We have set the last parameter of `arc()` to `true`, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. If you were to change `true`


id: drawing-graphics-learn-web-development-mdn-20260505-5
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-5.md

summary:
Both of these take three properties in their basic usage: the text string to draw and the X and Y coordinates of the point to start drawing the text at. This works out as the **bottom left** corner of the **text box** (literally, the box surrounding the text you draw), which might confuse you as other drawing operations tend to start from the top left corner — bear this in mind. There are also a number of properties to help control text rendering such as [`font`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font "font"), which lets you specify font family, size, etc. It takes as its value the same syntax as the CSS [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font) property. Canvas content is not accessible to screen readers. Text painted to the canvas is not available to the DOM, but must be made available to be accessible. In this example, we include the text as the value for `aria-label`. Try adding the following block to the bottom of your JavaScript: Here we draw two lines of text, one outline and the other stroke. The example should look like so: Press the **Play** button to open the example in MDN Playground and edit the source code. Have a play and see what you


id: drawing-graphics-learn-web-development-mdn-20260505-6
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-6.md

summary:
The final example should look like so: Press the **Play** button to open the example in MDN Playground and edit the source code. ## [Loops and animations](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#loops_and_animations) We have so far covered some very basic uses of 2D canvas, but really you won't experience the full power of canvas unless you update or animate it in some way. After all, canvas does provide scriptable images! If you aren't going to change anything, then you might as well just use static images and save yourself all the work. ### [Creating a loop](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#creating_a_loop) Playing with loops in canvas is rather fun — you can run canvas commands inside a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) (or other type of) loop just like any other JavaScript code. Let's build an example. 1. Make another fresh copy of your canvas template. 2. Add the following line to the bottom of your JavaScript. This contains a new method, [`translate()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate "translate\(\)"), which moves the origin point of the canvas: This causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. This is very useful in many situations, like this one, where we want our design to be drawn


id: drawing-graphics-learn-web-development-mdn-20260505-7
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-7.md

summary:
### [Animations](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#animations) The loop example we built above was fun, but really you need a constant loop that keeps going and going for any serious canvas applications (such as games and real time visualizations). If you think of your canvas as being like a movie, you really want the display to update on each frame to show the updated view, with an ideal refresh rate of 60 frames per second so that movement appears nice and smooth to the human eye. There are a few JavaScript functions that will allow you to run functions repeatedly, several times a second, the best one for our purposes here being [`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame). It takes one parameter — the name of the function you want to run for each frame. The next time the browser is ready to update the screen, your function will get called. If that function draws the new update to your animation, then calls `requestAnimationFrame()` again just before the end of the function, the animation loop will continue to run. The loop ends when you stop calling `requestAnimationFrame()` or if you call [`window.cancelAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame) after calling `requestAnimationFrame()` but before the frame is called. **Note:** It's good practice to call `cancelAnimationFrame()` from your


id: drawing-graphics-learn-web-development-mdn-20260505-8
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-8.md

summary:
**Note:** We won't cover `save()` and `restore()` here, but they are explained nicely in our [Transformations](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations) tutorial (and the ones that follow it). ### [Walking object animation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#walking_object_animation) Now let's create our own simple animation — we'll be animating a moving object across the screen using a sprite sheet. 1. Make another fresh copy of our canvas template and open it in your code editor. 2. Update the fallback HTML to reflect the image: 3. This time, we won't be coloring the background black. So after acquiring the `ctx` variable, paint the background light gray instead: 4. At the bottom of the JavaScript, add the following line to once again make the coordinate origin sit in the middle of the canvas: 5. Now let's create a new [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) object, set its [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src) to the image we want to load, and add an `onload` event handler that will cause the `draw()` function to fire when the image is loaded: 6. Now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display. The sprite image is created by and shared at the courtesy of [Rachel Nabors](https://nearestnabors.com/),


id: drawing-graphics-learn-web-development-mdn-20260505-9
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-9.md

summary:
That's it! The final example should look like so: You can press the **Play** button to open the example in MDN Playground and edit the source code. ### [A simple drawing application](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#a_simple_drawing_application) As a final animation example, we'd like to show you a very simple drawing application, to illustrate how the animation loop can be combined with user input (like mouse movement, in this case). We won't get you to walk through and build this one; we'll just explore the most interesting parts of the code. You can play with the example live below; you can also click the **Play** button to open it in the MDN Playground, where you can edit the source code: Let's look at the most interesting parts. First of all, we keep track of the mouse's X and Y coordinates and whether it is being clicked or not with three variables: `curX`, `curY`, and `pressed`. When the mouse moves, we fire a function set as the `onmousemove` event handler, which captures the current X and Y values. We also use `onmousedown` and `onmouseup` event handlers to change the value of `pressed` to `true` when the mouse button is pressed, and back to `false` again when


id: drawing-graphics-learn-web-development-mdn-20260505-10
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-10.md

summary:
Before we get to defining `draw()`, we'll add a couple of lights to the scene, to liven things up a bit; add the following blocks next: An [`AmbientLight`](https://threejs.org/docs/index.html#api/en/lights/AmbientLight) object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. The [`SpotLight`](https://threejs.org/docs/index.html#api/en/lights/SpotLight) object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact). 10. Last of all, let's add our `draw()` function to the bottom of the code: This is fairly intuitive; on each frame, we rotate our cube slightly on its X and Y axes, then render the scene as viewed by our camera, then finally call `requestAnimationFrame()` to schedule drawing our next frame.


id: drawing-graphics-learn-web-development-mdn-20260505-11
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-11.md

summary:
The finished product should look like: **Note:** In our GitHub repo you can also find another interesting 3D cube example — [Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/)). This uses [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia "getUserMedia\(\)") to take a video stream from a computer web cam and project it onto the side of the cube as a texture! ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#summary) At this point, you should have a useful idea of the basics of graphics programming using Canvas and WebGL and what you can do with these APIs, as well as a good idea of where to go for further information. Have fun! ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#see_also) Here we have covered only the real basics of canvas — there is so much more to learn! The below articles will take you further. * [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) — A very detailed tutorial series explaining what you should know about 2D canvas in much more detail than was covered here. Essential reading. * [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial) — A series that teaches the basics of raw WebGL programming. * [Building up a basic demo with Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) — basic Three.js tutorial. We also have equivalent guides for [PlayCanvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) or [Babylon.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js). * [Game development](https://developer.mozilla.org/en-US/docs/Games) — the landing page for web games development on


id: drawing-graphics-learn-web-development-mdn-20260505-12
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-12.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jan 25, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/drawing_graphics \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FDrawing_graphics&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fdrawing_graphics%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FDrawing_graphics%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fdrawing_graphics%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F06e6e54baef7032c4e81ca93291fde0a0585de8b%0A*+Document+last+modified%3A+2026-01-25T19%3A35%3A57.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: drawing-graphics-learn-web-development-mdn-20260505-13
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-13.md


id: introduction-to-web-apis-learn-web-development-mdn-20260505-0
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction


id: introduction-to-web-apis-learn-web-development-mdn-20260505-1
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-1.md

summary:
![A screenshot of the browser with the home page of firefox browser open. There are APIs built into the browser by default. Third party APIs are not built into the browser by default. Their code and information has to be retrieved from somewhere on the web to utilize them.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction/browser.png) ### [Relationship between JavaScript, APIs, and other JavaScript tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#relationship_between_javascript_apis_and_other_javascript_tools) So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript language. Let's recap this to make it clearer, and also mention where other JavaScript tools fit in: * JavaScript — A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as [Node](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction). * Browser APIs — constructs built into the browser that sit on top of the JavaScript language and allow you to implement functionality more easily. * Third-party APIs — constructs built into third-party platforms (e.g., Disqus, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your Disqus comments on a web page). * JavaScript libraries — Usually one or more JavaScript files containing [custom functions](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions) that

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction


id: introduction-to-web-apis-learn-web-development-mdn-20260505-2
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-2.md

summary:
### [Common third-party APIs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#common_third-party_apis) Third-party APIs come in a large variety; some of the more popular ones that you are likely to make use of sooner or later are: * Map APIs, like [Mapquest](https://developer.mapquest.com/) and the [Google Maps API](https://developers.google.com/maps/), which allow you to do all sorts of things with maps on your web pages. * The [Facebook suite of APIs](https://developers.facebook.com/docs/), which enables you to use various parts of the Facebook ecosystem to benefit your app, such as by providing app login using Facebook login, accepting in-app payments, rolling out targeted ad campaigns, etc. * The [Telegram APIs](https://core.telegram.org/api), which allows you to embed content from Telegram channels on your website, in addition to providing support for bots. * The [YouTube API](https://developers.google.com/youtube/), which allows you to embed YouTube videos on your site, search YouTube, build playlists, and more. * The [Pinterest API](https://developers.pinterest.com/), which provides tools to manage Pinterest boards and pins to include them in your website. * The [Twilio API](https://www.twilio.com/docs), which provides a framework for building voice and video call functionality into your app, sending SMS/MMS from your apps, and more. * The [Disqus API](https://disqus.com/api/docs/), which provides a commenting platform that can be integrated into your site. * The [Mastodon API](https://docs.joinmastodon.org/api/),

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction


id: introduction-to-web-apis-learn-web-development-mdn-20260505-3
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-3.md

summary:
So how do these objects interact? If you look at our [simple web audio example](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/web-audio/index.html) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), you'll first see the following HTML: We, first of all, include an `<audio>` element with which we embed an MP3 into the page. We don't include any default browser controls. Next, we include a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) that we'll use to play and stop the music, and an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element of type range, which we'll use to adjust the volume of the track while it's playing. Next, let's look at the JavaScript for this example. We start by creating an `AudioContext` instance inside which to manipulate our track: Next, we create constants that store references to our `<audio>`, `<button>`, and `<input>` elements, and use the [`AudioContext.createMediaElementSource()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource) method to create a `MediaElementAudioSourceNode` representing the source of our audio — the `<audio>` element will be played from: Next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: **Note:** Some of you may notice that the `play()` and `pause()` methods being used to play and pause the track are not


id: introduction-to-web-apis-learn-web-development-mdn-20260505-4
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/introduction/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/introduction \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FIntroduction&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fca26363fcc6fc861103d40ac0205e5c5b79eb2fa%0A*+Document+last+modified%3A+2025-11-30T02%3A30%3A55.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: introduction-to-web-apis-learn-web-development-mdn-20260505-5
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-5.md


id: third-party-apis-learn-web-development-mdn-20260505-0
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs


id: third-party-apis-learn-web-development-mdn-20260505-1
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-1.md

summary:
## [What are third party APIs?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#what_are_third_party_apis) Third party APIs are APIs provided by third parties — generally companies such as Facebook, Twitter, or Google — to allow you to access their functionality via JavaScript and use it on your site. One of the most obvious examples is using mapping APIs to display custom maps on your pages. Let's look at a [Simple Mapquest API example](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/mapquest), and use it to illustrate how third-party APIs differ from browser APIs. ### [They are found on third-party servers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#they_are_found_on_third-party_servers) Browser APIs are built into the browser — you can access them from JavaScript immediately. For example, the Web Audio API we [saw in the Introductory article](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#how_do_apis_work) is accessed using the native [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) object. For example: Third party APIs, on the other hand, are located on third party servers. To access them from JavaScript you first need to connect to the API functionality and make it available on your page. This typically involves first linking to a JavaScript library available on the server via a [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element, as seen in our Mapquest example: You can then start using the objects available in that library. For example: Here we are creating a variable to store the map

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs


id: third-party-apis-learn-web-development-mdn-20260505-2
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-2.md

summary:
### [Changing the type of map](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#changing_the_type_of_map) There are a number of different types of map that can be shown with the Mapquest API. To do this, find the following line: Try changing `'map'` to `'hybrid'` to show a hybrid-style map. Try some other values too. The [`tileLayer` reference page](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/) shows the different available options, plus a lot more information. ### [Adding different controls](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#adding_different_controls) The map has a number of different controls available; by default it just shows a zoom control. You can expand the controls available using the `map.addControl()` method; add this to your code: The [`mapquest.control()` method](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/) just creates a simple full-featured control set, and it is placed in the top-right-hand corner by default. You can adjust the position by specifying an options object as a parameter for the control containing a `position` property, the value of which is a string specifying a position for the control. Try this, for example: There are other types of control available, for example [`mapquest.searchControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/) and [`mapquest.satelliteControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/), and some are quite complex and powerful. Have a play around and see what you can come up with. ### [Adding a custom marker](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#adding_a_custom_marker) Adding a marker (icon) at a certain point on the map is

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs


id: third-party-apis-learn-web-development-mdn-20260505-3
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-3.md

summary:
`submitSearch()` sets the page number back to 0 to begin with, then calls `fetchResults()`. This first calls [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) on the event object, to stop the form actually submitting (which would break the example). Next, we use some string manipulation to assemble the full URL that we will make the request to. We start off by assembling the parts we deem as mandatory for this demo: * The base URL (taken from the `baseURL` variable). * The API key, which has to be specified in the `api-key` URL parameter (the value is taken from the `key` variable). * The page number, which has to be specified in the `page` URL parameter (the value is taken from the `pageNumber` variable). * The search term, which has to be specified in the `q` URL parameter (the value is taken from the value of the `searchTerm` text [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)). * The document type to return results for, as specified in an expression passed in via the `fq` URL parameter. In this case, we want to return articles. Next, we use a couple of [`if ()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statements to check whether the `startDate` and `endDate` elements have had values filled in on them. If they do, we


id: third-party-apis-learn-web-development-mdn-20260505-4
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-4.md

summary:
### [Wiring up the pagination buttons](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#wiring_up_the_pagination_buttons) To make the pagination buttons work, we will increment (or decrement) the value of the `pageNumber` variable, and then re-rerun the fetch request with the new value included in the page URL parameter. This works because the NYTimes API only returns 10 results at a time — if more than 10 results are available, it will return the first 10 (0-9) if the `page` URL parameter is set to 0 (or not included at all — 0 is the default value), the next 10 (10-19) if it is set to 1, and so on. This allows us to write a simplistic pagination function. 1. Below the existing [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) call, add these two new ones, which cause the `nextPage()` and `previousPage()` functions to be invoked when the relevant buttons are clicked: 2. Below your previous addition, let's define the two functions — add this code now: The first function increments the `pageNumber` variable, then run the `fetchResults()` function again to display the next page's results. The second function works nearly exactly the same way in reverse, but we also have to take the extra step of checking that `pageNumber` is not already zero before decrementing


id: third-party-apis-learn-web-development-mdn-20260505-5
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-5.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/third_party_apis/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/third_party_apis \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FThird_party_APIs&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fthird_party_apis%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FThird_party_APIs%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fthird_party_apis%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fa4fcf79b60471db6f148fa4ba36f2cdeafbbeb70%0A*+Document+last+modified%3A+2025-10-30T21%3A49%3A49.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: third-party-apis-learn-web-development-mdn-20260505-6
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-6.md


id: video-and-audio-apis-learn-web-development-mdn-20260505-0
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs


id: video-and-audio-apis-learn-web-development-mdn-20260505-1
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-1.md

summary:
At this point, if you load the HTML you should see a perfectly normal HTML video player, with the native controls rendered. #### Exploring the HTML Open the HTML index file. You'll see a number of features; the HTML is dominated by the video player and its controls: * The whole player is wrapped in a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) element, so it can all be styled as one unit if needed. * The [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video) element contains two [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) elements so that different formats can be loaded depending on the browser viewing the site. * The controls HTML is probably the most interesting: * We have four [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button)s — play/pause, stop, rewind, and fast forward. * Each `<button>` has a `class` name, a `data-icon` attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an `aria-label` attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags. The contents of `aria-label` attributes are read out by screen readers when their users focus on the elements that contain them. * There is also a timer [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div), which will report the elapsed time when the video

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs


id: video-and-audio-apis-learn-web-development-mdn-20260505-2
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-2.md

summary:
#### Playing and pausing the video Let's implement probably the most important control — the play/pause button. 1. First of all, add the following to the bottom of your code, so that the `playPauseMedia()` function is invoked when the play button is clicked: 2. Now to define `playPauseMedia()` — add the following, again at the bottom of your code: Here we use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to check whether the video is paused. The [`HTMLMediaElement.paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused) property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the `data-icon` attribute value on the play button to "u", which is a "paused" icon, and invoke the [`HTMLMediaElement.play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) method to play the media. On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with [`HTMLMediaElement.pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause). #### Stopping the video 1. Next, let's add functionality to handle stopping the video. Add the following [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) lines below the previous one you added: The [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event "click") event is obvious — we want to stop the video by running

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs


id: video-and-audio-apis-learn-web-development-mdn-20260505-3
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-3.md

summary:
#### Updating the elapsed time The very last piece of our media player to implement is the time-elapsed displays. To do this we'll run a function to update the time displays every time the [`timeupdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event "timeupdate") event is fired on the `<video>` element. The frequency with which this event fires depends on your browser, CPU power, etc. ([see this Stack Overflow post](https://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video)). 1. Add the following `addEventListener()` line just below the others: 2. Now to define the `setTime()` function. Add the following at the bottom of your file: This is a fairly long function, so let's go through it step by step: 1. First of all, we work out the number of minutes and seconds in the [`HTMLMediaElement.currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime) value. 2. Then we initialize two more variables — `minuteValue` and `secondValue`. We use [`padStart()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) to make each value 2 characters long, even if the numeric value is only a single digit. 3. The actual time value to display is set as `minuteValue` plus a colon character plus `secondValue`. 4. The [`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) value of the timer is set to the time value, so it displays in the UI. 5. The length we should set the inner `<div>` to is worked out by


id: video-and-audio-apis-learn-web-development-mdn-20260505-4
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 31, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FVideo_and_audio_APIs&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fvideo_and_audio_apis%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FVideo_and_audio_APIs%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fvideo_and_audio_apis%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9f7e7e9075e9f2b1937d2c8000f52a8ff76bff52%0A*+Document+last+modified%3A+2025-10-31T15%3A27%3A28.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: video-and-audio-apis-learn-web-development-mdn-20260505-5
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-5.md


id: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools-0.md
category: reference
title: Understanding client-side web development tools - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools
date_saved: 2026-05-05T05:59:04.368101+00:00
instance: kb-cron
parent: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools-1.md
category: reference
title: Understanding client-side web development tools - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools
date_saved: 2026-05-05T05:59:04.368101+00:00
instance: kb-cron
parent: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_tools \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F48d220a8cffdfd5f088f8ca89724a9a92e34d8c0%0A*+Document+last+modified%3A+2025-04-11T19%3A13%3A37.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: deploying-our-app-learn-web-development-mdn-20260505-0
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment


