Intro to Mozilla Developer NetworkLearn how to search and use the Mozilla Developer Network documentation
Introduction: The Mozilla Developer Network
MDN originally started with documentation for web browsers but has grown to cover a wide variety of web-related topics over the years. Today, companies like Microsoft and Google actively support MDN as the central source of information about web technology.
While reading or using MDN documentation isn’t required to complete Codecademy lessons or projects, it’s an important resource for you to be aware of. As you start to put your skills to practical use by working on projects off of Codecademy, knowing where to go for more information will be essential to your growth and success as a developer.
This article will cover:
- How to search for MDN articles
- Identifying which sections relate to what you’re looking for
The examples provided will focus on HTML syntax, but this article will give you a general idea of how to use MDN documentation.
Searching for MDN Articles
To find documentation related to a topic you’re looking for, go to the home page and find the search bar in the upper-righthand corner of the page.
Type in the topic you’re searching for in the search bar, press Enter to display a list of results. (The more specific the terms you use to search, the more likely you’ll get relevant results.) In this example, we’ll look for documentation related to the HTML section heading elements syntax:
Choose a result and you’ll be taken to a page displaying more detailed information about the topic. The example here uses the article titled “<h1>–<h6>: The HTML Section Heading elements”.
MDN Article Sections
MDN articles usually divide content into separate sections. The types of sections will vary depending on the topic, but you will find the following sections in HTML documentation:
- A definition and demo
- Usage notes
- Accessibility concerns
- Browser compatibility
- Related topics
Except for the Related Topics sidebar, you can jump to the relevant section you want to look at by clicking on the link in the menu, “On this Page,” located at the top of the page.
Each of these sections will be covered, starting with those that should provide you with immediate help with syntax followed by the sections that give more general information about HTML. One thing to note before continuing is that it is not necessary to read through every section in an article or to understand all the content in it. Feel free to pick and choose sections to look at that make the most sense to you. There will always be more information in documentation than is necessary for what you need to do at any one time.
Definition and Demo
At the top of an MDN article, you’ll see a written definition of the article’s subject. Below the definition, you will find a demo, an interactive example. Here the demo displays a variety of heading elements showing the correct syntax.
These demos allow you to run the example code given to you and see the immediate result.
You can also interact with the example code including making changes to it, allowing you to learn how the code works by testing code and observing the result. The demo can be especially helpful if you prefer to learn by reading through code and playing with it rather than a written description.
Below the definition and demo is “Attributes.” This section describes any attributes specific to the HTML element. In this case, there are none except for global attributes like
id that are used on all HTML elements.
The section titled “Usage notes” gives helpful tips, including best practices that will help your website follow certain standards.
This section is particularly useful when working with unfamiliar syntax and can help you avoid common mistakes. If any of the notes are unclear, the examples in the next section should show code snippets that follow the recommendations in the usage notes.
This section provides you with even more examples. However, unlike the interactive demo you saw at the top of the page you won’t be able to change the code directly in this section.
The examples provide syntactically correct uses of HTML elements for you to model your code on as well as the result of running these examples.
If the written definition and demo don’t provide clear guidance on what an article subject is or how to use it, looking at the examples in this section can be helpful. Like the written content, it’s not necessary to understand every example shown or read through every example.
The following sections aren’t essential to learning syntax but they provide more detailed information about how to best and correctly use the code shown in the previous sections. As mentioned earlier, there will always be more information contained in documentation than you need. However, going through these sections can help enlarge your knowledge of a given topic or give some insight into how or why a certain web technology was created.
The accessibility concerns section goes over any issues that might impact accessibility, or how easily people can use your website when implementing the code or web technology shown in the article.
Similar to the usage notes, the accessibility concerns section covers best practices that should be followed so that anyone visiting your website can use it.
The specifications section provides links to resources that discuss the article’s topic in more detail. This article’s section goes into the design of these HTML elements, what their purpose is, and how they should function.
This section displays information about which web browsers can support, or properly display the HTML elements, discussed in the article. The information found here is similar to the information you would find on a website like caniuse.com although less detailed.
There are two sections of this article that will show you additional, related topics: the section “See also” and the sidebar under “Related Topics.” Both provide linked articles that discuss topics related to the subject of the current article.
In this article you learned:
- How to search on MDN
- What sections provide practical help with syntax and style
- Where you can interact with examples
- What sections have more information about a topic, including new terminology and more complex contexts and uses
Introducing you to MDN documentation early on provides you with an additional resource for looking up syntax and familiarizes you with one of the most important sources of documentation about web technologies. It also gives you the resources to enrich and extend your knowledge of a topic or subject beyond a beginner-level. So when you’re stuck on something, or you just want to learn a little more, try reading the documentation. You might just find what you’re looking for!