You are on page 1of 7

Learn web development | MDN https://developer.mozilla.

org/en-US/docs/Learn

Technologies References & Guides Feedback Sign in

Welcome to the MDN learning area. This set of articles aims to provide
complete beginners to web development with all that they need to start
coding simple 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 own 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.

1 of 7 26/05/2019, 22:17
Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn

If you are a If you have a


complete specific If you have a If you are
beginner to question bit of comfortable
web about web knowledge with HTML
development, development, already, the and CSS
we'd our Common next step is to already, or
recommend questions learn HTML you are
that you start section may and CSS in mainly
by working have detail: start interested in
through our something to with our coding, you'll
Getting help you. Introduction want to move
started with to HTML on to
the web module and JavaScript or
module, move on to server-side
which our development.
provides a Introduction Begin with
practical to CSS our
introduction module. JavaScript
to web first steps
development. and Server-
side first
steps
modules.

Random glossary entry


Whitespace
Whitespace is a set of characters used to show horizontal or
vertical spaces between other characters. They are often used to

2 of 7 26/05/2019, 22:17
Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn

separate tokens in HTML, CSS, JavaScript, and other computer


languages.

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 can use to style and lay out our web
content, as well as adding behavior like animation. This topic provides
comprehensive coverage of CSS.

JavaScript — Dynamic client-side scripting


JavaScript is the scripting language used to add dynamic functionality to
web pages. This topic teaches all the essentials needed to become
comfortable with writing and understanding JavaScript.

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

3 of 7 26/05/2019, 22:17
Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn

fast and are responsive to user interaction, regardless of a users


bandwidth, screen size, network, or device capabilities.

Tools and testing


This topic covers the tools developers use to facilitate their work, such as
cross browser testing tools.

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).

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'd rather copy the repo in a more flexible way that allows for automatic
updates, you can follow the more complex instructions:

1. Install Git on your machine. This is the underlying version control


system software that GitHub works on top of.
2. Sign up for a GitHub account.

3. Once you've signed up, log in to github.com with your username and
password.
4. Open your computer's command prompt (Windows) or terminal (
Linux, macOS)

5. 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:

4 of 7 26/05/2019, 22:17
Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn

1 git clone https://github.com/mdn/learning-area

6. You can now enter the directory and find the files you are after (either
using your finder/file explorer or the cd command).

You can update the learning-area repository with any changes made to
the master version on GitHub with the following steps:

1. In your command prompt/terminal, go inside the learning-area


directory using cd . For example, if you were in the parent directory:

1 cd learning-area

2. Update the repository using the following command:

1 git pull

If you want to get in touch with us about anything, the best way is to drop us
a message on our learning area discourse thread or IRC 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.

5 of 7 26/05/2019, 22:17
Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn

Mozilla developer newsletter


Our newsletter for web developers, which is a great resource for all levels
of experience.

Web demystified
A great series of videos explaining web fundamentals, aimed at complete
beginners to web development. Created by Jérémie Patonnier.

Codecademy
A great interactive site for learning programming languages from scratch.

Code.org
Basic coding theory and practice, mainly aimed at children/complete
beginners.

EXLskills
Free and open courses for learning tech skills, with mentorship and
project-based learning

freeCodeCamp.org
Interactive site with tutorials and projects to learn web development.

Web literacy map


A framework for entry-level web literacy & 21st Century skills, which also
provides access to teaching activities sorted by category.

Teaching activities
A series of teaching activities for teaching (and learning) created by the
Mozilla Foundation, covering everything from basic web literacy and
privacy to JavaScript and hacking Minecraft.

Edabit
Hundreds of free interactive coding challenges in various languages.

6 of 7 26/05/2019, 22:17
Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn

7 of 7 26/05/2019, 22:17