microsoft/Web-Dev-For-Beginners

This repository is a structured, multi-language educational curriculum for web and AI development, organized as a Docsify-based documentation site. It provides a series of hands-on coding exercises and complete solutions covering topics such as HTML/CSS, JavaScript game development, browser extensions, and Python-based AI integrations. The system supports learners through interactive quiz applications, localized content in numerous languages, and standardized governance files to facilitate community contribution.

19 changes.

The repository was reorganized into a Docsify-based curriculum with standardized governance files, while legacy bank application materials were removed. Significant updates included migrating the browser extension to Manifest V3, upgrading core dependencies across multiple projects, and introducing new interactive quiz and game solutions with improved accessibility and UI.

8 changes.

This period focused on expanding the curriculum with new interactive projects, including an AI Chat application using FastAPI and LangChain, and a Next.js-based Memory Game. It also involved significant localization efforts, adding Arabic translations for web development lessons and updating image metadata for multiple languages.

Introduced a new interactive Memory Game component in the application. Users can now play a card-matching game where they select a grid size (even numbers between 2 and 10) to generate a randomized board. The game tracks flipped cards, highlights matched pairs in green, and displays a 'You Won!' message upon completion, with a reset button to start a new game.

memory-game/components · high confidence

New Python scripts demonstrate how to interact with the GitHub Models inference endpoint using the LangChain library. The examples cover basic chat completion (app.py), multi-turn conversation history (app-chat.py), and tool/function calling capabilities (app-tools.py), all configured to use the GPT-4o-mini model via the GitHub inference API.

10-ai-framework-project/code · high confidence

This change introduces the solution files for the '2-drawing-to-canvas' exercise, providing a complete implementation of an 'Arcade Monster Attack' game. The HTML file sets up the game interface with a canvas element, integrates the Orbitron font and FontAwesome icons for styling, and displays score and lives. The JavaScript file implements the core rendering logic, including loading external assets (player and enemy images), drawing text with specific styling (shadow, font), and rendering the game scene with a hero ship and a grid of enemy monsters on a dark background.

6-space-game/2-drawing-to-canvas/solution · high confidence

The memory-game location has been initialized as a Next.js application. This includes standard configuration files such as \.gitignore\, \eslint.config.mjs\ (using \next/core-web-vitals\), \next.config.mjs\, \postcss.config.mjs\ (with \@tailwindcss/postcss\), and \jsconfig.json\ (setting up \@/\*\ path aliases). A \README.md\ has also been added with instructions for running the development server and deploying to Vercel.

memory-game · high confidence

This change introduces the complete starter solution for the AI Chat project, including a Python FastAPI backend and a JavaScript frontend. The backend (located in \backend/python/\) provides an API endpoint at \/hello\ that accepts user messages and returns responses generated by an LLM via the GitHub Models inference API, requiring a \GITHUB\_TOKEN\ environment variable. The frontend (located in \frontend/\) consists of an HTML page, CSS styles for a dark-mode chat interface, and JavaScript logic to handle user input, display messages, and communicate with the backend API. Documentation in the respective \README.md\ files guides users on setting up the virtual environment, installing dependencies, and running both services.

9-chat-project/solution · high confidence

This change introduces the core structure for the Memory Game, adding the root layout with Next.js font optimization (Geist) and Tailwind CSS styling, along with the main page component that renders the MemoryGame UI.

memory-game/app · high confidence

This change introduces the complete solution for the Space Game, including the main application logic in app.js, the user interface in index.html, and associated assets. The game features a canvas-based shooter with configurable difficulty levels (easy, normal, hard, insane) and graphics settings (low, medium, high, ultra). Users can control the player ship using WASD or arrow keys, manage audio volumes, toggle fullscreen mode, and adjust settings via a dialog. The interface includes a heads-up display for score, level, lives, and shield status, along with start, pause, reset, and mute controls. The solution also includes a placeholder README and renamed asset files.

6-space-game/solution · high confidence

This change introduces the \quiz-app\ source code, providing a Vue-based interface for interactive quizzes. The app includes a main layout with navigation, global styling, and a comprehensive localization system supporting 15 languages (including English, Spanish, French, Hindi, Korean, and Japanese) via JSON translation files and an index loader, enabling users to complete and review quiz content in their preferred language.

quiz-app/src · high confidence

The Arabic translation set for the web development curriculum has been added, including lesson content, assignments, and metadata. This covers the 'Getting Started' lessons (intro to programming languages, GitHub basics, accessibility) and the 'AI Framework' project, enabling users to access these materials in Arabic.

translations · high confidence

