# kb

id: create-bookinstance-form-learn-web-development-mdn-20260505-3
category: reference
title: Create BookInstance form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:20.665406+00:00
instance: kb-cron
parent: create-bookinstance-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_BookInstance_form-3.md


id: create-author-form-learn-web-development-mdn-20260505-0
category: reference
title: Create Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:23.166787+00:00
instance: kb-cron
parent: create-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form#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/Server-side/Express_Nodejs/forms/Create_author_form


id: create-author-form-learn-web-development-mdn-20260505-1
category: reference
title: Create Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:23.166787+00:00
instance: kb-cron
parent: create-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form-1.md

summary:
## [View](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form#view) Create **/views/author_form.pug** and copy in the text below. The structure and behavior for this view is exactly the same as for the **genre_form.pug** template, so we won't describe it again. **Note:** Some browsers don't support the input `type="date"`, so you won't get the datepicker widget or the default `dd/mm/yyyy` placeholder, but will instead get an empty plain text field. One workaround is to explicitly add the attribute `placeholder='dd/mm/yyyy'` so that on less capable browsers you will still get information about the desired text format. ### [Challenge: Adding the date of death](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form#challenge_adding_the_date_of_death) The template above is missing a field for entering the `date_of_death`. Create the field following the same pattern as the date of birth form group! ## [What does it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form#what_does_it_look_like) Run the application, open your browser to `http://localhost:3000/`, then select the _Create new author_ link. If everything is set up correctly, your site should look something like the following screenshot. After you enter a value, it should be saved and you'll be taken to the author detail page. ![Author Create Page - Express Local Library site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form/locallibary_express_author_create_empty.png) **Note:** If you experiment with various input formats for the dates, you may find that the format `yyyy-mm-dd` misbehaves. This

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form


