Skip to content

Guide · Open source

How to use Web-Dev-For-Beginners: clone, follow lessons and practise

Updated · written with AI from the project's own documentation and checked against our catalogue data

Web-Dev-For-Beginners is a free, MIT-licensed curriculum from Microsoft Cloud Advocates. It has 24 lessons over about 12 weeks that teach JavaScript, CSS and HTML through small projects. This guide shows you how to get the material onto your computer, how each lesson is structured, and how to use it as a self-paced course.

Web-Dev-For-Beginnersmicrosoft/Web-Dev-For-Beginners · ★ 97.1k · MIT

Quick start

  1. 1Install Git. Make sure Git is installed, since it is the only prerequisite the README lists for this clone-and-build method.
  2. 2Clone the repository. Run the git clone command for https://github.com/microsoft/Web-Dev-For-Beginners.git in the folder where you keep projects.
  3. 3Optionally use sparse checkout. If you want a smaller download without translations, use the filter, sparse and sparse-checkout commands from the README.
  4. 4Open the folder in your editor. Open the cloned Web-Dev-For-Beginners folder in your editor. The README links to an Open in Visual Studio Code option.
  5. 5Start Lesson 1 with the pre-lecture quiz. Take the pre-lecture quiz, read the lecture, and complete the activities in order.
  6. 6Finish with the post-lecture quiz. Check your understanding with the post-lecture quiz, then move to the next lesson.
  7. 7Join the discussions. Ask questions and share your projects in the discussion forum linked from the README.

What Web-Dev-For-Beginners is and who it suits

This is a curriculum, not a software product you install and run. Each of the 24 lessons covers part of JavaScript, CSS and HTML through hands-on projects such as a terrarium, browser extensions and a space game.

It is aimed at complete beginners who want a structured, self-paced path, at students who prefer project-based lessons with quizzes, and at teachers who want a ready-made course outline. The README describes it as a beginner curriculum, so experienced developers looking for advanced topics will not find them here.

What you need before you start

The install method is clone-and-build, and the only listed prerequisite is Git. You will also need a way to open and edit files; the README links to an Open in Visual Studio Code option, so VS Code is a natural choice, but the source does not require it.

  • Git installed on your computer
  • A text editor such as Visual Studio Code (linked in the README)
  • A GitHub account if you want to fork the repository or join discussions

Clone the repository to your computer

Run the clone command from the README to download a copy of the course. The address is the official microsoft repository on GitHub.

The repository includes more than 50 translations, which makes the download large. The README gives a sparse checkout option that skips the translations folders. The commands below are copied from the README for Bash, macOS and Linux.

git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Download a smaller copy without translations

If you only want the English lessons and a faster download, use the sparse checkout commands from the README. The README says this gives you everything you need to complete the course. On Windows, the README uses the CMD version, which differs only in the quote characters.

Bash, macOS and Linux version: clone with the filter and sparse flags, enter the folder, then set the sparse checkout to exclude the translations and translated_images folders.

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

Work through each lesson in order

Each lesson follows the same pattern. Start with the pre-lecture quiz, read the lecture material, complete the activities, then check your understanding with the post-lecture quiz.

The README suggests working with peers on the projects and using the discussion forum to ask questions. Moderators are available there to answer them.

  • Take the pre-lecture quiz
  • Read the lecture material
  • Complete the activities
  • Take the post-lecture quiz
  • Ask questions or share work in the discussion forum

Use the GitHub Copilot Agent challenges and extra resources

The README announces a new GitHub Copilot Agent challenge, which appears in most chapters and is labelled "GitHub Copilot Agent Challenge". The README describes Agent mode as able to generate text, create and edit files, and run commands.

Students can find beginner resources on the Student Hub page linked in the README. The README also says content is switched out monthly on that page, so check it from time to time. A separate Generative AI curriculum for JavaScript and an AI assistant project are also listed.

What people use it for

  • A beginner who wants a structured path through JavaScript, CSS and HTML with quizzes after each lesson
  • A student building small projects such as a terrarium, browser extensions and a space game
  • A teacher adapting a ready-made 12-week course outline for a class
  • A learner practising with GitHub Copilot Agent mode challenges placed in most chapters

Frequently asked questions

Is Web-Dev-For-Beginners free?

Yes. The README describes it as a free curriculum from Microsoft Cloud Advocates, and the repository is licensed under MIT. The README does not list any paid tier.

What do I need to install to use Web-Dev-For-Beginners?

The README lists Git as the prerequisite and uses a clone-and-build install method. You clone the repository and then work through the lesson files, usually in an editor such as Visual Studio Code.

How long does the course take?

The README describes 24 lessons spread over about 12 weeks. Because it is self-paced, your own schedule may be shorter or longer.

Can I download only the English lessons?

Yes. The README gives sparse checkout commands that exclude the translations and translated_images folders, which makes the download much faster.

Is it a good alternative to freeCodeCamp, The Odin Project or MDN Web Docs?

It is a project-based beginner course with quizzes, while freeCodeCamp, The Odin Project and MDN Web Docs are also common places to learn web development. Many learners use one of these alongside another, since they differ in format and depth.

Will the content change while I am studying?

Possibly. The README says content changes over time, and the Student Hub page is updated monthly, so the lesson material may differ from what you first read.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Web-Dev-For-Beginners suits complete beginners, students and teachers who want a free, structured, project-based course with quizzes and no installation beyond Git. Experienced developers wanting advanced topics, or anyone who wants a finished software product, should pick a different resource such as one of the comparable courses listed here.

Install options & downloads