As an aspiring developer or as a teacher looking to extend your knowledge of code, it can be difficult to know where to start with web technologies. In this blog post, we’ll be discussing why we have created the Mozilla Developer Network Learning Area to help solve common learning challenges and get you up and running with web development.

The aim of the Learning Area is to take beginners from “beginner to comfortable”, with HTML, CSS, JavaScript, and other core web technologies. Once you’ve worked through the early parts of the Learning Area, you should have enough knowledge to be comfortable using the rest of the Mozilla Developer Network (MDN) site. In addition to helping you on your learning journey, we anticipate that the Learning Area will extend our readership and contributor base, and in turn improve SEO on the site.

Why the new Learning Area?

Learning the craft of web design and development (and all the related disciplines) has been a hot topic for as long as we can remember. Many web education initiatives and resources have been worked on over the years, and many related problems have largely moved sideways rather than forwards:

1. There is a shortage of skilled junior web creators coming into the industry.
2. Traditional educational establishments often tend to be behind the curve in understanding the industry they are sending their students into. It is challenging to keep courses relevant and up-to-date. Many private code schools have appeared to fill the gap left by a lack of quality learning materials for beginning web builders.
3. The above point is perhaps not so surprising when you consider that industry standards and best practices evolve very quickly, and also that web is somewhat of an orphan — it doesn’t comfortably fit into traditional technical departments like Comp Sci/Software engineering (too many “soft“ skills), or design departments (too much code and scary stuff like that). As a field of study, web is very much a hybrid.

Note: Many of the effective web-related courses at universities that “get it” are found in tangentially-related departments such as business and journalism. And speaking of the “bad” courses, teachers generally do care and want to improve things, but don’t necessarily have the knowledge or time to rapidly iterate on curricula. And the curricula are often slow to change because of bureaucracy.

It is MDN’s wish to help with such problems by producing a reliable set of beginner’s learning materials that will help students understand the technologies the web is built on, and how to use them to create accessible cross browser websites/apps. The MDN Learning Area aims to:

• Make effective material whether the students are self-directed learners, or part of a structured class.
• Structure the material loosely so teachers can use it as supplementary material on top of their own curricula, or a basis for new curricula. Too much structure makes the material limiting and not very flexible.
• Cover a core minimum viable product consisting of HTML, CSS, JavaScript, accessibility, and server-side development basic concepts. The material should represent a standard for web learning and best practices. If enough educators use it, it will provide much needed consistency.
• Regularly review the material to keep it up to date.

Note: We also want to make the publishing license permissive enough so that others can easily grab and use it in any way they desire. The default MDN license is cc-by-sa, which means that others can republish the content as they wish, as long as they credit the original author, and any modifications are published under the same license as the original, thereby keeping it freely available. The associated code examples are licensed under CC0 (anyone can use them as they wish without restriction).

Where are we now?

While we continue to add to the MDN Learning Area content, there is already plenty of modules that beginners can start to use. For a start, we have a complete beginner’s learning module for those who have no previous experience and only basic computer literacy: Getting started with the Web.

The next stage in the learning journey is our Introduction modules, which teach the real basics of the technologies. So far, we have one for both HTML and CSS:

• Introduction to HTML
• Introduction to CSS

To follow on from those, we have some further HTML and CSS modules, which aim to go beyond the basics and expand on some of the core applications of those technologies:

• HTML Multimedia and embedding
• Styling text
• Styling boxes

Each module has a number of articles to discuss the important features and techniques involved, plus an assessment or two at the end to test your comprehension of those teachings.

We also have a well-developed Glossary, and a list of standalone articles that address specific topics related to the main Learning Area thread, but don’t directly fit into the core learning stream: see common questions.

Future work

The latest module being written is CSS layout, which will cover all of the layout techniques currently in use on the modern web, with advice on what they should be used for.

Future content for the site will also include modules on core server side development basics, accessibility and JavaScript, and possibly other topics too.

Call to action

We are always looking for contributors to help write and otherwise shape the material — with such a small team of writers, it takes time to create all the material. Having extra people on board also helps with making for a better rounded set of ideas, feedback and styles.

If you feel inspired and want to help with contributing to the LA — whether with writing, translating existing material, tech review, copy editing, or other kinds of feedback, please get in touch! We are always happy to curate outside contributions, as it leads to a more rounded, collaborative effort.

We are also really interested in hearing from potential students and teachers that might want to work through the materials and provide feedback on their learning experience.

The best ways to get in touch with us are:

• Through the #mdn channel on Mozilla IRC
• Or through the dev-mdc mailing list

We also have a Trello board that gives an idea of currently available writing projects.