The 7-bank-project/solution directory now contains a complete client-side banking application (Squirrel Banking) that manages accounts and transactions using local storage instead of a live API. The app provides login and registration forms, a dashboard displaying account balances and transaction history, and a modal for adding transactions. It features a responsive design with automatic light/dark theme support based on system preferences, respects reduced motion settings, and includes accessibility improvements such as ARIA labels, roles, and focus management.

7-bank-project/solution · high confidence

A new Vue 3-based quiz app has been added to provide interactive pre- and post-lecture quizzes for the data science curriculum. The application supports multiple languages, allowing users to add translated quiz sets by creating matching structures in the \assets/translations\ folders. It is built with Vite and includes instructions for running the app locally and deploying it to Azure Static Web Apps.

quiz-app · high confidence

The repository has been reorganized into a structured educational curriculum served via Docsify, featuring a new landing page (index.html), custom styling (index.css), and automated multi-language translation support. The project now includes standardized governance documents (CODE\_OF\_CONDUCT.md, CONTRIBUTING.md, SECURITY.md, SUPPORT.md) and a centralized MIT license, replacing the previous fragmented file structure. This change provides a unified, navigable documentation experience for learners and contributors while establishing clear community and security guidelines.

(repo-wide) · high confidence

The solution now provides a complete, interactive virtual terrarium where users can drag and drop 14 distinct plant images into a glass jar container. The interface features a modernized design with a styled navigation bar, header, and footer, enhanced by Font Awesome icons for visual cues. The underlying JavaScript implements pointer-based drag-and-drop logic, allowing users to reposition plants freely within the browser window.

3-terrarium/solution · high confidence

Deleted the documentation, quizzes, and assignment instructions for the bank web application lessons covering HTML templates and routing, forms, and data fetching. This includes the English and Spanish READMEs, pre- and post-lecture quizzes, and assignment rubrics for the \1-template-route\, \2-forms\, and \3-data\ modules.

(repo-wide) · high confidence

A change to existing behaviour in teaching-files — 2 commits, 4 files.

teaching-files · medium confidence · unverified

The space game now supports defined win and lose states, allowing players to complete or fail the game and restart. Victory is triggered when all enemies are destroyed, while defeat occurs when the hero's lives reach zero. Upon ending, the game loop stops, the canvas is cleared, and a message is displayed prompting the user to press Enter to restart. The restart mechanism resets the game state, clears event listeners, and reinitializes the game loop. Additionally, the hero's movement speed has been increased (from 5 to 20 pixels per key press), and a bug in the laser cooldown logic was fixed to ensure the interval clears correctly when the cooldown reaches zero.

6-space-game/6-end-condition · high confidence

The browser extension has been updated to Manifest V3, replacing the deprecated \browser\_action\ with \action\ and switching the background script to a service worker. The extension now uses the modern \chrome.action\ API for icon updates and \OffscreenCanvas\ for icon rendering. Additionally, the settings page includes accessibility improvements by adding \for\ and \id\ attributes to form labels and inputs.

5-browser-extension/solution/dist · high confidence

The browser extension in the 5-browser-extension/start location has been migrated from Manifest V2 to Manifest V3. This update changes the background script execution to use a service worker, replaces the 'permissions' array with 'host\_permissions' for URL access, and updates the UI trigger configuration from 'browser\_action' to 'action'.

5-browser-extension/start/dist · high confidence

The API server now accepts CORS requests from 127.0.0.1 addresses in addition to localhost, resolving connectivity issues for clients running on the loopback interface. The setup instructions in the README have been updated to reflect the new project directory structure (Web-Dev-For-Beginners/7-bank-project/api) and clarify that the API server runs alongside the main app server. A sample HTTP request date format was also simplified to remove the time component.

7-bank-project/api · high confidence

The game now correctly stops the laser firing timer when the cooldown reaches zero, preventing the interval from running indefinitely. Additionally, the hero's horizontal movement speed has been reduced from 20 to 5 pixels per key press, and the 'Enter' key listener for resetting the game has been removed.

6-space-game/4-collision-detection/solution · high confidence

The extension now safely handles cases where the CO2Signal API returns missing carbon intensity or fossil fuel percentage data, preventing crashes and displaying a clearer 'data unavailable' message to the user. Additionally, the local storage key for the region has been renamed from 'regionName' to 'region' to align with the updated code logic.

5-browser-extension/solution · high confidence

The 'Adding Motion' lesson and its associated solution and student work files have been moved from the \space-game\ directory to the \6-space-game\ directory structure. Additionally, the pre-lecture quiz link in the README has been updated to point to the new quiz application at \ff-quizzes.netlify.app\.

