Learn di fundamentals of web development wit our 12-week complete course by Microsoft Cloud Advocates. Each of di 24 lessons go deep into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage wit quizzes, discussions, and practical assignments. Improve your skills and make sure sey you sabi well wit our good project-based way to learn. Start your coding journey today!
Join di Azure AI Foundry Discord Community
Follow these steps to start to use these resources:
- Fork di Repository: Click
- Clone di Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Join Di Azure AI Foundry Discord and meet experts and fellow developers
Prefer to Clone Locally?
Dis repository get 50+ language translations wey go make di download size big. To clone without translations, use sparse checkout:
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'Dis go give you everything you need to finish di course faster.
If you want make we add more translation languages, dem dey listed here
Visit Student Hub page wey get beginner resources, Student packs and even ways to get free certificate voucher. This na the page wey you go want bookmark and check every time because we dey change content every month.
New Challenge don add, look for "GitHub Copilot Agent Challenge 🚀" for most chapters. Na new challenge for you to complete using GitHub Copilot and Agent mode. If you never use Agent mode before e fit no only generate text but also fit create and edit files, run commands and more.
New AI Assistant project just add, check am project
No miss our new Generative AI curriculum!
Visit https://aka.ms/genai-js-course to start!
- Lessons wey cover everything from basics to RAG.
- Talk to historical characters using GenAI and our companion app.
- Fun and interesting story, you go dey time travel!
Every lesson get assignment to finish, knowledge check and challenge to guide you for learning topics like:
- Prompting and prompt engineering
- Text and image app generation
- Search apps
Visit https://aka.ms/genai-js-course to start!
Teachers, we get some suggestions on how to take use this curriculum. We go like make you give feedback for our discussion forum!
Learners, for each lesson, start wit pre-lecture quiz and follow am to read di lecture material, finish di activities and check your understanding wit post-lecture quiz.
To make your learning better, join wit your peers to work on projects together! Discussions dey encouraged for our discussion forum where our moderators go dey available to answer your questions.
To continue your education, we dey recommend say you check Microsoft Learn for more study materials.
Dis curriculum get development environment ready! As you start, you fit choose run di curriculum for Codespace (na browser-based, no need install environment), or locally for your computer using text editor like Visual Studio Code.
To make am easy for you to save your work, e good make you create your own copy of dis repository. You fit do am by clicking di Use this template button at di top of di page. E go create new repository for your GitHub account with copy of di curriculum.
Follow these steps:
- Fork the Repository: Click on di "Fork" button for top-right corner of dis page.
- Clone the Repository:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
For your copy of dis repository wey you create, click di Code button and select Open with Codespaces. E go create new Codespace for you to work.
To run dis curriculum locally for your computer, you go need text editor, browser and command line tool. Our first lesson, Introduction to Programming Languages and Tools of the Trade, go show you options for each of these tools to pick wey fit you best.
Our advice na to use Visual Studio Code as your editor, wey get inside Terminal. You fit download Visual Studio Code here.
-
Clone your repository to your computer. You fit do am by clicking di Code button and copy di URL:
CodeSpace Then, open Terminal inside Visual Studio Code and run dis command, replace
<your-repository-url>with di URL wey you just copy:git clone <your-repository-url>
-
Open di folder for Visual Studio Code. You fit do dis by click File > Open Folder and choose di folder wey you just clone.
Recommended Visual Studio Code extensions:
- Live Server - for preview HTML pages inside Visual Studio Code
- Copilot - to help you write code quick quick
- optional sketchnote
- optional supplemental video
- pre-lesson warmup quiz
- written lesson
- for project-based lessons, step-by-step guides on how to build di project
- knowledge checks
- challenge
- supplemental reading
- assignment
- post-lesson quiz
One note about quizzes: All quizzes dey inside Quiz-app folder, total na 48 quizzes with three questions each. Dem dey available here, di quiz app fit run locally or you fit deploy am for Azure; follow di instruction inside
quiz-appfolder.
| Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author | |
|---|---|---|---|---|---|
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn di basic foundation wey most programming languages get and about software wey dey help professional developers do dia work | Intro to Programming Languages and Tools of the Trade | Jasmine |
| 02 | Getting Started | Basics of GitHub, including how to work with team | How to use GitHub for your project, how to collaborate with others on code base | Intro to GitHub | Floor |
| 03 | Getting Started | Accessibility | Learn di basics of web accessibility | Accessibility Fundamentals | Christopher |
| 04 | JS Basics | JavaScript Data Types | Basics of JavaScript data types | Data Types | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage how application logic dey flow | Functions and Methods | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create condition inside your code using decision-making methods | Making Decisions | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | Arrays and Loops | Jasmine |
| 08 | Terrarium | HTML in Practice | Build di HTML to create online terrarium, dey focus on building layout | Introduction to HTML | Jen |
| 09 | Terrarium | CSS in Practice | Build di CSS to style di online terrarium, focus on basics of CSS including making di page responsive | Introduction to CSS | Jen |
| 10 | Terrarium | JavaScript Closures, DOM manipulation | Build di JavaScript to make terrarium work as drag/drop interface, focus on closures and DOM manipulation | JavaScript Closures, DOM manipulation | Jen |
| 11 | Typing Game | Build a Typing Game | Learn how to use keyboard events to run the logic of your JavaScript app | Event-Driven Programming | Christopher |
| 12 | Green Browser Extension | Working with Browsers | Learn how browsers work, dia history, and how to scaffold di first elements of a browser extension | About Browsers | Jen |
| 13 | Green Browser Extension | Building form, dey call API and storing variables inside local storage | Build JavaScript elements of your browser extension to call API using variables wey dey store inside local storage | APIs, Forms, and Local Storage | Jen |
| 14 | Green Browser Extension | Background processes for browser, web performance | Use browser background processes to manage extension icon; learn about web performance and some optimization to improve am | Background Tasks and Performance | Jen |
| 15 | Space Game | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and Pub/Sub pattern, to prepare for building game | Introduction to Advanced Game Development | Chris |
| 16 | Space Game | Drawing to canvas | Learn about di Canvas API wey dem dey use to draw elements for screen | Drawing to Canvas | Chris |
| 17 | Space Game | Moving elements around di screen | Discover how elements fit move using Cartesian coordinates and di Canvas API | Moving Elements Around | Chris |
| 18 | Space Game | Collision detection | Make elements collide and react to each other with keypresses and put cooldown function to make sure game performance pep | Collision Detection | Chris |
| 19 | Space Game | Keeping score | Do math calculations based on di game status and performance | Keeping Score | Chris |
| 20 | Space Game | Ending and restarting di game | Learn about ending and restarting game, including cleaning up assets and resetting variable values | The Ending Condition | Chris |
| 21 | Banking App | HTML Templates and Routes for Web App | Learn how to create scaffold of multipage website architecture using routing and HTML templates | HTML Templates and Routes | Yohan |
| 22 | Banking App | Build Login and Registration Form | Learn how to build forms and handle validation routines | Forms | Yohan |
| 23 | Banking App | Methods of Fetching and Using Data | How data dey flow in and out of your app, how to fetch am, store am, and discard am | Data | Yohan |
| 24 | Banking App | Concepts of State Management | Learn how your app dey keep state and how to manage am programmatically | State Management | Yohan |
| 25 | Browser/VScode Code | Working with VScode | Learn how to Using code editor | Use VScode Code Editor | Chris |
| 26 | AI Assistants | Working with AI | Learn how to build your own AI assistant | AI Assistant project | Chris |
Our curriculum design take two main pedagogy principles seriously:
- project-based learning
- frequent quizzes
Di program dey teach fundamentals of JavaScript, HTML, and CSS, plus di latest tools and techniques wey web developers dey use now. Students go fit develop hands-on experience by building typing game, virtual terrarium, eco-friendly browser extension, space-invader style game, and banking app for businesses. By the end of the course, students go get solid understanding of web development.
🎓 You fit take di first few lessons in dis curriculum as Learn Path for Microsoft Learn!
By making sure content match projects, the process go make learning more interesting for students and concepts go remain for mind well well. We also write some starter lessons for JavaScript basics to introduce concepts, plus video from "Beginners Series to: JavaScript" collection of video tutorials, some authors from the videos join to help design this curriculum.
Plus, low-stakes quiz before class dey set student mindset for learning topic, and second quiz after class make sure say dem remember well. This curriculum na flexible and fun one wey you fit do as whole or part. Projects start small and go get more complex by 12-week cycle end.
Even though we no bother to introduce JavaScript frameworks so that we go focus on basic skills wey web developers need before use framework, good next step after dis curriculum na to learn Node.js with another video series: "Beginner Series to: Node.js".
Visit our Code of Conduct and Contributing guidelines. We welcome your constructive feedback!
You fit run dis documentation offline by using Docsify. Fork this repo, install Docsify for your local machine, then for root folder of dis repo, type docsify serve. Di website go dey serve for port 3000 for your localhost: localhost:3000.
PDF of all di lessons fit find here.
Our team dey produce oda courses! Make you check am out:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
If you jam or get any question about how to build AI apps. Come join other learners and developers wey sabi well well for talks about MCP. Na supportive community wey dey welcome questions and dem share knowledge freely.
If you get product feedback or you see error as you dey build, visit:
Dis repository get MIT license. See the LICENSE file for more info.
Disclaimer: Dis document don translate wit AI translation service wey dem dey call Co-op Translator. Even though we dey try make am correct, abeg mek you sabi say machine translation fit get some errors or wrong tins. The og document for im original language na di correct one wey you suppose trust. If na important info, better make person wey sabi translate am well do the work. We no go take responsibility if pesin no understand or misunderstand tins because of dis translation.