From 48dfd2cfd4e1c97372badfd8e2c6a0dea6e5ab5b Mon Sep 17 00:00:00 2001
From: chris <noringc@gmail.com>
Date: Tue, 14 Oct 2025 21:52:22 +0100
Subject: [PATCH 1/2] Improve readability in README.md

Added a blank line for improved readability.
---
 .../1-intro-to-programming-languages/README.md                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index f824629b..846ac9d0 100644
--- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,5 +1,5 @@
 # Introduction to Programming Languages and Tools of the Trade
-
+ 
 This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer.
 
 ![Intro Programming](../../sketchnotes/webdev101-programming.png)
@@ -203,4 +203,4 @@ Study a bit on the different languages available to the programmer. Try to write
 
 [Reading the Docs](assignment.md)
 
-> Note: When selecting tools for your assignment, do not choose editors, browsers, or command line tools already listed above.
\ No newline at end of file
+> Note: When selecting tools for your assignment, do not choose editors, browsers, or command line tools already listed above.

From 5bac96af1108d3cd10b02fd80e42f58d229a6b6e Mon Sep 17 00:00:00 2001
From: chris <noringc@gmail.com>
Date: Tue, 14 Oct 2025 22:28:04 +0000
Subject: [PATCH 2/2] modernizing files

---
 .../README.md                                 |  582 ++++++--
 .../assignment.md                             |   65 +-
 .../2-github-basics/README.md                 |  313 ++++-
 .../3-accessibility/README.md                 | 1211 +++++++++++++++--
 .../3-accessibility/assignment.md             |  248 +++-
 5 files changed, 2141 insertions(+), 278 deletions(-)

diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md
index 846ac9d0..38cae15d 100644
--- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -1,6 +1,11 @@
-# Introduction to Programming Languages and Tools of the Trade
- 
-This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer.
+
+# Introduction to Programming Languages and Modern Developer Tools
+
+Welcome to the exciting world of programming! This lesson will introduce you to the fundamental concepts that power every website, app, and digital experience you use daily. You'll discover what programming languages are, how they work, and why they're the building blocks of our digital world.
+
+Programming might seem mysterious at first, but think of it as learning a new language – one that lets you communicate with computers and bring your creative ideas to life. Whether you want to build websites, create mobile apps, or automate everyday tasks, understanding programming languages is your first step toward digital creativity and problem-solving.
+
+In this lesson, you'll explore the essential tools that modern web developers use every day. From code editors that help you write clean, efficient code to browsers that let you test and debug your creations, you'll get hands-on experience with the same professional tools used by developers at top tech companies worldwide.
 
 ![Intro Programming](../../sketchnotes/webdev101-programming.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
@@ -8,48 +13,121 @@ This lesson covers the basics of programming languages. The topics covered here
 ## Pre-Lecture Quiz
 [Pre-lecture quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
 
-## Introduction
 
-In this lesson, we'll cover:
+## What You'll Learn
+
+In this comprehensive introduction, you'll discover:
 
-- What is programming?
-- Types of programming languages
-- Basic elements of a program
-- Useful software and tooling for the professional developer
+- **What programming is and why it matters** – Understanding the role of programming in creating digital solutions
+- **Types of programming languages and their uses** – Exploring the landscape of languages from JavaScript to Python  
+- **Basic elements of a program** – Learning the fundamental building blocks that make code work
+- **Modern software and tooling for professional developers** – Getting hands-on with the same tools used in the industry
+
+> 💡 **Learning Tip**: Don't worry about memorizing everything! Focus on understanding the concepts – you'll practice and reinforce these ideas throughout the entire curriculum.
 
 > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
 
 ## What is Programming?
 
-Programming (also known as coding) is the process of writing instructions for a device such as a computer or mobile device. We write these instructions with a programming language, which is then interpreted by the device. These sets of instructions may be referred to by various names, but *program*, *computer program*, *application (app)*, and *executable* are a few popular names.
+Programming (also known as coding or software development) is the process of creating instructions that tell a computer, smartphone, or any digital device exactly what to do. Think of it like writing a very detailed recipe – except instead of making cookies, you're creating websites, games, mobile apps, or even smart home controls.
+
+These instructions are written in special languages called **programming languages**, which act as a bridge between human thinking and computer processing. While computers only understand binary code (1s and 0s), programming languages let us write instructions in a way that's much more readable and logical for humans.
 
-A *program* can be anything that is written with code; websites, games, and phone apps are programs. While it's possible to create a program without writing code, the underlying logic is interpreted by the device and that logic was most likely written with code. A program that is *running* or *executing* code is carrying out instructions. The device that you're reading this lesson with is running a program to print it to your screen.
+Every digital experience you interact with started as someone's code: the social media app you scroll through, the GPS that guides your drive, even the simple calculator on your phone. When you learn to program, you're learning to create these digital solutions that can solve real problems and make life easier for millions of people.
 
-✅ Do a little research: who is considered to have been the world's first computer programmer?
+✅ **Quick Research Challenge**: Who is considered to have been the world's first computer programmer? Take a moment to look this up – the answer might surprise you!
 
 ## Programming Languages
 
-Programming languages enable developers to write instructions for a device. Devices can only understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are the vehicle for communication between humans and computers.
+Just as humans speak different languages like English, Spanish, or Mandarin, computers can understand different programming languages. Each programming language has its own syntax (grammar rules) and is designed for specific types of tasks, making some languages better suited for certain jobs than others.
+
+Programming languages serve as translators between human ideas and computer actions. They allow developers to write instructions that are both human-readable and computer-executable. When you write code in a programming language, special software converts your instructions into the binary code that computers actually understand.
+
+### Popular Programming Languages and Their Uses
 
-Programming languages come in different formats and may serve different purposes. For example, JavaScript is primarily used for web applications, while Bash is primarily used for operating systems.
+| Language | Best For | Why It's Popular |
+|----------|----------|------------------|
+| **JavaScript** | Web development, user interfaces | Runs in browsers and powers interactive websites |
+| **Python** | Data science, automation, AI | Easy to read and learn, powerful libraries |
+| **Java** | Enterprise applications, Android apps | Platform-independent, robust for large systems |
+| **C#** | Windows applications, game development | Strong Microsoft ecosystem support |
+| **Go** | Cloud services, backend systems | Fast, simple, designed for modern computing |
 
-*Low level languages* typically require fewer steps than *high level languages* for a device to interpret instructions. However, what makes high level languages popular is their readability and support. JavaScript is considered a high level language.
+### High-Level vs. Low-Level Languages
 
-The following code illustrates the difference between a high level language with JavaScript and a low level language with ARM assembly code.
+Programming languages exist on a spectrum from **low-level** (closer to machine code) to **high-level** (closer to human language):
+
+- **Low-level languages** (like Assembly or C) require fewer translation steps but are harder for humans to read and write
+- **High-level languages** (like JavaScript, Python, or C#) are more readable and have larger communities, making them ideal for most modern development
+
+> 💡 **Think of it this way**: Low-level languages are like speaking directly to the computer in its native dialect, while high-level languages are like having a skilled interpreter who translates your everyday language into computer-speak.
+
+
+### Comparing Programming Languages in Action
+
+To illustrate the difference between high-level and low-level languages, let's look at the same task written in two different ways. Both code examples below generate the famous Fibonacci sequence (where each number is the sum of the two preceding ones: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34...).
+
+**High-level language (JavaScript) – Human-friendly:**
 
 ```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
+// Step 1: Basic Fibonacci setup
+const fibonacciCount = 10;
+let current = 0;
+let next = 1;
+
+console.log('Fibonacci sequence:');
+```
+
+**Here's what this code does:**
+- **Declare** a constant to specify how many Fibonacci numbers we want to generate
+- **Initialize** two variables to track the current and next numbers in the sequence
+- **Set up** the starting values (0 and 1) that define the Fibonacci pattern
+- **Display** a header message to identify our output
+
+```javascript
+// Step 2: Generate the sequence with a loop
+for (let i = 0; i < fibonacciCount; i++) {
+  console.log(`Position ${i + 1}: ${current}`);
+  
+  // Calculate next number in sequence
+  const sum = current + next;
+  current = next;
+  next = sum;
 }
 ```
 
-```c
+**Breaking down what happens here:**
+- **Loop** through each position in our sequence using a `for` loop
+- **Display** each number with its position using template literal formatting
+- **Calculate** the next Fibonacci number by adding current and next values
+- **Update** our tracking variables to move to the next iteration
+
+```javascript
+// Step 3: Modern functional approach
+const generateFibonacci = (count) => {
+  const sequence = [0, 1];
+  
+  for (let i = 2; i < count; i++) {
+    sequence[i] = sequence[i - 1] + sequence[i - 2];
+  }
+  
+  return sequence;
+};
+
+// Usage example
+const fibSequence = generateFibonacci(10);
+console.log(fibSequence);
+```
+
+**In the above, we've:**
+- **Created** a reusable function using modern arrow function syntax
+- **Built** an array to store the complete sequence rather than displaying one by one
+- **Used** array indexing to calculate each new number from previous values
+- **Returned** the complete sequence for flexible use in other parts of our program
+
+**Low-level language (ARM Assembly) – Computer-friendly:**
+
+```assembly
  area ascen,code,readonly
  entry
  code32
@@ -74,133 +152,443 @@ back add r0,r1
  end
 ```
 
-Believe it or not, *they're both doing the same thing*: printing a Fibonacci sequence up to 10.
+Notice how the JavaScript version reads almost like English instructions, while the Assembly version uses cryptic commands that directly control the computer's processor. Both accomplish the exact same task, but the high-level language is much easier for humans to understand, write, and maintain.
+
+**Key differences you'll notice:**
+- **Readability**: JavaScript uses descriptive names like `fibonacciCount` while Assembly uses cryptic labels like `r0`, `r1`
+- **Comments**: High-level languages encourage explanatory comments that make code self-documenting
+- **Structure**: JavaScript's logical flow matches how humans think about problems step-by-step
+- **Maintenance**: Updating the JavaScript version for different requirements is straightforward and clear
+
+✅ **A Fibonacci sequence** is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers where each number is the sum of the two preceding ones, starting from 0 and 1. This mathematical pattern appears frequently in nature, from flower petals to spiral shells!
 
-✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1. The first 10 numbers following the Fibonacci sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21 and 34.
 
 ## Elements of a Program
 
-A single instruction in a program is called a *statement* and will usually have a character or line spacing that marks where the instruction ends, or *terminates*. How a program terminates varies with each language.
+Now that you understand what programming languages are, let's explore the fundamental building blocks that make up any program. Think of these elements as the grammar and vocabulary of programming – once you understand these concepts, you'll be able to read and write code in any language.
+
+### Statements: The Basic Instructions
 
-Statements within a program may rely on data provided by a user or elsewhere to carry out instructions. Data can change how a program behaves, so programming languages come with a way to temporarily store data so that it can be used later. These are called *variables*. Variables are statements that instruct a device to save data in its memory. Variables in programs are similar to variables in algebra, where they have a unique name and their value may change over time.
+A **statement** is a single instruction in a program, like a sentence in human language. Each statement tells the computer to perform one specific action. Just as sentences end with periods, statements have specific ways to indicate where one instruction ends and the next begins (this varies by programming language).
 
-There's a chance that some statements will not be executed by a device. This is usually by design when written by the developer or by accident when an unexpected error occurs. This type of control over an application makes it more robust and maintainable. Typically, these changes in control happen when certain conditions are met. A common statement used in modern programming to control how a program runs is the `if..else` statement.
+```javascript
+// Basic statements that perform single actions
+const userName = "Alex";                    
+console.log("Hello, world!");              
+const sum = 5 + 3;                         
+```
+
+**Here's what this code does:**
+- **Declare** a constant variable to store a user's name
+- **Display** a greeting message to the console output
+- **Calculate** and store the result of a mathematical operation
+
+```javascript
+// Statements that interact with web pages
+document.title = "My Awesome Website";      
+document.body.style.backgroundColor = "lightblue";
+```
+
+**Step by step, here's what's happening:**
+- **Modify** the webpage's title that appears in the browser tab
+- **Change** the background color of the entire page body
+
+### Variables: Storing Information
+
+**Variables** are like labeled containers that hold information your program needs to remember. Just as you might write a grocery list on paper and refer back to it, variables let programs store data and use it later. Variables have unique names and their contents can change as the program runs.
+
+```javascript
+// Step 1: Creating basic variables
+const siteName = "Weather Dashboard";        
+let currentWeather = "sunny";               
+let temperature = 75;                       
+let isRaining = false;                      
+```
+
+**Understanding these concepts:**
+- **Store** unchanging values in `const` variables (like site name)
+- **Use** `let` for values that can change throughout your program
+- **Assign** different data types: strings (text), numbers, and booleans (true/false)
+- **Choose** descriptive names that explain what each variable contains
+
+```javascript
+// Step 2: Working with objects to group related data
+const weatherData = {                       
+  location: "San Francisco",
+  humidity: 65,
+  windSpeed: 12
+};
+```
+
+**In the above, we've:**
+- **Created** an object to group related weather information together
+- **Organized** multiple pieces of data under one variable name
+- **Used** key-value pairs to label each piece of information clearly
+
+```javascript
+// Step 3: Using and updating variables
+console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
+console.log(`Wind speed: ${weatherData.windSpeed} mph`);
+
+// Updating changeable variables
+currentWeather = "cloudy";                  
+temperature = 68;                          
+```
+
+**Let's understand each part:**
+- **Display** information using template literals with `${}` syntax
+- **Access** object properties using dot notation (`weatherData.windSpeed`)
+- **Update** variables declared with `let` to reflect changing conditions
+- **Combine** multiple variables to create meaningful messages
+
+```javascript
+// Step 4: Modern destructuring for cleaner code
+const { location, humidity } = weatherData; 
+console.log(`${location} humidity: ${humidity}%`);
+```
+
+**What you need to know:**
+- **Extract** specific properties from objects using destructuring assignment
+- **Create** new variables automatically with the same names as object keys
+- **Simplify** code by avoiding repetitive dot notation
+
+### Control Flow: Making Decisions
+
+Programs often need to make decisions based on different situations. **Control flow statements** (like `if...else`) allow programs to choose different paths, making them smart and responsive to changing conditions.
+
+```javascript
+// Step 1: Basic conditional logic
+const userAge = 17;
+
+if (userAge >= 18) {
+  console.log("You can vote!");
+} else {
+  const yearsToWait = 18 - userAge;
+  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
+}
+```
+
+**Here's what this code does:**
+- **Check** if the user's age meets the voting requirement
+- **Execute** different code blocks based on the condition result
+- **Calculate** and display how long until voting eligibility if under 18
+- **Provide** specific, helpful feedback for each scenario
+
+```javascript
+// Step 2: Multiple conditions with logical operators
+const userAge = 17;
+const hasPermission = true;
+
+if (userAge >= 18 && hasPermission) {
+  console.log("Access granted: You can enter the venue.");
+} else if (userAge >= 16) {
+  console.log("You need parent permission to enter.");
+} else {
+  console.log("Sorry, you must be at least 16 years old.");
+}
+```
+
+**Breaking down what happens here:**
+- **Combine** multiple conditions using the `&&` (and) operator
+- **Create** a hierarchy of conditions using `else if` for multiple scenarios
+- **Handle** all possible cases with a final `else` statement
+- **Provide** clear, actionable feedback for each different situation
+
+```javascript
+// Step 3: Concise conditional with ternary operator
+const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
+console.log(`Status: ${votingStatus}`);
+```
+
+**What you need to remember:**
+- **Use** the ternary operator (`? :`) for simple two-option conditions
+- **Write** condition first, followed by `?`, then true result, then `:`, then false result
+- **Apply** this pattern when you need to assign values based on conditions
+
+```javascript
+// Step 4: Handling multiple specific cases
+const dayOfWeek = "Tuesday";
+
+switch (dayOfWeek) {
+  case "Monday":
+  case "Tuesday":
+  case "Wednesday":
+  case "Thursday":
+  case "Friday":
+    console.log("It's a weekday - time to work!");
+    break;
+  case "Saturday":
+  case "Sunday":
+    console.log("It's the weekend - time to relax!");
+    break;
+  default:
+    console.log("Invalid day of the week");
+}
+```
+
+**This code accomplishes the following:**
+- **Match** the variable value against multiple specific cases
+- **Group** similar cases together (weekdays vs. weekends)
+- **Execute** the appropriate code block when a match is found
+- **Include** a `default` case to handle unexpected values
+- **Use** `break` statements to prevent code from continuing to the next case
+
+> 💡 **Real-world analogy**: Think of control flow like a GPS giving you directions. It might say "If there's traffic on Main Street, take the highway instead." Programs use the same type of conditional logic to respond to different situations.
+
+✅ **Coming up**: You'll dive deeper into these concepts and learn how to use them effectively in the upcoming lessons. Don't worry about memorizing everything now – focus on understanding the big picture!
 
-✅ You'll learn more about this type of statement in subsequent lessons.
 
 ## Tools of the Trade
 
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+Just as a carpenter needs quality tools to build beautiful furniture, web developers rely on specialized software and workflows to create amazing digital experiences. In this section, you'll discover the essential tools that professional developers use every day – and the best part is, many of these powerful tools are completely free!
 
-> 🎥 Click the image above for a video about tooling
+The modern web development landscape has been transformed by innovative tools like AI-powered code assistants (such as GitHub Copilot), cloud-based development environments, and sophisticated debugging tools. These technologies have made it easier than ever to learn programming and build professional-quality applications.
 
-In this section, you'll learn about some software that you may find to be very useful as you start your professional development journey.
+As you progress in your web development journey, you'll discover that having the right tools can dramatically improve your productivity, help you catch errors before they become problems, and make coding more enjoyable and efficient.
 
-A **development environment** is a unique set of tools and features that a developer uses often when writing software. Some of these tools have been customized for a developer's specific needs, and may change over time if that developer changes priorities in work, personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them.
 
-### Editors
+### Code Editors and IDEs: Your Digital Workshop
 
-One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you run your code.
+Think of a code editor as your digital workshop – it's where you'll spend most of your time crafting, testing, and perfecting your code. Modern editors and Integrated Development Environments (IDEs) are far more than simple text editors; they're intelligent assistants that help you write better code faster.
 
-Developers rely on editors for a few additional reasons:
+**What makes modern editors so powerful?**
 
-- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages.
-- *Syntax highlighting* adds colors and text formatting to code, making it easier to read. Most editors allow customized syntax highlighting.
-- *Extensions and Integrations* are specialized tools for developers, by developers. These tools weren't built into the base editor. For example, many developers document their code to explain how it works. They may install a spell check extension to help find typos within the documentation. Most extensions are intended for use within a specific editor, and most editors come with a way to search for available extensions.
-- *Customization* enables developers to create a unique development environment to suit their needs. Most editors are extremely customizable and may also allow developers to create custom extensions.
+Modern code editors offer an impressive array of features designed to boost your productivity:
 
-#### Popular Editors and Web Development Extensions
+| Feature | What It Does | Why It Helps |
+|---------|--------------|--------------|
+| **Syntax Highlighting** | Colors different parts of your code | Makes code easier to read and spot errors |
+| **Auto-completion** | Suggests code as you type | Speeds up coding and reduces typos |
+| **Debugging Tools** | Helps you find and fix errors | Saves hours of troubleshooting time |
+| **Extensions** | Add specialized features | Customize your editor for any technology |
+| **AI Assistants** | Suggest code and explanations | Accelerates learning and productivity |
 
-- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-  
-- [Sublimetext](https://www.sublimetext.com/)
-  - [emmet](https://emmet.io/)
-  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+> 🎥 **Video Resource**: Want to see these tools in action? Check out this [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for a comprehensive overview.
 
-### Browsers
+#### Recommended Editors for Web Development
 
-Another crucial tool is the browser. Web developers rely on the browser to see how their code runs on the web. It's also used to display the visual elements of a web page that are written in the editor, like HTML.
+**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Free)
+- Most popular among web developers
+- Excellent extension ecosystem
+- Built-in terminal and Git integration
+- **Must-have extensions**:
+  - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered code suggestions
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time collaboration
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic code formatting
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Catch typos in your code
 
-Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to help developers collect and capture important information about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information.
+**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Paid, free for students)
+- Advanced debugging and testing tools
+- Intelligent code completion
+- Built-in version control
 
-#### Popular Browsers and DevTools
+**Cloud-Based IDEs** (Various pricing)
+- [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code in your browser
+- [Replit](https://replit.com/) - Great for learning and sharing code
+- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development
 
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
+> 💡 **Getting Started Tip**: Start with Visual Studio Code – it's free, widely used in the industry, and has an enormous community creating helpful tutorials and extensions.
 
-### Command Line Tools
 
-Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Writing code requires a significant amount of typing and some developers prefer to not disrupt their flow on the keyboard. They will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save a custom configuration, change it later, and import it to other development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two.
+### Web Browsers: Your Testing Laboratory
 
-### Popular Command Line Options
+Web browsers are much more than tools for browsing the internet – they're sophisticated development environments that help you build, test, and optimize web applications. Every modern browser includes powerful developer tools (DevTools) that provide deep insights into how your code performs.
 
-Options for the command line will differ based on the operating system you use.
+**Why browsers are essential for web development:**
 
-*💻 = comes preinstalled on the operating system.*
+When you create a website or web application, you need to see how it looks and behaves in the real world. Browsers not only display your work but also provide detailed feedback about performance, accessibility, and potential issues.
 
-#### Windows
+#### Browser Developer Tools (DevTools)
 
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [mintty](https://mintty.github.io/)
-  
-#### MacOS
+Modern browsers include comprehensive development suites:
+
+| Tool Category | What It Does | Example Use Case |
+|---------------|--------------|------------------|
+| **Element Inspector** | View and edit HTML/CSS in real-time | Adjust styling to see immediate results |
+| **Console** | View error messages and test JavaScript | Debug problems and experiment with code |
+| **Network Monitor** | Track how resources load | Optimize performance and loading times |
+| **Accessibility Checker** | Test for inclusive design | Ensure your site works for all users |
+| **Device Simulator** | Preview on different screen sizes | Test responsive design without multiple devices |
+
+#### Recommended Browsers for Development
+
+- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industry-standard DevTools with extensive documentation
+- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Excellent CSS Grid and accessibility tools
+- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Built on Chromium with Microsoft's developer resources
+
+> ⚠️ **Important Testing Tip**: Always test your websites in multiple browsers! What works perfectly in Chrome might look different in Safari or Firefox. Professional developers test across all major browsers to ensure consistent user experiences.
+
+
+### Command Line Tools: The Power User's Gateway
+
+The command line (also called terminal or shell) might look intimidating at first – it's just a black screen with text! But don't let its simple appearance fool you. The command line is one of the most powerful tools in a developer's toolkit, allowing you to perform complex tasks with simple text commands.
+
+**Why developers love the command line:**
+
+While graphical interfaces are great for many tasks, the command line excels at automation, precision, and speed. Many development tools work primarily through command line interfaces, and learning to use them efficiently can dramatically improve your productivity.
+
+```bash
+# Step 1: Create and navigate to project directory
+mkdir my-awesome-website
+cd my-awesome-website
+```
+
+**Here's what this code does:**
+- **Create** a new directory called "my-awesome-website" for your project
+- **Navigate** into the newly created directory to begin working
+
+```bash
+# Step 2: Initialize project with package.json
+npm init -y
 
-- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
-- [iTerm](https://iterm2.com/)
-- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+# Install modern development tools
+npm install --save-dev vite prettier eslint
+npm install --save-dev @eslint/js
+```
+
+**Step by step, here's what's happening:**
+- **Initialize** a new Node.js project with default settings using `npm init -y`
+- **Install** Vite as a modern build tool for fast development and production builds
+- **Add** Prettier for automatic code formatting and ESLint for code quality checks
+- **Use** the `--save-dev` flag to mark these as development-only dependencies
+
+```bash
+# Step 3: Create project structure and files
+mkdir src assets
+echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html
+
+# Start development server
+npx vite
+```
+
+**In the above, we've:**
+- **Organized** our project by creating separate folders for source code and assets
+- **Generated** a basic HTML file with proper document structure
+- **Started** the Vite development server for live reloading and hot module replacement
+
+#### Essential Command Line Tools for Web Development
+
+| Tool | Purpose | Why You Need It |
+|------|---------|-----------------|
+| **[Git](https://git-scm.com/)** | Version control | Track changes, collaborate with others, backup your work |
+| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Run JavaScript outside browsers, install modern development tools |
+| **[Vite](https://vitejs.dev/)** | Build tool & dev server | Lightning-fast development with hot module replacement |
+| **[ESLint](https://eslint.org/)** | Code quality | Automatically find and fix problems in your JavaScript |
+| **[Prettier](https://prettier.io/)** | Code formatting | Keep your code consistently formatted and readable |
+
+#### Platform-Specific Options
+
+**Windows:**
+- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern, feature-rich terminal
+- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Powerful scripting environment
+- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditional Windows command line
+
+**macOS:**
+- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Built-in terminal application
+- **[iTerm2](https://iterm2.com/)** - Enhanced terminal with advanced features
+
+**Linux:**
+- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux shell
+- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Advanced terminal emulator
+
+> 💻 = Pre-installed on the operating system
+
+> 🎯 **Learning Path**: Start with basic commands like `cd` (change directory), `ls` or `dir` (list files), and `mkdir` (create folder). Practice with modern workflow commands like `npm install`, `git status`, and `code .` (opens current directory in VS Code). As you become more comfortable, you'll naturally pick up more advanced commands and automation techniques.
+
+
+### Documentation: Your Learning Compass
 
-#### Linux
+Documentation is like having a knowledgeable mentor available 24/7. When you encounter new concepts, need to understand how a tool works, or want to explore advanced features, high-quality documentation becomes your roadmap to success.
 
-- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
-- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
-- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+**Why documentation matters:**
 
-#### Popular Command Line Tools
+Professional developers spend a significant portion of their time reading documentation – not because they don't know what they're doing, but because the web development landscape evolves so rapidly that staying current requires continuous learning. Great documentation helps you understand not just *how* to use something, but *why* and *when* to use it.
 
-- [Git](https://git-scm.com/) (💻 on most operating systems)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+#### Essential Documentation Resources
 
-### Documentation
+**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
+- The gold standard for web technology documentation
+- Comprehensive guides for HTML, CSS, and JavaScript
+- Includes browser compatibility information
+- Features practical examples and interactive demos
 
-When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers often rely on documentation to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works.
+**[Web.dev](https://web.dev)** (by Google)
+- Modern web development best practices
+- Performance optimization guides
+- Accessibility and inclusive design principles
+- Case studies from real-world projects
 
-#### Popular Documentation on Web Development
+**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
+- Edge browser development resources
+- Progressive Web App guides
+- Cross-platform development insights
 
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, the publishers of the [Firefox](https://www.mozilla.org/firefox/) browser
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), from Google, publishers of [Chrome](https://www.google.com/chrome/)
-- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), for [Microsoft Edge](https://www.microsoft.com/edge)
-- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
+- Structured learning curricula
+- Video courses from industry experts
+- Hands-on coding exercises
 
-✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment.
+> 📚 **Study Strategy**: Don't try to memorize documentation – instead, learn how to navigate it efficiently. Bookmark frequently-used references and practice using the search functions to find specific information quickly.
+
+✅ **Reflection Exercise**: Think about how web development tools might differ from web design tools. Consider how accessibility features, responsive design capabilities, and collaborative workflows might vary between the two roles. This comparison will help you understand the broader ecosystem of web creation!
+
+
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Explore the features of a modern code editor or IDE and demonstrate how it can improve your workflow as a web developer.
+
+**Prompt:** Choose a code editor or IDE (such as Visual Studio Code, WebStorm, or a cloud-based IDE). List three features or extensions that help you write, debug, or maintain code more efficiently. For each, provide a brief explanation of how it benefits your workflow.
 
 ---
 
 ## 🚀 Challenge
 
-Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
+**Explore Programming Language Diversity**
+
+Now that you understand the basics of programming languages, dive deeper into their unique characteristics and use cases. Choose three programming languages from different categories (e.g., web development, mobile development, data science, systems programming) and research their distinctive features.
+
+**Your task:**
+1. **Compare syntax styles**: Find the same simple task (like creating a variable or printing "Hello World") written in your chosen languages
+2. **Identify unique strengths**: What makes each language special? What problems is it designed to solve?
+3. **Explore communities**: Look at the size and activity of each language's developer community
+4. **Consider learning paths**: Which language seems most approachable for a beginner, and why?
+
+**Bonus challenge**: Try to find examples of major websites, apps, or systems built with each language. You might be surprised by what powers your favorite digital experiences!
+
+> 💡 **Learning tip**: Don't worry about understanding all the syntax details – focus on recognizing patterns and differences in how each language approaches problem-solving.
 
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/)
 
 ## Review & Self Study
 
-Study a bit on the different languages available to the programmer. Try to write a line in one language, and then rewrite it in two others. What did you learn?
+**Deepen Your Understanding**
+
+Take time to explore the concepts you've learned by diving deeper into the tools and languages that interest you most:
+
+**Programming Language Exploration:**
+- Visit the official websites of 2-3 programming languages mentioned in this lesson
+- Try online coding playgrounds like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Replit](https://replit.com/) to experiment with simple code
+- Read about the history and creators of your favorite programming language – understanding the "why" behind a language's design helps you use it more effectively
+
+**Tool Familiarization:**
+- Download and install Visual Studio Code (if you haven't already)
+- Explore the Extensions marketplace and install a few recommended extensions
+- Open your browser's Developer Tools and spend a few minutes exploring the different tabs and features
+
+**Community Connection:**
+- Follow developer communities on platforms like [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), or [GitHub](https://github.com/)
+- Watch beginner-friendly programming videos on YouTube or coding tutorial platforms
+- Consider joining local meetups or online communities focused on web development
+
+> 🎯 **Remember**: The goal isn't to master everything immediately, but to build familiarity with the landscape of tools and concepts you'll encounter as you continue learning web development.
+
 
 
 ## Assignment
 
 [Reading the Docs](assignment.md)
 
-> Note: When selecting tools for your assignment, do not choose editors, browsers, or command line tools already listed above.
+> Note: When selecting tools for your assignment, do not choose editors, browsers, or command line tools already listed above. Focus on tools that are current, widely used, and have strong community or official support.
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
index c38f830f..74d500ee 100644
--- a/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -1,17 +1,62 @@
+# Assignment: Exploring Modern Web Development Tools
+
 ## Instructions
 
-There are many tools that a web developer may need that are listed on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select **three tools** that are **not covered in this lesson** (excluding [list specific tools or refer to lesson content]), explain **why** a web developer would use each tool, and find a tool that fits each category. For each, share a link to its official documentation (not the example used on MDN).
+The web development ecosystem includes hundreds of specialized tools that help developers build, test, and maintain applications efficiently. Your task is to research and understand tools that complement the ones covered in this lesson.
+
+**Your Mission:** Select **three tools** that are **not covered in this lesson** (avoid choosing code editors, browsers, or command line tools already listed). Focus on tools that solve specific problems in modern web development workflows.
+
+**For each tool, provide:**
+
+1. **Tool name and category** (e.g., "Figma - Design Tool" or "Jest - Testing Framework")
+2. **Purpose and benefits** - Explain in 2-3 sentences why a web developer would use this tool and what problems it solves
+3. **Official documentation link** - Provide a link to the tool's official documentation or website (not just tutorial sites)
+4. **Real-world context** - Mention one way this tool fits into a professional development workflow
+
+## Suggested Tool Categories
+
+Consider exploring tools from these categories:
+
+| Category | Examples | What They Do |
+|----------|----------|--------------|
+| **Build Tools** | Vite, Webpack, Parcel, esbuild | Bundle and optimize code for production with fast development servers |
+| **Testing Frameworks** | Vitest, Jest, Cypress, Playwright | Ensure code works correctly and catch bugs before deployment |
+| **Design Tools** | Figma, Adobe XD, Penpot | Create mockups, prototypes, and design systems collaboratively |
+| **Deployment Platforms** | Netlify, Vercel, Cloudflare Pages | Host and distribute websites with automatic CI/CD |
+| **Version Control** | GitHub, GitLab, Bitbucket | Manage code changes, collaboration, and project workflows |
+| **CSS Frameworks** | Tailwind CSS, Bootstrap, Bulma | Accelerate styling with pre-built component libraries |
+| **Package Managers** | npm, pnpm, Yarn | Install and manage code libraries and dependencies |
+| **Accessibility Tools** | axe-core, Lighthouse, Pa11y | Test for inclusive design and WCAG compliance |
+| **API Development** | Postman, Insomnia, Thunder Client | Test and document APIs during development |
 
-**Format:**  
-- Tool name  
-- Why a web developer would use it (2-3 sentences)  
-- Link to documentation
+## Format Requirements
 
-**Length:**  
-- Each explanation should be 2-3 sentences.
+**For each tool:**
+```
+### [Tool Name] - [Category]
+
+**Purpose:** [2-3 sentences explaining why developers use this tool]
+
+**Documentation:** [Official website/documentation link]
+
+**Workflow Integration:** [1 sentence about how it fits into development process]
+```
+
+## Quality Guidelines
+
+- **Choose current tools**: Select tools that are actively maintained and widely used in 2025
+- **Focus on value**: Explain the specific benefits, not just what the tool does
+- **Professional context**: Consider tools used by development teams, not just individual hobbyists
+- **Diverse selection**: Pick tools from different categories to show breadth of the ecosystem
+- **Modern relevance**: Prioritize tools that align with current web development trends and best practices
 
 ## Rubric
 
-Exemplary | Adequate | Needs Improvement
---- | --- | -- |
-Explained why web developer would use tool | Explained how, but not why developer would use tool | Did not mention how or why a developer would use tool  |
\ No newline at end of file
+| Excellent | Good | Needs Improvement |
+|-----------|------|-------------------|
+| **Clearly explained why developers use each tool and what problems it solves** | **Explained what the tool does but missed some context about its value** | **Listed tools but didn't explain their purpose or benefits** |
+| **Provided official documentation links for all tools** | **Provided mostly official links with 1-2 tutorial sites** | **Relied mainly on tutorial sites rather than official documentation** |
+| **Selected current, professionally-used tools from diverse categories** | **Selected good tools but limited variety in categories** | **Selected outdated tools or only from one category** |
+| **Demonstrated understanding of how tools fit into development workflows** | **Showed some understanding of professional context** | **Focused only on tool features without workflow context** |
+
+> 💡 **Research Tip**: Look for tools mentioned in job postings for web developers, check popular developer surveys, or explore the dependencies used by successful open-source projects on GitHub!
\ No newline at end of file
diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md
index dceb6efd..b6998394 100644
--- a/1-getting-started-lessons/2-github-basics/README.md
+++ b/1-getting-started-lessons/2-github-basics/README.md
@@ -1,6 +1,10 @@
 # Introduction to GitHub
 
-This lesson covers the basics of GitHub, a platform to host and manage changes to your code.
+GitHub is one of the most essential platforms in modern web development, serving as the collaborative backbone for millions of developers worldwide. Think of it as a combination of cloud storage for your code and a social network for programmers – it's where developers share their work, collaborate on projects, and contribute to the open-source community that powers much of the internet you use every day.
+
+In this lesson, you'll discover how GitHub transforms the way developers work together. You'll learn to track changes in your code, collaborate with others seamlessly, and even contribute to projects used by millions of people. This isn't just about storing code online – it's about joining a global community of developers and learning the fundamental workflows that every professional developer uses.
+
+By the end of this lesson, you'll have your own GitHub repository, understand how to manage code changes with Git, and know how to contribute to open-source projects. These skills will serve as your foundation for collaborating with other developers throughout your web development journey. Let's dive in and unlock the power of collaborative coding!
 
 ![Intro to GitHub](../../sketchnotes/webdev101-github.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
@@ -10,6 +14,10 @@ This lesson covers the basics of GitHub, a platform to host and manage changes t
 
 ## Introduction
 
+Before we dive into hands-on GitHub activities, let's establish the foundation you'll need for success. Understanding the key concepts and ensuring your development environment is properly configured will make your GitHub journey much smoother.
+
+In this section, we'll cover the essential knowledge and tools that every developer needs when working with GitHub. Don't worry if some concepts seem unfamiliar at first – we'll guide you through each step and explain why these tools are so valuable for web developers.
+
 In this lesson, we'll cover:
 
 - tracking the work you do on your machine
@@ -18,43 +26,98 @@ In this lesson, we'll cover:
 
 ### Prerequisites
 
+Setting up your development environment properly is crucial for a smooth GitHub experience. Think of this as preparing your toolkit before starting a project – having the right tools configured correctly will save you time and frustration later.
+
+Let's ensure you have everything you need to start collaborating with Git and GitHub effectively.
+
 Before you begin, you'll need to check if Git is installed. In the terminal type: 
 `git --version`
 
 If Git is not installed, [download Git](https://git-scm.com/downloads). Then, setup your local Git profile in the terminal:
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
+
+> 💡 **First Time Setup**: These commands tell Git who you are. This information will be attached to every commit you make, so choose a name and email you're comfortable sharing publicly.
+
+```bash
+git config --global user.name "your-name"
+git config --global user.email "your-email"
+```
 
 To check if Git is already configured you can type:
-`git config --list`
+```bash
+git config --list
+```
 
 You'll also need a GitHub account, a code editor (like Visual Studio Code), and you'll need to open your terminal (or: command prompt).
 
 Navigate to [github.com](https://github.com/) and create an account if you haven't already, or log in and fill out your profile. 
 
+💡 **Modern tip**: Consider setting up [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) or using [GitHub CLI](https://cli.github.com/) for easier authentication without passwords. 
+
 ✅ GitHub isn't the only code repository in the world; there are others, but GitHub is the best known
 
 ### Preparation
 
 You'll need both a folder with a code project on your local machine (laptop or PC), and a public repository on GitHub, which will serve as an example for how to contribute to the projects of others.  
 
+### Modern Security Practices
+
+Security in software development isn't just important – it's essential. As you begin your journey with GitHub, establishing secure practices from the start will protect your code, your collaborators, and the projects you contribute to.
+
+Modern development workflows prioritize security at every step. Let's explore the key security practices that every developer should know when working with GitHub and Git.
+
+When working with GitHub, it's important to follow security best practices:
+
+When working with GitHub, it's important to follow security best practices:
+
+| Security Area | Best Practice | Why It Matters |
+|---------------|---------------|----------------|
+| **Authentication** | Use SSH keys or Personal Access Tokens | Passwords are less secure and being phased out |
+| **Two-Factor Authentication** | Enable 2FA on your GitHub account | Adds an extra layer of account protection |
+| **Repository Security** | Never commit sensitive information | API keys and passwords should never be in public repos |
+| **Dependency Management** | Enable Dependabot for updates | Keeps your dependencies secure and up-to-date |
+
+> ⚠️ **Critical Security Reminder**: Never commit API keys, passwords, or other sensitive information to any repository. Use environment variables and `.gitignore` files to protect sensitive data.
+
+**Modern Authentication Setup:**
+
+```bash
+# Generate SSH key (modern ed25519 algorithm)
+ssh-keygen -t ed25519 -C "your_email@example.com"
+
+# Set up Git to use SSH
+git remote set-url origin git@github.com:username/repository.git
+```
+
+> 💡 **Pro Tip**: SSH keys eliminate the need to enter passwords repeatedly and are more secure than traditional authentication methods.
+
 ---
 
 ## Code management
 
+Now that you understand the importance of GitHub and have your environment set up, let's dive into the practical skills you'll use every day as a developer. Code management with Git is like maintaining a detailed journal of your project's evolution – every change, every decision, and every milestone is carefully tracked and preserved.
+
+Think of Git as your coding time machine. You can see exactly what changed, when it changed, and why it changed. This becomes incredibly valuable when working on complex projects or collaborating with others.
+
 Let's say you have a folder locally with some code project and you want to start tracking your progress using git - the version control system. Some people compare using git to writing a love letter to your future self. Reading your commit messages days or weeks or months later you'll be able to recall why you made a decision, or "rollback" a change - that is, when you write good "commit messages".
 
 ### Task: Make a repository and commit code  
 
+> 🎯 **Learning Goal**: By the end of this task, you'll have created your first GitHub repository and made your first commit. This is your entry point into the world of version control!
+
 > Check out video
 > 
 > [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
 
+**Step-by-Step Workflow:**
+
 
-1. **Create repository on GitHub**. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the **new repo** button.
+1. **Create repository on GitHub**. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the **New** button (green button) or the **+** dropdown and select **New repository**.
 
    1. Give your repository (folder) a name
-   1. Select **create repository**.
+   1. Add a description (optional but recommended)
+   1. Choose to make it public or private
+   1. Consider adding a README file, .gitignore, and license
+   1. Select **Create repository**.
 
 1. **Navigate to your working folder**. In your terminal, switch to the folder (also known as the directory) you want to start tracking. Type:
 
@@ -62,93 +125,142 @@ Let's say you have a folder locally with some code project and you want to start
    cd [name of your folder]
    ```
 
+   **Here's what this command does:**
+   - **Navigate** to your project directory where your code files are located
+   - **Prepare** the environment for Git initialization and tracking
+
 1. **Initialize a git repository**. In your project type:
 
    ```bash
    git init
    ```
 
+   **Step by step, here's what's happening:**
+   - **Create** a hidden `.git` folder that contains all version control information
+   - **Transform** your regular folder into a Git repository that can track changes
+   - **Set up** the foundation for version control in your project
+
 1. **Check status**. To check the status of your repository type:
 
    ```bash
    git status
    ```
 
-   the output can look something like this:
+   **Understanding the output:**
+   
+   The output might look something like this:
 
    ```output
    Changes not staged for commit:
    (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
+   (use "git restore <file>..." to discard changes in working directory)
 
         modified:   file.txt
         modified:   file2.txt
    ```
 
-   Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist.
+   **What you need to know about this output:**
+   - **Red text** typically indicates files that have changes but aren't ready for commit
+   - **Green text** shows files that are staged and ready to be committed
+   - **Helpful hints** are provided about what commands you can use next
+
+   > 💡 **Understanding Git Status**: This command is your best friend! It tells you exactly what Git sees in your project and what actions you can take next.
+
+   The `git status` command tells you things like what files are ready to be _saved_ to the repo or have changes that you might want to persist.
 
-1. **Add all files for tracking**
-   This also called as staging files/ adding files to the staging area.
+1. **Add all files for tracking** (also called staging files):
 
    ```bash
    git add .
    ```
 
-   The `git add` plus `.` argument indicates that all your files & changes for tracking. 
+   **Here's what this command does:**
+   - **Stage** all modified and new files in your project directory
+   - **Prepare** these files to be included in your next commit
+   - **Mark** files as ready for the permanent snapshot we'll create next
 
-1. **Add selected files for tracking**
+   The `git add` command with the `.` argument indicates that all your files & changes are ready for tracking.
+
+1. **Add selected files for tracking** (selective staging):
 
    ```bash
    git add [file or folder name]
    ```
 
-   This helps us to add only selected files to the staging area when we don't want to commit all files at once.
-
-1. **Unstage all files**
+   **When to use selective staging:**
+   - **Organize** related changes into separate commits for cleaner history
+   - **Include** only the files that belong together logically
+   - **Create** more meaningful commit messages by grouping related work
 
-   ```bash
-   git reset
-   ```
+   > 💡 **Pro Tip**: Use selective adding when you want to commit related changes together. This creates more meaningful commit history.
 
-   This command helps us to unstage all files at once.
-
-1. **Unstage a particular file**
+1. **Unstage files** (if you change your mind):
 
    ```bash
+   # Unstage all files
+   git reset
+   
+   # Unstage a particular file
    git reset [file or folder name]
    ```
 
-   This command helps us to unstage only a particular file at once that we don't want to include for the next commit.
+   **Understanding unstaging:**
+   - **Remove** files from the staging area without losing your changes
+   - **Keep** your modifications but exclude them from the next commit
+   - **Reorganize** what you want to include in your commit
 
-1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_:
+1. **Persisting your work** (making a commit). At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_:
 
    ```bash
    git commit -m "first commit"
    ```
 
-   This commits all of your files, adding the message "first commit". For future commit messages you will want to be more descriptive in your description to convey what type of change you've made.
+   **What happens when you commit:**
+   - **Create** a permanent snapshot of all staged files at this point in time
+   - **Record** the commit message to explain what changes were made
+   - **Generate** a unique identifier (hash) for this specific set of changes
+   - **Add** this snapshot to your project's version history
+
+   > 💡 **Commit Message Tips**: Your first commit message can be simple, but for future commits, be descriptive! Good examples: "Add user login functionality" or "Fix navigation menu bug".
+
+   This commits all of your files, adding the message "first commit". For future commit messages you will want to be more descriptive to convey what type of change you've made.
 
 1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command:
 
-   > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace ```https://github.com/username/repository_name.git``` with your GitHub URL.
+   > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace `https://github.com/username/repository_name.git` with your GitHub URL.
 
    ```bash
    git remote add origin https://github.com/username/repository_name.git
    ```
 
+   **Step by step, here's what's happening:**
+   - **Create** a connection named "origin" that points to your GitHub repository
+   - **Link** your local Git repository with the remote repository on GitHub
+   - **Enable** the ability to push your local commits to GitHub and pull changes from GitHub
+
+   💡 **Modern alternative**: You can also use the GitHub CLI to create and connect your repository in one step:
+   ```bash
+   gh repo create my-repo --public --push --source=.
+   ```
+
    This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier.
 
 1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: 
-   
-   > Note, your branch name may be different by default from ```main```.
 
    ```bash
    git push -u origin main
    ```
 
-   This sends your commits in your "main" branch to GitHub. Setting the `upstream` branch including `-u` in the command establishes a link between your local branch and the remote branch, so you can simply use git push or git pull without specifying the branch name in the future. Git will automatically use the upstream branch and you won't need to specify the branch name explicitly in future commands.
+   **Breaking down this command:**
+   - **Upload** your commits from the "main" branch to GitHub
+   - **Set** the upstream branch using `-u` to establish a permanent link
+   - **Enable** simplified future pushes without specifying branch names
+
+   This sends your commits in your "main" branch to GitHub. Setting the `upstream` branch with `-u` in the command establishes a link between your local branch and the remote branch, so you can simply use `git push` or `git pull` without specifying the branch name in the future.
+
+   💡 **Note**: If your default branch is named differently (like "master"), replace "main" with your actual branch name. You can check your current branch with `git branch --show-current`.
 
-2. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands:
+2. **To add more changes** (daily workflow). If you want to continue making changes and pushing them to GitHub you'll just need to use the following three commands:
 
    ```bash
    git add .
@@ -156,7 +268,20 @@ Let's say you have a folder locally with some code project and you want to start
    git push
    ```
 
-   > Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
+   **Step by step, here's your daily workflow:**
+   - **Stage** your modified files with `git add .` (or add specific files)
+   - **Commit** your changes with a descriptive message about what you've accomplished
+   - **Push** to GitHub to backup your work and share it with others
+
+   > 💡 **Tip**: You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore) or create one using [gitignore.io](https://www.toptal.com/developers/gitignore).
+
+#### Modern Git workflows
+
+Consider adopting these modern practices:
+
+- **Conventional Commits**: Use a standardized commit message format like `feat:`, `fix:`, `docs:`, etc. Learn more at [conventionalcommits.org](https://www.conventionalcommits.org/)
+- **Atomic commits**: Make each commit represent a single logical change
+- **Frequent commits**: Commit often with descriptive messages rather than large, infrequent commits
 
 #### Commit messages
 
@@ -168,24 +293,45 @@ As in the subject, in the body (optional) also use the imperative, present tense
 
 ✅ Take a few minutes to surf around GitHub. Can you find a really great commit message? Can you find a really minimal one? What information do you think is the most important and useful to convey in a commit message?
 
-### Task: Collaborate
+## Working on projects with others
 
-The main reason for putting things on GitHub was to make it possible to collaborate with other developers.
+Collaboration is where GitHub truly shines. While managing your own code is valuable, the real magic happens when developers work together to build something amazing. GitHub transforms solo coding into a collaborative symphony where multiple developers can contribute simultaneously without stepping on each other's toes.
 
-## Working on projects with others
+In this section, you'll learn how to make your projects welcoming to other developers and how to contribute meaningfully to existing projects. These collaboration skills are what separate hobbyist coders from professional developers.
 
 > Check out video
 >
 > [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
 
+The main reason for putting things on GitHub was to make it possible to collaborate with other developers.
+
 In your repository, navigate to `Insights > Community` to see how your project compares to recommended community standards.
 
-   Here are some things that can improve your GitHub repo:
-   - **Description**. Did you add a description for your project?
-   - **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
-   - **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon), 
-   - **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **License**. Perhaps most importantly, a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+> 🎯 **Making Your Repository Professional**: A well-documented repository attracts more contributors and shows that you care about code quality.
+
+**Essential Repository Elements:**
+
+| Element | Purpose | Why It Matters |
+|---------|---------|----------------|
+| **Description** | Brief summary of your project | Helps people understand what your project does at a glance |
+| **README** | Detailed project documentation | The first thing people read - make it count! |
+| **Contributing Guidelines** | Instructions for contributors | Shows you welcome collaboration and sets clear expectations |
+| **Code of Conduct** | Community behavior standards | Creates a welcoming environment for all contributors |
+| **License** | Usage permissions | Defines how others can legally use your code |
+| **Security Policy** | Vulnerability reporting process | Shows you take security seriously |
+
+> 💡 **Pro Tip**: GitHub provides templates for all of these files. When creating a new repository, check the boxes to automatically generate these files.
+
+**Modern GitHub Features to Explore:**
+
+🤖 **Automation & CI/CD:**
+- **GitHub Actions** for automated testing and deployment
+- **Dependabot** for automatic dependency updates
+
+💬 **Community & Project Management:**
+- **GitHub Discussions** for community conversations beyond issues
+- **GitHub Projects** for kanban-style project management
+- **Branch protection rules** to enforce code quality standards
 
 
 All these resources will benefit onboarding new team members. And those are typically the kind of things new contributors look at before even looking at your code, to find out if your project is the right place for them to be spending their time.
@@ -214,12 +360,19 @@ Let's go through a contributor workflow. Assume the contributor has already _for
    git branch [branch-name]
    ```
 
+   > 💡 **Modern Approach**: You can also create and switch to the new branch in one command:
+   ```bash
+   git switch -c [branch-name]
+   ```
+
 1. **Switch to working branch**. Switch to the specified branch and update the working directory with `git switch`:
 
    ```bash
    git switch [branch-name]
    ```
 
+   > 💡 **Modern Note**: `git switch` is the modern replacement for `git checkout` when changing branches. It's clearer and safer for beginners.
+
 1. **Do work**. At this point you want to add your changes. Don't forget to tell Git about it with the following commands:
 
    ```bash
@@ -227,7 +380,7 @@ Let's go through a contributor workflow. Assume the contributor has already _for
    git commit -m "my changes"
    ```
 
-   Ensure you give your commit a good name, for your sake as well as the maintainer of the repo you are helping on.
+   > ⚠️ **Commit Message Quality**: Ensure you give your commit a good name, both for your sake and the maintainer of the repo you are helping on. Be specific about what you changed!
 
 1. **Combine your work with the `main` branch**. At some point you are done working and you want to combine your work with that of the `main` branch. The `main` branch might have changed meanwhile so make sure you first update it to the latest with the following commands:
 
@@ -245,9 +398,11 @@ Let's go through a contributor workflow. Assume the contributor has already _for
 
    The `git merge main` command will bring in all changes from `main` into your branch. Hopefully you can just continue. If not, VS Code will tell you where Git is _confused_ and you just alter the affected files to say which content is the most accurate.
 
-   To switch to a different branch, use the modern `git switch` command:
+   💡 **Modern alternative**: Consider using `git rebase` for a cleaner history:
    ```bash
-   git switch [branch_name]
+   git rebase main
+   ```
+   This replays your commits on top of the latest main branch, creating a linear history.
 
 1. **Send your work to GitHub**. Sending your work to GitHub means two things. Pushing your branch to your repo and then open up a PR, Pull Request.
 
@@ -259,6 +414,18 @@ Let's go through a contributor workflow. Assume the contributor has already _for
 
 1. **Open a PR**. Next, you want to open up a PR. You do that by navigating to the forked repo on GitHub. You will see an indication on GitHub where it asks whether you want to create a new PR, you click that and you are taken to an interface where you can change commit message title, give it a more suitable description. Now the maintainer of the repo you forked will see this PR and _fingers crossed_ they will appreciate and _merge_ your PR. You are now a contributor, yay :)
 
+   💡 **Modern tip**: You can also create PRs using GitHub CLI:
+   ```bash
+   gh pr create --title "Your PR title" --body "Description of changes"
+   ```
+
+   🔧 **Best practices for PRs**:
+   - Link to related issues using keywords like "Fixes #123"
+   - Add screenshots for UI changes
+   - Request specific reviewers
+   - Use draft PRs for work-in-progress
+   - Ensure all CI checks pass before requesting review
+
 1. **Clean up**. It's considered good practice to _clean up_ after you successfully merge a PR. You want to clean up both your local branch and the branch you pushed to GitHub. First let's delete it locally with the following command: 
 
    ```bash
@@ -279,6 +446,10 @@ Update your current local working branch with all new commits from the correspon
 
 ## How to contribute to open source
 
+Contributing to open source projects is one of the most rewarding experiences in web development. It's your opportunity to give back to the community, learn from experienced developers, and make a real impact on software used by thousands or even millions of people.
+
+The beauty of open source contribution is that everyone started as a beginner. The developers who created the tools you're learning with today were once exactly where you are now. By contributing to open source, you become part of this continuous cycle of learning and sharing that drives innovation in web development.
+
 First, let's find a repository (or **repo**) on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy its contents to your machine.
 
 ✅ A good way to find 'beginner-friendly' repos is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
@@ -288,12 +459,25 @@ First, let's find a repository (or **repo**) on GitHub of interest to you and to
 There are several ways of copying code. One way is to "clone" the contents of the repository, using HTTPS, SSH, or using the GitHub CLI (Command Line Interface). 
 
 Open your terminal and clone the repository like so:
-`git clone https://github.com/ProjectURL`
+```bash
+# Using HTTPS
+git clone https://github.com/ProjectURL
+
+# Using SSH (requires SSH key setup)
+git clone git@github.com:username/repository.git
+
+# Using GitHub CLI
+gh repo clone username/repository
+```
 
 To work on the project, switch to the right folder:
 `cd ProjectURL`
 
-You can also open the entire project using [Codespaces](https://github.com/features/codespaces), GitHub's embedded code editor / cloud development environment, or [GitHub Desktop](https://desktop.github.com/).
+You can also open the entire project using:
+- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub's cloud development environment with VS Code in the browser
+- **[GitHub Desktop](https://desktop.github.com/)** - A GUI application for Git operations  
+- **[GitHub.dev](https://github.dev)** - Press the `.` key on any GitHub repo to open VS Code in the browser
+- **VS Code** with the GitHub Pull Requests extension
 
 Lastly, you can download the code in a zipped folder. 
 
@@ -305,7 +489,15 @@ Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indi
 
 Projects might also have discussion in forums, mailing lists, or chat channels like Slack, Discord or IRC.
 
-✅ Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, and creating a project (like a Kanban board). There's a lot you can do!
+🔧 **Modern GitHub features**:
+- **GitHub Discussions** - Built-in forum for community conversations
+- **GitHub Sponsors** - Support maintainers financially  
+- **Security tab** - Vulnerability reports and security advisories
+- **Actions tab** - See automated workflows and CI/CD pipelines
+- **Insights tab** - Analytics about contributors, commits, and project health
+- **Projects tab** - GitHub's built-in project management tools
+
+✅ Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, creating a project (like a Kanban board), and setting up GitHub Actions for automation. There's a lot you can do!
 
 ---
 
@@ -322,12 +514,33 @@ Read more about [contributing to open source software](https://opensource.guide/
 
 [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
 
-Practice, practice, practice. GitHub has great learning paths available via [skills.github.com](https://skills.github.com):
+Practice, practice, practice. GitHub has great learning paths available via [GitHub Skills](https://skills.github.com):
 
-- [First Week on GitHub](https://skills.github.com/#first-week-on-github)
+- [Introduction to GitHub](https://github.com/skills/introduction-to-github)
+- [Communicate using Markdown](https://github.com/skills/communicate-using-markdown)  
+- [GitHub Pages](https://github.com/skills/github-pages)
+- [Managing merge conflicts](https://github.com/skills/resolve-merge-conflicts)
 
-You'll also find more advanced courses. 
+**Additional modern resources**:
+- [GitHub CLI documentation](https://cli.github.com/manual/)
+- [GitHub Codespaces documentation](https://docs.github.com/en/codespaces)
+- [GitHub Actions documentation](https://docs.github.com/en/actions)
+- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) 
+
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create a collaborative web development project that demonstrates the complete GitHub workflow you've learned in this lesson. This challenge will help you practice repository creation, collaboration features, and modern Git workflows in a real-world scenario.
+
+**Prompt:** Create a new public GitHub repository for a simple "Web Development Resources" project. The repository should include a well-structured README.md file listing useful web development tools and resources, organized by categories (HTML, CSS, JavaScript, etc.). Set up the repository with proper community standards including a license, contributing guidelines, and a code of conduct. Create at least two feature branches: one for adding CSS resources and another for JavaScript resources. Make commits to each branch with descriptive commit messages, then create pull requests to merge the changes back to main. Enable GitHub features like Issues, Discussions, and set up a basic GitHub Actions workflow for automated checks.
 
 ## Assignment 
 
-Complete [the First Week on GitHub course](https://skills.github.com/#first-week-on-github)
+Complete the [Introduction to GitHub](https://github.com/skills/introduction-to-github) course on GitHub Skills.
+
+**Optional advanced assignments**:
+- Set up SSH authentication for your GitHub account
+- Try using GitHub CLI for common operations
+- Create a repository with GitHub Actions workflow
+- Explore GitHub Codespaces by opening this repository in a codespace
diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md
index 750559d3..0c581168 100644
--- a/1-getting-started-lessons/3-accessibility/README.md
+++ b/1-getting-started-lessons/3-accessibility/README.md
@@ -10,158 +10,1130 @@
 >
 > \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
 
-This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind. 
+Web accessibility isn't just a nice-to-have feature—it's a fundamental principle that makes the internet truly universal. When you build accessible websites, you're not just helping people with disabilities; you're creating better experiences for everyone. Think about how curb cuts designed for wheelchairs also help people with strollers, luggage, or bicycles. Accessible web design works the same way.
+
+In this lesson, you'll discover how to create websites that work for everyone, regardless of their abilities or the technologies they use to browse the web. You'll learn practical techniques that are built into modern web standards, explore powerful accessibility testing tools, and understand how accessibility enhances usability for all users.
+
+By the end of this lesson, you'll have the knowledge and tools to make accessibility a natural part of your development process from day one. Let's explore how thoughtful design choices can open up the web to billions of users worldwide. 
 
 > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
 
-## Tools to use
+## Understanding Assistive Technologies
+
+Before we dive into building accessible websites, let's understand how people with different abilities navigate the web. This knowledge will help you make informed decisions about your design and development choices.
+
+Assistive technologies are specialized tools that help people with disabilities interact with digital content. Understanding how these tools work is essential for creating truly accessible web experiences.
 
 ### Screen readers
 
-One of the best-known accessibility tools are screen readers.
+[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) are remarkable assistive technologies that convert digital text into speech or braille output. They're primarily used by people with visual impairments, but they also help users with learning disabilities like dyslexia.
+
+Think of a screen reader as a voice narrator for the web. It reads content aloud in a logical order, announces interactive elements like buttons and links, and provides keyboard shortcuts for efficient navigation. However, screen readers can only work effectively if websites are built with proper structure and meaningful content.
+
+**Popular screen readers across platforms:**
+- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (free and most popular), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (built-in)
+- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (built-in and very capable)
+- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (built-in)
+- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (free and open-source)
+
+**How screen readers navigate web content:**
+
+Screen readers provide multiple navigation methods that make browsing efficient for experienced users:
+- **Sequential reading**: Reads content from top to bottom, like following a book
+- **Landmark navigation**: Jump between page sections (header, nav, main, footer)
+- **Heading navigation**: Skip between headings to understand page structure
+- **Link lists**: Generate a list of all links for quick access
+- **Form controls**: Navigate directly between input fields and buttons
+
+> 💡 **Developer Insight**: 68% of screen reader users navigate primarily by headings ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). This is why proper heading structure is crucial!
+
+### Building your testing workflow
+
+Effective accessibility testing requires both automated tools and manual verification. Here's a systematic approach that catches the most issues:
+
+**Essential manual testing workflow:**
+
+```mermaid
+graph TD
+    A[Start Testing] --> B{Keyboard Navigation}
+    B --> C[Tab through all interactive elements]
+    C --> D{Screen Reader Testing}
+    D --> E[Test with NVDA/VoiceOver]
+    E --> F{Zoom Testing}
+    F --> G[Zoom to 200% and test functionality]
+    G --> H{Color/Contrast Check}
+    H --> I[Verify all text meets contrast ratios]
+    I --> J{Focus Management}
+    J --> K[Ensure focus indicators are visible]
+    K --> L[Testing Complete]
+```
+
+**Step-by-step testing checklist:**
+1. **Keyboard navigation**: Use only Tab, Shift+Tab, Enter, Space, and Arrow keys
+2. **Screen reader testing**: Enable NVDA, VoiceOver, or Narrator and navigate with eyes closed
+3. **Zoom testing**: Test at 200% and 400% zoom levels
+4. **Color contrast verification**: Check all text and UI components
+5. **Focus indicator testing**: Ensure all interactive elements have visible focus states
+
+✅ **Start with Lighthouse**: Open your browser's DevTools, run a Lighthouse accessibility audit, then use the results to guide your manual testing focus areas.
+
+### Zoom and magnification tools
+
+Many users rely on magnification to make content readable. This includes people with low vision, older adults, and even users in bright sunlight or with temporary vision issues. Modern zoom technologies have evolved far beyond simple image scaling.
+
+Understanding how zoom works helps you create responsive designs that remain functional and beautiful at any magnification level.
+
+**Modern browser zoom capabilities:**
+- **Page zoom**: Scales all content proportionally (text, images, layout) - this is the preferred method
+- **Text-only zoom**: Increases font size while maintaining original layout
+- **Pinch-to-zoom**: Mobile gesture support for temporary magnification
+- **Browser support**: All modern browsers support zoom up to 500% without breaking functionality
+
+**Specialized magnification software:**
+- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (built-in), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)
+- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (built-in with advanced features)
+
+> ⚠️ **Design Consideration**: WCAG requires that content remain functional when zoomed to 200%. At this level, horizontal scrolling should be minimal, and all interactive elements should remain accessible.
+
+✅ **Test your responsive design**: Zoom your browser to 200% and 400%. Does your layout adapt gracefully? Can you still access all functionality without excessive scrolling?
+
+## Modern Accessibility Testing Tools
+
+Now that you understand how assistive technologies work, let's explore the tools that help you build and test accessible websites. Combining automated testing with manual verification gives you confidence that your sites work for everyone.
+
+Modern accessibility testing follows a comprehensive approach: automated tools catch obvious issues, while manual testing ensures real-world usability.
 
-[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) are commonly used clients for those with vision impairments. As we spend time ensuring a browser properly conveys the information we wish to share, we must also ensure a screen reader does the same.
+### Color contrast testing
 
-At its most basic, a screen reader will read a page from top to bottom audibly. If your page is all text, the reader will convey the information in a similar fashion to a browser. Of course, web pages are rarely purely text; they will contain links, graphics, color, and other visual components. Care must be taken to ensure that this information is read correctly by a screen reader.
+Color contrast is one of the most common accessibility issues, but it's also one of the easiest to fix. Good contrast benefits everyone—from users with visual impairments to people viewing screens in bright sunlight.
 
-Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems.
+**WCAG contrast requirements:**
 
-Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
+| Text Type | WCAG AA (Minimum) | WCAG AAA (Enhanced) |
+|-----------|-------------------|---------------------|
+| **Normal text** (under 18pt) | 4.5:1 contrast ratio | 7:1 contrast ratio |
+| **Large text** (18pt+ or 14pt+ bold) | 3:1 contrast ratio | 4.5:1 contrast ratio |
+| **UI components** (buttons, form borders) | 3:1 contrast ratio | 3:1 contrast ratio |
 
-✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
+**Essential testing tools:**
+- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop app with color picker
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Web-based with instant feedback
+- [Stark](https://www.getstark.co/) - Design tool plugin for Figma, Sketch, Adobe XD
+- [Accessible Colors](https://accessible-colors.com/) - Find accessible color palettes
 
-### Zoom
+✅ **Build better color palettes**: Start with your brand colors and use contrast checkers to create accessible variations. Document these as your design system's accessible color tokens.
 
-Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels.
+### Comprehensive accessibility auditing
 
-Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/).
+The most effective accessibility testing combines multiple approaches. No single tool catches everything, so building a testing routine with various methods ensures thorough coverage.
 
-### Contrast checkers
+**Browser-based testing (built into DevTools):**
+- **Chrome/Edge**: Lighthouse accessibility audit + Accessibility panel
+- **Firefox**: Accessibility Inspector with detailed tree view
+- **Safari**: Audit tab in Web Inspector with VoiceOver simulation
 
-Colors on web sites need to be carefully chosen to  answer the needs of color-blind users or people who have  difficulty seeing low-contrast colors.
+**Professional testing extensions:**
+- [axe DevTools](https://www.deque.com/axe/devtools/) - Industry-standard automated testing
+- [WAVE](https://wave.webaim.org/extension/) - Visual feedback with error highlighting
+- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft's comprehensive testing suite
 
-✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). What do you learn?
+**Command-line and CI/CD integration:**
+- [axe-core](https://github.com/dequelabs/axe-core) - JavaScript library for automated testing
+- [Pa11y](https://pa11y.org/) - Command-line accessibility testing tool
+- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automated accessibility scoring
 
-### Lighthouse
+> 🎯 **Testing Goal**: Aim for a Lighthouse accessibility score of 95+ as your baseline. Remember, automated tools only catch about 30-40% of accessibility issues—manual testing is still essential!
 
-In the developer tool area of your browser, you'll find the Lighthouse tool. This tool is important to get a first view of the accessibility (as well as other analysis) of a web site. While it's important not to rely exclusively on Lighthouse, a 100% score is very helpful as a baseline.
+## Building Accessibility from the Ground Up
 
-✅ Find Lighthouse in your browser's developer tool panel and run an analysis on any site. what do you discover?
+The most effective approach to web accessibility is building it into your foundation from day one. Retrofitting accessibility later is not only more expensive and time-consuming—it often results in subpar user experiences.
 
-## Designing for accessibility
+Think of accessibility like building a house: it's much easier to include wheelchair accessibility in the initial architectural plans than to add ramps and wider doorways after construction is complete.
 
-Accessibility is a relatively large topic. To help you out, there are numerous resources available.
+### The POUR principles: Your accessibility foundation
 
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+The Web Content Accessibility Guidelines (WCAG) are built around four fundamental principles known as POUR. These principles provide a framework for making content accessible to users with diverse abilities and technologies.
 
-While we won't be able to cover every aspect of creating accessible sites, below are some of the core tenets you will want to implement. Designing an accessible page from the start is **always** easier than going back to an existing page to make it accessible.
+Understanding POUR helps you make accessibility decisions that create inclusive experiences for everyone.
 
-## Good display principles
+**🔍 Perceivable**: Information must be presentable in ways users can perceive through their available senses
 
-### Color safe palettes
+- Provide text alternatives for non-text content (images, videos, audio)
+- Ensure sufficient color contrast for all text and UI components
+- Offer captions and transcripts for multimedia content
+- Design content that remains functional when resized up to 200%
+- Use multiple sensory characteristics (not just color) to convey information
 
-People see the world in different ways, and this includes colors. When selecting a color scheme for your site, you should ensure it's accessible to all. One great [tool for generating color palettes is Color Safe](http://colorsafe.co/).
+**🎮 Operable**: All interface components must be operable through available input methods
 
-✅ Identify a web site that is very problematic in its use of color. Why?
+- Make all functionality accessible via keyboard navigation
+- Provide users sufficient time to read and interact with content
+- Avoid content that causes seizures or vestibular disorders
+- Help users navigate efficiently with clear structure and landmarks
+- Ensure interactive elements have adequate target sizes (44px minimum)
 
-### Use the correct HTML
+**📖 Understandable**: Information and UI operation must be clear and comprehensible
 
-With CSS and JavaScript it's possible to make any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it conveys nothing to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
+- Use clear, simple language appropriate for your audience
+- Ensure content appears and operates in predictable, consistent ways
+- Provide clear instructions and error messages for user input
+- Help users understand and correct mistakes in forms
+- Organize content with logical reading order and information hierarchy
 
-✅ Go to any web site and see if the designers and developers are using HTML properly. Can you find a button that should be a link? Hint: right click and choose 'View Page Source' in your browser to look at underlying code.
+**💪 Robust**: Content must work reliably across different technologies and assistive devices
 
-### Create a descriptive heading hierarchy
+- Use valid, semantic HTML as your foundation
+- Ensure compatibility with current and future assistive technologies
+- Follow web standards and best practices for markup
+- Test across different browsers, devices, and assistive tools
+- Structure content so it degrades gracefully when advanced features aren't supported
 
-Screen reader users [rely heavily on headings](https://webaim.org/projects/screenreadersurvey8/#finding) to find information and navigate through a page. Writing descriptive heading content and using semantic heading tags are important for creating an easily navigable site for screen reader users.
+## Creating Accessible Visual Design
 
-### Use good visual clues
+Good visual design and accessibility go hand in hand. When you design with accessibility in mind, you often discover that these constraints lead to cleaner, more elegant solutions that benefit all users.
 
-CSS offers complete control over the look of any element on a page. You can create text boxes without an outline or hyperlinks without an underline. Unfortunately removing those clues can make it more challenging for someone who depends on them to be able to recognize the type of control.
+Let's explore how to create visually appealing designs that work for everyone, regardless of their visual abilities or the conditions under which they're viewing your content.
 
-## The importance of link text
+### Color and visual accessibility strategies
 
-Hyperlinks are core to navigating the web. As a result, ensuring a screen reader can properly read links allows all users to navigate your site.
+Color is powerful for communication, but it should never be the only way you convey important information. Designing beyond color creates more robust, inclusive experiences that work in more situations.
 
-### Screen readers and links
+**Design for color vision differences:**
 
-As you would expect, screen readers read link text in the same way they'd read any other text on the page. With this in mind, the text demonstrated below might feel perfectly acceptable.
+Approximately 8% of men and 0.5% of women have some form of color vision difference (often called "color blindness"). The most common types are:
+- **Deuteranopia**: Difficulty distinguishing red and green
+- **Protanopia**: Red appears more dim
+- **Tritanopia**: Difficulty with blue and yellow (rare)
 
-> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. [Click here](https://en.wikipedia.org/wiki/Little_penguin) for more information.
+**Inclusive color strategies:**
 
-> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. Visit https://en.wikipedia.org/wiki/Little_penguin for more information.
+```css
+/* ❌ Bad: Using only color to indicate status */
+.error { color: red; }
+.success { color: green; }
 
-> **NOTE** As you're about to read, you should **never** create links which look like the above.
+/* ✅ Good: Color plus icons and context */
+.error {
+  color: #d32f2f;
+  border-left: 4px solid #d32f2f;
+}
+.error::before {
+  content: "⚠️";
+  margin-right: 8px;
+}
+
+.success {
+  color: #2e7d32;
+  border-left: 4px solid #2e7d32;
+}
+.success::before {
+  content: "✅";
+  margin-right: 8px;
+}
+```
+
+**Beyond basic contrast requirements:**
+- Test your color choices with color blind simulators
+- Use patterns, textures, or shapes alongside color coding
+- Ensure interactive states remain distinguishable without color
+- Consider how your design looks in high contrast mode
+
+✅ **Test your color accessibility**: Use tools like [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) to see how your site appears to users with different types of color vision.
+
+### Focus indicators and interaction design
+
+Focus indicators are the digital equivalent of a cursor—they show keyboard users where they are on the page. Well-designed focus indicators enhance the experience for everyone by making interactions clear and predictable.
+
+**Modern focus indicator best practices:**
+
+```css
+/* Enhanced focus styles that work across browsers */
+button:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
+}
+
+/* Remove focus outline for mouse users, preserve for keyboard users */
+button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Focus-within for complex components */
+.card:focus-within {
+  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
+  border-color: #4A90A4;
+}
+
+/* Ensure focus indicators meet contrast requirements */
+.custom-focus:focus-visible {
+  outline: 3px solid #ffffff;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 6px #000000;
+}
+```
+
+**Focus indicator requirements:**
+- **Visibility**: Must have at least 3:1 contrast ratio with surrounding elements
+- **Width**: Minimum 2px thickness around the entire element
+- **Persistence**: Should remain visible until focus moves elsewhere
+- **Distinction**: Must be visually different from other UI states
+
+> 💡 **Design Tip**: Great focus indicators often use a combination of outline, box-shadow, and color changes to ensure visibility across different backgrounds and contexts.
+
+✅ **Audit focus indicators**: Tab through your website and note which elements have clear focus indicators. Are any difficult to see or missing entirely?
+
+### Semantic HTML: The foundation of accessibility
+
+Semantic HTML is like providing a clear roadmap for assistive technologies. When you use the right HTML elements for their intended purpose, you're giving screen readers, keyboards, and other tools the information they need to help users navigate effectively.
+
+Think of semantic HTML as the difference between a well-organized library with clear categories and signs versus a warehouse where books are randomly scattered. Both contain the same information, but only one is truly usable.
+
+**Building blocks of accessible page structure:**
+
+```html
+<!-- Landmark elements provide page navigation structure -->
+<header>
+  <h1>Your Site Name</h1>
+  <nav aria-label="Main navigation">
+    <ul>
+      <li><a href="/home">Home</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/services">Services</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <article>
+    <header>
+      <h1>Article Title</h1>
+      <p>Published on <time datetime="2024-10-14">October 14, 2024</time></p>
+    </header>
+    
+    <section>
+      <h2>First Section</h2>
+      <p>Content that relates to this section...</p>
+    </section>
+    
+    <section>
+      <h2>Second Section</h2>
+      <p>More related content...</p>
+    </section>
+  </article>
+  
+  <aside>
+    <h2>Related Links</h2>
+    <nav aria-label="Related articles">
+      <ul>
+        <li><a href="/related-1">First related article</a></li>
+        <li><a href="/related-2">Second related article</a></li>
+      </ul>
+    </nav>
+  </aside>
+</main>
+
+<footer>
+  <p>&copy; 2024 Your Site Name. All rights reserved.</p>
+  <nav aria-label="Footer links">
+    <ul>
+      <li><a href="/privacy">Privacy Policy</a></li>
+      <li><a href="/contact">Contact Us</a></li>
+    </ul>
+  </nav>
+</footer>
+```
+
+**Why semantic HTML transforms accessibility:**
+
+| Semantic Element | Purpose | Screen Reader Benefit |
+|------------------|---------|----------------------|
+| `<header>` | Page or section header | "Banner landmark" - quick navigation to top |
+| `<nav>` | Navigation links | "Navigation landmark" - list of nav sections |
+| `<main>` | Primary page content | "Main landmark" - skip directly to content |
+| `<article>` | Self-contained content | Announces article boundaries |
+| `<section>` | Themed content groups | Provides content structure |
+| `<aside>` | Related sidebar content | "Complementary landmark" |
+| `<footer>` | Page or section footer | "Contentinfo landmark" |
+
+**Screen reader superpowers with semantic HTML:**
+- **Landmark navigation**: Jump between major page sections instantly
+- **Heading outlines**: Generate a table of contents from your heading structure
+- **Element lists**: Create lists of all links, buttons, or form controls
+- **Context awareness**: Understand relationships between content sections
+
+> 🎯 **Quick Test**: Try navigating your site with a screen reader using landmark shortcuts (D for landmark, H for heading, K for link in NVDA/JAWS). Does the navigation make sense?
+
+✅ **Audit your semantic structure**: Use the Accessibility panel in your browser's DevTools to view the accessibility tree and ensure your markup creates a logical structure.
+
+### Heading hierarchy: Creating a logical content outline
+
+Headings are the backbone of accessible content structure. Screen reader users rely heavily on headings to understand and navigate your content—it's like providing a detailed table of contents for your page.
+
+**The heading hierarchy rule:**
+Never skip heading levels. Always progress logically from `<h1>` to `<h2>` to `<h3>`, and so on. Think of headings like an outline structure in a document.
+
+**Perfect heading structure example:**
+
+```html
+<!-- ✅ Excellent: Logical, hierarchical progression -->
+<main>
+  <h1>Complete Guide to Web Accessibility</h1>
+  
+  <section>
+    <h2>Understanding Screen Readers</h2>
+    <p>Introduction to screen reader technology...</p>
+    
+    <h3>Popular Screen Reader Software</h3>
+    <p>NVDA, JAWS, and VoiceOver comparison...</p>
+    
+    <h3>Testing with Screen Readers</h3>
+    <p>Step-by-step testing instructions...</p>
+  </section>
+  
+  <section>
+    <h2>Color and Contrast Guidelines</h2>
+    <p>Designing with sufficient contrast...</p>
+    
+    <h3>WCAG Contrast Requirements</h3>
+    <p>Understanding the different contrast levels...</p>
+    
+    <h3>Testing Tools and Techniques</h3>
+    <p>Tools for verifying contrast ratios...</p>
+  </section>
+</main>
+```
 
-Remember, screen readers are a different interface from browsers with a different set of features.
+```html
+<!-- ❌ Problematic: Skipping levels, inconsistent structure -->
+<h1>Page Title</h1>
+<h3>Subsection</h3> <!-- Skipped h2 -->
+<h2>This should come before h3</h2>
+<h1>Another main heading?</h1> <!-- Multiple h1s -->
+```
 
-### The problem with using the URL
+**Heading best practices:**
+- **One `<h1>` per page**: Typically your main page title or primary content heading
+- **Logical progression**: Never skip levels (h1 → h2 → h3, not h1 → h3)
+- **Descriptive content**: Make headings meaningful when read out of context
+- **Visual styling with CSS**: Use CSS for appearance, HTML levels for structure
+
+**Screen reader navigation statistics:**
+- 68% of screen reader users navigate by headings ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))
+- Users expect to find a logical heading outline
+- Headings provide the fastest way to understand page structure
+
+> 💡 **Pro Tip**: Use browser extensions like "HeadingsMap" to visualize your heading structure. It should read like a well-organized table of contents.
+
+✅ **Test your heading structure**: Use a screen reader's heading navigation (H key in NVDA) to jump through your headings. Does the progression tell the story of your content logically?
+
+### Advanced visual accessibility techniques
+
+Beyond the basics of contrast and color, there are sophisticated techniques that help create truly inclusive visual experiences. These methods ensure your content works across different viewing conditions and assistive technologies.
+
+**Essential visual communication strategies:**
+
+- **Multi-modal feedback**: Combine visual, textual, and sometimes audio cues
+- **Progressive disclosure**: Present information in digestible chunks
+- **Consistent interaction patterns**: Use familiar UI conventions
+- **Responsive typography**: Scale text appropriately across devices
+- **Loading and error states**: Provide clear feedback for all user actions
+
+**CSS utilities for enhanced accessibility:**
+
+```css
+/* Screen reader only text - visually hidden but accessible */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: #000000;
+  color: #ffffff;
+  padding: 8px 16px;
+  text-decoration: none;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: top 0.3s ease;
+  z-index: 1000;
+}
+
+.skip-link:focus {
+  top: 6px;
+}
+
+/* Reduced motion respect */
+@media (prefers-reduced-motion: reduce) {
+  .skip-link {
+    transition: none;
+  }
+  
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .button {
+    border: 2px solid;
+  }
+}
+```
 
-Screen readers read the text. If a URL appears in the text, the screen reader will read the URL. Generally speaking, the URL does not convey meaningful information, and can sound annoying. You may have experienced this if your phone has ever audibly read a text message with a URL.
+> 🎯 **Accessibility Pattern**: The "skip link" is essential for keyboard users. It should be the first focusable element on your page and jump directly to the main content area.
 
-### The problem with "click here"
+✅ **Implement skip navigation**: Add skip links to your pages and test them by pressing Tab as soon as the page loads. They should appear and allow you to jump to main content.
 
-Screen readers also have the ability to read only the hyperlinks on a page, much in the same way a sighted person would scan a page for links. If the link text is always "click here", all the user will hear is "click here, click here, click here, click here, click here, ..." All links are now indistinguishable from one another.
+## Crafting Meaningful Link Text
 
-### Good link text
+Links are the highways of the web, but poorly written link text creates roadblocks for users with disabilities. Great link text makes your content scannable and navigable for everyone.
 
-Good link text briefly describes what's on the other side of the link. In the above example talking about little penguins, the link is to the Wikipedia page about the species. The phrase *little penguins* would make for perfect link text as it makes it clear what someone will learn about if they click the link - little penguins.
+Screen readers can extract all links from a page and present them as a list—imagine if your links appeared as a directory. Would each link make sense without surrounding context?
 
-> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
+### Understanding link navigation patterns
 
-✅ Surf the web for a few minutes to find pages that use obscure linking strategies. Compare them with other, better-linked sites. What do you learn?
+Screen readers offer powerful link navigation features that rely on well-written link text:
 
-#### Search engine notes
+**Link navigation methods:**
+- **Sequential reading**: Links are read in context as part of content flow
+- **Link list generation**: All page links compiled into a searchable directory
+- **Quick navigation**: Jump between links using keyboard shortcuts (K in NVDA)
+- **Search functionality**: Find specific links by typing partial text
 
-As an added bonus for ensuring your site is accessible to all, you'll help search engines navigate your site as well. Search engines use link text to learn the topics of pages. So using good link text helps everyone!
+**Why context matters:**
+When screen reader users generate a link list, they see something like this:
+- "Download report"
+- "Learn more"
+- "Click here"
+- "Privacy policy"
+- "Click here"
 
-### ARIA
+Only two of these links provide useful information when read out of context!
 
-Imagine the following page:
+> 📊 **User Impact**: Screen reader users scan link lists to understand page content quickly. Generic link text forces them to navigate back to each link's context, significantly slowing down their browsing experience.
 
-| Product      | Description        | Order        |
-| ------------ | ------------------ | ------------ |
-| Widget       | [Description]('#') | [Order]('#') |
-| Super widget | [Description]('#') | [Order]('#') |
+### Common link text mistakes to avoid
 
-In this example, duplicating the text of description and order make sense for someone using a browser. However, someone using a screen reader would only hear the words *description* and *order* repeated without context.
+Understanding what doesn't work helps you recognize and fix accessibility issues in existing content.
 
-To support these types of scenarios, HTML supports a set of attributes known as [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). These attributes allow you to provide additional information to screen readers.
+**❌ Generic link text that provides no context:**
 
-> **NOTE**: Like many aspects of HTML, browser and screen reader support may vary. However, most mainline clients support ARIA attributes.
+```html
+<!-- Meaningless when read from a link list -->
+<p>Our sustainability efforts are detailed in our recent report. 
+   <a href="/sustainability-2024.pdf">Click here</a> to view it.</p>
+
+<!-- Repeated generic text throughout the page -->
+<div class="article-card">
+  <h3>Web Accessibility Guide</h3>
+  <p>Learn the fundamentals...</p>
+  <a href="/accessibility-guide">Read more</a>
+</div>
+<div class="article-card">
+  <h3>Color Contrast Tips</h3>
+  <p>Improve your design...</p>
+  <a href="/color-contrast">Read more</a>
+</div>
 
-You can use `aria-label` to describe the link when the format of the page doesn't allow you to. The description for widget could be set as
+<!-- URLs as link text (difficult for screen readers to announce) -->
+<p>Visit https://www.w3.org/WAI/WCAG21/quickref/ for WCAG guidelines.</p>
 
-``` html
-<a href="#" aria-label="Widget description">description</a>
+<!-- Vague action words -->
+<a href="/contact">Go</a> | <a href="/about">See</a> | <a href="/help">View</a>
 ```
 
-✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `<div>` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contains more useful information.
+**Why these patterns fail:**
+- **"Click here"** tells users nothing about the destination
+- **"Read more"** repeated multiple times creates confusion
+- **Raw URLs** are difficult for screen readers to pronounce clearly
+- **Single words** like "Go" or "See" lack descriptive context
+
+### Writing excellent link text
+
+Descriptive link text benefits everyone—sighted users can quickly scan links, and screen reader users understand destinations immediately.
+
+**✅ Clear, descriptive link text examples:**
 
 ```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+<!-- Descriptive text that explains the destination -->
+<p>Our comprehensive <a href="/sustainability-2024.pdf">2024 sustainability report (PDF, 2.1MB)</a> details our environmental initiatives.</p>
+
+<!-- Specific, unique link text for each card -->
+<div class="article-card">
+  <h3>Web Accessibility Guide</h3>
+  <p>Learn the fundamentals of inclusive design...</p>
+  <a href="/accessibility-guide">Read our complete web accessibility guide</a>
 </div>
+<div class="article-card">
+  <h3>Color Contrast Tips</h3>
+  <p>Improve your design with better color choices...</p>
+  <a href="/color-contrast">Explore color contrast best practices</a>
+</div>
+
+<!-- Meaningful text instead of raw URLs -->
+<p>The <a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.1 Quick Reference guide</a> provides comprehensive accessibility guidelines.</p>
+
+<!-- Descriptive action links -->
+<a href="/contact">Contact our support team</a> | 
+<a href="/about">About our company</a> | 
+<a href="/help">Get help with your account</a>
+```
+
+**Link text best practices:**
+- **Be specific**: "Download the quarterly financial report" vs. "Download"
+- **Include file type and size**: "(PDF, 1.2MB)" for downloadable files
+- **Mention if links open externally**: "(opens in new window)" when appropriate
+- **Use active language**: "Contact us" vs. "Contact page"
+- **Keep it concise**: Aim for 2-8 words when possible
+
+### Advanced link accessibility patterns
+
+Sometimes visual design constraints or technical requirements need special solutions. Here are sophisticated techniques for common challenging scenarios:
+
+**Using ARIA for enhanced context:**
+
+```html
+<!-- When button text must be short but needs more context -->
+<a href="/report.pdf" 
+   aria-label="Download 2024 annual financial report, PDF format, 2.3MB">
+  Download Report
+</a>
+
+<!-- When the full context comes from surrounding content -->
+<h3 id="sustainability-heading">Sustainability Initiative</h3>
+<p>Our efforts to reduce environmental impact...</p>
+<a href="/sustainability-details" 
+   aria-labelledby="sustainability-heading"
+   aria-describedby="sustainability-summary">
+  Learn more
+</a>
+<p id="sustainability-summary">Detailed breakdown of our 2024 environmental goals and achievements</p>
+```
+
+**Indicating file types and external destinations:**
+
+```html
+<!-- Method 1: Include information in visible link text -->
+<a href="/annual-report.pdf">
+  Download our 2024 annual report (PDF, 2.3MB)
+</a>
+
+<!-- Method 2: Use screen reader-only text for file details -->
+<a href="/annual-report.pdf">
+  Download our 2024 annual report
+  <span class="sr-only">(PDF format, 2.3MB)</span>
+</a>
+
+<!-- Method 3: External link indication -->
+<a href="https://example.com" 
+   target="_blank" 
+   aria-describedby="external-link-warning">
+  Visit external resource
+</a>
+<span id="external-link-warning" class="sr-only">
+  (opens in new window)
+</span>
+
+<!-- Method 4: Using CSS for visual indicators -->
+<a href="https://example.com" class="external-link">
+  External resource
+</a>
+```
+
+```css
+/* Visual indicator for external links */
+.external-link::after {
+  content: " ↗";
+  font-size: 0.8em;
+  color: #666;
+}
+
+/* Screen reader announcement for external links */
+.external-link::before {
+  content: "External link: ";
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
 ```
 
-## Images
+> ⚠️ **Important**: When using `target="_blank"`, always inform users that the link opens in a new window or tab. Unexpected navigation changes can be disorienting.
 
-It goes without saying screen readers are unable to automatically read what's in an image. Ensuring images are accessible doesn't take much work - it's what the `alt` attribute is all about. All meaningful images should have an `alt` to describe what they are.
-Images that are purely decorative should have their `alt` attribute set to an empty string: `alt=""`. This prevents screen readers from unnecessarily announcing the decorative image.
+✅ **Test your link context**: Use your browser's developer tools to generate a list of all links on your page. Can you understand each link's purpose without any surrounding context?
 
-✅ As you might expect, search engines are also unable to understand what's in an image. They also use alt text. So once again, ensuring your page is accessible provides additional bonuses!
+## ARIA: Supercharging HTML Accessibility
 
-## The keyboard
+[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) is like a universal translator between your complex web applications and assistive technologies. When HTML alone can't express the full meaning of your interactive components, ARIA fills in the gaps.
 
-Some users are unable to use a mouse or trackpad, instead relying on keyboard interactions to tab from one element to the next. It's important for your web site to present your content in logical order so a keyboard user can access each interactive element as they move down a document. If you build your web pages with semantic markup and use CSS to style their visual layout, your site should be keyboard-navigable, but it's important to test this aspect manually. Learn more about [keyboard navigation strategies](https://webaim.org/techniques/keyboard/).
+Think of ARIA as adding helpful annotations to your HTML—like stage directions in a play script that help actors understand their roles and relationships.
 
-✅ Go to any web site and try to navigate through it using only your keyboard. What works, what doesn't work? Why?
+**The fundamental rule of ARIA**: Use semantic HTML first, ARIA second. ARIA should enhance and clarify, never replace proper HTML structure.
 
-## Summary
+### Strategic ARIA implementation
 
-A web accessible to some is not a truly 'world-wide web'. The best way to ensure the sites you create are accessible is to incorporate accessibility best practices from the start. While there are extra steps involved, incorporating these skills into your workflow now will mean all pages you create will be accessible.
+ARIA is powerful, but with power comes responsibility. Incorrect ARIA can make accessibility worse than no ARIA at all. Here's when and how to use it effectively:
+
+**✅ Use ARIA when:**
+- Creating custom interactive widgets (accordions, tabs, carousels)
+- Building dynamic content that changes without page reloads
+- Providing additional context for complex UI relationships
+- Indicating loading states or live content updates
+- Creating app-like interfaces with custom controls
+
+**❌ Avoid ARIA when:**
+- Standard HTML elements already provide the needed semantics
+- You're unsure how to implement it correctly
+- It duplicates information already provided by semantic HTML
+- You haven't tested with actual assistive technology
+
+> 🎯 **ARIA Golden Rule**: "Don't change semantics unless you absolutely have to, ensure keyboard accessibility always, and test with real assistive technology."
+
+**The five categories of ARIA:**
+
+1. **Roles**: What is this element? (`button`, `tab`, `dialog`)
+2. **Properties**: What are its features? (`aria-required`, `aria-haspopup`)
+3. **States**: What's its current condition? (`aria-expanded`, `aria-checked`)
+4. **Landmarks**: Where is it in page structure? (`banner`, `navigation`, `main`)
+5. **Live regions**: How should changes be announced? (`aria-live`, `aria-atomic`)
+
+### Essential ARIA patterns for modern web apps
+
+These patterns solve the most common accessibility challenges in interactive web applications:
+
+**Naming and describing elements:**
+
+```html
+<!-- aria-label: Provides accessible name when visible text isn't sufficient -->
+<button aria-label="Close newsletter subscription dialog">×</button>
+
+<!-- aria-labelledby: References existing text as the accessible name -->
+<section aria-labelledby="news-heading">
+  <h2 id="news-heading">Latest News</h2>
+  <!-- news content -->
+</section>
+
+<!-- aria-describedby: Links to additional descriptive text -->
+<input type="password" 
+       aria-describedby="pwd-requirements pwd-strength"
+       required>
+<div id="pwd-requirements">
+  Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+</div>
+<div id="pwd-strength" aria-live="polite">
+  <!-- Dynamic password strength indicator -->
+</div>
+```
+
+**Live regions for dynamic content:**
+
+```html
+<!-- Polite announcements (don't interrupt current speech) -->
+<div aria-live="polite" id="status-updates">
+  <!-- Status messages appear here -->
+</div>
+
+<!-- Assertive announcements (interrupt and announce immediately) -->
+<div aria-live="assertive" id="urgent-alerts">
+  <!-- Error messages and critical alerts -->
+</div>
+
+<!-- Loading states with live regions -->
+<button id="submit-btn" aria-describedby="loading-status">
+  Submit Application
+</button>
+<div id="loading-status" aria-live="polite" aria-atomic="true">
+  <!-- "Processing your application..." appears here -->
+</div>
+```
+
+**Interactive widget example (accordion):**
+
+```html
+<div class="accordion">
+  <h3>
+    <button aria-expanded="false" 
+            aria-controls="panel-1" 
+            id="accordion-trigger-1"
+            class="accordion-trigger">
+      Accessibility Guidelines
+    </button>
+  </h3>
+  <div id="panel-1" 
+       role="region"
+       aria-labelledby="accordion-trigger-1" 
+       hidden>
+    <p>WCAG 2.1 provides comprehensive guidelines...</p>
+  </div>
+</div>
+```
+
+```javascript
+// JavaScript to manage accordion state
+function toggleAccordion(trigger) {
+  const panel = document.getElementById(trigger.getAttribute('aria-controls'));
+  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  
+  // Toggle states
+  trigger.setAttribute('aria-expanded', !isExpanded);
+  panel.hidden = isExpanded;
+  
+  // Announce change to screen readers
+  const status = document.getElementById('status-updates');
+  status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded';
+}
+```
+
+### ARIA implementation best practices
+
+ARIA is powerful but requires careful implementation. Following these guidelines helps ensure your ARIA enhances rather than hinders accessibility:
+
+**🛡️ Core principles:**
+
+1. **Semantic HTML first**: Always prefer `<button>` over `<div role="button">`
+2. **Don't break semantics**: Never override existing HTML meaning (avoid `<h1 role="button">`)
+3. **Maintain keyboard accessibility**: All interactive ARIA elements must be fully keyboard accessible
+4. **Test with real users**: ARIA support varies significantly between assistive technologies
+5. **Start simple**: Complex ARIA implementations are more likely to have errors
+
+**🔍 Testing workflow:**
+
+```mermaid
+graph TD
+    A[Write ARIA code] --> B[Validate HTML]
+    B --> C[Test with keyboard only]
+    C --> D[Test with screen reader]
+    D --> E[Test across browsers]
+    E --> F{Issues found?}
+    F -->|Yes| G[Fix and re-test]
+    F -->|No| H[Implementation complete]
+    G --> B
+```
+
+**🚫 Common ARIA mistakes to avoid:**
+
+- **Conflicting information**: Don't contradict HTML semantics
+- **Over-labeling**: Too much ARIA information overwhelms users
+- **Static ARIA**: Forgetting to update ARIA states when content changes
+- **Untested implementations**: ARIA that works in theory but fails in practice
+- **Missing keyboard support**: ARIA roles without corresponding keyboard interactions
+
+> 💡 **Testing Resources**: Use tools like [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) for automated ARIA validation, but always test with real screen readers for the complete experience.
+
+✅ **Learn from experts**: Study the [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) for battle-tested patterns and implementations of complex interactive widgets.
+
+## Making Images and Media Accessible
+
+Visual and audio content are essential parts of modern web experiences, but they can create barriers if not implemented thoughtfully. The goal is to ensure that the information and emotional impact of your media reaches every user.
+
+Different types of media content require different accessibility approaches—understanding these distinctions helps you choose the right solution for each situation.
+
+### Strategic image accessibility
+
+Every image on your website serves a purpose. Understanding that purpose helps you write better alternative text and create more inclusive experiences.
+
+**The four types of images and their alt text strategies:**
+
+**Informative images** - convey important information:
+```html
+<img src="chart.png" alt="Sales increased 25% from Q1 to Q2 2024">
+```
+
+**Decorative images** - purely visual with no informational value:
+```html
+<img src="decorative-border.png" alt="" role="presentation">
+```
+
+**Functional images** - serve as buttons or controls:
+```html
+<button>
+  <img src="search-icon.svg" alt="Search">
+</button>
+```
+
+**Complex images** - charts, diagrams, infographics:
+```html
+<img src="complex-chart.png" alt="Quarterly sales data" aria-describedby="chart-description">
+<div id="chart-description">
+  <p>Detailed description: Sales data shows a steady increase across all quarters...</p>
+</div>
+```
+
+### Video and audio accessibility
+
+**Video requirements:**
+- **Captions**: Text version of spoken content and sound effects
+- **Audio descriptions**: Narration of visual elements for blind users
+- **Transcripts**: Full text version of all audio and visual content
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <track kind="captions" src="captions.vtt" srclang="en" label="English">
+  <track kind="descriptions" src="descriptions.vtt" srclang="en" label="Audio descriptions">
+</video>
+```
+
+**Audio requirements:**
+- **Transcripts**: Text version of all spoken content
+- **Visual indicators**: For audio-only content, provide visual cues
+
+### Modern image techniques
+
+**Using CSS for decorative images:**
+```css
+.hero-section {
+  background-image: url('decorative-hero.jpg');
+  /* Decorative images in CSS don't need alt text */
+}
+```
+
+**Responsive images with accessibility:**
+```html
+<picture>
+  <source media="(min-width: 800px)" srcset="large-chart.png">
+  <source media="(min-width: 400px)" srcset="medium-chart.png">
+  <img src="small-chart.png" alt="Website traffic increased 40% after accessibility improvements">
+</picture>
+```
+
+✅ **Test image accessibility**: Use a screen reader to navigate a page with images. Are you getting enough information to understand the content?
+
+## Keyboard navigation and focus management
+
+Many users rely exclusively on keyboard navigation. Ensuring your site works perfectly with keyboard input is essential for accessibility.
+
+### Essential keyboard navigation patterns
+
+**Standard keyboard interactions:**
+- **Tab**: Move focus forward through interactive elements
+- **Shift + Tab**: Move focus backward
+- **Enter**: Activate buttons and links
+- **Space**: Activate buttons, check checkboxes
+- **Arrow keys**: Navigate within component groups (radio buttons, menus)
+- **Escape**: Close modals, dropdowns, or cancel operations
+
+### Focus management best practices
+
+**Visible focus indicators:**
+```css
+/* Ensure focus is always visible */
+button:focus-visible {
+  outline: 2px solid #4A90A4;
+  outline-offset: 2px;
+}
+
+/* Custom focus styles for different components */
+.card:focus-within {
+  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5);
+}
+```
+
+**Skip links for efficient navigation:**
+```html
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<a href="#navigation" class="skip-link">Skip to navigation</a>
+
+<nav id="navigation">
+  <!-- navigation content -->
+</nav>
+<main id="main-content">
+  <!-- main content -->
+</main>
+```
+
+**Proper tab order:**
+```html
+<!-- Use semantic HTML for natural tab order -->
+<form>
+  <label for="name">Name:</label>
+  <input type="text" id="name" tabindex="0">
+  
+  <label for="email">Email:</label>
+  <input type="email" id="email" tabindex="0">
+  
+  <button type="submit" tabindex="0">Submit</button>
+</form>
+```
+
+### Focus trapping in modals
+
+When opening modal dialogs, focus should be trapped within the modal:
+
+```javascript
+// Modern focus trap implementation
+function trapFocus(element) {
+  const focusableElements = element.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+
+  element.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+    
+    if (e.key === 'Escape') {
+      closeModal();
+    }
+  });
+  
+  // Focus first element when modal opens
+  firstElement.focus();
+}
+```
+
+✅ **Test keyboard navigation**: Try navigating your website using only the Tab key. Can you reach all interactive elements? Is the focus order logical? Are focus indicators clearly visible?
+
+## Form accessibility
+
+Forms are critical for user interaction and require special attention to accessibility.
+
+### Label and form control association
+
+**Every form control needs a label:**
+```html
+<!-- Explicit labeling (preferred) -->
+<label for="username">Username:</label>
+<input type="text" id="username" name="username" required>
+
+<!-- Implicit labeling -->
+<label>
+  Password:
+  <input type="password" name="password" required>
+</label>
+
+<!-- Using aria-label when visual label isn't desired -->
+<input type="search" aria-label="Search products" placeholder="Search...">
+```
+
+### Error handling and validation
+
+**Accessible error messages:**
+```html
+<label for="email">Email Address:</label>
+<input type="email" id="email" name="email" 
+       aria-describedby="email-error" 
+       aria-invalid="true" required>
+<div id="email-error" role="alert">
+  Please enter a valid email address
+</div>
+```
+
+**Form validation best practices:**
+- Use `aria-invalid` to indicate invalid fields
+- Provide clear, specific error messages
+- Use `role="alert"` for important error announcements
+- Show errors both immediately and on form submission
+
+### Fieldsets and grouping
+
+**Group related form controls:**
+```html
+<fieldset>
+  <legend>Shipping Address</legend>
+  <label for="street">Street Address:</label>
+  <input type="text" id="street" name="street">
+  
+  <label for="city">City:</label>
+  <input type="text" id="city" name="city">
+</fieldset>
+
+<fieldset>
+  <legend>Preferred Contact Method</legend>
+  <input type="radio" id="contact-email" name="contact" value="email">
+  <label for="contact-email">Email</label>
+  
+  <input type="radio" id="contact-phone" name="contact" value="phone">
+  <label for="contact-phone">Phone</label>
+</fieldset>
+```
+
+## Your Accessibility Journey: Key Takeaways
+
+Congratulations! You've just gained the foundational knowledge to create truly inclusive web experiences. Web accessibility isn't just about compliance—it's about recognizing the diverse ways people interact with digital content and designing for that beautiful complexity.
+
+**🎯 Your accessibility toolkit now includes:**
+
+| Core Principle | Implementation | Impact |
+|----------------|----------------|---------|
+| **Semantic HTML Foundation** | Use proper HTML elements for their intended purpose | Screen readers can navigate efficiently, keyboards work automatically |
+| **Inclusive Visual Design** | Sufficient contrast, meaningful color use, visible focus indicators | Clear for everyone in any lighting condition |
+| **Descriptive Content** | Meaningful link text, alt text, headings | Users understand content without visual context |
+| **Keyboard Accessibility** | Tab order, keyboard shortcuts, focus management | Motor accessibility and power user efficiency |
+| **ARIA Enhancement** | Strategic use to fill semantic gaps | Complex applications work with assistive technologies |
+| **Comprehensive Testing** | Automated tools + manual verification + real user testing | Catch issues before they impact users |
+
+**🚀 Your next steps:**
+
+1. **Build accessibility into your workflow**: Make testing a natural part of your development process
+2. **Learn from real users**: Seek out feedback from people who use assistive technologies
+3. **Stay current**: Accessibility techniques evolve with new technologies and standards
+4. **Advocate for inclusion**: Share your knowledge and make accessibility a team priority
+
+> 💡 **Remember**: Accessibility constraints often lead to innovative, elegant solutions that benefit everyone. Curb cuts, captions, and voice controls all started as accessibility features and became mainstream improvements.
+
+**The business case is clear**: Accessible websites reach more users, rank better in search engines, have lower maintenance costs, and avoid legal risks. But more importantly, accessible websites embody the best values of the web—openness, inclusivity, and equal access to information.
+
+You're now equipped to build the inclusive web of the future. Every accessible site you create makes the internet a more welcoming place for everyone.
+
+## Additional Resources
+
+Continue your accessibility learning journey with these essential resources:
+
+**📚 Official Standards and Guidelines:**
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - The official accessibility standard with quick reference
+- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - Comprehensive patterns for interactive widgets
+- [WebAIM Guidelines](https://webaim.org/) - Practical, beginner-friendly accessibility guidance
+
+**🛠️ Tools and Testing Resources:**
+- [axe DevTools](https://www.deque.com/axe/devtools/) - Industry-standard accessibility testing
+- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - Step-by-step accessibility verification
+- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft's comprehensive testing suite
+- [Color Oracle](https://colororacle.org/) - Color blindness simulator for design testing
+
+**🎓 Learning and Community:**
+- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - Real user preferences and behaviors
+- [Inclusive Components](https://inclusive-components.design/) - Modern accessible component patterns
+- [A11y Coffee](https://a11y.coffee/) - Quick accessibility tips and insights
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C's comprehensive accessibility resources
+
+**🎥 Hands-on Learning:**
+- [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/) - Practical implementation guidance
+- [Deque University](https://dequeuniversity.com/) - Professional accessibility training courses
+
+## GitHub Copilot Agent Challenge 🚀
+
+Use the Agent mode to complete the following challenge:
+
+**Description:** Create an accessible modal dialog component that demonstrates proper focus management, ARIA attributes, and keyboard navigation patterns.
+
+**Prompt:** Build a complete modal dialog component with HTML, CSS, and JavaScript that includes: proper focus trapping, ESC key to close, click outside to close, ARIA attributes for screen readers, and visible focus indicators. The modal should contain a form with proper labels and error handling. Ensure the component meets WCAG 2.1 AA standards.
 
----
 
 ## 🚀 Challenge
 
@@ -169,54 +1141,69 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg
 
 ```html
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>
-      Example
-    </title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Turtle Ipsum - The World's Premier Turtle Fan Club</title>
     <link href='../assets/style.css' rel='stylesheet' type='text/css'>
   </head>
   <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
+    <header class="site-header">
+      <h1 class="site-title">Turtle Ipsum</h1>
       <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
+    </header>
+    
+    <nav class="main-nav" aria-label="Main navigation">
+      <h2 class="nav-header">Resources</h2>
+      <ul class="nav-list">
+        <li><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles" video</a></li>
+        <li><a href="https://en.wikipedia.org/wiki/Turtle">Basic turtle information</a></li>
+        <li><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate turtles candy</a></li>
+      </ul>
+    </nav>
+    
+    <main class="main-content">
+      <article>
+        <h1>Welcome to Turtle Ipsum</h1>
+        <p class="intro">
+          <a href="/about">Learn more about our turtle community</a> and discover fascinating facts about these amazing creatures.
         </p>
         <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</p>
-    </div>
+      </article>
+    </main>
+    
+    <footer class="footer">
+      <section class="newsletter-signup">
+        <h2>Stay Updated</h2>
+        <button type="button" onclick="showNewsletterForm()">Sign up for turtle news</button>
+      </section>
+      
+      <nav class="footer-nav" aria-label="Footer navigation">
+        <h2>Site Pages</h2>
+        <ul>
+          <li><a href="../">Home</a></li>
+          <li><a href="../semantic">Semantic HTML example</a></li>
+        </ul>
+      </nav>
+      
+      <p class="footer-copyright">&copy; 2024 Instrument. All rights reserved.</p>
+    </footer>
   </body>
 </html>
 ```
 
+**Key improvements made:**
+- Added proper semantic HTML structure
+- Fixed heading hierarchy (single h1, logical progression)
+- Added meaningful link text instead of "click here"
+- Included proper ARIA labels for navigation
+- Added lang attribute and proper meta tags
+- Used button element for interactive elements
+- Structured footer content with proper landmarks
+
 ## Post-Lecture Quiz
 [Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/)
 
diff --git a/1-getting-started-lessons/3-accessibility/assignment.md b/1-getting-started-lessons/3-accessibility/assignment.md
index abe4bc35..d23d1fa7 100644
--- a/1-getting-started-lessons/3-accessibility/assignment.md
+++ b/1-getting-started-lessons/3-accessibility/assignment.md
@@ -1,15 +1,245 @@
-# Analyze an inaccessible site
+# Comprehensive Website Accessibility Audit
 
 ## Instructions
 
-Identify a website that you believe is NOT accessible and create an action plan to improve its accessibility.
-Your first task would be to identify this site, detail the ways in which you think it is inaccessible without using analytical tools, and then submit it to a Lighthouse analysis. Capture a pdf of the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved.
+In this assignment, you'll conduct a professional-level accessibility audit of a real website, applying the principles and techniques you've learned. This hands-on experience will deepen your understanding of accessibility barriers and solutions.
 
-## Table to test site accessibility
+Choose a website that appears to have accessibility issues—this gives you more learning opportunities than analyzing an already-perfect site. Good candidates include older websites, complex web applications, or sites with rich multimedia content.
 
-| Criteria | Exemplary | Adequate | Need to Improve |
-|----------|-----------|----------|----------------|
-|          | missing <10% of what is required | missing 20% of what is required | missing 50% of what is required |
+### Phase 1: Strategic manual evaluation
 
-----
-Student Report: includes paragraphs on how inaccessible the site is, the Lighthouse report captured in pdf, a list of ten points to improve, with details on how to improve it
+Before reaching for automated tools, perform a comprehensive manual assessment. This human-centered approach often reveals issues that tools miss and helps you understand the real user experience.
+
+**🔍 Essential evaluation criteria:**
+
+**Navigation and Structure:**
+- Can you navigate the entire site using only keyboard (Tab, Shift+Tab, Enter, Space, Arrow keys)?
+- Are focus indicators clearly visible on all interactive elements?
+- Does the heading structure (H1-H6) create a logical content outline?
+- Are there skip links to jump to main content?
+
+**Visual Accessibility:**
+- Is there sufficient color contrast throughout the site (minimum 4.5:1 for normal text)?
+- Does the site rely solely on color to convey important information?
+- Do all images have appropriate alternative text?
+- Does the layout remain functional when zoomed to 200%?
+
+**Content and Communication:**
+- Are there any "click here" or ambiguous link texts?
+- Can you understand the content and functionality without visual cues?
+- Are form fields properly labeled and grouped?
+- Are error messages clear and helpful?
+
+**Interactive Elements:**
+- Do all buttons and form controls work with keyboard alone?
+- Are dynamic content changes announced to screen readers?
+- Do modal dialogs and complex widgets follow proper accessibility patterns?
+
+📝 **Document your findings** with specific examples, screenshots, and page URLs. Note both issues and things done well.
+
+### Phase 2: Comprehensive automated testing
+
+Now validate and expand your manual findings using industry-standard accessibility testing tools. Each tool has different strengths, so using multiple tools gives you complete coverage.
+
+**🛠️ Required testing tools:**
+
+1. **Lighthouse Accessibility Audit** (built into Chrome/Edge DevTools)
+   - Run audit on multiple pages
+   - Focus on specific metrics and recommendations
+   - Note your accessibility score and specific violations
+
+2. **axe DevTools** (browser extension - industry standard)
+   - More detailed issue detection than Lighthouse
+   - Provides specific code examples for fixes
+   - Tests against WCAG 2.1 criteria
+
+3. **WAVE Web Accessibility Evaluator** (browser extension)
+   - Visual representation of accessibility features
+   - Highlights both errors and positive features
+   - Great for understanding page structure
+
+4. **Color Contrast Analyzers**
+   - WebAIM Contrast Checker for specific color pairs
+   - Browser extensions for page-wide analysis
+   - Test against both WCAG AA and AAA standards
+
+**🎧 Real assistive technology testing:**
+- **Screen reader testing**: Use NVDA (Windows), VoiceOver (Mac), or TalkBack (Android)
+- **Keyboard-only navigation**: Unplug your mouse and navigate the entire site
+- **Zoom testing**: Test functionality at 200% and 400% zoom levels
+- **Voice control testing**: If available, try voice navigation tools
+
+**📊 Organize your results** by creating a master spreadsheet with:
+- Issue description and location
+- Severity level (Critical/High/Medium/Low)
+- WCAG success criteria violated
+- Tool that detected the issue
+- Screenshots and evidence
+
+### Phase 3: Comprehensive findings documentation
+
+Create a professional accessibility audit report that demonstrates your understanding of both technical issues and their human impact.
+
+**📋 Required report sections:**
+
+1. **Executive Summary** (1 page)
+   - Website URL and brief description
+   - Overall accessibility maturity level
+   - Top 3 most critical issues
+   - Estimated impact on users with disabilities
+
+2. **Methodology** (½ page)
+   - Testing approach and tools used
+   - Pages evaluated and device/browser combinations
+   - Standards evaluated against (WCAG 2.1 AA)
+
+3. **Detailed Findings** (2-3 pages)
+   - Issues categorized by WCAG principle (Perceivable, Operable, Understandable, Robust)
+   - Include screenshots and specific examples
+   - Note positive accessibility features you found
+   - Cross-reference with automated tool results
+
+4. **User Impact Assessment** (1 page)
+   - How identified issues affect users with different disabilities
+   - Scenarios describing real user experiences
+   - Business impact (legal risk, SEO, user base expansion)
+
+**📸 Evidence collection:**
+- Screenshots of accessibility violations
+- Screen recordings of problematic user flows
+- Tool reports (save as PDFs)
+- Code examples showing issues
+
+### Phase 4: Professional remediation plan
+
+Develop a strategic, prioritized plan for fixing accessibility issues. This demonstrates your ability to think like a professional web developer addressing real business constraints.
+
+**🎯 Create detailed improvement recommendations (minimum 10 issues):**
+
+**For each identified issue, provide:**
+
+- **Issue Description**: Clear explanation of what's wrong and why it's problematic
+- **WCAG Reference**: Specific success criteria violated (e.g., "2.4.4 Link Purpose (In Context) - Level A")
+- **User Impact**: How this affects people with different disabilities
+- **Solution**: Specific code changes, design modifications, or process improvements
+- **Priority Level**: Critical (blocks basic usage) / High (significant barrier) / Medium (usability issue) / Low (enhancement)
+- **Implementation Effort**: Time/complexity estimate (Quick win / Moderate effort / Major refactor)
+- **Testing Verification**: How to verify the fix works
+
+**Example improvement entry:**
+
+```
+Issue: Generic "Read more" link text appears 8 times on homepage
+WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
+User Impact: Screen reader users cannot distinguish between links when viewed in link list
+Solution: Replace with descriptive text like "Read more about sustainability initiatives"
+Priority: High (major navigation barrier)
+Effort: Low (30 minutes to update content)
+Testing: Generate link list with screen reader - each link should be meaningful standalone
+```
+
+**📈 Strategic implementation phases:**
+
+- **Phase 1 (0-2 weeks)**: Critical issues that block basic functionality
+- **Phase 2 (1-2 months)**: High-priority improvements for better user experience
+- **Phase 3 (3-6 months)**: Medium-priority enhancements and process improvements
+- **Phase 4 (Ongoing)**: Continuous monitoring and enhancement
+
+## Evaluation Rubric
+
+Your accessibility audit will be assessed on both technical accuracy and professional presentation:
+
+| Criteria | Excellent (90-100%) | Good (80-89%) | Satisfactory (70-79%) | Needs Improvement (<70%) |
+|----------|-------------------|---------------|---------------------|------------------------|
+| **Manual Testing Depth** | Comprehensive evaluation covering all POUR principles with detailed observations and user scenarios | Good coverage of most accessibility areas with clear findings and some user impact analysis | Basic evaluation covering key areas with adequate observations | Limited testing with superficial observations and minimal user impact consideration |
+| **Tool Utilization & Analysis** | Uses all required tools effectively, cross-references findings, includes clear evidence, and analyzes tool limitations | Uses most tools with good documentation, some cross-referencing, and adequate evidence | Uses required tools with basic documentation and some evidence | Minimal tool usage, poor documentation, or missing evidence |
+| **Issue Identification & Categorization** | Identifies 15+ specific issues across all WCAG principles, accurately categorizes by severity, demonstrates deep understanding | Identifies 10-14 issues across most WCAG principles, good categorization, shows solid understanding | Identifies 7-9 issues with adequate WCAG coverage and basic categorization | Identifies <7 issues with limited scope or poor categorization |
+| **Solution Quality & Feasibility** | 10+ detailed, actionable solutions with accurate WCAG references, realistic implementation timelines, and verification methods | 8-9 well-developed solutions with mostly accurate references and good implementation details | 6-7 basic solutions with some detail and generally realistic approaches | <6 solutions or insufficient detail, unrealistic implementations |
+| **Professional Communication** | Report is excellently organized, clearly written, includes executive summary, uses appropriate technical language, and follows business document standards | Well-organized with good writing quality, includes most required sections, appropriate tone | Adequately organized with acceptable writing, includes basic required sections | Poor organization, unclear writing, or missing key sections |
+| **Real-World Application** | Demonstrates understanding of business impact, legal considerations, user diversity, and practical implementation challenges | Shows good understanding of practical applications with some business context | Basic understanding of real-world applications | Limited connection to practical applications |
+
+## Advanced Challenge Options
+
+**🚀 For students seeking additional challenge:**
+
+- **Comparative Analysis**: Audit 2-3 competing websites and compare their accessibility maturity
+- **Mobile Accessibility Focus**: Deep dive into mobile-specific accessibility issues using Android TalkBack or iOS VoiceOver
+- **International Perspective**: Research and apply accessibility standards from different countries (EN 301 549, Section 508, ADA)
+- **Accessibility Statement Review**: Evaluate the website's existing accessibility statement (if any) against your findings
+
+## Deliverables
+
+Submit a comprehensive accessibility audit report that demonstrates professional-level analysis and practical implementation planning:
+
+**📄 Final Report Requirements:**
+
+1. **Executive Summary** (1 page)
+   - Website overview and accessibility maturity assessment
+   - Key findings summary with business impact
+   - Recommended priority actions
+
+2. **Methodology and Scope** (1 page)
+   - Testing approach, tools used, and evaluation criteria
+   - Pages/sections evaluated and any limitations
+   - Standards compliance framework (WCAG 2.1 AA)
+
+3. **Detailed Findings Report** (3-4 pages)
+   - Manual testing observations with user scenarios
+   - Automated tool results with cross-referencing
+   - Issues organized by WCAG principles with evidence
+   - Positive accessibility features identified
+
+4. **Strategic Remediation Plan** (3-4 pages)
+   - Prioritized improvement recommendations (minimum 10)
+   - Implementation timeline with effort estimates
+   - Success metrics and verification methods
+   - Long-term accessibility maintenance strategy
+
+5. **Supporting Evidence** (Appendices)
+   - Screenshots of accessibility violations and testing tools
+   - Code examples demonstrating issues and solutions
+   - Tool reports and audit summaries
+   - Screen reader testing notes or recordings
+
+**📊 Format Requirements:**
+- **Document format**: PDF (professional presentation)
+- **Word count**: 2,500-3,500 words (excluding appendices and screenshots)
+- **Visual elements**: Include screenshots, diagrams, and examples throughout
+- **Citations**: Reference WCAG guidelines and accessibility resources appropriately
+
+**💡 Pro Tips for Excellence:**
+- Use professional report formatting with consistent headings and styling
+- Include a table of contents for easy navigation
+- Balance technical accuracy with clear, business-appropriate language
+- Demonstrate understanding of both technical implementation and user impact
+
+## Learning Outcomes
+
+After completing this comprehensive accessibility audit, you will have developed essential professional skills:
+
+**🎯 Technical Competencies:**
+- **Accessibility Testing Mastery**: Proficiency with industry-standard manual and automated testing methods
+- **WCAG Application**: Practical experience applying Web Content Accessibility Guidelines to real-world scenarios
+- **Assistive Technology Understanding**: Hands-on experience with screen readers and keyboard navigation
+- **Problem-Solution Mapping**: Ability to identify accessibility barriers and develop specific, actionable remediation strategies
+
+**💼 Professional Skills:**
+- **Technical Communication**: Experience writing professional accessibility reports for diverse stakeholders
+- **Strategic Planning**: Ability to prioritize accessibility improvements based on user impact and implementation feasibility
+- **Quality Assurance**: Understanding of accessibility testing as part of the development lifecycle
+- **Risk Assessment**: Appreciation for legal, business, and ethical implications of accessibility compliance
+
+**🌍 Inclusive Design Mindset:**
+- **User Empathy**: Deep understanding of diverse user needs and assistive technology interactions
+- **Universal Design Principles**: Recognition that accessible design benefits all users, not just those with disabilities
+- **Continuous Improvement**: Framework for ongoing accessibility assessment and enhancement
+- **Advocacy Skills**: Confidence to promote accessibility best practices in future projects and teams
+
+**🚀 Career Preparation:**
+This assignment mirrors real-world accessibility consulting projects, giving you portfolio-worthy experience that demonstrates:
+- Systematic problem-solving approach
+- Attention to both technical details and business impact
+- Clear communication of complex technical concepts
+- Understanding of legal and ethical responsibilities in web development
+
+Upon completion, you'll be prepared to contribute meaningfully to accessibility initiatives in any web development role and advocate for inclusive design practices throughout your career.