6-space-game/3-moving-elements-around · high confidence

The files for the 'drawing to canvas' exercise have been moved from the \space-game\ root into the new \6-space-game\ subdirectory, aligning with the updated folder naming convention. The \app.js\ starter file has been restored to the \your-work\ directory (previously located in \solution\), providing users with the initial code structure for Chapter 6.2. The JavaScript code itself remains functionally identical, with only whitespace formatting changes (tabs to spaces).

6-space-game/2-drawing-to-canvas/your-work · high confidence

The solution for the typing game has been updated to include a polished UI with a modern gradient theme, responsive layout, and visual feedback for correct and incorrect typing. A new date and time display has been added to the interface, updating every minute. Accessibility improvements include hidden labels for screen readers and proper ARIA attributes on input fields. The game logic remains focused on timing and word validation, with clear success and error messages.

4-typing-game/solution · high confidence

The \translated\_images\ directory has been updated with new \.co-op-translator.json\ files for languages including Bulgarian (bg), Bengali (bn), Czech (cs), Danish (da), German (de), Greek (el), and English (en). These files now contain metadata for 860 images, recording their original file hashes, source paths, and translation dates, ensuring the localized image assets are correctly tracked and synchronized with the latest source changes.

_translated\images · high confidence

The laser firing cooldown mechanism in the space game has been corrected to ensure the timer stops precisely when the cooldown reaches zero. Previously, the interval was cleared in the \else\ block, which could lead to the interval running one extra tick or clearing at a non-zero value; the new logic explicitly checks \if (this.cooldown === 0)\ before clearing the interval, ensuring accurate timing for subsequent shots.

6-space-game/5-keeping-score · high confidence

This update upgrades core dependencies in several projects to address security vulnerabilities and improve stability. In the browser extension (both start and solution), axios is upgraded from 0.19.2 to 1.15.0 and webpack from 4.44.1 to 5.105.x. The quiz app updates its build tooling, bumping vite to 6.4.2 and @vitejs/plugin-vue to 5.2.4. The memory game upgrades Next.js to 16.2.3 and React to 19.1.0. Additionally, the 7-bank-project/api updates express to 4.21.2 and body-parser to 1.20.3.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• First survey — no prior run to compare against. CAI 36.

• Code Health 48
• Architecture 98
• Maturity 69
• Readiness 26
• Security 35
• Accessibility 38
• Performance 100

• 300 commits — 292 feature/other, 8 fixes

• (repo) — 49 commits
• memory-game/package-lock.json — 9 commits
• translations/et — 9 commits
• (root) — 7 commits
• quiz-app/package-lock.json — 7 commits
• translations/ar — 7 commits
• translations/bg — 7 commits
• translations/el — 7 commits
• translations/hr — 7 commits
• translations/kn — 7 commits
• translations/cs — 6 commits
• translations/da — 6 commits
• translations/he — 6 commits
• translations/lt — 6 commits
• 5-browser-extension/solution — 5 commits
• 5-browser-extension/start — 5 commits
• translations/bn — 5 commits
• translations/id — 5 commits
• translations/it — 5 commits
• translations/pa — 5 commits

• fix: Fix broken links in intro to programming languages lesson
• fix: Merge pull request #1678 from GziXnine/docs/fix-genai-js-link
• fix: Merge pull request #1746 from 04cb/fix/broken-quiz-links
• fix: Merge pull request #1748 from mitre88/fix/windows-commands-learn-link
• fix: Merge pull request #1795 from mitre88/fix-broken-flexbox-grid-link
• fix: fix: correct malformed markdown link to genai-js-course
• fix: fix: replace broken flexbox-vs-grid link with MDN reference
• fix: fix: replace dead Windows commands docs link with Learn URL
• change: Add agentic workflow daily-repo-status
• change: Add agentic workflow daily-repo-status
• change: Add agentic workflow daily-repo-status
• change: Fix badge formatting in README.md
• change: Fix grammar and improve readability in README
• change: Merge pull request #1246 from KrshnK/Adding-Roadmap.md
• change: Merge pull request #1551 from anasahhm/main
• change: Merge pull request #1668 from microsoft/update-translations
• change: Merge pull request #1670 from microsoft/update-translations
• change: Merge pull request #1671 from microsoft/dependabot/npm_and_yarn/memory-game/tar-7.5.3
• change: Merge pull request #1673 from microsoft/update-translations
• change: Merge pull request #1675 from microsoft/dependabot/npm_and_yarn/quiz-app/lodash-4.17.23
• …and 280 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

microsoft/Web-Dev-For-Beginners was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.