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.
Quick start
- 1Install Git. Make sure Git is installed, since it is the only prerequisite the README lists for this clone-and-build method.
- 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.
- 3Optionally use sparse checkout. If you want a smaller download without translations, use the filter, sparse and sparse-checkout commands from the README.
- 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.
- 5Start Lesson 1 with the pre-lecture quiz. Take the pre-lecture quiz, read the lecture, and complete the activities in order.
- 6Finish with the post-lecture quiz. Check your understanding with the post-lecture quiz, then move to the next lesson.
- 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.gitDownload 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