id: create-author-form-learn-web-development-mdn-20260505-2
category: reference
title: Create Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:23.166787+00:00
instance: kb-cron
parent: create-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form-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 Jul 18, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/forms/create_author_form/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/forms/create_author_form \(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%2FServer-side%2FExpress_Nodejs%2Fforms%2FCreate_author_form&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%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fcreate_author_form%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fforms%2FCreate_author_form%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fcreate_author_form%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F8443cb34d9944d8eb8e2c5add598bec26ed6d21f%0A*+Document+last+modified%3A+2025-07-18T00%3A38%3A58.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/Server-side/Express_Nodejs/forms/Create_author_form


id: create-author-form-learn-web-development-mdn-20260505-3
category: reference
title: Create Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:23.166787+00:00
instance: kb-cron
parent: create-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_author_form-3.md


id: create-book-form-learn-web-development-mdn-20260505-0
category: reference
title: Create Book form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:25.817286+00:00
instance: kb-cron
parent: create-book-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form#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/Server-side/Express_Nodejs/forms/Create_book_form


id: create-book-form-learn-web-development-mdn-20260505-1
category: reference
title: Create Book form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:25.817286+00:00
instance: kb-cron
parent: create-book-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form-1.md

summary:
**Note:** If there is an error in the submitted form, then, when the form is to be re-rendered, the new book author's id and the existing books's authors ids are of type `Schema.Types.ObjectId`. So to compare them we must convert them to strings first. ## [What does it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form#what_does_it_look_like) Run the application, open your browser to `http://localhost:3000/`, then select the _Create new book_ link. If everything is set up correctly, your site should look something like the following screenshot. After you submit a valid book, it should be saved and you'll be taken to the book detail page. ![Screenshot of empty Local library Create Book form on localhost:3000. The page is divided into two columns. The narrow left column has a vertical navigation bar with 10 links separated into two sections by a light-colored horizontal line. The top section link to already created data. The bottom links go to create new data forms. The wide right column has the create book form with a 'Create Book' heading and four input fields labeled 'Title', 'Author', 'Summary', 'ISBN' and 'Genre' followed by four genre checkboxes: fantasy, science fiction, french poetry and action. There is a 'Submit' button at the bottom of

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form


id: create-book-form-learn-web-development-mdn-20260505-2
category: reference
title: Create Book form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:25.817286+00:00
instance: kb-cron
parent: create-book-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form-2.md

summary:
[Server MIME type config](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types) 3. [Plain Node.js server](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework) 25. [Web performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance) 1. [The "why" of web performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance) 2. [What is web performance?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance) 3. [Perceived performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance) 4. [Measuring performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance) 5. [Multimedia: Images](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia) 6. [Multimedia: video](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/video) 7. [Performant JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript) 8. [Performant HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/HTML) 9. [Performant CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS) 10. [Performance business case](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance) 11. [Best practices & tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices) 26. [Testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing) 1. [Introduction](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction) 2. [Testing strategies](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies) 3. [Common HTML and CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS) 4. [Feature detection](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection) 5. [Automated testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing) 6. [Automation environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment) 27. Further resources 28. [How to solve common problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto) 1. [Common CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems) 2. [Common HTML problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems) 3. [Common JavaScript problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems) 4. [Design and accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility) 5. [Tools and setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup) 6. [Web mechanics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics) 29. [About](https://developer.mozilla.org/en-US/docs/Learn_web_development/About) 30. [Resources for educators](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators) 31. [Changelog](https://developer.mozilla.org/en-US/docs/Learn_web_development/Changelog) [MDN](https://developer.mozilla.org/) Your blueprint for a better internet. * [](https://github.com/mdn/) * [](https://bsky.app/profile/developer.mozilla.org) * [](https://x.com/mozdevnet) * [](https://mastodon.social/@mdn) * [](https://developer.mozilla.org/en-US/blog/rss.xml) MDN * [ About ](https://developer.mozilla.org/en-US/about) * [ Blog ](https://developer.mozilla.org/en-US/blog/) * [ Mozilla careers ](https://www.mozilla.org/en-US/careers/listings/) * [ Advertise with us ](https://developer.mozilla.org/en-US/advertising) * [ MDN Plus ](https://developer.mozilla.org/en-US/plus) * [ Product help ](https://support.mozilla.org/products/mdn-plus) Contribute * [ MDN Community ](https://developer.mozilla.org/en-US/community) * [ Community resources ](https://developer.mozilla.org/en-US/docs/MDN/Community) * [ Writing guidelines ](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines) * [ MDN Discord ](https://developer.mozilla.org/discord) * [ MDN on GitHub ](https://github.com/mdn) Developers * [ Web technologies ](https://developer.mozilla.org/en-US/docs/Web) * [ Learn web development

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_book_form


id: create-genre-form-learn-web-development-mdn-20260505-0
category: reference
title: Create genre form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:28.444935+00:00
instance: kb-cron
parent: create-genre-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form#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/Server-side/Express_Nodejs/forms/Create_genre_form


id: create-genre-form-learn-web-development-mdn-20260505-1
category: reference
title: Create genre form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:28.444935+00:00
instance: kb-cron
parent: create-genre-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form-1.md

summary:
## [Import validation and sanitization methods](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form#import_validation_and_sanitization_methods) To use the _express-validator_ in our controllers we have to _require_ the functions we want to use from the `'express-validator'` module. Open **/controllers/genreController.js** , and add the following line at the top of the file, before any route handler functions: Note that `require("express-validator")` is just a function call that returns an object, and we [destructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring) the two properties, `body` and `validationResult`, from the object, so we can use them as variables directly. ## [Controller—get route](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form#controller%E2%80%94get_route) Find the exported `genre_create_get()` controller method and replace it with the following code. This renders the **genre_form.pug** view, passing a title variable. ## [Controller—post route](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form#controller%E2%80%94post_route) Find the exported `genre_create_post()` controller method and replace it with the following code. The first thing to note is that instead of being a single middleware function (with arguments `(req, res, next)`) the controller specifies an _array_ of middleware functions. The array is passed to the router function and each method is called in order. **Note:** This approach is needed, because the validators are middleware functions. The first method in the array defines a body validator (`body()`) that validates and sanitizes the field. This uses `trim()` to remove any trailing/leading whitespace, checks that the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form


id: create-genre-form-learn-web-development-mdn-20260505-2
category: reference
title: Create genre form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:28.444935+00:00
instance: kb-cron
parent: create-genre-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form-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 Jul 18, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/forms/create_genre_form/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/forms/create_genre_form \(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%2FServer-side%2FExpress_Nodejs%2Fforms%2FCreate_genre_form&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%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fcreate_genre_form%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fforms%2FCreate_genre_form%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fcreate_genre_form%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F8443cb34d9944d8eb8e2c5add598bec26ed6d21f%0A*+Document+last+modified%3A+2025-07-18T00%3A38%3A58.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/Server-side/Express_Nodejs/forms/Create_genre_form


id: create-genre-form-learn-web-development-mdn-20260505-3
category: reference
title: Create genre form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:28.444935+00:00
instance: kb-cron
parent: create-genre-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Create_genre_form-3.md


id: delete-author-form-learn-web-development-mdn-20260505-0
category: reference
title: Delete Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:31.179132+00:00
instance: kb-cron
parent: delete-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form#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/Server-side/Express_Nodejs/forms/Delete_author_form


id: delete-author-form-learn-web-development-mdn-20260505-1
category: reference
title: Delete Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:31.179132+00:00
instance: kb-cron
parent: delete-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form-1.md

summary:
## [Add a delete control](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form#add_a_delete_control) Next we will add a **Delete** control to the _Author detail_ view (the detail page is a good place from which to delete a record). **Note:** In a full implementation the control would be made visible only to authorized users. However at this point we haven't got an authorization system in place! Open the **author_detail.pug** view and add the following lines at the bottom. The control should now appear as a link, as shown below on the _Author detail_ page. ![The Author details section of the Local library application. The left column has a vertical navigation bar. The right section contains the author details with a heading that has the Author's name followed by the life dates of the author and lists the books written by the author below it. There is a button labelled 'Delete Author' at the bottom.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form/locallibary_express_author_detail_delete.png) ## [What does it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form#what_does_it_look_like) Run the application and open your browser to `http://localhost:3000/`. Then select the _All authors_ link, and then select a particular author. Finally select the _Delete author_ link. If the author has no books, you'll be presented with a page like this. After pressing delete, the server will delete the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form


id: delete-author-form-learn-web-development-mdn-20260505-2
category: reference
title: Delete Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:31.179132+00:00
instance: kb-cron
parent: delete-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form-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 Jul 18, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form \(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%2FServer-side%2FExpress_Nodejs%2Fforms%2FDelete_author_form&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%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fdelete_author_form%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fforms%2FDelete_author_form%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fdelete_author_form%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F8443cb34d9944d8eb8e2c5add598bec26ed6d21f%0A*+Document+last+modified%3A+2025-07-18T00%3A38%3A58.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/Server-side/Express_Nodejs/forms/Delete_author_form


id: delete-author-form-learn-web-development-mdn-20260505-3
category: reference
title: Delete Author form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:31.179132+00:00
instance: kb-cron
parent: delete-author-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Delete_author_form-3.md


id: update-book-form-learn-web-development-mdn-20260505-0
category: reference
title: Update Book form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:33.684989+00:00
instance: kb-cron
parent: update-book-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form#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/Server-side/Express_Nodejs/forms/Update_Book_form


id: update-book-form-learn-web-development-mdn-20260505-1
category: reference
title: Update Book form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:33.684989+00:00
instance: kb-cron
parent: update-book-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form-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 Oct 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/forms/update_book_form/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/forms/update_book_form \(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%2FServer-side%2FExpress_Nodejs%2Fforms%2FUpdate_Book_form&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%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fupdate_book_form%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fforms%2FUpdate_Book_form%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fforms%2Fupdate_book_form%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.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form


id: update-book-form-learn-web-development-mdn-20260505-2
category: reference
title: Update Book form - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:33.684989+00:00
instance: kb-cron
parent: update-book-form-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms/Update_Book_form


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#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/Server-side/Express_Nodejs/mongoose


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-1
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-1.md

summary:
The very best _performance_ can be gained by using SQL, or whatever query language is supported by the database. Object mappers are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the mapper supports different database backends, and must make greater compromises in terms of what database features are supported). The benefit of using an ORM/ODM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform data validation. **Note:** Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM. ### [What ORM/ODM should I use?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#what_ormodm_should_i_use) There are many ODM/ORM solutions available on the npm package manager site (check out the [odm](https://www.npmjs.com/search?q=keywords:odm) and [orm](https://www.npmjs.com/search?q=keywords:orm) tags for a subset!). A few solutions that were popular at the time of writing are: * [Mongoose](https://www.npmjs.com/package/mongoose): Mongoose is a [MongoDB](https://www.mongodb.com/)

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-2
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-2.md

summary:
As a general rule, you should consider both the features provided and the "community activity" (downloads, contributions, bug reports, quality of documentation, etc.) when selecting a solution. At the time of writing Mongoose is by far the most popular ODM, and is a reasonable choice if you're using MongoDB for your database. ### [Using Mongoose and MongoDB for the LocalLibrary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#using_mongoose_and_mongodb_for_the_locallibrary) For the _Local Library_ example (and the rest of this topic) we're going to use the [Mongoose ODM](https://www.npmjs.com/package/mongoose) to access our library data. Mongoose acts as a front end to [MongoDB](https://www.mongodb.com/company/what-is-mongodb), an open source [NoSQL](https://en.wikipedia.org/wiki/NoSQL) database that uses a document-oriented data model. A "collection" of "documents" in a MongoDB database [is analogous to](https://www.mongodb.com/docs/manual/core/databases-and-collections/) a "table" of "rows" in a relational database. This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers. **Note:** You don't need to know MongoDB in order to use Mongoose, although parts of the [Mongoose documentation](https://mongoosejs.com/docs/guide.html) _are_ easier to use and understand if you are already familiar with MongoDB. The rest of this tutorial shows how to define and access the Mongoose schema and models

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-3
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-3.md

summary:
If the methods don't depend on each other then you can run them in parallel and finish the whole operation more quickly. This is done using the [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) method, which takes an iterable of promises as input and returns a single `Promise`. This returned promise fulfills when all of the input's promises fulfill, with an array of the fulfillment values. It rejects when any of the input's promises rejects, with this first rejection reason. The code below shows how this works. First, we have two functions that return promises. We `await` on both of them to complete using the promise returned by `Promise.all()`. Once they both complete `await` returns and the results array is populated, the function then continues to the next `await`, and waits until the promise returned by `anotherFunctionThatReturnsPromise()` is settled. You would call the `myFunction()` in a `try...catch` block to catch any errors. Promises with `await`/`async` allow both flexible and "comprehensible" control over asynchronous execution! ## [Mongoose primer](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#mongoose_primer) This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. **Note:** This primer is heavily influenced by the [Mongoose quick start](https://www.npmjs.com/package/mongoose)


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-4
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-4.md

summary:
The code also shows both ways of declaring a field: * Field _name_ and _type_ as a key-value pair (i.e., as done with fields `name`, `binary` and `living`). * Field _name_ followed by an object defining the `type`, and any other _options_ for the field. Options include things like: * default values. * built-in validators (e.g., max/min values) and custom validation functions. * Whether the field is required * Whether `String` fields should automatically be set to lowercase, uppercase, or trimmed (e.g., `{ type: String, lowercase: true, trim: true }`) For more information about options see [SchemaTypes](https://mongoosejs.com/docs/schematypes.html) (Mongoose docs). #### Validation Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range of values and the error message for validation failure in all cases. The built-in validators include: * All [SchemaTypes](https://mongoosejs.com/docs/schematypes.html) have the built-in [required](https://mongoosejs.com/docs/api.html#schematype_SchemaType-required) validator. This is used to specify whether the field must be supplied in order to save a document. * [Numbers](https://mongoosejs.com/docs/api/schemanumber.html) have [min](https://mongoosejs.com/docs/api/schemanumber.html#SchemaNumber.prototype.min\(\)) and [max](https://mongoosejs.com/docs/api/schemanumber.html#SchemaNumber.prototype.max\(\)) validators. * [Strings](https://mongoosejs.com/docs/api/schemastring.html) have: * [enum](https://mongoosejs.com/docs/api/schemastring.html#SchemaString.prototype.enum\(\)): specifies the set of allowed values for the field. * [match](https://mongoosejs.com/docs/api/schemastring.html#SchemaString.prototype.match\(\)): specifies a regular expression that the string must match. * [maxLength](https://mongoosejs.com/docs/api/schemastring.html#SchemaString.prototype.maxlength\(\)) and [minLength](https://mongoosejs.com/docs/api/schemastring.html#SchemaString.prototype.minlength\(\)) for the


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-5
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-5.md

summary:
**Note:** There is also a [`countDocuments()`](https://mongoosejs.com/docs/api/model.html#Model.countDocuments\(\)) method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records. There is a lot more you can do with queries. For more information see: [Queries](https://mongoosejs.com/docs/queries.html) (Mongoose docs). #### Working with related documents — population You can create references from one document/model instance to another using the `ObjectId` schema field, or from one document to many using an array of `ObjectIds`. The field stores the id of the related model. If you need the actual content of the associated document, you can use the [`populate()`](https://mongoosejs.com/docs/populate.html) method in a query to replace the id with the actual data. For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of `ObjectId`. Each story can have a single author. The `ref` property tells the schema which model can be assigned to this field. We can save our references to the related document by assigning the `_id` value. Below we create an author, then a story, and assign the author id to our story's author field. **Note:** One great


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-6
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-6.md

summary:
![Configure connection after setting up a cluster in MongoDB Atlas.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose/mongodb_atlas_-_connectbutton.jpg) 11. This will open the _Connect to Cluster0_ screen. ![Choose the Short SRV connection when setting up a connection on MongoDB Atlas.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose/mongodb_atlas_-_connectforshortsrv.jpg) * Select your database user. * Select the _Drivers_ category, then the _Driver_ **Node.js** and _Version_ as shown. * **DO NOT** install the driver as suggested. * Click the **Copy** icon to copy the connection string. * Paste this in your local text editor. * Replace `<password>` placeholder in the connection string with your user's password. * Insert the database name "local_library" in the path before the options (`...mongodb.net/local_library?retryWrites...`) * Save the file containing this string somewhere safe.


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-7
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-7.md

summary:
You have now created the database, and have a URL (with username and password) that can be used to access it. This will look something like: `mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority&appName=Cluster0` ## [Install Mongoose](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#install_mongoose) Open a command prompt and navigate to the directory where you created your [skeleton Local Library website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website). Enter the following command to install Mongoose (and its dependencies) and add it to your **package.json** file, unless you have already done so when reading the [Mongoose Primer](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#installing_mongoose_and_mongodb) above. ## [Connect to MongoDB](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#connect_to_mongodb) Open **bin/www** (from the root of your project) and copy the following text below where you set the port (after the line `app.set("port", port);`). Replace the database URL string ('_insert_your_database_url_here_ ') with the location URL representing your own database (i.e., using the information from _MongoDB Atlas_). As discussed in the [Mongoose primer](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#connecting_to_mongodb) above, this code creates the default connection to the database and reports any errors to the console. **Note:** We could have put the database connection code in our **app.js** code. Putting it in the application entry point decouples the application and database, which makes it easier to use a different database for running test code. Note that hard-coding database credentials in source code as shown above is not


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-8
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-8.md

summary:
**Note:** Go to your database on MongoDB Atlas (in the _Collections_ tab). You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#summary) In this article, we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement `Book`, `BookInstance`, `Author` and `Genre` models for the _LocalLibrary_ website. Last of all, we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#see_also) * [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs) * [Mongoose website](https://mongoosejs.com/) (Mongoose docs) * [Mongoose Guide](https://mongoosejs.com/docs/guide.html) (Mongoose docs) * [Validation](https://mongoosejs.com/docs/validation.html) (Mongoose docs) * [Schema Types](https://mongoosejs.com/docs/schematypes.html) (Mongoose docs) * [Models](https://mongoosejs.com/docs/models.html) (Mongoose docs) * [Queries](https://mongoosejs.com/docs/queries.html) (Mongoose docs) * [Population](https://mongoosejs.com/docs/populate.html) (Mongoose docs) * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website) * [ Overview: Express web framework (Node.js/JavaScript)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes) ## 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 19, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose \(Opens in a new tab\)") • [Report a problem


id: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-9
category: reference
title: Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:36.213313+00:00
instance: kb-cron
parent: express-tutorial-part-3-using-a-database-with-mongoose-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose-9.md


id: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
category: reference
title: Express Tutorial Part 4: Routes and controllers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:39.098578+00:00
instance: kb-cron
parent: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#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/Server-side/Express_Nodejs/routes


id: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-1
category: reference
title: Express Tutorial Part 4: Routes and controllers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:39.098578+00:00
instance: kb-cron
parent: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes-1.md

summary:
![Main data flow diagram of an MVC express server: 'Routes' receive the HTTP requests sent to the Express server and forward them to the appropriate 'controller' function. The controller reads and writes data from the models. Models are connected to the database to provide data access to the server. Controllers use 'views', also called templates, to render the data. The Controller sends the HTML HTTP response back to the client as an HTTP response.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes/mvc_express.png) Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data. The first section below provides a brief "primer" on how to use the Express [Router](https://expressjs.com/en/5x/api.html#router) middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes. ## [Routes primer](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#routes_primer) A route is a section of Express code that associates an [HTTP verb](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods) (`GET`, `POST`, `PUT`, `DELETE`, etc.), a URL path/pattern, and a function that

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes


id: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-2
category: reference
title: Express Tutorial Part 4: Routes and controllers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:39.098578+00:00
instance: kb-cron
parent: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes-2.md

summary:
We can extract this information as shown below, with the `userId` and `bookId` path parameters: **Note:** The URL _/book/create_ will be matched by a route like `/book/:bookId` (because `:bookId` is a placeholder for _any_ string, therefore `create` matches). The first route that matches an incoming URL will be used, so if you want to process `/book/create` URLs specifically, their route handler must be defined before your `/book/:bookId` route. Route parameter names (for example, `bookId`, above) can be any valid JavaScript identifier that starts with a letter, `_`, or `$`. You can include digits after the first character, but not hyphens and spaces. You can also use names that aren't valid JavaScript identifiers, including spaces, hyphens, emoticons, or any other character, but you need to define them with a quoted string and access them using bracket notation. For example: ### [Wildcards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#wildcards) Wildcard parameters match one or more characters across multiple segments, returning each segment as a value in an array. They are defined the same way as regular parameters, but are prefixed with an asterisk. So for example, consider the URL `http://localhost:3000/users/34/books/8989`, we can extract all the information after `users/` with the `example` wildcard: ### [Optional parts](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#optional_parts) Braces can be used

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes


id: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-3
category: reference
title: Express Tutorial Part 4: Routes and controllers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:39.098578+00:00
instance: kb-cron
parent: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes-3.md

summary:
The first home page and list pages don't encode any additional information. While the results returned will depend on the model type and the content in the database, the queries run to get the information will always be the same (similarly the code run for object creation will always be similar). By contrast the other URLs are used to act on a specific document/model instance—these encode the identity of the item in the URL (shown as `<id>` above). We'll use path parameters to extract the encoded information and pass it to the route handler (and in a later article we'll use this to dynamically determine what information to get from the database). By encoding the information in our URL we only need one route for every resource of a particular type (e.g., one route to handle the display of every single book item). **Note:** Express allows you to construct your URLs any way you like — you can encode information in the body of the URL as shown above or use URL `GET` parameters (e.g., `/book/?id=6`). Whichever approach you use, the URLs should be kept clean, logical and readable ([check out the W3C advice here](https://www.w3.org/Provider/Style/URI)). Next we create our route


id: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-4
category: reference
title: Express Tutorial Part 4: Routes and controllers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:39.098578+00:00
instance: kb-cron
parent: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes-4.md

summary:
## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#summary) We've now created all the routes for our site, along with dummy controller functions that we can populate with a full implementation in later articles. Along the way we've learned a lot of fundamental information about Express routes, handling exceptions, and some approaches for structuring our routes and controllers. In our next article we'll create a proper welcome page for the site, using views (templates) and information stored in our models. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#see_also) * [Basic routing](https://expressjs.com/en/starter/basic-routing.html) (Express docs) * [Routing guide](https://expressjs.com/en/guide/routing.html) (Express docs) * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose) * [ Overview: Express web framework (Node.js/JavaScript)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data) ## 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 16, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/routes/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/routes \(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%2FServer-side%2FExpress_Nodejs%2Froutes&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%2Fserver-side%2Fexpress_nodejs%2Froutes%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Froutes%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Froutes%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fd1bfebdc3cb5663f82ffd12188729002db600e10%0A*+Document+last+modified%3A+2026-02-16T22%3A27%3A14.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)


id: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-5
category: reference
title: Express Tutorial Part 4: Routes and controllers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:39.098578+00:00
instance: kb-cron
parent: express-tutorial-part-4-routes-and-controllers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes-5.md


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#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/Server-side/Express_Nodejs/skeleton_website


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-1
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-1.md

summary:
## [Using the application generator](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#using_the_application_generator) You should already have installed the generator as part of [setting up a Node development environment](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment). As a quick reminder, you install the generator tool site-wide using the npm package manager, as shown: The generator has a number of options, which you can view on the command line using the `--help` (or `-h`) command: You can specify express to create a project inside the _current_ directory using the _Jade_ view engine and plain CSS (if you specify a directory name then the project will be created in a sub-folder with that name). You can also choose a view (template) engine using `--view` and/or a CSS generation engine using `--css`. **Note:** The other options for choosing template engines (e.g., `--hogan`, `--ejs`, `--hbs` etc.) are deprecated. Use `--view` (or `-v`). ### [What view engine should I use?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#what_view_engine_should_i_use) The _Express Application Generator_ allows you to configure a number of popular view/templating engines, including [EJS](https://www.npmjs.com/package/ejs), [Hbs](https://github.com/pillarjs/hbs), [Pug](https://pugjs.org/api/getting-started.html) (Jade), [Twig](https://www.npmjs.com/package/twig), and [Vash](https://www.npmjs.com/package/vash), although it chooses Jade by default if you don't specify a view option. Express itself can also support a large number of other templating languages [out of the box](https://github.com/expressjs/express/wiki#template-engines). **Note:** If you want to use a template engine

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-2
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-2.md

summary:
At the end of the output, the generator provides instructions on how to install the dependencies (as listed in the **package.json** file) and how to run the application on different operating systems. **Note:** The generator-created files define all variables as `var`. Open all of the generated files and change the `var` declarations to `const` before you continue (the remainder of the tutorial assumes that you have done so). ## [Running the skeleton website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#running_the_skeleton_website) At this point, we have a complete skeleton project. The website doesn't actually _do_ very much yet, but it's worth running it to show that it works. 1. First, install the dependencies (the `install` command will fetch all the dependency packages listed in the project's **package.json** file). 2. Then run the application. * On the Windows CMD prompt, use this command: * On Windows PowerShell, use this command: **Note:** PowerShell commands are not covered in this tutorial (The provided "Windows" commands assume you're using the Windows CMD prompt.) * On macOS or Linux, use this command: 3. Then load `http://localhost:3000/` in your browser to access the app. You should see a browser page that looks like this: ![Browser for default Express app generator website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website/expressgeneratorskeletonwebsite.png) Congratulations! You now

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-3
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-3.md

summary:
The following sections describe the files in a little more detail. ### [package.json](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#package.json) The **package.json** file defines the application dependencies and other information: The scripts section first defines a "_start_ " script, which is what we are invoking when we call `npm start` to start the server (this script was added by the _Express Application Generator_). From the script definition, you can see that this actually starts the JavaScript file **./bin/www** with _node_. We already modified this section in [Enable server restart on file changes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#enable_server_restart_on_file_changes) by adding the _devstart_ and _serverstart_ scripts. These can be used to start the same **./bin/www** file with _nodemon_ rather than _node_ (this version of the scripts is for Linux and macOS, as discussed above). The dependencies include the _express_ package and the package for our selected view engine (_pug_). In addition, we have the following packages that are useful in many web applications: * [cookie-parser](https://www.npmjs.com/package/cookie-parser): Used to parse the cookie header and populate `req.cookies` (essentially provides a convenient method for accessing cookie information). * [debug](https://www.npmjs.com/package/debug): A tiny node debugging utility modeled after node core's debugging technique. * [morgan](https://www.npmjs.com/package/morgan): An HTTP request logger middleware for node. * [http-errors](https://www.npmjs.com/package/http-errors): Create HTTP errors where needed (for express


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-4
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-4.md

summary:
The default versions in the generated project are a little out of date. Replace the dependencies section of your `package.json` file with the following text, which specifies the latest versions of these libraries at the time of writing: Then update your installed dependencies using the command: **Note:** It is a good idea to regularly update to the latest compatible versions of your dependency libraries — this may even be done automatically or semi-automatically as part of a [continuous integration](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_integration) setup. Usually library updates to the minor and patch version remain compatible. We've prefixed each version with `^` above so that we can automatically update to the latest `minor.patch` version by running: Major versions change the compatibility. For those updates we'll need to manually update the `package.json` and code that uses the library, and extensively re-test the project. ### [www file](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#www_file) The file **/bin/www** is the application entry point! The very first thing this does is `require()` the "real" application entry point (**app.js** , in the project root) that sets up and returns the [`express()`](https://expressjs.com/en/api.html) application object. `require()` is the [CommonJS way](https://nodejs.org/api/modules.html) to import JavaScript code, JSON, and other files into the current file. Here we specify **app.js** module using a


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-5
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-5.md

summary:
Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library. Next, we'll start modifying the skeleton so that it works as a library website. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website#see_also) * [Express application generator](https://expressjs.com/en/starter/generator.html) (Express docs) * [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs)


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-6
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-6.md

summary:
* [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website) * [ Overview: Express web framework (Node.js/JavaScript)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose) ## 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 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website \(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%2FServer-side%2FExpress_Nodejs%2Fskeleton_website&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%2Fserver-side%2Fexpress_nodejs%2Fskeleton_website%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fskeleton_website%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fskeleton_website%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F79f65d8322a4e55e9f3f4c91441c9188dbe670e0%0A*+Document+last+modified%3A+2025-10-09T17%3A10%3A13.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)


id: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-7
category: reference
title: Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:41.738058+00:00
instance: kb-cron
parent: express-tutorial-part-2-creating-a-skeleton-website-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website-7.md


id: server-side-website-programming-first-steps-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps-0.md
category: reference
title: Server-side website programming first steps - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps
date_saved: 2026-05-05T06:02:44.230716+00:00
instance: kb-cron
parent: server-side-website-programming-first-steps-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps#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: server-side-website-programming-first-steps-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps-1.md
category: reference
title: Server-side website programming first steps - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps
date_saved: 2026-05-05T06:02:44.230716+00:00
instance: kb-cron
parent: server-side-website-programming-first-steps-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/Server-side/First_steps/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/first_steps/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/first_steps \(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%2FServer-side%2FFirst_steps&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%2Fserver-side%2Ffirst_steps%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FFirst_steps%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Ffirst_steps%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: client-server-overview-learn-web-development-mdn-20260505-0
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#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/Server-side/First_steps/Client-Server_overview


id: client-server-overview-learn-web-development-mdn-20260505-1
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-1.md

summary:
Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains an [HTTP Response status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status) indicating whether or not the request succeeded (e.g., [`200 OK`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/200) for success, [`404 Not Found`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404) if the resource cannot be found, [`403 Forbidden`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/403) if the user isn't authorized to see the resource, etc.). The body of the response to a successful `GET` request contains the requested resource. When an HTML page is returned, it is rendered by the web browser. As part of processing, the browser may discover links to other resources (e.g., an HTML page usually references JavaScript and CSS files), and will send separate HTTP Requests to download these files. Both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/patterns. ### [GET request/response example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#get_requestresponse_example) You can make a simple `GET` request by clicking on a link or searching on a site (like a search engine homepage). For example, the HTTP request that is sent when you perform a search on MDN for the term "client-server overview" will look a lot like the text shown below (it will not be identical because

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview


id: client-server-overview-learn-web-development-mdn-20260505-2
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-2.md

summary:
At the end of the message we see the **body** content — which contains the actual HTML returned by the request. The remainder of the response header includes information about the response (e.g., when it was generated), the server, and how it expects the browser to handle the page (e.g., the `X-Frame-Options: DENY` line tells the browser not to allow this page to be embedded in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) in another site). ### [POST request/response example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#post_requestresponse_example) An HTTP `POST` is made when you submit a form containing information to be saved on the server. #### The request The text below shows the HTTP request made when a user submits new profile details on this site. The format of the request is almost the same as the `GET` request example shown previously, though the first line identifies this request as a `POST`. The main difference is that the URL doesn't have any parameters. As you can see, the information from the form is encoded in the body of the request (for example, the new user fullname is set using: `&user-fullname=Hamish+Willee`). #### The response The response from the request is shown below. The status code of `302 Found` tells the browser that the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview


id: client-server-overview-learn-web-development-mdn-20260505-3
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-3.md

summary:
The _Web Application_ dynamically creates an HTML page by putting the data (from the _Database_) into placeholders inside an HTML template. 5. The _Web Application_ returns the generated HTML to the web browser (via the _Web Server_), along with an HTTP status code of 200 ("success"). If anything prevents the HTML from being returned then the _Web Application_ will return another code — for example "404" to indicate that the team does not exist. 6. The Web Browser will then start to process the returned HTML, sending separate requests to get any other CSS or JavaScript files that it references (see step 7). 7. The Web Server loads static files from the file system and returns them to the browser directly (again, correct file handling is based on configuration rules and URL pattern matching).


id: client-server-overview-learn-web-development-mdn-20260505-4
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-4.md

summary:
An operation to update a record in the database would be handled similarly, except that like any database update, the HTTP request from the browser should be encoded as a `POST` request. ### [Doing other work](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#doing_other_work) A _Web Application's_ job is to receive HTTP requests and return HTTP responses. While interacting with a database to get or update information are very common tasks, the code may do other things at the same time, or not interact with a database at all. A good example of an additional task that a _Web Application_ might perform would be sending an email to users to confirm their registration with the site. The site might also perform logging or other operations. ### [Returning something other than HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview#returning_something_other_than_html) Server-side website code does not have to return HTML snippets/files in the response. It can instead dynamically create and return other types of files (text, PDF, CSV, etc.) or even data (JSON, XML, etc.). This is especially relevant for websites that work by fetching content from the server using JavaScript and updating the page dynamically, rather than always loading a new page when new content is to be shown. See [Making network requests with JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests) for more


id: client-server-overview-learn-web-development-mdn-20260505-5
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-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 Jun 23, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/first_steps/client-server_overview/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/first_steps/client-server_overview \(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%2FServer-side%2FFirst_steps%2FClient-Server_overview&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%2Fserver-side%2Ffirst_steps%2Fclient-server_overview%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FFirst_steps%2FClient-Server_overview%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Ffirst_steps%2Fclient-server_overview%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.


id: client-server-overview-learn-web-development-mdn-20260505-6
category: reference
title: Client-server overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:46.503644+00:00
instance: kb-cron
parent: client-server-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview-6.md


id: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
category: reference
title: Introduction to the server side - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:48.913329+00:00
instance: kb-cron
parent: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/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/Server-side/First_steps/Introduction


id: introduction-to-the-server-side-learn-web-development-mdn-20260505-1
category: reference
title: Introduction to the server side - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:48.913329+00:00
instance: kb-cron
parent: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction-1.md

summary:
## [What is server-side website programming?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction#what_is_server-side_website_programming) Web browsers communicate with [web servers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server) using the **H** yper**T** ext **T** ransfer **P** rotocol ([HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)). When you click a link on a web page, submit a form, or run a search, an **HTTP request** is sent from your browser to the target server. The request includes a URL identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in URL parameters (the field-value pairs sent via a [query string](https://en.wikipedia.org/wiki/Query_string)), as POST data (data sent by the [HTTP POST method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/POST)), or in associated [cookies](https://developer.mozilla.org/en-US/docs/Glossary/Cookie). Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an **HTTP response** message. The response contains a status line indicating whether or not the request succeeded (e.g., "HTTP/1.1 200 OK" for success). The body of a successful response to a request would contain the requested resource (e.g., a new HTML page, or an image), which could then be displayed by the web browser. ### [Static sites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction#static_sites) The diagram below shows a basic web server architecture for a _static site_ (a static site is one

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction


id: introduction-to-the-server-side-learn-web-development-mdn-20260505-2
category: reference
title: Introduction to the server side - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:48.913329+00:00
instance: kb-cron
parent: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction-2.md

summary:
Code running in the browser is known as **client-side code** and is primarily concerned with improving the appearance and behavior of a rendered web page. This includes selecting and styling UI components, creating layouts, navigation, form validation, etc. By contrast, server-side website programming mostly involves choosing _which content_ is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required. Client-side code is written using [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content), [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) — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system). Web developers can't control what browser every user might be using to view a website — browsers provide inconsistent levels of compatibility with client-side code features, and part of the challenge of client-side programming is handling differences in browser support gracefully. Server-side code can be written in any number of programming languages — examples of popular server-side web languages include PHP, Python, Ruby, C#, and JavaScript (NodeJS). The server-side code has full access to the server operating system and the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction


id: introduction-to-the-server-side-learn-web-development-mdn-20260505-3
category: reference
title: Introduction to the server side - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:48.913329+00:00
instance: kb-cron
parent: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction-3.md

summary:
Coincidence? Nada! ### [Controlled access to content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction#controlled_access_to_content) Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see. Real-world examples include social-networking sites which allow users to determine who can see the content they post to the site, and whose content appears in their feed. **Note:** Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change? ### [Store session/state information](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction#store_sessionstate_information) Server-side programming allows developers to make use of **sessions** — basically, a mechanism that allows a server to store information associated with the current user of a site and send different responses based on that information. This allows, for example, a site to know that a user has previously logged in and display links to their emails or order history, or perhaps save the state of a simple game so that the user can go to a site again and carry on where they left it. **Note:** Visit


id: introduction-to-the-server-side-learn-web-development-mdn-20260505-4
category: reference
title: Introduction to the server side - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:48.913329+00:00
instance: kb-cron
parent: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/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 Jun 24, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/first_steps/introduction/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/first_steps/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%2FServer-side%2FFirst_steps%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%2Fserver-side%2Ffirst_steps%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FFirst_steps%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Ffirst_steps%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fa84b606ffd77c40a7306be6c932a74ab9ce6ab96%0A*+Document+last+modified%3A+2025-06-24T06%3A12%3A11.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-the-server-side-learn-web-development-mdn-20260505-5
category: reference
title: Introduction to the server side - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:48.913329+00:00
instance: kb-cron
parent: introduction-to-the-server-side-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction-5.md


id: server-side-web-frameworks-learn-web-development-mdn-20260505-0
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#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/Server-side/First_steps/Web_frameworks


id: server-side-web-frameworks-learn-web-development-mdn-20260505-1
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-1.md

summary:
## [Overview](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#overview) Server-side web frameworks (a.k.a. "web application frameworks") are software frameworks that make it easier to write, maintain and scale web applications. They provide tools and libraries that simplify common web development tasks, including routing URLs to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g., HTML, JSON, XML), and improving security against web attacks. The next section provides a bit more detail about how web frameworks can ease web application development. We then explain some of the criteria you can use for choosing a web framework, and then list some of your options. ## [What can a web framework do for you?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#what_can_a_web_framework_do_for_you) Web frameworks provide tools and libraries to simplify common web development operations. You don't _have_ to use a server-side web framework, but it is strongly advised — it will make your life a lot easier. This section discusses some of the functionality that is often provided by web frameworks (not every framework will necessarily provide all of these features!). ### [Work directly with HTTP requests and responses](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#work_directly_with_http_requests_and_responses) As we saw in the last article, web servers and browsers communicate via the HTTP protocol — servers wait for HTTP requests from the browser

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks


id: server-side-web-frameworks-learn-web-development-mdn-20260505-2
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-2.md

summary:
For example, the Django web framework provides an ORM, and refers to the object used to define the structure of a record as the _model_. The model specifies the field _types_ to be stored, which may provide field-level validation on what information can be stored (e.g., an email field would only allow valid email addresses). The field definitions may also specify their maximum size, default values, selection list options, help text for documentation, label text for forms etc. The model doesn't state any information about the underlying database as that is a configuration setting that may be changed separately of our code. The first code snippet below shows a very simple Django model for a `Team` object. This stores the team name and team level as character fields and specifies a maximum number of characters to be stored for each record. The `team_level` is a choice field, so we also provide a mapping between choices to be displayed and data to be stored, along with a default value. The Django model provides a simple query API for searching the database. This can match against a number of fields at a time using different criteria (e.g., exact, case-insensitive, greater than, etc.),

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks


id: server-side-web-frameworks-learn-web-development-mdn-20260505-3
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-3.md

summary:
* **Scalability:** Once your website is fantastically successful you will exhaust the benefits of caching and even reach the limits of _vertical scaling_ (running your web application on more powerful hardware). At this point you may need to _scale horizontally_ (share the load by distributing your site across a number of web servers and databases) or scale "geographically" because some of your customers are based a long way away from your server. The web framework you choose can make a big difference on how easy it is to scale your site. * **Web security:** Some web frameworks provide better support for handling common web attacks. Django for example sanitizes all user input from HTML templates so that user-entered JavaScript cannot be run. Other frameworks provide similar protection, but it is not always enabled by default.


id: server-side-web-frameworks-learn-web-development-mdn-20260505-4
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-4.md

summary:
There are many other possible factors, including licensing, whether or not the framework is under active development, etc. If you're an absolute beginner at programming then you'll probably choose your framework based on "ease of learning". In addition to "ease of use" of the language itself, high quality documentation/tutorials and an active community helping new users are your most valuable resources. We've chosen [Django](https://www.djangoproject.com/) (Python) and [Express](https://expressjs.com/) (Node/JavaScript) to write our examples later on in the course, mainly because they are easy to learn and have good support. **Note:** Let's go to the main websites for [Django](https://www.djangoproject.com/) (Python) and [Express](https://expressjs.com/) (Node/JavaScript) and check out their documentation and community. 1. Navigate to the main sites (linked above) * Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started", etc.). * Can you see topics showing how to set up URL routing, templates, and databases/models? * Are the documents clear? 2. Navigate to mailing lists for each site (accessible from Community links). * How many questions have been posted in the last few days * How many have responses? * Do they have an active community? ## [A few good web frameworks?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#a_few_good_web_frameworks) Let's now move on, and


id: server-side-web-frameworks-learn-web-development-mdn-20260505-5
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-5.md

summary:
Deno provides an easy yet powerful way to use JavaScript for both client- and server-side programming. ### [Ruby on Rails (Ruby)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#ruby_on_rails_ruby) [Rails](https://rubyonrails.org/) (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language. Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON) or [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML). It similarly encourages the use of design patterns like DRY ("don't repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others. There are of course many differences due to specific design decisions and the nature of the languages. Rails has been used for high profile sites, including: [Basecamp](https://basecamp.com/), [GitHub](https://github.com/), [Shopify](https://www.shopify.com/), [Airbnb](https://www.airbnb.com/), [Twitch](https://www.twitch.tv/), [SoundCloud](https://soundcloud.com/), [Hulu](https://www.hulu.com/welcome), [Zendesk](https://www.zendesk.com/), [Square](https://squareup.com/us/en). ### [Laravel (PHP)](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks#laravel_php) [Laravel](https://laravel.com/) is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as: * [Simple, fast routing engine](https://laravel.com/docs/routing). * [Powerful dependency injection container](https://laravel.com/docs/container). * Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage. * Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent). * Database agnostic [schema migrations](https://laravel.com/docs/migrations).


id: server-side-web-frameworks-learn-web-development-mdn-20260505-6
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-6.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 28, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks \(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%2FServer-side%2FFirst_steps%2FWeb_frameworks&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%2Fserver-side%2Ffirst_steps%2Fweb_frameworks%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FFirst_steps%2FWeb_frameworks%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Ffirst_steps%2Fweb_frameworks%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F6aca3e5157dbc163fe8209d9bf8cc3f2e8ec3f9d%0A*+Document+last+modified%3A+2026-01-28T18%3A21%3A56.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: server-side-web-frameworks-learn-web-development-mdn-20260505-7
category: reference
title: Server-side web frameworks - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:51.198090+00:00
instance: kb-cron
parent: server-side-web-frameworks-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks-7.md


id: website-security-learn-web-development-mdn-20260505-0
category: reference
title: Website security - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:53.585410+00:00
instance: kb-cron
parent: website-security-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#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/Server-side/First_steps/Website_security


id: website-security-learn-web-development-mdn-20260505-1
category: reference
title: Website security - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:53.585410+00:00
instance: kb-cron
parent: website-security-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security-1.md

summary:
## [What is website security?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#what_is_website_security) The Internet is a dangerous place! With great regularity, we hear about websites becoming unavailable due to denial of service attacks, or displaying modified (and often damaging) information on their homepages. In other high-profile cases, millions of passwords, email addresses, and credit card details have been leaked into the public domain, exposing website users to both personal embarrassment and financial risk. The purpose of website security is to prevent these (or any) sorts of attacks. The more formal definition of website security _is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption_. Effective website security requires design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and the client-side code. While all that sounds very ominous, the good news is that if you're using a server-side web framework, it will almost certainly enable "by default" robust and well-thought-out defense mechanisms against a number of the more common attacks. Other attacks can be mitigated through your web server configuration, for example by enabling HTTPS. Finally, there are publicly available vulnerability scanner tools that can help you find

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security


id: website-security-learn-web-development-mdn-20260505-2
category: reference
title: Website security - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:53.585410+00:00
instance: kb-cron
parent: website-security-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security-2.md

summary:
While the data from `POST` or `GET` requests is the most common source of XSS vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed. The best defense against XSS vulnerabilities is to remove or disable any markup that can potentially contain instructions to run the code. For HTML this includes elements, such as `<script>`, `<object>`, `<embed>`, and `<link>`. The process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as input sanitization. Many web frameworks automatically sanitize user input from HTML forms by default. ### [SQL injection](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#sql_injection) SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. A successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable. SQL injection types include Error-based SQL injection, SQL injection based on boolean errors, and Time-based SQL injection. This vulnerability is present if user input that is passed to an

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security


id: website-security-learn-web-development-mdn-20260505-3
category: reference
title: Website security - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:53.585410+00:00
instance: kb-cron
parent: website-security-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security-3.md

summary:
For a comprehensive listing of website security threats see [Category: Web security exploits](https://en.wikipedia.org/wiki/Category:Web_security_exploits) (Wikipedia) and [Category: Attack](https://owasp.org/www-community/attacks/) (Open Web Application Security Project). ## [A few key messages](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security#a_few_key_messages) Almost all of the security exploits in the previous sections are successful when the web application trusts data from the browser. Whatever else you do to improve the security of your website, you should sanitize all user-originating data before it is displayed in the browser, used in SQL queries, or passed to an operating system or file system call. **Warning:** The single most important lesson you can learn about website security is to **never trust data from the browser**. This includes, but is not limited to data in URL parameters of `GET` requests, `POST` requests, HTTP headers and cookies, and user-uploaded files. Always check and sanitize all incoming data. Always assume the worst. A number of other concrete steps you can take are: * Use more effective password management. Encourage strong passwords. Consider two-factor authentication for your site, so that in addition to a password the user must enter another authentication code (usually one that is delivered via some physical hardware that only the user will have, such as a code in an


id: website-security-learn-web-development-mdn-20260505-4
category: reference
title: Website security - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:53.585410+00:00
instance: kb-cron
parent: website-security-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security-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 Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/server-side/first_steps/website_security/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/server-side/first_steps/website_security \(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%2FServer-side%2FFirst_steps%2FWebsite_security&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%2Fserver-side%2Ffirst_steps%2Fwebsite_security%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FFirst_steps%2FWebsite_security%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fserver-side%2Ffirst_steps%2Fwebsite_security%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: website-security-learn-web-development-mdn-20260505-5
category: reference
title: Website security - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:53.585410+00:00
instance: kb-cron
parent: website-security-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security-5.md


id: node-js-server-without-a-framework-learn-web-development-mdn-20260505-0
category: reference
title: Node.js server without a framework - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:55.860703+00:00
instance: kb-cron
parent: node-js-server-without-a-framework-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework#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/Server-side/Node_server_without_framework


id: node-js-server-without-a-framework-learn-web-development-mdn-20260505-1
category: reference
title: Node.js server without a framework - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:55.860703+00:00
instance: kb-cron
parent: node-js-server-without-a-framework-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework-1.md

summary:
## [Example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework#example) A static file server built with Node.js: ### [Breakdown](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework#breakdown) The following lines import internal Node.js modules. Next we have a function for creating the server. `https.createServer` returns a `Server` object, which we can start up by listening on `PORT`. The asynchronous function `prepareFile` returns the structure: `{ found: boolean, ext: string, stream: ReadableStream }`. If the file can be served (the server process has access and no path-traversal vulnerability is found), we will return the HTTP status of `200` as a `statusCode` indicating success (otherwise we return `HTTP 404`). Note that other status codes can be found in `http.STATUS_CODES`. With `404` status we will return content of `'/404.html'` file. The extension of the file being requested will be parsed and lower-cased. After that we will search `MIME_TYPES` collection for the right [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types). If no matches are found, we use the `application/octet-stream` as the default type. Finally, if there are no errors, we send the requested file. The `file.stream` will contain a `Readable` stream that will be piped into `res` (an instance of the `Writable` stream). ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Mar 27, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework/contributors.txt). [View this

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework


id: node-js-server-without-a-framework-learn-web-development-mdn-20260505-2
category: reference
title: Node.js server without a framework - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:02:55.860703+00:00
instance: kb-cron
parent: node-js-server-without-a-framework-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework-2.md

summary:
[Best practices & tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices) 26. [Testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing) 1. [Introduction](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction) 2. [Testing strategies](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies) 3. [Common HTML and CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS) 4. [Feature detection](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection) 5. [Automated testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing) 6. [Automation environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment) 27. Further resources 28. [How to solve common problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto) 1. [Common CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems) 2. [Common HTML problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems) 3. [Common JavaScript problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems) 4. [Design and accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility) 5. [Tools and setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup) 6. [Web mechanics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics) 29. [About](https://developer.mozilla.org/en-US/docs/Learn_web_development/About) 30. [Resources for educators](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators) 31. [Changelog](https://developer.mozilla.org/en-US/docs/Learn_web_development/Changelog) [MDN](https://developer.mozilla.org/) Your blueprint for a better internet. * [](https://github.com/mdn/) * [](https://bsky.app/profile/developer.mozilla.org) * [](https://x.com/mozdevnet) * [](https://mastodon.social/@mdn) * [](https://developer.mozilla.org/en-US/blog/rss.xml) MDN * [ About ](https://developer.mozilla.org/en-US/about) * [ Blog ](https://developer.mozilla.org/en-US/blog/) * [ Mozilla careers ](https://www.mozilla.org/en-US/careers/listings/) * [ Advertise with us ](https://developer.mozilla.org/en-US/advertising) * [ MDN Plus ](https://developer.mozilla.org/en-US/plus) * [ Product help ](https://support.mozilla.org/products/mdn-plus) Contribute * [ MDN Community ](https://developer.mozilla.org/en-US/community) * [ Community resources ](https://developer.mozilla.org/en-US/docs/MDN/Community) * [ Writing guidelines ](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines) * [ MDN Discord ](https://developer.mozilla.org/discord) * [ MDN on GitHub ](https://github.com/mdn) Developers * [ Web technologies ](https://developer.mozilla.org/en-US/docs/Web) * [ Learn web development ](https://developer.mozilla.org/en-US/docs/Learn_web_development) * [ Guides ](https://developer.mozilla.org/en-US/docs/MDN/Guides) * [ Tutorials ](https://developer.mozilla.org/en-US/docs/MDN/Tutorials) * [ Glossary ](https://developer.mozilla.org/en-US/docs/Glossary) * [ Hacks blog ](https://hacks.mozilla.org/) [Mozilla](https://www.mozilla.org/) * [Website Privacy Notice](https://www.mozilla.org/privacy/websites/) * [Telemetry Settings](https://www.mozilla.org/en-US/privacy/websites/data-preferences/) * [Legal](https://www.mozilla.org/about/legal/terms/mozilla) * [Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/) Visit [Mozilla Corporation’s](https://www.mozilla.org/) not-for-profit parent, the [Mozilla Foundation](https://foundation.mozilla.org/). Portions of this content are ©1998–2026 by individual

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework


id: testing-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing-0.md
category: reference
title: Testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing
date_saved: 2026-05-05T06:02:58.223755+00:00
instance: kb-cron
parent: testing-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing#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: testing-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing-1.md
category: reference
title: Testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing
date_saved: 2026-05-05T06:02:58.223755+00:00
instance: kb-cron
parent: testing-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/Testing/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing \(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%2FTesting&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%2Ftesting%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%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: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing#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: introduction-to-automated-testing-learn-web-development-mdn-20260505-1
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-1.md

summary:
We will look at how to set up your own Selenium-based testing system in the next article. In this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above. **Note:** The above two categories are not mutually exclusive. It is possible to set up a task runner to access a service like Sauce Labs via an API, run cross browser tests, and return results. We will look at this below as well. ## [Using a task runner to automate testing tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing#using_a_task_runner_to_automate_testing_tools) As we said above, you can drastically speed up common tasks such as linting and minifying code by using a task runner to run everything you need to run automatically at a certain point in your build process. For example, this could be every time you save a file, or at some other point. Inside this section we'll look at how to automate task running with Node and Gulp, a beginner-friendly option. ### [Setting up Node and npm](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing#setting_up_node_and_npm) Most tools these days are based on [Node.js](https://developer.mozilla.org/en-US/docs/Glossary/Node.js), so you'll need to install it along with its counterpart package manager, [`npm`](https://www.npmjs.com/): 1. The easiest way to install


id: introduction-to-automated-testing-learn-web-development-mdn-20260505-2
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-2.md

summary:
See the links above for full instructions on the different gulp packages we are using. To use each plugin, you need to first install it via npm, then require any dependencies at the top of the `gulpfile.mjs` file, then add your test(s) to the bottom of it, and finally export the name of your task to be available via gulp's command. #### html-tidy 1. Install using the following line: **Note:** `--save-dev` adds the package as a dependency to your project. If you look in your project's `package.json` file, you'll see an entry for it in the `devDependencies` property. 2. Add the following dependency to `gulpfile.mjs`: 3. Add the following test to the bottom of `gulpfile.mjs`: 4. Change the default export to: Here we are grabbing our development `index.html` file with `gulp.src()`, which allows us to grab a source file to do something with. We next use the `pipe()` function to pass that source to another command to do something else with. We can chain as many of these together as we want. We first run `htmltidy()` on the source, which goes through and fixes errors in our file. The second `pipe()` function writes the output HTML file to the `build`


id: introduction-to-automated-testing-learn-web-development-mdn-20260505-3
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-3.md

summary:
## [Using commercial testing services to speed up browser testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing#using_commercial_testing_services_to_speed_up_browser_testing) Now let's look at commercial third-party browser testing services and what they can do for us. When you use these kinds of services, you provide a URL of the page you want to test along with information, such as what browsers you want it tested in. The app then configures a new VM with the OS and browser you specified, and returns the test results in the form of screenshots, videos, log files, text, etc. This is very useful, and way more convenient than having to set up all the OS/browser combinations by yourself. You can then step up a gear, using an API to access functionality programmatically, which means that such apps can be combined with task runners, such as your own local Selenium environments and others, to create automated tests. **Note:** There are other commercial browser testing systems available but in this article, we'll focus on BrowserStack, Sauce Labs, and TestingBot. We're not saying that these are necessarily the best tools available, but they are good ones that are simple for beginners to get up and running with. ### [BrowserStack](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing#browserstack) #### Getting started with BrowserStack To get started:


id: introduction-to-automated-testing-learn-web-development-mdn-20260505-4
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-4.md

summary:
You can do quite a lot at this point, like share a test URL so someone else can observe the test remotely, copy text/notes to a remote clipboard, take a screenshot, test in full screen mode, and more. Once you stop the session, you'll return to the _Live_ tab, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. In here, you can download any screenshots you took, watch a video of the session, view data logs, and more. This is already very useful, and a lot more convenient than having to set up multiple emulators and virtual machines by yourself. For more information, see the [Sauce Labs documentation](https://docs.saucelabs.com/). #### Advanced: The Sauce Labs API Sauce Labs has a [restful API](https://docs.saucelabs.com/dev/api/) that allows you to programmatically retrieve details of your account and existing tests, and annotate tests with further details, such as their pass/fail state which isn't recordable by manual testing alone. For example, you might want to run one of your own Selenium tests remotely using Sauce Labs to test a certain browser/OS combination, and then pass the test results back to Sauce


id: introduction-to-automated-testing-learn-web-development-mdn-20260505-5
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-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 Jan 16, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/automated_testing/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing/automated_testing \(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%2FTesting%2FAutomated_testing&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%2Ftesting%2Fautomated_testing%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FAutomated_testing%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%2Fautomated_testing%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F3251a58ecf1ded5df0e1aa5d23c8436247252b52%0A*+Document+last+modified%3A+2026-01-16T08%3A23%3A40.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-automated-testing-learn-web-development-mdn-20260505-6
category: reference
title: Introduction to automated testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing
date_saved: 2026-05-05T06:03:00.605978+00:00
instance: kb-cron
parent: introduction-to-automated-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing-6.md


id: implementing-feature-detection-learn-web-development-mdn-20260505-0
category: reference
title: Implementing feature detection - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
date_saved: 2026-05-05T06:03:03.242262+00:00
instance: kb-cron
parent: implementing-feature-detection-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection#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: implementing-feature-detection-learn-web-development-mdn-20260505-1
category: reference
title: Implementing feature detection - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
date_saved: 2026-05-05T06:03:03.242262+00:00
instance: kb-cron
parent: implementing-feature-detection-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection-1.md

summary:
## [The concept of feature detection](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection#the_concept_of_feature_detection) The idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that _do_ support the feature, and browsers that _don't_. If you don't do this, browsers that don't support the features you are using in your code may not display your sites properly or might fail altogether, creating a bad user experience. Let's recap and look at the example we touched on in our [JavaScript debugging and error handling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#feature_detection) article — the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) (which exposes available location data for the device the web browser is running on) has the main entry point for its use, a `geolocation` property available on the global [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) object. Therefore, you can detect whether the browser supports geolocation or not by using something like the following: Before we move on, we'd like to say one thing upfront — don't confuse feature detection with **browser sniffing** (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See [Browser detection using the user agent


id: implementing-feature-detection-learn-web-development-mdn-20260505-2
category: reference
title: Implementing feature detection - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
date_saved: 2026-05-05T06:03:03.242262+00:00
instance: kb-cron
parent: implementing-feature-detection-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection-2.md

summary:
[Retention of assigned property value by an element](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection#retention_of_assigned_property_value_by_an_element) Create an element in memory using [`Document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), set a property to a specific value, then check to see if the value is retained. Bear in mind that some features are, however, known to be undetectable. In these cases, you'll need to use a different approach, such as using a [polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill). #### matchMedia We also wanted to mention the [`Window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) JavaScript feature at this point too. This is a property that allows you to run media query tests inside JavaScript. It looks like this: As an example, our [Snapshot](https://github.com/chrisdavidmills/snapshot) demo makes use of it to selectively apply the Brick JavaScript library and use it to handle the UI layout, but only for the small screen layout (480px wide or less). We first use the `media` attribute to only apply the Brick CSS to the page if the page width is 480px or less: We then use `matchMedia()` in the JavaScript several times, to only run Brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection#summary) This article covered feature detection in


id: implementing-feature-detection-learn-web-development-mdn-20260505-3
category: reference
title: Implementing feature detection - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
date_saved: 2026-05-05T06:03:03.242262+00:00
instance: kb-cron
parent: implementing-feature-detection-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection-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 Dec 19, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/feature_detection/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing/feature_detection \(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%2FTesting%2FFeature_detection&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%2Ftesting%2Ffeature_detection%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FFeature_detection%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%2Ffeature_detection%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2b4a2ad5d9ba084a9eaa2f9204102655e7b575c4%0A*+Document+last+modified%3A+2025-12-19T19%3A59%3A21.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: implementing-feature-detection-learn-web-development-mdn-20260505-4
category: reference
title: Implementing feature detection - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
date_saved: 2026-05-05T06:03:03.242262+00:00
instance: kb-cron
parent: implementing-feature-detection-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection-4.md


id: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS-0.md
category: reference
title: Handling common HTML and CSS problems - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS
date_saved: 2026-05-05T06:03:05.619059+00:00
instance: kb-cron
parent: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#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: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS-1.md
category: reference
title: Handling common HTML and CSS problems - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS
date_saved: 2026-05-05T06:03:05.619059+00:00
instance: kb-cron
parent: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-0
summary:
## [The trouble with HTML and CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#the_trouble_with_html_and_css) Some of the trouble with HTML and CSS lies with the fact that both languages are fairly simple, and often developers don't take them seriously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page. In the worst cases, JavaScript is used to generate the entire web page content and style, which makes your pages inaccessible, and less performant (generating DOM elements is expensive). In other cases, nascent features are not supported consistently across browsers, which can make some features and styles not work for some users. Responsive design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animations. Let's go forth and look at how we can reduce cross browser errors that result from HTML/CSS. ## [First things first: fixing general problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#first_things_first_fixing_general_problems) We said in the [first article of this series](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction#testingdiscovery) that a good strategy to begin with is to test in a couple of modern browsers on desktop/mobile, to


id: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS-2.md
category: reference
title: Handling common HTML and CSS problems - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS
date_saved: 2026-05-05T06:03:05.619059+00:00
instance: kb-cron
parent: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-0
summary:
### [Browser developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#browser_developer_tools) The developer tools built into most browsers also feature useful tools for hunting down errors, mainly for CSS. **Note:** HTML errors don't tend to show up so easily in dev tools, as the browser will try to correct badly-formed markup automatically; the W3C validator is the best way to find HTML errors — see [Validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#validation) above. As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message: ![The developer tools cross out invalid CSS and add a hoverable warning icon](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS/css-message-devtools.png) Other browser devtools have similar features. ## [Common cross browser problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#common_cross_browser_problems) Now let's move on to look at some of the most common cross browser HTML and CSS problems. The main areas we'll look at are lack of support for modern features, and layout issues. ### [Browsers not supporting modern features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#browsers_not_supporting_modern_features) This is a common problem, especially when you need to support old browsers or you are using features that are implemented in some browsers but not yet in all. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors


id: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS-3.md
category: reference
title: Handling common HTML and CSS problems - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS
date_saved: 2026-05-05T06:03:05.619059+00:00
instance: kb-cron
parent: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-0
summary:
For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector: ![The breadcrumb of elements is html > body > form > div.form > input#date](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS/dom-breadcrumb-trail.png) If for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired: (The `date` form input isn't a direct child of the `<form>`; you'd be better off using a general descendant selector instead of a child selector). ### [Handling CSS prefixes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#handling_css_prefixes) Another set of problems comes with CSS prefixes — these are a mechanism originally used to allow browser vendors to implement their own version of a CSS (or JavaScript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. For example, Firefox uses `-moz-` and Chrome/Edge/Opera/Safari use `-webkit-`. Other prefixes you may encounter in old code that can safely be removed include `-ms-`, which was used by Internet Explorer and early versions of Edge, and `-o` which was used in the original versions of Opera. Prefixed features were never supposed to be used


id: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-4
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS-4.md
category: reference
title: Handling common HTML and CSS problems - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS
date_saved: 2026-05-05T06:03:05.619059+00:00
instance: kb-cron
parent: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-0
summary:
As you start to type the property name representation after the second dot (note that in JavaScript, CSS property names are written in [lower camel case](https://developer.mozilla.org/en-US/docs/Glossary/Camel_case), not [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case)), the JavaScript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. This is useful for finding out what properties are implemented in that browser. If you do need to include modern features, test for feature support using [`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports), which allows you to implement native feature detection tests, and nest the prefixed or new feature within the `@supports` block. ### [Responsive design problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#responsive_design_problems) Responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries), and make sure it is applied correctly using [viewport](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport). You can find a detailed account of such practices in [our responsive design tutorial](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design). Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images


id: handling-common-html-and-css-problems-learn-web-development-mdn-20260505-5
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS-5.md
category: reference
title: Handling common HTML and CSS problems - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS
date_saved: 2026-05-05T06:03:05.619059+00:00
instance: kb-cron
parent: handling-common-html-and-css-problems-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 Dec 19, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/html_and_css/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing/html_and_css \(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%2FTesting%2FHTML_and_CSS&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%2Ftesting%2Fhtml_and_css%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FHTML_and_CSS%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%2Fhtml_and_css%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2b4a2ad5d9ba084a9eaa2f9204102655e7b575c4%0A*+Document+last+modified%3A+2025-12-19T19%3A59%3A21.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-cross-browser-testing-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction-0.md
category: reference
title: Introduction to cross-browser testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction
date_saved: 2026-05-05T06:03:08.128457+00:00
instance: kb-cron
parent: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/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


id: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction-1.md
category: reference
title: Introduction to cross-browser testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction
date_saved: 2026-05-05T06:03:08.128457+00:00
instance: kb-cron
parent: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-0
summary:
Remember that you are not your users — just because your site works on your MacBook Pro or high-end Galaxy Nexus, doesn't mean it will work for all your users! **Note:** [Make the web work for everyone](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) discusses the different browsers, their market share, and related cross-browser compatibility issues. Websites should be accessible across different browsers and devices, and to people with disabilities (e.g., screen-reader-friendly). A site doesn't need to deliver the exact same experience on all browsers and devices, as long as the core functionality is accessible in some way. For example, a modern browser might have something animated, 3D and shiny, while older browsers might just show a flat graphic with the same information. Also, it's just about impossible for a website to work on ALL browsers and devices, so a web developer should come to an agreement with the site owner on the range of browsers and devices where the code will work. ## [Why do cross-browser issues occur?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction#why_do_cross-browser_issues_occur) There are many different reasons why cross-browser issues occur, and note that here we are talking about issues where things behave differently across different browsers/devices/browsing preferences. Before you even get to cross-browser issues, you should have already fixed


id: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction-2.md
category: reference
title: Introduction to cross-browser testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction
date_saved: 2026-05-05T06:03:08.128457+00:00
instance: kb-cron
parent: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-0
summary:
…and more reasons besides. In later articles, we'll explore common cross-browser problems, and look at solutions to those. ## [Workflows for cross-browser testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction#workflows_for_cross-browser_testing) All of this cross-browser testing business may sound time-consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough testing in the right places to make sure you don't run into unexpected problems. If you are working on a large project, you should be testing it regularly, to make sure that new features work for your target audience, and that new additions to the code don't break old features that were previously working. If you leave all the testing to the end of a project, any bugs you uncover will be a lot more expensive and time-consuming to fix than if you uncover them and fix them as you go along. The workflow for testing and bug fixes on a project can be broken down into roughly the following four phases (this is only very rough — different people may do things quite differently to this): **Initial planning** > **Development** > **Testing/discovery** > **Fixes/iteration** Steps 2–4 will tend to be repeated as many times as necessary


id: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction-3.md
category: reference
title: Introduction to cross-browser testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction
date_saved: 2026-05-05T06:03:08.128457+00:00
instance: kb-cron
parent: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-0
summary:
Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end! ### [Testing/discovery](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction#testingdiscovery) After each implementation phase, you will need to test the new functionality. To start with, you should make sure there are no general issues with your code that are stopping your feature from working: 1. Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or Edge. 2. Do some lo-fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable. 3. Test on a mobile platform, such as Android or iOS. At this point, fix any problems you find with your new code. Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross-browser issues (see the next article for more information on [determining your target browsers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies)). For example: * Try to test the latest change on all the modern desktop browsers you can — including


id: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-4
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction-4.md
category: reference
title: Introduction to cross-browser testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction
date_saved: 2026-05-05T06:03:08.128457+00:00
instance: kb-cron
parent: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-0
summary:
This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version. ### [Fixes/iteration](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction#fixesiteration) Once you've discovered a bug, you need to try to fix it. The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g., the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists. It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is


id: introduction-to-cross-browser-testing-learn-web-development-mdn-20260505-5
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction-5.md
category: reference
title: Introduction to cross-browser testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction
date_saved: 2026-05-05T06:03:08.128457+00:00
instance: kb-cron
parent: introduction-to-cross-browser-testing-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 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/introduction/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing/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%2FTesting%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%2Ftesting%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F79f65d8322a4e55e9f3f4c91441c9188dbe670e0%0A*+Document+last+modified%3A+2025-10-09T17%3A10%3A13.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: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#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/Testing/Testing_strategies


id: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-1
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-1.md

summary:
If your target audience is mostly located somewhere else, then the most common browsers and OSs may differ from the above. **Note:** "The CEO of my company uses a Blackberry, so we'd better make sure it looks good on that" can also be something to consider. ### [Browser statistics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#browser_statistics) Some websites show which browsers are popular in a given region. For example, [Statcounter](https://gs.statcounter.com/) gives an idea of trends in North America. ### [Using analytics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#using_analytics) A much more accurate source of data, if you can get it, is an analytics app like [Google Analytics](https://marketingplatform.google.com/about/analytics/), which tells you exactly what browsers people are using to browse your site. Of course, this relies on you already having a site to use it on, so it isn't good for completely new sites. You may also consider using open-source and privacy-focused analytics platforms like [Open Web Analytics](https://www.openwebanalytics.com/) and [Matomo](https://matomo.org/). They expect you to self-host the analytics platform. #### Setting up Google analytics 1. First of all, you'll need a Google account. Use this account to sign into [Google Analytics](https://marketingplatform.google.com/about/analytics/). 2. Choose the [Google Analytics](https://analytics.google.com/analytics/web/) (web) option, and click the _Sign Up_ button. 3. Enter your website/app details into the signup page. This is fairly intuitive

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


id: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-2
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-2.md

summary:
## [Putting together a testing lab](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#putting_together_a_testing_lab) One option for carrying out browser tests is to do the testing yourself. To do this, you will probably use a combination of actual physical devices, and emulated environments (using either an emulator or a virtual machine). ### [Physical devices](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#physical_devices) It is generally better to have a real device running the browser you want to test — this provides the greatest accuracy in terms of behavior and overall user experience. You'll probably want something like the following, for a reasonable low-level device lab: * A Mac, with the browsers installed that you need to test — this can include Firefox, Chrome, Opera, and Safari. * A Windows PC, with the browsers installed that you need to test — this can include Edge (or IE), Chrome, Firefox, and Opera. * A higher-spec Android phone and tablet with the browser installed that you need to test — this can include Chrome, Firefox, and Opera Mini for Android, as well as the original Android stock browser. * A higher-spec iOS phone and tablet with the browsers installed that you need to test — this can include iOS Safari and Chrome, Firefox, and Opera Mini for iOS. The

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


id: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-3
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-3.md

summary:
**Note:** Many emulators actually require the use of a virtual machine (see below); when this is the case, instructions are often provided, and/or use of the virtual machine is incorporated into the installer of the emulator. ### [Virtual machines](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#virtual_machines) Virtual machines are applications that run on your desktop computer and allow you to run emulations of entire operating systems, each compartmentalized in its own virtual hard drive (often represented by a single large file existing on the host machine's hard drive). There are a number of popular virtual machine apps available, such as [Parallels](https://www.parallels.com/), [VMware](https://www.vmware.com/), and [Virtual Box](https://www.virtualbox.org/wiki/Downloads); we personally like the latter, because it is free. **Note:** You need a lot of hard disk space available to run virtual machine emulations; each operating system you emulate can take up a lot of memory. You tend to choose the hard drive space you want for each install; you could get away with probably 10GB, but some sources recommend up to 50GB or more, so the operating system will run reliably. A good option provided by most virtual machine apps is to create a **dynamically allocated** hard drive that grows and shrinks as the need arises. To use a Virtual Box,


id: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-4
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-4.md

summary:
**Note:** Another good thing about virtual machines is that the virtual disk images are fairly self-contained. If you are working on a team, you can create one virtual disk image, then copy it and pass it around. Just make sure you have the required licenses to run all those copies of Windows or whatever else you are running if it is a licensed product. ### [Automation and commercial apps](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#automation_and_commercial_apps) As mentioned in the last chapter, you can take a lot of the pain out of browser testing by using some kind of automation system. You can set up your own testing automation system ([Selenium](https://www.selenium.dev/) being the popular app of choice), which does take some setup, but can be very rewarding when you get it worked out. There are also commercial tools available such as [Sauce Labs](https://saucelabs.com/) and [Browser Stack](https://www.browserstack.com/) that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. Another alternative is to use no-code test automation tools such as [Endtest](https://endtest.io/). We will look at how to use such tools later on in the module. ## [User testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies#user_testing) Before we move on, we'll finish


id: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-5
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-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 May 4, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/testing_strategies/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing/testing_strategies \(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%2FTesting%2FTesting_strategies&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%2Ftesting%2Ftesting_strategies%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FTesting_strategies%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%2Ftesting_strategies%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fc53bfa01f3bf436d486f4032c16f592855a2af2c%0A*+Document+last+modified%3A+2026-05-04T02%3A41%3A10.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: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-6
category: reference
title: Strategies for carrying out testing - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:10.560160+00:00
instance: kb-cron
parent: strategies-for-carrying-out-testing-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies-6.md


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#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/Testing/Your_own_automation_environment


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-1
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-1.md

summary:
**Note:** It is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. You should make sure that everything is up-to-date. Next, you need to download the relevant drivers to allow WebDriver to control the browsers you want to test. You can find details of where to get them from on the [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) page (see the table in the first section.) Obviously, some of the browsers are OS-specific, but we're going to stick with Firefox and Chrome, as they are available across all the main OSes. 1. Download the latest [GeckoDriver](https://github.com/mozilla/geckodriver/releases/) (for Firefox) and [ChromeDriver](https://googlechromelabs.github.io/chrome-for-testing/#stable) drivers. 2. Unpack them into somewhere fairly easy to navigate to, like the root of your home user directory. 3. Add the `chromedriver` and `geckodriver` driver's location to your system `PATH` variable. This should be an absolute path from the root of your hard disk, to the directory containing the drivers. For example, if we were using a macOS machine, our user name was bob, and we put our drivers in the root of our home folder, the path would be `/Users/bob`. **Note:** Just to reiterate, the path you add to `PATH` needs to be the

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


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-2
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-2.md

summary:
**Note:** If you are using a Mac and decide to test Safari, you might get an error message along the lines of "Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver." If you get this, follow the given instruction and try again. You might get a message saying that you can't open a driver app because it was not downloaded from a verified source. If you get this, you can override that security setting just for that driver app. For example, on Mac, `Ctrl` + click on the app, choose _Open_ , and choose _Open_ again from the resulting dialog box. So here we've done the test as before, except that this time we've wrapped it inside a function, `searchTest()`. We've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all of them. Let's move on and look at the basics of WebDriver syntax, in a bit more detail. ## [WebDriver syntax crash course](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#webdriver_syntax_crash_course) Let's have a look at a few key features of the webdriver syntax. For more complete details, you should consult the [selenium-webdriver

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


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-3
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-3.md

summary:
Using good locator strategies: When you are [Interacting with the document](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#interacting_with_the_document), make sure that you use locators and page objects that are unlikely to change — if you have a testable element that you want to perform a test on, make sure that it has a stable ID, or position on the page that can be selected using a CSS selector, which isn't going to just change with the next site iteration. You want to make your tests as non-brittle as possible, i.e., they won't just break when something changes. 2. Write atomic tests: Each test should test one thing only, making it easy to keep track of what test file is testing which criterion. The `duck_test.js` test we looked at above is pretty good, as it just tests a single thing — whether the title of a search results page is set correctly. We could work on giving it a better name so it is easier to work out what it does if we add more tests. Perhaps `results_page_title_set_correctly.js` would be slightly better? 3. Write autonomous tests: Each test should work on it's own, and not depend on other tests to work.


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-4
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-4.md

summary:
In addition, we should mention test results/reporting — we've been reporting results in our above examples using simple `console.log()` statements, but this is all done in JavaScript, so you can use whatever test running and reporting system you want, be it [Mocha](https://mochajs.org/), [Chai](https://www.chaijs.com/), or some other tool. Lets work through a quick example: 1. Make a local copy of our [`mocha_test.js`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/selenium/mocha_test.js) example inside your project directory. Put it inside a subfolder called `test`. This example uses a long chain of promises to run all the steps required in our test — the promise-based methods WebDriver uses need to resolve for it to work properly. 2. Install the mocha test harness by running the following command inside your project directory: 3. You can now run the test (and any others you put inside your `test` directory) using the following command: 4. You should include the `--no-timeouts` flag to make sure your tests don't end up failing because of Mocha's arbitrary timeout (which is 3 seconds). **Note:** [saucelabs-sample-test-frameworks](https://github.com/saucelabs-sample-test-frameworks) contains several useful examples showing how to set up different combinations of test/assertion tools. ## [Running remote tests](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#running_remote_tests) It turns out that running tests on remote servers isn't that much more difficult than running


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-5
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-5.md

summary:
**Note:** Sauce Labs' [Platform Configurator](https://saucelabs.com/products/platform-configurator#/) is a useful tool for generating capability objects to feed to your driver instances, based on what browser/OS you want to test on. **Note:** For more useful details on testing with Sauce Labs and Selenium, check out [Getting Started with Selenium for Automated Website Testing](https://docs.saucelabs.com/web-apps/automated-testing/selenium/), and [Instant Selenium Node.js Tests](https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs). #### Filling in Sauce Labs test details programmatically You can use the Sauce Labs API to annotate your test with more details, such as whether it passed, the name of the test, etc. Sauce Labs doesn't know these details by default! To do this, you need to: 1. Install the Node Sauce Labs wrapper using the following command (if you've not already done it for this project): 2. Require saucelabs — put this at the top of your `sauce_google_test.js` file, just below the previous variable declarations: 3. Create a new instance of SauceLabs, by adding the following just below that: Again, replace the `YOUR-USER-NAME` and `YOUR-ACCESS-KEY` placeholders in the code with your actual user name and access key values (note that the saucelabs npm package rather confusingly uses `password`, not `accessKey`). Since you are using these twice now, you may want to create a couple


id: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-6
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-6.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 May 4, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/testing/your_own_automation_environment/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/testing/your_own_automation_environment \(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%2FTesting%2FYour_own_automation_environment&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%2Ftesting%2Fyour_own_automation_environment%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FYour_own_automation_environment%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Ftesting%2Fyour_own_automation_environment%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fc53bfa01f3bf436d486f4032c16f592855a2af2c%0A*+Document+last+modified%3A+2026-05-04T02%3A41%3A10.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: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-7
category: reference
title: Setting up your own test automation environment - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T06:03:13.033325+00:00
instance: kb-cron
parent: setting-up-your-own-test-automation-environment-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment-7.md


id: getting-started-modules-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started-0.md
category: reference
title: Getting started modules - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started
date_saved: 2026-05-05T06:03:15.531418+00:00
instance: kb-cron
parent: getting-started-modules-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started#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: getting-started-modules-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started-1.md
category: reference
title: Getting started modules - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started
date_saved: 2026-05-05T06:03:15.531418+00:00
instance: kb-cron
parent: getting-started-modules-learn-web-development-mdn-20260505-0
summary:
[The Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) [_MDN learning partner_](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) [Scrimba's](https://scrimba.com?via=mdn) _Frontend Developer Career Path_ teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions. ## 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 18, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/getting_started/index.md?plain=1 "Folder: en-us/learn_web_development/getting_started \(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%2FGetting_started&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%2Fgetting_started%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FGetting_started%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fgetting_started%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F6a5c619dfad295ca9a9d317a4088908cfd33e686%0A*+Document+last+modified%3A+2025-04-18T01%3A02%3A04.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.


id: environment-setup-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup-0.md
category: reference
title: Environment Setup - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup
date_saved: 2026-05-05T06:03:17.829736+00:00
instance: kb-cron
parent: environment-setup-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup#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: environment-setup-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup-1.md
category: reference
title: Environment Setup - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup
date_saved: 2026-05-05T06:03:17.829736+00:00
instance: kb-cron
parent: environment-setup-learn-web-development-mdn-20260505-0
summary:
[Command line crash course](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools. ## 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/Getting_started/Environment_setup/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/getting_started/environment_setup/index.md?plain=1 "Folder: en-us/learn_web_development/getting_started/environment_setup \(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%2FGetting_started%2FEnvironment_setup&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%2Fgetting_started%2Fenvironment_setup%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FGetting_started%2FEnvironment_setup%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fgetting_started%2Fenvironment_setup%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


