CINXE.COM

<!doctype html> <html lang="en-US"> <head data-template-path="https://hacks.mozilla.org/wp-content/themes/Hax"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google-site-verification" content="w2ocEMd5yV9IsGCjhq-7ls67r4VH-Ob6oWdiZpqjN8U"> <meta name="title" content="Introducing MDN Plus: Make MDN your own – Mozilla Hacks - the Web developer blog"> <meta property="og:site_name" content="Mozilla Hacks – the Web developer blog"> <meta property="og:url" content="https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own"> <meta property="og:title" content="Introducing MDN Plus: Make MDN your own – Mozilla Hacks - the Web developer blog"> <meta property="og:description" content="Today, we are launching MDN Plus, our first step to providing a personalized and more powerful experience."> <meta property="og:image" content="https://hacks.mozilla.org/wp-content/uploads/2022/03/mdnplus.png"> <meta property="og:image:width" content="1920"> <meta property="og:image:height" content="1080"> <meta property="twitter:title" content="Introducing MDN Plus: Make MDN your own – Mozilla Hacks - the Web developer blog"> <meta property="twitter:description" content="Today, we are launching MDN Plus, our first step to providing a personalized and more powerful experience."> <meta name="twitter:card" content="summary_large_image"> <meta property="twitter:image" content="https://hacks.mozilla.org/wp-content/uploads/2022/03/mdnplus.png"> <meta name="twitter:site" content="@mozhacks"> <link href='//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://hacks.mozilla.org/wp-content/themes/Hax/css/font-awesome.min.css"> <link rel="stylesheet" href="https://hacks.mozilla.org/wp-content/themes/Hax/style.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.6.0/styles/solarized_light.min.css"> <script type="text/javascript"> window.hacks = {}; // http://cfsimplicity.com/61/removing-analytics-clutter-from-campaign-urls var removeUtms = function(){ var l = window.location; if( l.hash.indexOf( "utm" ) != -1 ){ var anchor = l.hash.match(/#(?!utm)[^&]+/); anchor = anchor? anchor[0]: ''; if(!anchor && window.history.replaceState){ history.replaceState({},'', l.pathname + l.search); } else { l.hash = anchor; } }; }; var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35433268-8'], ['_setAllowAnchor', true]); _gaq.push (['_gat._anonymizeIp']); _gaq.push(['_trackPageview']); _gaq.push( removeUtms ); (function(d, k) { var ga = d.createElement(k); ga.type = 'text/javascript'; ga.async = true; ga.src = 'https://ssl.google-analytics.com/ga.js'; var s = d.getElementsByTagName(k)[0]; s.parentNode.insertBefore(ga, s); })(document, 'script'); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5WVW12ST9K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5WVW12ST9K'); </script> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />  <title>Introducing MDN Plus: Make MDN your own - Mozilla Hacks - the Web developer blog</title> <meta name="description" content="Today, we are launching MDN Plus, our first step to providing a personalized and more powerful experience." /> <link rel="canonical" href="https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Hermina" /> <meta name="twitter:label2" content="Est. reading time" /> <meta name="twitter:data2" content="4 minutes" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/","url":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/","name":"Introducing MDN Plus: Make MDN your own - Mozilla Hacks - the Web developer blog","isPartOf":{"@id":"https://hacks.mozilla.org/#website"},"primaryImageOfPage":{"@id":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/#primaryimage"},"image":{"@id":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/#primaryimage"},"thumbnailUrl":"https://hacks.mozilla.org/wp-content/uploads/2022/03/mdnplus.png","datePublished":"2022-03-24T16:00:29+00:00","dateModified":"2022-03-25T13:36:57+00:00","author":{"@id":"https://hacks.mozilla.org/#/schema/person/3ef9a3a449d24d8cee8dbb7546eccc5f"},"description":"Today, we are launching MDN Plus, our first step to providing a personalized and more powerful experience.","breadcrumb":{"@id":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/#primaryimage","url":"https://hacks.mozilla.org/wp-content/uploads/2022/03/mdnplus.png","contentUrl":"https://hacks.mozilla.org/wp-content/uploads/2022/03/mdnplus.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https://hacks.mozilla.org/2022/03/introducing-mdn-plus-make-mdn-your-own/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://hacks.mozilla.org/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https://hacks.mozilla.org/articles/"},{"@type":"ListItem","position":3,"name":"Introducing MDN Plus: Make MDN your own"}]},{"@type":"WebSite","@id":"https://hacks.mozilla.org/#website","url":"https://hacks.mozilla.org/","name":"Mozilla Hacks - the Web developer blog","description":"hacks.mozilla.org","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://hacks.mozilla.org/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https://hacks.mozilla.org/#/schema/person/3ef9a3a449d24d8cee8dbb7546eccc5f","name":"Hermina","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://hacks.mozilla.org/#/schema/person/image/15105800a0270a384212262298083881","url":"https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96","contentUrl":"https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96","caption":"Hermina"},"description":"Hermina is Head of Product for MDN, at Mozilla, leading the MDN content, engineering and product teams. She is based in Paris, France.","url":"https://hacks.mozilla.org/author/hcondeimozilla-com/"}]}</script>  <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Feed" href="https://hacks.mozilla.org/feed/" /> <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Comments Feed" href="https://hacks.mozilla.org/comments/feed/" /> <link rel='stylesheet' id='wp-block-library-css' href='https://hacks.mozilla.org/wp-includes/css/dist/block-library/style.min.css?ver=6.6.1' type='text/css' media='all' /> <style id='co-authors-plus-coauthors-style-inline-css' type='text/css'> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id='co-authors-plus-avatar-style-inline-css' type='text/css'> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id='co-authors-plus-image-style-inline-css' type='text/css'> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <link rel='stylesheet' id='prismatic-blocks-css' href='https://hacks.mozilla.org/wp-content/plugins/prismatic/css/styles-blocks.css?ver=6.6.1' type='text/css' media='all' /> <style id='safe-svg-svg-icon-style-inline-css' type='text/css'> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <script type="text/javascript" src="https://hacks.mozilla.org/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://hacks.mozilla.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://hacks.mozilla.org/wp-content/themes/Hax/js/analytics.js?ver=6.6.1" id="analytics-js"></script> <link rel="https://api.w.org/" href="https://hacks.mozilla.org/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://hacks.mozilla.org/wp-json/wp/v2/posts/47744" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://hacks.mozilla.org/xmlrpc.php?rsd" /> <link rel='shortlink' href='https://hacks.mozilla.org/?p=47744' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://hacks.mozilla.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhacks.mozilla.org%2F2022%2F03%2Fintroducing-mdn-plus-make-mdn-your-own%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://hacks.mozilla.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhacks.mozilla.org%2F2022%2F03%2Fintroducing-mdn-plus-make-mdn-your-own%2F&format=xml" /> </head> <body> <div class="outer-wrapper"> <header class="section section--fullwidth header"> <div class="masthead row"> <div class="branding block block--3"> <h1> <a href="https://hacks.mozilla.org"> <img class="branding__logo" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/mdn-logo-mono.svg"> <img class="branding__wordmark" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/wordmark.svg" alt="Mozilla"> <span class="branding__title">Hac<span class="logo-askew">k</span>s</span> </a> </h1> </div> <div class="search block block--2"> <form class="search__form" method="get" action="https://hacks.mozilla.org/"> <input type="search" name="s" class="search__input" placeholder="Search Mozilla Hacks" value=""> <i class="fa fa-search search__badge"></i> </form> </div> <nav class="social"> <a class="social__link youtube" href="http://www.youtube.com/user/mozhacks" title="YouTube"><i class="fa fa-youtube" aria-hidden="true"></i><span>Hacks on YouTube</span></a> <a class="social__link twitter" href="https://twitter.com/mozhacks" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i><span>@mozhacks on Twitter</span></a> <a class="social__link rss" href="https://hacks.mozilla.org/feed/" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i><span>Hacks RSS Feed</span></a> <a class="fx-button" href="https://www.mozilla.org/firefox/download/thanks/?utm_source=hacks.mozilla.org&utm_medium=referral&utm_campaign=header-download-button&utm_content=header-download-button">Download Firefox</a> </nav> </div> </header> <div id="content-head" class="section"> <h1 class="post__title">Introducing MDN Plus: Make MDN your own</h1> <div class="byline"> <h3 class="post__author"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=64' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=128 2x' class='avatar avatar-64 photo' height='64' width='64' decoding='async'/> By <a class="url" href="https://hacks.mozilla.org/author/hcondeimozilla-com/">Hermina</a> </h2> <div class="post__meta"> Posted on <abbr class="published" title="2022-03-24T09:00:29-07:00"> March 24, 2022 </abbr> <span class="entry-cat">in <a href="https://hacks.mozilla.org/category/featured/" rel="category tag" title="View all posts in Featured Article" >Featured Article</a> and <a href="https://hacks.mozilla.org/category/mdn/" rel="category tag" title="View all posts in MDN" >MDN</a> </span> <div class="socialshare" data-type="bubbles"></div> </div> </div> </div> <main id="content-main" class="section article"> <article class="post" role="article"> <p>MDN is one of the most trusted resources for information about web standards, code samples, tools, and everything you need as a developer to create websites. In 2015, we explored how we could expand beyond documentation to provide a structured learning experience. Our first foray was the <a href="https://developer.mozilla.org/en-US/docs/Learn">Learning Area</a>, with the goal of providing a useful addition to the regular MDN reference and guide material. In 2020, we added the first <a href="https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer">Front-end developer learning pathway</a>. We saw a lot of interest and engagement from users, and the learning area contributed to about 10% of MDN’s monthly web traffic. These two initiatives were the start of our exploration into how we could offer more learning resources to our community. Today, we are launching MDN Plus, our first step to providing a personalized and more powerful experience while continuing to invest in our always free and open webdocs.</p> <p><iframe title="YouTube video player" src="https://www.youtube.com/embed/OBv9qnCesaQ" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> <h2>Build your own MDN Experience with MDN Plus</h2> <p>In 2020 and 2021 we surveyed over 60,000 MDN users and learned that many of the respondents wanted a customized MDN experience. They wanted to organize MDN’s vast library in a way that worked for them. For today’s premium subscription service, MDN Plus, we are releasing three new features that begin to address this need: Notifications, Collections and MDN Offline. More details about the features are listed below:</p> <ul> <li><b><i>Notifications: </i></b>Technology is ever changing, and we know how important it is to stay on top of the latest updates and developments. From tutorial pages to API references, you can now get notifications for the latest developments on MDN. When you follow a page, you’ll get notified when the documentation changes, CSS features launch, and APIs ship. Now, you can get a notification for significant events relating to the pages you want to follow. <a href="https://developer.mozilla.org/en-US/plus/docs/features/notifications">Read more about it here</a>.</li> </ul> <p><img fetchpriority="high" decoding="async" class="alignnone size-large wp-image-47750" src="https://hacks.mozilla.org/wp-content/uploads/2022/03/image-14-500x292.png" alt="Screenshot of a list of notifications on mdn plus" width="500" height="292" srcset="https://hacks.mozilla.org/wp-content/uploads/2022/03/image-14-500x292.png 500w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-14-250x146.png 250w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-14-768x448.png 768w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-14-1536x896.png 1536w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-14-2048x1195.png 2048w" sizes="(max-width: 500px) 100vw, 500px" /></p> <ul> <li><b><i>Collections:</i></b> Find what you need fast with our new collections feature. Not only can you pick the MDN articles you want to save, we also automatically save the pages you visit frequently. Collections help you quickly access the articles that matter the most to you and your work. <a href="https://developer.mozilla.org/en-US/plus/docs/features/collections">Read more about it here</a>.</li> </ul> <p><img loading="lazy" decoding="async" class="alignnone size-large wp-image-47746" src="https://hacks.mozilla.org/wp-content/uploads/2022/03/image-13-500x292.png" alt="Screenshot of a collections list on mdn plus" width="500" height="292" srcset="https://hacks.mozilla.org/wp-content/uploads/2022/03/image-13-500x292.png 500w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-13-250x146.png 250w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-13-768x448.png 768w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-13-1536x896.png 1536w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image-13-2048x1195.png 2048w" sizes="(max-width: 500px) 100vw, 500px" /></p> <ul> <li><b><i>MDN offline</i></b>: Sometimes you need to access MDN but don’t have an internet connection. MDN offline leverages a Progressive Web Application (PWA) to give you access to MDN Web Docs even when you lack internet access so you can continue your work without any interruptions. Plus, with MDN offline you can have a faster experience while saving data. <a href="https://developer.mozilla.org/en-US/plus/docs/features/offline">Read more about it here</a>.</li> </ul> <p><img loading="lazy" decoding="async" class="alignnone wp-image-47760 size-large" src="https://hacks.mozilla.org/wp-content/uploads/2022/03/image1-500x299.png" alt="Screenshot of offline settings on mdn plus" width="500" height="299" srcset="https://hacks.mozilla.org/wp-content/uploads/2022/03/image1-500x299.png 500w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image1-250x150.png 250w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image1-768x460.png 768w, https://hacks.mozilla.org/wp-content/uploads/2022/03/image1.png 1507w" sizes="(max-width: 500px) 100vw, 500px" /></p> <p id="countries">Today, MDN Plus is available in the US and Canada. In the coming months, we will expand to other countries including France, Germany, Italy, Spain, Belgium, Austria, the Netherlands, Ireland, United Kingdom, Switzerland, Malaysia, New Zealand and Singapore. </p> <h2>Find the right MDN Plus plan for you</h2> <p>MDN is part of the daily life of millions of web developers. For many of us MDN helped with getting that first job or helped land a promotion. During our research we found many of these users, users who felt so much value from MDN that they wanted to contribute financially. We were both delighted and humbled by this feedback. To provide folks with a few options, we are launching MDN Plus with three plans including a supporter plan for those that want to spend a little extra. Here are the details of those plans:</p> <ul> <li aria-level="1"><b><i>MDN Core</i></b>: For those who want to do a test drive before purchasing a plan, we created an option that lets you try a limited version for free. </li> <li aria-level="1"><b><i>MDN Plus 5</i></b>: Offers unlimited access to notifications, collections, and MDN offline with new features added all the time. $5 a month or an annual subscription of $50.</li> <li aria-level="1"><b><i>MDN Supporter 10</i></b>: For MDN’s loyal supporters the supporter plan gives you everything under MDN Plus 5 plus early access to new features and a direct feedback channel to the MDN team. It’s $10 a month or $100 for an annual subscription. </li> </ul> <p>Additionally, we will offer a 20% discount if you subscribe to one of the annual subscription plans.</p> <p>We invite you to try the <a style="color:#e80840;" href="https://developer.mozilla.org/en-US/plus#subscribe">free trial version or sign up</a> today for a subscription plan that’s right for you. MDN Plus is only <a href="#countries">available in selected countries</a> at this time.</p> <p> </p> <section class="about"> <h2 class="about__header">About Hermina </h3> <p>Hermina is Head of Product for MDN, at Mozilla, leading the MDN content, engineering and product teams. She is based in Paris, France.</p> <p><a class="url" href="https://hacks.mozilla.org/author/hcondeimozilla-com/">More articles by Hermina…</a></p> </section> </article> <section class="promo"> <form id="newsletterForm" name="newsletter-form" class="newsletter block block--1 block--polite" action="https://www.mozilla.org/en-US/newsletter/" method="post"> <h2 class="heading">Discover great resources for web development</h2> <p class="newsletter__description">Sign up for the Mozilla Developer Newsletter:</p> <input id="fmt" name="fmt" value="H" type="hidden"> <input id="newsletterNewslettersInput" name="newsletters" value="app-dev" type="hidden"> <div id="newsletterErrors" class="newsletter__errors"></div> <div id="newsletterEmail" class="form__row"> <label for="newsletterEmailInput" class="offscreen">E-mail</label> <input id="newsletterEmailInput" name="email" class="newsletter__input" required="" placeholder="you@example.com" size="30" type="email"> </div> <div id="newsletterPrivacy" class="form__row form__fineprint"> <input id="newsletterPrivacyInput" name="privacy" required="" type="checkbox"> <label for="newsletterPrivacyInput"> I'm okay with Mozilla handling my info as explained in this <a href="https://www.mozilla.org/privacy/">Privacy Policy</a>. </label> </div> <button id="newsletter-submit" type="submit" class="button positive">Sign up now</button> </form> <div id="newsletterThanks" class="newsletter newsletter--thanks block block--1 block--polite hidden"> <h2 class="heading">Thanks! Please check your inbox to confirm your subscription.</h2> <p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. </p> </div> </section> </main> <footer class="footer section section--fullwidth"> <div class="row"> <p class="block block--1"> Except where otherwise noted, content on this site is licensed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license external">Creative Commons Attribution Share-Alike License v3.0</a> or any later version. </p> <img class="footer__logo" alt="the Mozilla dino logo" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/dino.svg"> </div> </footer> </div> <script> // External links should open in a new tab. (function () { var postLinks = document.querySelectorAll('#content-main a'); var origin = location.origin; for (var i = 0; i < postLinks.length; i++) { var link = postLinks[i]; if (link.origin !== origin && !link.getAttribute('target')) { link.setAttribute('target', '_blank'); } } })(); window.addEventListener('load', function () { if (document.querySelector('#newsletterForm')) { var script = document.createElement('script'); var path = document.head.getAttribute('data-template-path'); script.setAttribute('src', path + '/js/newsletter.js'); document.head.appendChild(script); } }); </script> </body> </html>