Web developer guides

There are many guides on MDN Web Docs that teach you how to use features or APIs through practical examples. This page is a curated list of some of the most popular goal-oriented learning material.

HTML

• Structuring the web with HTML
  • : The HTML learning area offers tutorials to help you learn HTML from the ground up.
• HTML basics
  • : This article will give you a basic understanding of HTML. After following this guide, you can further explore the material in the HTML Learning Area.

CSS

• Learn to style HTML using CSS
  • : Our complete CSS tutorial, taking you from first steps through styling text, creating layouts, and more.
• CSS Layout Guides
  • : There are a large number of guides to CSS Layout across MDN, this page collects them all together.
• Using CSS animations
  • : CSS animations make it possible to animate transitions from one CSS style configuration to another. This guide will help you get started with the animation properties.

JavaScript

• JavaScript learning area
  • : Whether you are a complete beginner, or hoping to refresh your skills, this is the place to start.

Media

• Audio and video delivery
  • : We can deliver audio and video on the web in several ways, ranging from ‘static’ media files to adaptive live streams. This article is intended as a starting point for exploring the various delivery mechanisms of web-based media and compatibility with popular browsers.
• Audio and video manipulation
  • : The beauty of the web is that you can combine technologies to create new forms. Having native audio and video in the browser means we can use these data streams with technologies such as {{htmlelement("canvas")}} , WebGL or Web Audio API to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video. This article provides a reference to explain what you need to do.

APIs

• Using FormData objects
  • : The FormData object lets you compile a set of key/value pairs to send using {{domxref("Window/fetch", "fetch()")}} . It’s primarily intended for sending form data, but can be used independently of forms to transmit keyed data. The transmission is in the same format that the form’s submit() method would use to send the data if the form’s encoding type were set to “multipart/form-data”.
• Progressive web apps
  • : Progressive web apps (PWAs) use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of guides tells you all you need to know about PWAs.
• Parsing and serializing XML
  • : The web platform provides different methods of parsing and serializing XML, each with its pros and cons.

Performance

• Optimization and performance
  • : When building modern web apps and sites, it’s important to make your content work quickly and efficiently. This lets it perform effectively for both powerful desktop systems and weaker handheld devices.

Mobile web development

• Learn: Responsive design
  • : This article provides an overview of some main techniques needed to design websites that work well on mobile devices.

Fonts

• Variable fonts guide
  • : Find out how to use variable fonts in your designs.
• The Web Open Font Format (WOFF)
  • : WOFF (Web Open Font Format) is a font file format that is free for anyone to use on the web.

User interface development

• User input methods and controls
  • : User input goes beyond just a mouse and keyboard: think of touchscreens for example. This article provides recommendations for managing user input and implementing controls in open web apps, along with FAQs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.