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.

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 CSS first steps 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 on to JavaScript or server-side development. Begin with our JavaScript first steps and Server-side first steps modules.

Frameworks and Tooling

After mastering the essentials of vanilla HTML, CSS, and JavaScript, you should learn about client-side web development tools, and then consider digging into client-side JavaScript frameworks, and server-side website programming.

Topics Covered
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 layout our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.

Getting Our Code 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:

  1. Install Git on your machine. This is the underlying version control system software that GitHub works on top of. Command to install git on Mac with homebrew: $ brew install git
  2. Open your computer's command prompt (Windows) or terminal (Linux, macOS).
  3. 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
  4. 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: cd learning-area
  2. 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 Discourse forum. 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.

See Also

All the information on this page is taken from Learn Web Development