Welcome to the MDN learning area. This set of articles aims to guide complete beginners to web development with all that they need to start coding websites.
The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." From there, you should be able to start making your way, learning from the rest of MDN, and other intermediate to advanced resources that assume a lot of previous knowledge.
If you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.
Looking to become a front-end web developer?
We have put together a course that includes all the essential information you need to work towards your goal.
- Complete beginner
If you are a complete beginner to web development, we'd recommend that you start by working through our Getting started with the web module, which provides a practical introduction to web development.
- Beyond the basics
- Moving onto scripting
- Frameworks and tooling
The following is a list of all the topics we cover in the MDN learning area.
- Getting started with the web
Provides a practical introduction to web development for complete beginners.
- HTML — Structuring the web
HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.
- CSS — Styling the web
CSS is the language that we use to control our web content's style and layout, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.
- Web forms — Working with user data
Web forms are a potent tool for interacting with users — most commonly, they are used for collecting data from users, or allowing them to control a user interface. In the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms.
- Accessibility — make the web usable by everyone
Accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. This topic gives you all you need to know.
- Web Performance — making websites fast and responsive
Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a user's bandwidth, screen size, network, or device capabilities.
MathML is the language that we can use to write mathematical formulas in web pages using fractions, scripts, radicals, matrices, integrals, series, etc. This topic covers MathML.
- Tools and testing
- Server-side website programming
Even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. This topic provides a general introduction to how the server-side works and detailed tutorials showing how to build up a server-side app using two popular frameworks: Django (Python) and Express (Node.js).
In the Learn web development section of MDN, there are many self-contained modules that contain articles, tasks, examples, and assessments for you to complete. Here are some tips on how to get the most out of them. There are two main types of tasks you'll encounter:
- "test your skills" tasks, for example in Making decisions in your code — conditionals)
- more in-depth assessments at the end of some modules (e.g. see Image gallery)
For most of these tasks, have a look at the GitHub repos associated with the learning area (most of the files are available in
mdn/learning-area, some are in [
Each assessment/skill test has an associated marking guide and recommended solution available to help you assess your work. There are patterns that make it easier to find these resources, for example:
The code examples you'll encounter in the Learning Area are all available on GitHub. If you want to copy them all to your computer, the easiest way is to download a ZIP of the latest master code branch.
If you prefer to copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions:
- Install Git on your machine. This is the underlying version control system software that GitHub works on top of.
- Open your computer's command prompt (Windows) or terminal (Linux, macOS).
- To copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command:
git clone https://github.com/mdn/learning-area
- You can now enter the directory and find the files you are after (either using your Finder/File Explorer or the
You can update the
learning-area repository with any changes made to the master version on GitHub with the following steps:
- In your command prompt/terminal, go inside the
cd. For example, if you were in the parent directory:bash
- Update the repository using the following command:
If you want to get in touch with us about anything, use the communication channels. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns.
If you're interested in helping develop/improve the content, take a look at how you can help and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.
- MDN Blog
Our newsletter for web developers, which is an excellent resource for all levels of experience.
- Web demystified
A great series of videos explaining web fundamentals, aimed at absolute beginners to web development. Created by Jérémie Patonnier.
A great interactive site for learning programming languages from scratch.
Basic coding theory with a gamified learning process. Mainly focused on beginners.
Basic coding theory and practice, primarily aimed at children/complete beginners.
Interactive site with tutorials and projects to learn web development.
- The Odin Project
Features a free and open-source full-stack curriculum, from beginner to advanced.
- Web literacy map
A framework for entry-level web literacy and 21st-century skills, which also provides access to teaching activities sorted by category.