Learn web development

See also

Complete beginners start here!
Getting started with the Web
1. Getting started with the Web overview
2. Installing basic software
3. What will your website look like?
4. Dealing with files
5. HTML basics
6. CSS basics
7. JavaScript basics
8. Publishing your website
9. How the Web works
HTML — Structuring the Web
Introduction to HTML
1. Introduction to HTML overview
2. Getting started with HTML
3. What's in the head? Metadata in HTML
4. HTML text fundamentals
5. Creating hyperlinks
6. Advanced text formatting
7. Document and website structure
8. Debugging HTML
9. Assessment: Marking up a letter
10. Assessment: Structuring a page of content
Multimedia and embedding
1. Multimedia and embedding overview
2. Images in HTML
3. Video and audio content
4. From object to iframe — other embedding technologies
5. Adding vector graphics to the Web
6. Responsive images
7. Assessment: Mozilla splash page
HTML tables
1. HTML tables overview
2. HTML table basics
3. HTML Table advanced features and accessibility
4. Assessment: Structuring planet data
CSS — Styling the Web
Introduction to CSS
1. Introduction to CSS overview
2. How CSS works
3. CSS syntax
4. Selectors introduction
5. Simple selectors
6. Attribute selectors
7. Pseudo-classes and pseudo-elements
8. Combinators and multiple selectors
9. CSS values and units
10. Cascade and inheritance
11. The box model
12. Debugging CSS
13. Assessment: Fundamental CSS comprehension
Styling text
1. Styling text overview
2. Fundamental text and font styling
3. Styling lists
4. Styling links
5. Web fonts
6. Assessment: Typesetting a community school homepage
Styling boxes
1. Styling boxes overview
2. Box model recap
3. Backgrounds
4. Borders
5. Styling tables
6. Advanced box effects
7. Assessment: Creating fancy letterheaded paper
8. Assessment: A cool-looking box
CSS layout
1. CSS layout overview
2. Introduction
3. Floats
4. Positioning
5. Practical positioning examples
6. Flexbox
7. Grids
JavaScript — Dynamic client-side scripting
JavaScript first steps
1. JavaScript first steps overview
2. What is JavaScript?
3. A first splash into JavaScript
4. What went wrong? Troubleshooting JavaScript
5. Storing the information you need — Variables
6. Basic in JavaScript — Numbers and operators
7. Handling text — Strings in JavaScript
8. Useful string methods
9. Arrays
10. Assessment: Silly story generator
JavaScript building blocks
1. JavaScript building blocks overview
2. Making decisions in your code — Conditionals
3. Looping code
4. Functions — Reusable blocks of code
5. Build your own function
6. Function return values
7. Introduction to events
8. Assessment: Image gallery
Introducing JavaScript objects
1. Introducing JavaScript objects overview
2. Object basics
3. Object-oriented JavaScript for beginners
4. Object prototypes
5. Inheritance in JavaScript
6. Working with JSON data
7. Object building practise
8. Assessment: Adding features to our bouncing balls demo
Accessibility — Make the web usable by everyone
Accessibility guides
1. Accessibility overview
2. What is accessibility?
3. HTML: A good basis for accessibility
4. CSS and JavaScript accessibility best practices
5. WAI-ARIA basics
6. Accessible multimedia
7. Mobile accessibility
Accessibility assessment
1. Assessment: Accessibility troubleshooting
Tools and testing
Cross browser testing
1. Cross browser testing overview
2. Introduction to cross browser testing
3. Strategies for carrying out testing
4. Handling common HTML and CSS problems
5. Handling common JavaScript problems
6. Handling common accessibility problems
7. Implementing feature detection
8. Introduction to automated testing
9. Setting up your own test automation environment
Server-side website programming
First steps
1. First steps overview
2. Introduction to the server-side
3. Client-Server overview
4. Server-side web frameworks
5. Website security
Django web framework (Python)
1. Django web framework (Python) overview
2. Introduction
3. Setting up a development environment
4. Tutorial: The Local Library website
5. Tutorial Part 2: Creating a skeleton website
6. Tutorial Part 3: Using models
7. Tutorial Part 4: Django admin site
8. Tutorial Part 5: Creating our home page
9. Tutorial Part 6: Generic list and detail views
10. Tutorial Part 7: Sessions framework
11. Tutorial Part 8: User authentication and permissions
12. Tutorial Part 9: Working with forms
13. Tutorial Part 10: Testing a Django web application
14. Tutorial Part 11: Deploying Django to production
15. Web application security
16. Assessment: DIY mini blog
Express Web Framework (node.js/JavaScript)
1. Express Web Framework (Node.js/JavaScript) overview
2. Express/Node introduction
3. Setting up a Node (Express) development environment
4. Express tutorial: The Local Library website
5. Express Tutorial Part 2: Creating a skeleton website
6. Express Tutorial Part 3: Using a database (with Mongoose)
7. Express Tutorial Part 4: Routes and controllers
8. Express Tutorial Part 5: Displaying library data
9. Express Tutorial Part 6: Working with forms
10. Express Tutorial Part 7: Deploying to production
Further resources
Advanced learning material
1. WebGL: Graphics processing
Common questions
1. HTML questions
2. CSS questions
3. JavaScript questions
4. How the Web works
5. Tools and setup
6. Design and accessibility
How to contribute

Welcome to the MDN Learning Area. This set of articles aims to provide complete beginners to web development with all 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.

Important: The content in the Learning Area is being added to regularly. If you have questions regarding topics you'd like to see covered or feel are missing, see the Contact us section below for information on how to get in touch.

Where to start

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.
Specific questions: If you have a specific question about web development, our Common questions section may have something to help you.
Beyond the basics: If you have a bit of knowledge already, the next step is to learn HTML and CSS in detail: start with our Introduction to HTML module and move on to our Introduction to CSS module.
Moving onto scripting: If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move onto JavaScript or server-side development. Begin with our JavaScript first steps and Server-side first steps modules.

Note: Our Glossary provides terminology definitions.

Random glossary entry

Header: An HTTP header is a field of an HTTP request or response that passes additional information, altering or precising the semantics of the message or of the body. Headers are case-insensitive, begins at the start of a line and are immediately followed by a ':' and a value depending of the header itself. The value finish at the next CR or at the end of the message.

Topics covered

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 disabilitiy, device, locale, or other differentiating factors. This topic gives you all you need to know.
Tools and testing: This topic is a place to cover 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 about how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials detailing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js).

Getting our code examples

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:

Install Git on your machine. This is the underlying version control system software that GitHub works on top of.
Sign up for a GitHub account. It's simple and easy.
Once you've signed up, log in to github.com with your username and password.
Open your computer's command prompt (Windows) or terminal (Linux, MacOSX)
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 cd command).

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 learning-area directory using cd. For example, if you were in the parent directory:
```
cd learning-area
```
Update the repository using the following command:
```
git pull
```

Contact us

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.

Join the Learn community

Choose your preferred method for joining the discussion:

IRC: #mdn (learn more)