From 290b8248ab481e721818886d1e8ec215cc061791 Mon Sep 17 00:00:00 2001 From: chris Date: Tue, 21 Oct 2025 21:29:31 +0000 Subject: [PATCH] update agent link --- 10-ai-framework-project/README.md | 2 ++ 2-js-basics/1-data-types/README.md | 2 ++ 2-js-basics/2-functions-methods/README.md | 2 ++ 2-js-basics/3-making-decisions/README.md | 2 ++ 2-js-basics/4-arrays-loops/README.md | 2 ++ 3-terrarium/1-intro-to-html/README.md | 2 ++ 3-terrarium/2-intro-to-css/README.md | 2 +- 3-terrarium/3-intro-to-DOM-and-closures/README.md | 2 ++ 4-typing-game/typing-game/README.md | 2 ++ 5-browser-extension/1-about-browsers/README.md | 2 +- 5-browser-extension/2-forms-browsers-local-storage/README.md | 2 ++ .../3-background-tasks-and-performance/README.md | 4 +--- 6-space-game/1-introduction/README.md | 2 ++ 6-space-game/2-drawing-to-canvas/README.md | 2 ++ 6-space-game/3-moving-elements-around/README.md | 2 ++ 6-space-game/6-end-condition/README.md | 2 ++ 7-bank-project/1-template-route/README.md | 2 ++ 7-bank-project/2-forms/README.md | 2 ++ 7-bank-project/3-data/README.md | 2 ++ 7-bank-project/4-state-management/README.md | 2 ++ 8-code-editor/1-using-a-code-editor/README.md | 2 ++ 9-chat-project/README.md | 2 ++ 22 files changed, 41 insertions(+), 5 deletions(-) diff --git a/10-ai-framework-project/README.md b/10-ai-framework-project/README.md index b1f232b2..e7d109f5 100644 --- a/10-ai-framework-project/README.md +++ b/10-ai-framework-project/README.md @@ -860,3 +860,5 @@ Use the Agent mode to complete the following challenge: 5. A main chat interface that can handle code submissions and provide detailed, actionable feedback The assistant should be able to review code in multiple programming languages, maintain context across multiple code submissions in a session, and provide both summary scores and detailed improvement suggestions. + +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index cb17081c..44985add 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -292,6 +292,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Build a JavaScript program that creates a user profile object containing: a person's name (string), age (number), is a student status (boolean), favorite colors as an array, and an address object with street, city, and zip code properties. Include functions to display the profile information and update individual fields. Make sure to demonstrate string concatenation, template literals, arithmetic operations with the age, and boolean logic for the student status. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Ready for a fun detective mission? JavaScript has some quirky behaviors that can catch even experienced developers off guard! Here's a classic one to get you started: try typing this in your browser console: `let age = 1; let Age = 2; age == Age` and see what happens. Spoiler alert: it returns `false` – can you figure out why? diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index 9ea92bfa..e78898b5 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -245,6 +245,8 @@ Use the Agent mode to complete the following challenge: 4. A function `calculate` that accepts another function as a parameter and two numbers, then applies the function to those numbers 5. Demonstrate calling each function with appropriate test cases +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## Post-Lecture Quiz [Post-lecture quiz](https://ff-quizzes.netlify.app) diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index 7b1c29cd..92bc586d 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -277,6 +277,8 @@ Requirements: Test your program with various scores including edge cases like 59, 60, 89, 90, and invalid inputs. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## Post-Lecture Quiz diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index 201fb996..6f951b14 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -352,6 +352,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a function called `analyzeGrades` that takes an array of student grade objects (each containing name and score properties) and returns an object with statistics including the highest score, lowest score, average score, count of students who passed (score >= 70), and an array of student names who scored above average. Use at least two different loop types in your solution. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge JavaScript offers several modern array methods that can replace traditional loops for specific tasks. Explore [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index 5e1faf3f..7d13b7f6 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -292,6 +292,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a semantic HTML section that includes a main heading "Plant Care Guide", three subsections with headings "Watering", "Light Requirements", and "Soil Care", each containing a paragraph of plant care information. Use proper semantic HTML tags like `
`, `

`, `

`, and `

