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..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 + +| 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 | + +### High-Level vs. Low-Level Languages + +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...). -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. +**High-level language (JavaScript) – Human-friendly:** -*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. +```javascript +// Step 1: Basic Fibonacci setup +const fibonacciCount = 10; +let current = 0; +let next = 1; + +console.log('Fibonacci sequence:'); +``` -The following code illustrates the difference between a high level language with JavaScript and a low level language with ARM assembly code. +**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 -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 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 + +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). + +```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 -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. +> 💡 **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. -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. +✅ **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 'My Site

Hello World

' > 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. \ 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. 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 ..." to update what will be committed) - (use "git checkout -- ..." to discard changes in working directory) + (use "git restore ..." 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. `` could be used to create a ` + + +
+

Latest News

+ +
+ + + +
+ Password must contain at least 8 characters, including uppercase, lowercase, and numbers. +
+
+ +
+``` + +**Live regions for dynamic content:** + +```html + +
+ +
+ + +
+ +
+ + + +
+ +
+``` + +**Interactive widget example (accordion):** + +```html +
+

+ +

+ +
+``` + +```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 ` +``` + +**Complex images** - charts, diagrams, infographics: +```html +Quarterly sales data +
+

Detailed description: Sales data shows a steady increase across all quarters...

+
+``` + +### 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 + +``` + +**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 + + + + Website traffic increased 40% after accessibility improvements + +``` + +✅ **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 + + + + +
+ +
+``` + +**Proper tab order:** +```html + +
+ + + + + + + +
+``` + +### 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 + + + + + + + + + +``` + +### Error handling and validation + +**Accessible error messages:** +```html + + + +``` + +**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 +
+ Shipping Address + + + + + +
+ +
+ Preferred Contact Method + + + + + +
+``` + +## 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 - + - - Example - + + + Turtle Ipsum - The World's Premier Turtle Fan Club -
-

Turtle Ipsum

+
+

Turtle Ipsum

The World's Premier Turtle Fan Club

-
-
-

Resources

-
-

"I like turtles"

-

Basic Turtle Info

-

Chocolate Turtles

-
-
-
-
-

Welcome to Turtle Ipsum. - Click here to learn more. + + +

+ +
+
+

Welcome to Turtle Ipsum

+

+ Learn more about our turtle community and discover fascinating facts about these amazing creatures.

- 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 -

-
-
-
-
- Sign up for turtle news -
-

- 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.

-
-

Index

-

Semantic Example

-
-
-

© 2016 Instrument

-
+ + + + ``` +**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.