--- title: "Learn web development | MDN" chunk: 1/3 source: "https://developer.mozilla.org/en-US/docs/Learn_web_development" category: "reference" tags: "web, html, css, javascript, documentation" date_saved: "2026-05-05T05:50:13.560959+00:00" instance: "kb-cron" --- * [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development#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 "See all Web API guides") Web API guides * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API) * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) All [All web technology](https://developer.mozilla.org/en-US/docs/Web) Technologies * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) * [URI](https://developer.mozilla.org/en-US/docs/Web/URI) * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver) * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references") Topics * [Media](https://developer.mozilla.org/en-US/docs/Web/Media) * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy) * [Security](https://developer.mozilla.org/en-US/docs/Web/Security) * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) Learn [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) Frontend developer course * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/) * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar) Learn HTML * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) Learn CSS * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout) Learn JavaScript * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) Tools Discover our tools * [Playground](https://developer.mozilla.org/en-US/play) * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory) * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator) * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator) * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator) * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer) * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator) About Get to know MDN better * [About MDN](https://developer.mozilla.org/en-US/about) * [Advertise with us](https://developer.mozilla.org/en-US/advertising) * [Community](https://developer.mozilla.org/en-US/community) * [MDN on GitHub](https://github.com/mdn) [Blog](https://developer.mozilla.org/en-US/blog/) 1. [Learn](https://developer.mozilla.org/en-US/docs/Learn_web_development) # Learn web development Welcome to MDN **Learning Web Development** (also known as **Learn**). This resource provides a structured set of tutorials teaching the essential skills and practices for being a successful front-end developer, along with challenges and further recommended resources. ## In this article * [About Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development#about_learn_web_development) * [Don't know where to get started?](https://developer.mozilla.org/en-US/docs/Learn_web_development#dont_know_where_to_get_started) * [Test your skills](https://developer.mozilla.org/en-US/docs/Learn_web_development#test_your_skills) * [Getting our code examples](https://developer.mozilla.org/en-US/docs/Learn_web_development#getting_our_code_examples) * [Contact us](https://developer.mozilla.org/en-US/docs/Learn_web_development#contact_us) * [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development#see_also) ## [About Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development#about_learn_web_development) * Teaches the essential skills and knowledge every front-end developer needs for career success and industry relevance, as defined in the [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/). * Created by the MDN community and refined with insights from students, educators, and developers from the broader web community. * Designed to take you from "beginner" to "comfortable" (not "beginner" to "expert"), giving you enough knowledge to use more advanced resources (such as [the rest of MDN](https://developer.mozilla.org/en-US/)). **Note:** Last updated: August 2025 ([see changelog](https://developer.mozilla.org/en-US/docs/Learn_web_development/Changelog)). ### Try our partner video courses Interested in an interactive video course to complement our articles? Scrimba's [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) also teaches the topics contained in the MDN Curriculum. ## [Don't know where to get started?](https://developer.mozilla.org/en-US/docs/Learn_web_development#dont_know_where_to_get_started) [Never coded before?](https://developer.mozilla.org/en-US/docs/Learn_web_development#never_coded_before) Our [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) provide setup tutorials and essential concepts and background information for complete beginners. You should start here if you are a complete beginner (i.e., you've not installed a code editor or written any code yet). [Want to master the essentials?](https://developer.mozilla.org/en-US/docs/Learn_web_development#want_to_master_the_essentials) Our [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) provide a structured set of tutorials teaching the essential skills and practices for being a successful front-end developer. [Beyond the basics?](https://developer.mozilla.org/en-US/docs/Learn_web_development#beyond_the_basics) Our [Extension modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions) cover useful additional skills to learn as you start to expand your knowledge and develop specialisms. Go onto these after you finish our Core. [Working at a school?](https://developer.mozilla.org/en-US/docs/Learn_web_development#working_at_a_school) Use our modules to guide your teaching, check out our [Educators page](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators) for more ideas. ## [Test your skills](https://developer.mozilla.org/en-US/docs/Learn_web_development#test_your_skills) Throughout the course, you'll find several articles designed to help you assess whether you have understood what we are teaching you in the course. There are two types: * "Test your skills" articles occur more frequently, and test your knowledge of a single isolated feature such as HTML links, the CSS box model, or JavaScript functions. * "Challenges" occur less frequently, and test your ability to use several features together to create a complete website or program of some kind. Most of the questions feature HTML/CSS/JavaScript code blocks that show the starting code for each task. The recommended way to complete each one is to press the **"Play"** button in one of the code blocks to open the example in the [MDN Playground](https://developer.mozilla.org/en-US/play) and then edit the code according to the question instructions. If you make a mistake, you can clear your work using the Reset button in the MDN Playground. If you get really stuck, you can (usually) view the solution at the bottom of each question section, or [reach out for help](https://developer.mozilla.org/en-US/docs/Learn_web_development#contact_us). **Note:** If you'd prefer to work in your own editor or in an online editor (such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/)), you can copy the code from the MDN Playground into your chosen environment. Some questions don't include code blocks to start from, and instead ask you to download starter files to work on your local machine with. Sometimes this is due to the complex nature of the question, and sometimes we just wanted to change things up a bit. ## [Getting our code examples](https://developer.mozilla.org/en-US/docs/Learn_web_development#getting_our_code_examples) The code examples you'll encounter in the Learning Area are all [available on GitHub](https://github.com/mdn/learning-area/): * The easiest way to get them is to [download a ZIP of the latest main code branch](https://codeload.github.com/mdn/learning-area/zip/main). * If you are familiar with Git and GitHub, you could also choose to clone the repository.