` to structure the content appropriately. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Explore HTML History Challenge **Learning About Web Evolution** diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md index 1f6e46c8..46b3502f 100644 --- a/3-terrarium/2-intro-to-css/README.md +++ b/3-terrarium/2-intro-to-css/README.md @@ -426,7 +426,7 @@ Use the Agent mode to complete the following challenge: **Prompt:** Add CSS keyframe animations to make the plants in the terrarium sway gently from side to side. Create a swaying animation that rotates each plant slightly (2-3 degrees) left and right with a duration of 3-4 seconds, and apply it to the `.plant` class. Make sure the animation loops infinitely and has an easing function for natural movement. ---- +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. ## 🚀 Challenge: Adding Glass Reflections diff --git a/3-terrarium/3-intro-to-DOM-and-closures/README.md b/3-terrarium/3-intro-to-DOM-and-closures/README.md index 208b7e07..2774e846 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -410,6 +410,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a reset button that, when clicked, animates all plants back to their original sidebar positions using CSS transitions. The function should store the original positions when the page loads and smoothly transition plants back to those positions over 1 second when the reset button is pressed. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Additional Challenge: Expand Your Skills Ready to take your terrarium to the next level? Try implementing these enhancements: diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index a1dbfaf1..feff790e 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -507,6 +507,8 @@ Use the Agent mode to complete the following challenge: Add the necessary HTML elements, CSS styles, and JavaScript functions to implement this feature. Include proper error handling and ensure the game remains accessible with appropriate ARIA labels. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Ready to take your typing game to the next level? Try implementing these advanced features to deepen your understanding of event handling and DOM manipulation: diff --git a/5-browser-extension/1-about-browsers/README.md b/5-browser-extension/1-about-browsers/README.md index fba96368..36aa7b5b 100644 --- a/5-browser-extension/1-about-browsers/README.md +++ b/5-browser-extension/1-about-browsers/README.md @@ -300,7 +300,7 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create JavaScript validation functions that check if the API key field contains at least 20 characters and if the region code follows the correct format (like 'US-NEISO'). Add visual feedback by changing input border colors to green for valid inputs and red for invalid ones. Also add a toggle feature to show/hide the API key for security purposes. ---- +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. ## 🚀 Challenge diff --git a/5-browser-extension/2-forms-browsers-local-storage/README.md b/5-browser-extension/2-forms-browsers-local-storage/README.md index 1ce9155d..d4eed025 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -301,6 +301,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create an enhanced version of the displayCarbonUsage function that includes: 1) A retry mechanism for failed API calls with exponential backoff, 2) Input validation for the region code before making the API call, 3) A loading animation with progress indicators, 4) Caching of API responses in localStorage with expiration timestamps (cache for 30 minutes), and 5) A feature to display historical data from previous API calls. Also add proper TypeScript-style JSDoc comments to document all function parameters and return types. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Expand your understanding of APIs by exploring the wealth of browser-based APIs available for web development. Choose one of these browser APIs and build a small demonstration: diff --git a/5-browser-extension/3-background-tasks-and-performance/README.md b/5-browser-extension/3-background-tasks-and-performance/README.md index 618d31fc..f17ebf9d 100644 --- a/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/5-browser-extension/3-background-tasks-and-performance/README.md @@ -240,9 +240,7 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a performance monitoring system for the browser extension that measures and logs the time it takes to fetch CO2 data from the API, calculate colors, and update the icon. Add a function called `performanceTracker` that uses the Performance API to measure these operations and displays the results in the browser console with timestamps and duration metrics. ---- - - +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. ## 🚀 Challenge diff --git a/6-space-game/1-introduction/README.md b/6-space-game/1-introduction/README.md index 4241d5bc..ec8a0a8d 100644 --- a/6-space-game/1-introduction/README.md +++ b/6-space-game/1-introduction/README.md @@ -336,6 +336,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a JavaScript game system with the following requirements: 1) Create a base GameObject class with x, y coordinates and a type property. 2) Create a Hero class that extends GameObject and can move. 3) Create an Enemy class that extends GameObject and can chase the hero. 4) Implement an EventEmitter class for the pub/sub pattern. 5) Set up event listeners so when the hero moves, nearby enemies receive a 'HERO_MOVED' event and update their position to move toward the hero. Include console.log statements to show the communication between objects. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Think about how the pub-sub pattern can enhance a game. Which parts should emit events, and how should the game react to them? Now's your chance to get creative, thinking of a new game and how its parts might behave. diff --git a/6-space-game/2-drawing-to-canvas/README.md b/6-space-game/2-drawing-to-canvas/README.md index 6b6b1c26..0693f61a 100644 --- a/6-space-game/2-drawing-to-canvas/README.md +++ b/6-space-game/2-drawing-to-canvas/README.md @@ -282,6 +282,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a new file called `enhanced-canvas.html` with a canvas that displays animated stars in the background, a pulsing health bar for the hero ship, and enemy ships that slowly move downward. Include JavaScript code that draws twinkling stars using random positions and opacity, implements a health bar that changes color based on health level (green > yellow > red), and animates the enemy ships to move down the screen at different speeds. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), and try to draw a 3D object. diff --git a/6-space-game/3-moving-elements-around/README.md b/6-space-game/3-moving-elements-around/README.md index c0c5e951..39d9a36f 100644 --- a/6-space-game/3-moving-elements-around/README.md +++ b/6-space-game/3-moving-elements-around/README.md @@ -518,6 +518,8 @@ Ready for a real challenge? Let's push your space game to the next level! This i **Here's what to build:** Create a system that keeps your hero spaceship on screen, and make the controls feel silky smooth. When players hold down an arrow key, the ship should glide continuously rather than hopping along. Bonus points if you can add some visual flair when the ship bumps against the screen edges – maybe a subtle glow or color change to let players know they've hit the boundary. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Here's something every developer learns the hard way – code has a sneaky habit of becoming a tangled mess when you're not looking! You might have noticed your file getting pretty crowded with functions, variables, and classes all mixed together. diff --git a/6-space-game/6-end-condition/README.md b/6-space-game/6-end-condition/README.md index f0284c45..00c3d859 100644 --- a/6-space-game/6-end-condition/README.md +++ b/6-space-game/6-end-condition/README.md @@ -307,6 +307,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a multi-level space game system where each level has more enemy ships with increased speed and health. Add a scoring multiplier that increases with each level, and implement power-ups (like rapid fire or shield) that randomly appear when enemies are destroyed. Include a level completion bonus and display the current level on screen alongside the existing score and lives. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Optional Enhancement Challenge **Add Audio to Your Game**: Enhance your gameplay experience by implementing sound effects! Consider adding audio for: diff --git a/7-bank-project/1-template-route/README.md b/7-bank-project/1-template-route/README.md index 713c580c..22e5648f 100644 --- a/7-bank-project/1-template-route/README.md +++ b/7-bank-project/1-template-route/README.md @@ -538,6 +538,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a new HTML template with id "not-found" that displays a user-friendly 404 error page with styling. Then modify the JavaScript routing logic to show this template when users navigate to invalid URLs, and add a "Go Home" button that navigates back to the login page. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Add a new template and route for a third page that shows the credits for this app. diff --git a/7-bank-project/2-forms/README.md b/7-bank-project/2-forms/README.md index d7165783..9241376b 100644 --- a/7-bank-project/2-forms/README.md +++ b/7-bank-project/2-forms/README.md @@ -745,6 +745,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a complete form validation system for the registration form that includes: 1) Real-time validation feedback for each field as the user types, 2) Custom validation messages that appear below each input field, 3) A password confirmation field with matching validation, 4) Visual indicators (like green checkmarks for valid fields and red warnings for invalid ones), 5) A submit button that only becomes enabled when all validations pass. Use HTML5 validation attributes, CSS for styling the validation states, and JavaScript for the interactive behavior. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Show an error message in the HTML if the user already exists. diff --git a/7-bank-project/3-data/README.md b/7-bank-project/3-data/README.md index fd081602..9c75a2db 100644 --- a/7-bank-project/3-data/README.md +++ b/7-bank-project/3-data/README.md @@ -715,6 +715,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a search functionality for the banking app that includes: 1) A search form with input fields for date range (from/to), minimum/maximum amount, and transaction description keywords, 2) A `filterTransactions()` function that filters the account.transactions array based on the search criteria, 3) Update the `updateDashboard()` function to show filtered results, and 4) Add a "Clear Filters" button to reset the view. Use modern JavaScript array methods like `filter()` and handle edge cases for empty search criteria. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Ready to take your banking app to the next level? Let's make it look and feel like something you'd actually want to use. Here are some ideas to spark your creativity: diff --git a/7-bank-project/4-state-management/README.md b/7-bank-project/4-state-management/README.md index d80c89e2..c8f8d009 100644 --- a/7-bank-project/4-state-management/README.md +++ b/7-bank-project/4-state-management/README.md @@ -494,6 +494,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create an enhanced state management system that includes: 1) A state history array that tracks all previous states, 2) Undo and redo functions that can revert to previous states, 3) UI buttons for undo/redo operations on the dashboard, 4) A maximum history limit of 10 states to prevent memory issues, and 5) Proper cleanup of history when the user logs out. Ensure the undo/redo functionality works with account balance changes and persists across browser refreshes. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## 🚀 Challenge Time: Become a Storage Optimization Pro Alright, you've built something pretty awesome here! Your app remembers users, refreshes data when needed, and handles state like a champ. But here's a question that'll make you think like a senior developer: are we being a bit... wasteful with our storage? diff --git a/8-code-editor/1-using-a-code-editor/README.md b/8-code-editor/1-using-a-code-editor/README.md index 3feacd35..6e3b0902 100644 --- a/8-code-editor/1-using-a-code-editor/README.md +++ b/8-code-editor/1-using-a-code-editor/README.md @@ -332,6 +332,8 @@ Ready to put all these skills together? Here's a fun challenge that'll help you By the end of this challenge, you'll have a real project that demonstrates you know your way around VSCode.dev like a pro. Plus, you'll have a workflow you can use for all your future projects! +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## Assignment Time to take these skills for a real test drive! I've got a hands-on project that'll let you practice everything we've covered: [Create a resume website using VSCode.dev](./assignment.md) diff --git a/9-chat-project/README.md b/9-chat-project/README.md index 2c7969e8..396f00b6 100644 --- a/9-chat-project/README.md +++ b/9-chat-project/README.md @@ -1860,6 +1860,8 @@ Use the Agent mode to complete the following challenge: **Prompt:** Modify the chat application to include conversation history that persists between sessions. Add functionality to save chat messages to local storage, display conversation history when the page loads, and include a "Clear History" button. Also implement typing indicators and message timestamps to make the chat experience more realistic. +Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here. + ## Assignment: Build Your Personal AI Assistant Alright, here's where things get really exciting – it's time to create your own unique AI assistant! This isn't just about copying what we've built; it's your chance to get creative and make something that's uniquely yours.