Intro to Mozilla Developer Network

Introduction: The Mozilla Developer Network

When learning a topic, it’s often helpful to go straight to the source to read more from the original documentation. For web development, one of the most well-known names in the industry is the Mozilla Developer Network, or “MDN” for short. This open-source network of documentation and tools has information about a wide variety of topics related to web development, including HTML, CSS, and JavaScript.

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
• Attributes
• Usage notes
• Examples
• Accessibility concerns
• Specifications
• 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.

Attributes

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 class or id that are used on all HTML elements.

Usage Notes

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.

Examples

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.

Supporting Sections

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.

Accessibility Concerns

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.

Specifications

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.

Browser Compatibility

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.

Related Topics

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.

Recap

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!