web-development-basics - US Tutorials

Web Development for Beginners - A Curriculum

Learn the fundamentals of web development with our 12-week comprehensive course by Microsoft Cloud Advocates. Each of the 24 lessons dives into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy. Start your coding journey today! Join the Azure AI Foundry Discord and meet experts and fellow developers. [](https://discord.gg/nTYy5BXMWG) Follow these steps to get started using these resources: 1. Fork the Repository: Click [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. Clone the Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git 3. Join The Azure AI Foundry Discord and meet experts and fellow developers ### 🌐 Multi-Language Support #### Supported via GitHub Action (Automated & Always Up-to-Date)  Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese  If you wish to have additional translations, the supported languages are listed here. here [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Are you a student?_ Visit Student Hub page where you will find beginner resources, Student packs and even ways to get a free certificate voucher. This is the page you want to bookmark and check from time to time as we switch out content monthly. ### 📣 Announcement - New GitHub Copilot Agent mode challenges to complete! New Challenge added, look for "GitHub Copilot Agent Challenge 🚀" in most chapters. That's a new challenge for you to complete using GitHub Copilot and Agent mode. If you haven't used Agent mode before it's capable of not just generating text but can also create and edit files, run commands and more. ### 📣 Announcement - _New Project to build using Generative AI_ New AI Assistant project just added, check it out project ### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript was just released Don't miss our new Generative AI curriculum! Visit https://aka.ms/genai-js-course to get started! - Lessons covering everything from basics to RAG. - Interact with historical characters using GenAI and our companion app. - Fun and engaging narrative, you'll be time traveling! Each lesson includes an assignment to complete, a knowledge check and a challenge to guide you on learning topics like: - Prompting and prompt engineering - Text and image app generation - Search apps Visit https://aka.ms/genai-js-course to get started! ## 🌱 Getting Started Learners, for each lesson, start with a pre-lecture quiz and follow through with reading the lecture material, completing the various activities and check your understanding with the post-lecture quiz. To enhance your learning experience, connect with your peers to work on the projects together! Discussions are encouraged in our discussion forum where our team of moderators will be available to answer your questions. To further your education, we highly recommend exploring Microsoft Learn for additional study materials. ### 📋 Setting up your environment This curriculum has a development environment ready to go! As you get started you can choose to run the curriculum in a Codespace (_a browser-based, no installs needed environment_), or locally on your computer using a text editor such as Visual Studio Code. #### Create your repository For you to easily save your work, it is recommended that you create your own copy of this repository. You can do this by clicking the Use this template button at the top of the page. This will create a new repository in your GitHub account with a copy of the curriculum. Follow these steps: 1. Fork the Repository: Click on the "Fork" button at the top-right corner of this page. 2. Clone the Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git #### Running the curriculum in a Codespace In your copy of this repository that you created, click the Code button and select Open with Codespaces. This will create a new Codespace for you to work in. #### Running the curriculum locally on your computer To run this curriculum locally on your computer, you will need a text editor, a browser and a command line tool. Our first lesson, Introduction to Programming Languages and Tools of the Trade, will walk you through various options for each of these tools for you to select what works best for you. Our recommendation is to use Visual Studio Code as your editor, which also has a built-in Terminal. You can download Visual Studio Code here. 1. Clone your repository to your computer. You can do this by clicking the Code button and copying the URL: CodeSpace Then, open Terminal within Visual Studio Code and run the following command, replacing <your-repository-url> with the URL you just copied: ```bash git clone <your-repository-url> ``` 2. Open the folder in Visual Studio Code. You can do this by clicking File > Open Folder and selecting the folder you just cloned. ## 📂 Each lesson includes: - optional sketchnote - optional supplemental video - pre-lesson warmup quiz - written lesson - for project-based lessons, step-by-step guides on how to build the project - knowledge checks - a challenge - supplemental reading - assignment - post-lesson quiz ## 🗃️ Lessons ## 🏫 Pedagogy Our curriculum is designed with two key pedagogical principles in mind: * project-based learning * frequent quizzes The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development. By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "Beginners Series to: JavaScript" collection of video tutorials, some of whose authors contributed to this curriculum. In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle. While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "Beginner Series to: Node.js". ## 🧭 Offline access You can run this documentation offline by using Docsify. Fork this repo, install Docsify on your local machine, and then in the root folder of this repo, type docsify serve. The website will be served on port 3000 on your localhost: localhost:3000. ## 📘 PDF A PDF of all of the lessons can be found here. ## 🎒 Other Courses Our team produces other courses! Check out:  ### LangChain [](https://aka.ms/langchain4j-for-beginners) [](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) [](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents [](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Generative AI Series [](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA) -C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC) -E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9) --- ### Core Learning [](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Copilot Series [](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)  ## Getting Help If you get stuck or have any questions about building AI apps. Join fellow learners and experienced developers in discussions about MCP. It's a supportive community where questions are welcome and knowledge is shared freely. [](https://discord.gg/nTYy5BXMWG) If you have product feedback or errors while building visit: [](https://aka.ms/foundry/forum) ## License This repository is licensed under the MIT license. See the LICENSE file for more information.

web,development

Getting Started with Web Development

In this section of the curriculum, you will be introduced to non project-based concepts important to become a professional developer. ### Topics 1. Introduction to Programming Languages and Tools of the Trade 2. Introduction to GitHub 3. Basics of Accessibility ### Credits Introduction to Programming Languages and Tools of the Trade was written with ♥️ by Jasmine Greenaway Introduction to GitHub was written with ♥️ by Floor Drees Basics of Accessibility was written with ♥️ by Christopher Harrison

web,development

Introduction to Programming Languages and Modern Developer Tools

Hey there, future developer! 👋 Can I tell you something that still gives me chills every single day? You're about to discover that programming isn't just about computers – it's about having actual superpowers to bring your wildest ideas to life! You know that moment when you're using your favorite app and everything just clicks perfectly? When you tap a button and something absolutely magical happens that makes you go "wow, how did they DO that?" Well, someone just like you – probably sitting in their favorite coffee shop at 2 AM with their third espresso – wrote the code that created that magic. And here's what's going to blow your mind: by the end of this lesson, you'll not only understand how they did it, but you'll be itching to try it yourself! Look, I totally get it if programming feels intimidating right now. When I first started, I honestly thought you needed to be some kind of math genius or have been coding since you were five years old. But here's what completely changed my perspective: programming is exactly like learning to have conversations in a new language. You start with "hello" and "thank you," then work up to ordering coffee, and before you know it, you're having deep philosophical discussions! Except in this case, you're having conversations with computers, and honestly? They're the most patient conversation partners you'll ever have – they never judge your mistakes and they're always excited to try again! Today, we're going to explore the incredible tools that make modern web development not just possible, but seriously addictive. I'm talking about the exact same editors, browsers, and workflows that developers at Netflix, Spotify, and your favorite indie app studio use every single day. And here's the part that's going to make you do a happy dance: most of these professional-grade, industry-standard tools are completely free! ## Let's See What You Already Know! Before we jump into the fun stuff, I'm curious – what do you already know about this programming world? And listen, if you're looking at these questions thinking "I literally have zero clue about any of this," that's not just okay, it's perfect! That means you're in exactly the right place. Think of this quiz like stretching before a workout – we're just warming up those brain muscles! Take the pre-lesson quiz ## The Adventure We're About to Go On Together Okay, I am genuinely bouncing with excitement about what we're going to explore today! Seriously, I wish I could see your face when some of these concepts click. Here's the incredible journey we're taking together: - What programming actually is (and why it's the coolest thing ever!) – We're going to discover how code is literally the invisible magic powering everything around you, from that alarm that somehow knows it's Monday morning to the algorithm that perfectly curates your Netflix recommendations - Programming languages and their amazing personalities – Imagine walking into a party where each person has completely different superpowers and ways of solving problems. That's what the programming language world is like, and you're going to love meeting them! - The fundamental building blocks that make digital magic happen – Think of these as the ultimate creative LEGO set. Once you understand how these pieces fit together, you'll realize you can literally build anything your imagination dreams up - Professional tools that'll make you feel like you just got handed a wizard's wand – I'm not being dramatic here – these tools will genuinely make you feel like you have superpowers, and the best part? They're the same ones the pros use! ## So What Exactly Is Programming? Alright, let's tackle the million-dollar question: what is programming, really? I'll give you a story that completely changed how I think about this. Last week, I was trying to explain to my mom how to use our new smart TV remote. I caught myself saying things like "Press the red button, but not the big red button, the small red button on the left... no, your other left... okay, now hold it for two seconds, not one, not three..." Sound familiar? 😅 That's programming! It's the art of giving incredibly detailed, step-by-step instructions to something that's very powerful but needs everything spelled out perfectly. Except instead of explaining to your mom (who can ask "which red button?!"), you're explaining to a computer (which just does exactly what you say, even if what you said isn't quite what you meant). Here's what blew my mind when I first learned this: computers are actually pretty simple at their core. They literally only understand two things – 1 and 0, which is basically just "yes" and "no" or "on" and "off." That's it! But here's where it gets magical – we don't have to speak in 1s and 0s like we're in The Matrix. That's where programming languages come to the rescue. They're like having the world's best translator who takes your perfectly normal human thoughts and converts them into computer language. And here's what still gives me actual chills every morning when I wake up: literally everything digital in your life started with someone just like you, probably sitting in their pajamas with a cup of coffee, typing code on their laptop. That Instagram filter that makes you look flawless? Someone coded that. The recommendation that led you to your new favorite song? A developer built that algorithm. The app that helps you split dinner bills with friends? Yep, someone thought "this is annoying, I bet I could fix this" and then... they did! When you learn to program, you're not just picking up a new skill – you're becoming part of this incredible community of problem-solvers who spend their days thinking, "What if I could build something that makes someone's day just a little bit better?" Honestly, is there anything cooler than that? ✅ Fun Fact Hunt: Here's something super cool to look up when you have a spare moment – who do you think was the world's first computer programmer? I'll give you a hint: it might not be who you're expecting! The story behind this person is absolutely fascinating and shows that programming has always been about creative problem-solving and thinking outside the box. ### 🧠 Check-in Time: How Are You Feeling? Take a moment to reflect: - Does the idea of "giving instructions to computers" make sense to you now? - Can you think of a daily task you'd like to automate with programming? - What questions are bubbling up in your mind about this whole programming thing? ## Programming Languages Are Like Different Flavors of Magic Okay, this is going to sound weird, but stick with me – programming languages are a lot like different types of music. Think about it: you've got jazz, which is smooth and improvisational, rock that's powerful and straightforward, classical that's elegant and structured, and hip-hop that's creative and expressive. Each style has its own vibe, its own community of passionate fans, and each one is perfect for different moods and occasions. Programming languages work exactly the same way! You wouldn't use the same language to build a fun mobile game that you'd use to crunch massive amounts of climate data, just like you wouldn't play death metal at a yoga class (well, most yoga classes anyway! 😄). But here's what absolutely blows my mind every time I think about it: these languages are like having the most patient, brilliant interpreter in the world sitting right next to you. You can express your ideas in a way that feels natural to your human brain, and they handle all the incredibly complex work of translating that into the 1s and 0s that computers actually speak. It's like having a friend who's perfectly fluent in both "human creativity" and "computer logic" – and they never get tired, never need coffee breaks, and never judge you for asking the same question twice! ### Popular Programming Languages and Their Uses ### High-Level vs. Low-Level Languages Okay, this was honestly the concept that broke my brain when I first started learning, so I'm going to share the analogy that finally made it click for me – and I really hope it helps you too! Imagine you're visiting a country where you don't speak the language, and you desperately need to find the nearest bathroom (we've all been there, right? 😅): - Low-level programming is like learning the local dialect so well that you can chat with the grandmother selling fruit on the corner using cultural references, local slang, and inside jokes that only someone who grew up there would understand. Super impressive and incredibly efficient... if you happen to be fluent! But pretty overwhelming when you're just trying to find a bathroom. - High-level programming is like having that amazing local friend who just gets you. You can say "I really need to find a restroom" in plain English, and they handle all the cultural translation and give you directions in a way that makes perfect sense to your non-local brain. In programming terms: - Low-level languages (like Assembly or C) let you have incredibly detailed conversations with the computer's actual hardware, but you need to think like a machine, which is... well, let's just say it's a pretty big mental shift! - High-level languages (like JavaScript, Python, or C#) let you think like a human while they handle all the machine-speak behind the scenes. Plus, they have these incredibly welcoming communities full of people who remember what it was like to be new and genuinely want to help! Guess which ones I'm going to suggest you start with? 😉 High-level languages are like having training wheels that you never actually want to take off because they make the whole experience so much more enjoyable! ### Let Me Show You Why High-Level Languages Are So Much Friendlier Alright, I'm about to show you something that perfectly demonstrates why I fell in love with high-level languages, but first – I need you to promise me something. When you see that first code example, don't panic! It's supposed to look intimidating. That's exactly the point I'm making! We're going to look at the exact same task written in two completely different styles. Both create what's called the Fibonacci sequence – it's this beautiful mathematical pattern where each number is the sum of the two before it: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: you'll find this pattern literally everywhere in nature – sunflower seed spirals, pinecone patterns, even the way galaxies form!) Ready to see the difference? Let's go! High-level language (JavaScript) – Human-friendly: 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 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 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: 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 ✅ About the Fibonacci sequence: This absolutely gorgeous number pattern (where each number equals the sum of the two before it: 0, 1, 1, 2, 3, 5, 8...) shows up literally everywhere in nature! You'll find it in sunflower spirals, pinecone patterns, the way nautilus shells curve, and even in how tree branches grow. It's pretty mind-blowing how math and code can help us understand and recreate the patterns that nature uses to create beauty! ## The Building Blocks That Make the Magic Happen Alright, now that you've seen what programming languages look like in action, let's break down the fundamental pieces that make up literally every program ever written. Think of these as the essential ingredients in your favorite recipe – once you understand what each one does, you'll be able to read and write code in pretty much any language! This is kind of like learning the grammar of programming. Remember back in school when you learned about nouns, verbs, and how to put sentences together? Programming has its own version of grammar, and honestly, it's way more logical and forgiving than English grammar ever was! 😄 ### Statements: The Step-by-Step Instructions Let's start with statements – these are like individual sentences in a conversation with your computer. Each statement tells the computer to do one specific thing, kind of like giving directions: "Turn left here," "Stop at the red light," "Park in that spot." What I love about statements is how readable they usually are. Check this out: 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 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: Your Program's Memory System Okay, variables are honestly one of my absolute favorite concepts to teach because they're so much like things you already use every single day! Think about your phone's contact list for a second. You don't memorize everyone's phone number – instead, you save "Mom," "Best Friend," or "Pizza Place That Delivers Until 2 AM" and let your phone remember the actual numbers. Variables work exactly the same way! They're like labeled containers where your program can store information and retrieve it later using a name that actually makes sense. Here's what's really cool: variables can change as your program runs (hence the name "variable" – see what they did there?). Just like you might update that pizza place contact when you discover somewhere even better, variables can be updated as your program learns new information or as situations change! Let me show you how beautifully simple this can be: 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 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 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 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: Teaching Your Program to Think Okay, this is where programming gets absolutely mind-blowing! Control flow is basically teaching your program how to make smart decisions, exactly like you do every single day without even thinking about it. Picture this: this morning you probably went through something like "If it's raining, I'll grab an umbrella. If it's cold, I'll wear a jacket. If I'm running late, I'll skip breakfast and grab coffee on the way." Your brain naturally follows this if-then logic dozens of times every day! This is what makes programs feel intelligent and alive instead of just following some boring, predictable script. They can actually look at a situation, evaluate what's happening, and respond appropriately. It's like giving your program a brain that can adapt and make choices! Want to see how beautifully this works? Let me show you: 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 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 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 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 ### 🎯 Concept Check: Building Blocks Mastery Let's see how you're doing with the fundamentals: - Can you explain the difference between a variable and a statement in your own words? - Think of a real-world scenario where you'd use an if-then decision (like our voting example) - What's one thing about programming logic that surprised you? Quick confidence booster: ✅ What's coming up next: We're going to have an absolute blast diving deeper into these concepts as we continue this incredible journey together! Right now, just focus on feeling that excitement about all the amazing possibilities ahead of you. The specific skills and techniques will stick naturally as we practice together – I promise this is going to be so much more fun than you might expect! ## Tools of the Trade Alright, this is honestly where I get so excited I can barely contain myself! 🚀 We're about to talk about the incredible tools that are going to make you feel like you just got handed the keys to a digital spaceship. You know how a chef has those perfectly balanced knives that feel like extensions of their hands? Or how a musician has that one guitar that seems to sing the moment they touch it? Well, developers have our own version of these magical tools, and here's what's going to absolutely blow your mind – most of them are completely free! I'm practically bouncing in my chair thinking about sharing these with you because they've completely revolutionized how we build software. We're talking about AI-powered coding assistants that can help write your code (I'm not even kidding!), cloud environments where you can build entire applications from literally anywhere with Wi-Fi, and debugging tools so sophisticated they're like having X-ray vision for your programs. And here's the part that still gives me chills: these aren't "beginner tools" that you'll outgrow. These are the exact same professional-grade tools that developers at Google, Netflix, and that indie app studio you love are using right this very moment. You're going to feel like such a pro using them! ### Code Editors and IDEs: Your New Digital Best Friends Let's talk about code editors – these are seriously about to become your new favorite places to hang out! Think of them as your personal coding sanctuary where you'll spend most of your time crafting and perfecting your digital creations. But here's what's absolutely magical about modern editors: they're not just fancy text editors. They're like having the most brilliant, supportive coding mentor sitting right next to you 24/7. They catch your typos before you even notice them, suggest improvements that make you look like a genius, help you understand what every piece of code does, and some of them can even predict what you're about to type and offer to finish your thoughts! I remember when I first discovered auto-completion – I literally felt like I was living in the future. You start typing something, and your editor goes, "Hey, were you thinking of this function that does exactly what you need?" It's like having a mind reader as your coding buddy! What makes these editors so incredible? Modern code editors offer an impressive array of features designed to boost your productivity: #### Recommended Editors for Web Development Visual Studio Code (Free) - Most popular among web developers - Excellent extension ecosystem - Built-in terminal and Git integration - Must-have extensions: - GitHub Copilot - AI-powered code suggestions - Live Share - Real-time collaboration - Prettier - Automatic code formatting - Code Spell Checker - Catch typos in your code JetBrains WebStorm (Paid, free for students) - Advanced debugging and testing tools - Intelligent code completion - Built-in version control Cloud-Based IDEs (Various pricing) - GitHub Codespaces - Full VS Code in your browser - Replit - Great for learning and sharing code - StackBlitz - Instant, full-stack web development ### Web Browsers: Your Secret Development Laboratory Okay, prepare to have your mind completely blown! You know how you've been using browsers to scroll through social media and watch videos? Well, it turns out they've been hiding this incredible secret developer laboratory this entire time, just waiting for you to discover it! Every single time you right-click on a webpage and select "Inspect Element," you're opening up a hidden world of developer tools that are honestly more powerful than some expensive software I used to pay hundreds of dollars for. It's like discovering that your regular old kitchen has been concealing a professional chef's laboratory behind a secret panel! The first time someone showed me browser DevTools, I spent like three hours just clicking around and going "WAIT, IT CAN DO THAT TOO?!" You can literally edit any website in real-time, see exactly how fast everything loads, test how your site looks on different devices, and even debug JavaScript like a total pro. It's absolutely mind-blowing! Here's why browsers are your secret weapon: 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. #### Browser Developer Tools (DevTools) Modern browsers include comprehensive development suites: #### Recommended Browsers for Development - Chrome - Industry-standard DevTools with extensive documentation - Firefox - Excellent CSS Grid and accessibility tools - Edge - Built on Chromium with Microsoft's developer resources ### Command Line Tools: Your Gateway to Developer Superpowers Alright, let's have a completely honest moment here about the command line, because I want you to hear this from someone who truly gets it. When I first saw it – just this scary black screen with blinking text – I literally thought, "Nope, absolutely not! This looks like something from a 1980s hacker movie, and I am definitely not smart enough for this!" 😅 But here's what I wish someone had told me back then, and what I'm telling you right now: the command line isn't scary – it's actually like having a direct conversation with your computer. Think of it like the difference between ordering food through a fancy app with pictures and menus (which is nice and easy) versus walking into your favorite local restaurant where the chef knows exactly what you like and can whip up something perfect just by you saying "surprise me with something amazing." The command line is where developers go to feel like absolute wizards. You type a few seemingly magical words (okay, they're just commands, but they feel magical!), hit enter, and BOOM – you've created entire project structures, installed powerful tools from around the world, or deployed your app to the internet for millions of people to see. Once you get your first taste of that power, it's honestly pretty addictive! Why the command line will become your favorite tool: 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. 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 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 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 #### Platform-Specific Options Windows: - Windows Terminal - Modern, feature-rich terminal - PowerShell 💻 - Powerful scripting environment - Command Prompt 💻 - Traditional Windows command line macOS: - Terminal 💻 - Built-in terminal application - iTerm2 - Enhanced terminal with advanced features Linux: - Bash 💻 - Standard Linux shell - KDE Konsole - Advanced terminal emulator ### Documentation: Your Always-Available Learning Mentor Okay, let me share a little secret that's going to make you feel so much better about being a beginner: even the most experienced developers spend a huge chunk of their time reading documentation. And that's not because they don't know what they're doing – it's actually a sign of wisdom! Think of documentation as having access to the world's most patient, knowledgeable teachers who are available 24/7. Stuck on a problem at 2 AM? Documentation is there with a warm virtual hug and exactly the answer you need. Want to learn about some cool new feature that everyone's talking about? Documentation has your back with step-by-step examples. Trying to understand why something works the way it does? You guessed it – documentation is ready to explain it in a way that finally makes it click! Here's something that completely changed my perspective: the web development world moves incredibly fast, and nobody (I mean absolutely nobody!) keeps everything memorized. I've watched senior developers with 15+ years of experience look up basic syntax, and you know what? That's not embarrassing – that's smart! It's not about having a perfect memory; it's about knowing where to find reliable answers quickly and understanding how to apply them. Here's where the real magic happens: 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. #### Essential Documentation Resources Mozilla Developer Network (MDN) - The gold standard for web technology documentation - Comprehensive guides for HTML, CSS, and JavaScript - Includes browser compatibility information - Features practical examples and interactive demos Web.dev (by Google) - Modern web development best practices - Performance optimization guides - Accessibility and inclusive design principles - Case studies from real-world projects Microsoft Developer Documentation - Edge browser development resources - Progressive Web App guides - Cross-platform development insights Frontend Masters Learning Paths - Structured learning curricula - Video courses from industry experts - Hands-on coding exercises ### 🔧 Tool Mastery Check: What Resonates With You? Take a moment to consider: - Which tool are you most excited to try first? (There's no wrong answer!) - Does the command line still feel intimidating, or are you curious about it? - Can you imagine using browser DevTools to peek behind the curtain of your favorite websites? ✅ Food for thought: Here's something interesting to ponder – how do you think the tools for building websites (development) might be different from tools for designing how they look (design)? It's like the difference between being an architect who designs a beautiful house and the contractor who actually builds it. Both are crucial, but they need different toolboxes! This kind of thinking will really help you see the bigger picture of how websites come to life. ## 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 Alright, detective, ready for your first case? Now that you've got this awesome foundation, I've got an adventure that's going to help you see just how incredibly diverse and fascinating the programming world really is. And listen – this isn't about writing code yet, so no pressure there! Think of yourself as a programming language detective on your very first exciting case! Your mission, should you choose to accept it: 1. Become a language explorer: Pick three programming languages from completely different universes – maybe one that builds websites, one that creates mobile apps, and one that crunches data for scientists. Find examples of the same simple task written in each language. I promise you're going to be absolutely amazed at how different they can look while doing the exact same thing! 2. Uncover their origin stories: What makes each language special? Here's a cool fact – every single programming language was created because someone thought, "You know what? There's got to be a better way to solve this specific problem." Can you figure out what those problems were? Some of these stories are genuinely fascinating! 3. Meet the communities: Check out how welcoming and passionate each language's community is. Some have millions of developers sharing knowledge and helping each other, others are smaller but incredibly tight-knit and supportive. You're going to love seeing the different personalities these communities have! 4. Follow your gut feeling: Which language feels most approachable to you right now? Don't stress about making the "perfect" choice – just listen to your instincts! There's honestly no wrong answer here, and you can always explore others later. Bonus detective work: See if you can discover what major websites or apps are built with each language. I guarantee you'll be shocked to learn what powers Instagram, Netflix, or that mobile game you can't stop playing! ## Let's Celebrate What You've Discovered! Holy moly, you've absorbed so much incredible information today! I'm genuinely excited to see how much of this amazing journey has stuck with you. And remember – this isn't a test where you need to get everything perfect. This is more like a celebration of all the cool stuff you've learned about this fascinating world you're about to dive into! Take the post-lesson quiz ## Review & Self Study Take your time to explore and have fun with it! You've covered a lot of ground today, and that's something to be proud of! Now comes the fun part – exploring the topics that sparked your curiosity. Remember, this isn't homework – it's an adventure! Dive deeper into what excites you: Get hands-on with programming languages: - Visit the official websites of 2-3 languages that caught your attention. Each one has its own personality and story! - Try some online coding playgrounds like CodePen, JSFiddle, or Replit. Don't be afraid to experiment – you can't break anything! - Read about how your favorite language came to be. Seriously, some of these origin stories are fascinating and will help you understand why languages work the way they do. Get comfortable with your new tools: - Download Visual Studio Code if you haven't already – it's free and you're going to love it! - Spend a few minutes browsing the Extensions marketplace. It's like an app store for your code editor! - Open up your browser's Developer Tools and just click around. Don't worry about understanding everything – just get familiar with what's there. Join the community: - Follow some developer communities on Dev.to, Stack Overflow, or GitHub. The programming community is incredibly welcoming to newcomers! - Watch some beginner-friendly coding videos on YouTube. There are so many great creators out there who remember what it's like to be starting out. - Consider joining local meetups or online communities. Trust me, developers love helping newcomers! ## Assignment Reading the Docs --- ## 🚀 Your Programming Journey Timeline ### ⚡ What You Can Do in the Next 5 Minutes - [ ] Bookmark 2-3 programming language websites that caught your attention - [ ] Download Visual Studio Code if you haven't already - [ ] Open your browser's DevTools (F12) and click around any website - [ ] Join one programming community (Dev.to, Reddit r/webdev, or Stack Overflow) ### ⏰ What You Can Accomplish This Hour - [ ] Complete the post-lesson quiz and reflect on your answers - [ ] Set up VS Code with the GitHub Copilot extension - [ ] Try a "Hello World" example in 2 different programming languages online - [ ] Watch a "Day in the Life of a Developer" video on YouTube - [ ] Start your programming language detective work (from the challenge) ### 📅 Your Week-Long Adventure - [ ] Complete the assignment and explore 3 new development tools - [ ] Follow 5 developers or programming accounts on social media - [ ] Try building something tiny in CodePen or Replit (even just "Hello, [Your Name]!") - [ ] Read one developer blog post about someone's coding journey - [ ] Join a virtual meetup or watch a programming talk - [ ] Start learning your chosen language with online tutorials ### 🗓️ Your Month-Long Transformation - [ ] Build your first small project (even a simple webpage counts!) - [ ] Contribute to an open-source project (start with documentation fixes) - [ ] Mentor someone who's just starting their programming journey - [ ] Create your developer portfolio website - [ ] Connect with local developer communities or study groups - [ ] Start planning your next learning milestone ### 🎯 Final Reflection Check-in Before you move on, take a moment to celebrate: - What's one thing about programming that excited you today? - Which tool or concept do you want to explore first? - How do you feel about starting this programming journey? - What's one question you'd like to ask a developer right now?

web,development

Introduction to GitHub

Hey there, future developer! 👋 Ready to join millions of coders around the world? I'm genuinely excited to introduce you to GitHub – think of it as the social media platform for programmers, except instead of sharing photos of your lunch, we're sharing code and building incredible things together! Here's what absolutely blows my mind: every app on your phone, every website you visit, and most of the tools you'll learn to use were built by teams of developers collaborating on platforms just like GitHub. That music app you love? Someone like you contributed to it. That game you can't put down? Yep, probably built with GitHub collaboration. And now YOU'RE going to learn how to be part of that amazing community! I know this might feel like a lot at first – heck, I remember staring at my first GitHub page thinking "What on earth does any of this mean?" But here's the thing: every single developer started exactly where you are right now. By the end of this lesson, you'll have your very own GitHub repository (think of it as your personal project showcase in the cloud), and you'll know how to save your work, share it with others, and even contribute to projects that millions of people use. We're going to take this journey together, one step at a time. No rushing, no pressure – just you, me, and some really cool tools that are about to become your new best friends! ## Pre-Lecture Quiz Pre-lecture quiz ## Introduction Before we dive into the really exciting stuff, let's get your computer ready for some GitHub magic! Think of this like organizing your art supplies before creating a masterpiece – having the right tools ready makes everything so much smoother and way more fun. I'm going to walk you through each setup step personally, and I promise it's not nearly as intimidating as it might look at first glance. If something doesn't click right away, that's completely normal! I remember setting up my first development environment and feeling like I was trying to read ancient hieroglyphics. Every single developer has been exactly where you are right now, wondering if they're doing it right. Spoiler alert: if you're here learning, you're already doing it right! 🌟 In this lesson, we'll cover: - tracking the work you do on your machine - working on projects with others - how to contribute to open source software ### Prerequisites Let's get your computer ready for some GitHub magic! Don't worry – this setup is something you only need to do once, and then you'll be all set for your entire coding journey. Alright, let's start with the foundation! First, we need to check if Git is already hanging out on your computer. Git is basically like having a super-smart assistant that remembers every single change you make to your code – way better than frantically hitting Ctrl+S every two seconds (we've all been there!). Let's see if Git is already installed by typing this magic command in your terminal: git --version If Git isn't there yet, no worries! Just head over to download Git and grab it. Once you've got it installed, we need to introduce Git to you properly: To check if Git is already configured you can type: 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 and create an account if you haven't already, or log in and fill out your profile. 💡 Modern tip: Consider setting up SSH keys or using GitHub CLI 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. ### Keeping Your Code Safe Let's talk about security for a moment – but don't worry, we're not going to overwhelm you with scary stuff! Think of these security practices like locking your car or your house. They're simple habits that become second nature and keep your hard work protected. We'll show you the modern, secure ways to work with GitHub right from the start. This way, you'll develop good habits that will serve you well throughout your coding career. When working with GitHub, it's important to follow security best practices: Modern Authentication Setup: --- ## Managing Your Code Like a Pro Okay, THIS is where things get really exciting! 🎉 We're about to learn how to track and manage your code like the pros do, and honestly, this is one of my favorite things to teach because it's such a game-changer. Picture this: you're writing an amazing story, and you want to keep track of every draft, every brilliant edit, and every "wait, that's genius!" moment along the way. That's exactly what Git does for your code! It's like having the most incredible time-traveling notebook that remembers EVERYTHING – every keystroke, every change, every "oops, that broke everything" moment that you can instantly undo. I'll be honest – this might feel overwhelming at first. When I started, I thought "Why can't I just save my files like normal?" But trust me on this: once Git clicks for you (and it will!), you'll have one of those lightbulb moments where you think "How did I EVER code without this?" It's like discovering you can fly when you've been walking everywhere your whole life! 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: Create Your First Repository! Let's walk through this adventure together, step by step. Take your time with each part – there's no prize for rushing, and I promise every single step will make sense. Remember, every coding superstar you admire was once sitting exactly where you are, about to create their first repository. How cool is that? Let's Do This Together: 1. Create your repository on GitHub. Head over to GitHub.com and look for that bright green New button (or the + sign in the top right corner). Click it and select New repository. Here's what to do: 1. Give your repository a name – make it something meaningful to you! 1. Add a description if you want (this helps others understand what your project is about) 1. Decide if you want it public (everyone can see it) or private (just for you) 1. I recommend checking the box to add a README file – it's like the front page of your project 1. Click Create repository and celebrate – you just created your first repo! 🎉 2. Navigate to your project folder. Now let's open up your terminal (don't worry, it's not as scary as it looks!). We need to tell your computer where your project files are. Type this command: ```bash cd [name of your folder] ``` What we're doing here: - We're basically saying "Hey computer, take me to my project folder" - This is like opening a specific folder on your desktop, but we're doing it with text commands - Replace [name of your folder] with the actual name of your project folder 3. Turn your folder into a Git repository. This is where the magic happens! Type: ```bash git init ``` Here's what just happened (pretty cool stuff!): - Git just created a hidden .git folder in your project – you won't see it, but it's there! - Your regular folder is now a "repository" that can track every change you make - Think of it like giving your folder superpowers to remember everything 4. Check what's happening. Let's see what Git thinks about your project right now: ```bash git status ``` Understanding what Git is telling you: You might see something that looks like this: ```output Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: file.txt modified: file2.txt ``` Don't panic! Here's what this means: - Files in red are files that have changes but aren't ready to be saved yet - Files in green (when you see them) are ready to be saved - Git is being helpful by telling you exactly what you can do next > 💡 Pro tip: The git status command is your best friend! Use it anytime you're confused about what's going on. It's like asking Git "Hey, what's the situation right now?" 5. Get your files ready to save (this is called "staging"): ```bash git add . ``` What we just did: - We told Git "Hey, I want to include ALL my files in the next save" - The . is like saying "everything in this folder" - Now your files are "staged" and ready for the next step Want to be more selective? You can add just specific files: ```bash git add [file or folder name] ``` Why might you want to do this? - Sometimes you want to save related changes together - It helps you organize your work into logical chunks - Makes it easier to understand what changed and when Changed your mind? No worries! You can unstage files like this: ```bash # Unstage everything git reset # Unstage just one file git reset [file name] ``` Don't worry – this doesn't delete your work, it just takes files out of the "ready to save" pile. 6. Save your work permanently (making your first commit!): ```bash git commit -m "first commit" ``` 🎉 Congratulations! You just made your first commit! Here's what just happened: - Git took a "snapshot" of all your staged files at this exact moment - Your commit message "first commit" explains what this save point is about - Git gave this snapshot a unique ID so you can always find it later - You've officially started tracking your project's history! > 💡 Future commit messages: For your next commits, be more descriptive! Instead of "updated stuff", try "Add contact form to homepage" or "Fix navigation menu bug". Your future self will thank you! 7. Connect your local project to GitHub. Right now, your project exists only on your computer. Let's connect it to your GitHub repository so you can share it with the world! First, go to your GitHub repository page and copy the URL. Then come back here and type: ```bash git remote add origin https://github.com/username/repository_name.git ``` (Replace that URL with your actual repository URL!) What we just did: - We created a connection between your local project and your GitHub repository - "Origin" is just a nickname for your GitHub repository – it's like adding a contact to your phone - Now your local Git knows where to send your code when you're ready to share it 💡 Easier way: If you have GitHub CLI installed, you can do this in one command: ```bash gh repo create my-repo --public --push --source=. ``` 8. Send your code to GitHub (the big moment!): ```bash git push -u origin main ``` 🚀 This is it! You're uploading your code to GitHub! What's happening: - Your commits are traveling from your computer to GitHub - The -u flag sets up a permanent connection so future pushes are easier - "main" is the name of your primary branch (like the main folder) - After this, you can just type git push for future uploads! 💡 Quick note: If your branch is called something else (like "master"), use that name instead. You can check with git branch --show-current. 9. Your new daily coding rhythm (this is where it gets addictive!): From now on, whenever you make changes to your project, you've got this simple three-step dance: ```bash git add . git commit -m "describe what you changed" git push ``` This becomes your coding heartbeat: - Make some awesome changes to your code ✨ - Stage them with git add ("Hey Git, pay attention to these changes!") - Save them with git commit and a descriptive message (future you will thank you!) - Share them with the world using git push 🚀 - Rinse and repeat – seriously, this becomes as natural as breathing! I love this workflow because it's like having multiple save points in a video game. Made a change you love? Commit it! Want to try something risky? No problem – you can always go back to your last commit if things go sideways! > 💡 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 or create one using gitignore.io. ### 🧠 First Repository Check-in: How Did That Feel? Take a moment to celebrate and reflect: - How did it feel to see your code appear on GitHub for the first time? - Which step felt the most confusing, and which felt surprisingly easy? - Can you explain the difference between git add, git commit, and git push in your own words? #### 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 - Atomic commits: Make each commit represent a single logical change - Frequent commits: Commit often with descriptive messages rather than large, infrequent commits #### Commit messages A great Git commit subject line completes the following sentence: If applied, this commit will <your subject line here> For the subject use the imperative, present tense: "change" not "changed" nor "changes". As in the subject, in the body (optional) also use the imperative, present tense. The body should include the motivation for the change and contrast this with previous behavior. You're explaining the why, not the how. ✅ 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? ## Working with Others (The Fun Part!) Hold onto your hat because THIS is where GitHub becomes absolutely magical! 🪄 You've mastered managing your own code, but now we're diving into my absolute favorite part – collaborating with amazing people from all over the world. Picture this: you wake up tomorrow and see that someone in Tokyo improved your code while you were sleeping. Then someone in Berlin fixes a bug you've been stuck on. By afternoon, a developer in São Paulo has added a feature you never even thought of. That's not science fiction – that's just Tuesday in the GitHub universe! What gets me really excited is that the collaboration skills you're about to learn? These are the EXACT same workflows that teams at Google, Microsoft, and your favorite startups use every single day. You're not just learning a cool tool – you're learning the secret language that makes the entire software world work together. Seriously, once you experience the rush of having someone merge your first pull request, you'll understand why developers get so passionate about open source. It's like being part of the world's biggest, most creative team project! 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. Want to make your repository look professional and welcoming? Head over to your repository and click on Insights > Community. This cool feature shows you how your project compares to what the GitHub community considers "good repository practices." Here's what makes a repository awesome: 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. ✅ README files, although they take time to prepare, are often neglected by busy maintainers. Can you find an example of a particularly descriptive one? Note: there are some tools to help create good READMEs that you might like to try. ### Task: Merge some code Contributing docs help people contribute to the project. It explains what types of contributions you're looking for and how the process works. Contributors will need to go through a series of steps to be able to contribute to your repo on GitHub: 1. Forking your repo You will probably want people to _fork_ your project. Forking means creating a replica of your repository on their GitHub profile. 1. Clone. From there they will clone the project to their local machine. 1. Create a branch. You will want to ask them to create a _branch_ for their work. 1. Focus their change on one area. Ask contributors to concentrate their contributions on one thing at a time - that way the chances that you can _merge_ in their work is higher. Imagine they write a bug fix, add a new feature, and update several tests - what if you want to, or can only implement 2 out of 3, or 1 out of 3 changes? ✅ Imagine a situation where branches are particularly critical to writing and shipping good code. What use cases can you think of? Let's go through a contributor workflow. Assume the contributor has already _forked_ and _cloned_ the repo so they have a Git repo ready to be worked on, on their local machine: 1. Create a branch. Use the command git branch to create a branch that will contain the changes they mean to contribute: ```bash 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 git add . git commit -m "my changes" ``` > ⚠️ 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: ```bash git switch main git pull ``` At this point you want to make sure that any _conflicts_, situations where Git can't easily _combine_ the changes happens in your working branch. Therefore run the following commands: ```bash git switch [branch_name] git merge main ``` 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. 💡 Modern alternative: Consider using git rebase for a cleaner history: ```bash 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. ```bash git push --set-upstream origin [branch-name] ``` The above command creates the branch on your forked repo. ### 🤝 Collaboration Skills Check: Ready to Work with Others? Let's see how you're feeling about collaboration: - Does the idea of forking and pull requests make sense to you now? - What's one thing about working with branches that you want to practice more? - How comfortable do you feel about contributing to someone else's project? 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 git branch -d [branch-name] ``` Ensure you go the GitHub page for the forked repo next and remove the remote branch you just pushed to it. Pull request seems like a silly term because really you want to push your changes to the project. But the maintainer (project owner) or core team needs to consider your changes before merging it with the project's "main" branch, so you're really requesting a change decision from a maintainer. A pull request is the place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more. A good pull request follows roughly the same rules as a commit message. You can add a reference to an issue in the issue tracker, when your work for instance fixes an issue. This is done using a # followed by the number of your issue. For example #97. 🤞Fingers crossed that all checks pass and the project owner(s) merge your changes into the project🤞 Update your current local working branch with all new commits from the corresponding remote branch on GitHub: git pull ## Contributing to Open Source (Your Chance to Make an Impact!) Are you ready for something that's going to absolutely blow your mind? 🤯 Let's talk about contributing to open source projects – and I'm getting goosebumps just thinking about sharing this with you! This is your chance to become part of something truly extraordinary. Imagine improving the tools that millions of developers use every day, or fixing a bug in an app that your friends love. That's not just a dream – that's what open source contribution is all about! Here's what gives me chills every time I think about it: every single tool you've been learning with – your code editor, the frameworks we'll explore, even the browser you're reading this in – started with someone exactly like you making their very first contribution. That brilliant developer who built your favorite VS Code extension? They were once a beginner clicking "create pull request" with shaky hands, just like you're about to do. And here's the most beautiful part: the open source community is like the internet's biggest group hug. Most projects actively look for newcomers and have issues tagged "good first issue" specifically for people like you! Maintainers genuinely get excited when they see new contributors because they remember their own first steps. You're not just learning to code here – you're preparing to join a global family of builders who wake up every day thinking "How can we make the digital world a little bit better?" Welcome to the club! 🌟 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'. 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: To work on the project, switch to the right folder: cd ProjectURL You can also open the entire project using: - GitHub Codespaces - GitHub's cloud development environment with VS Code in the browser - GitHub Desktop - A GUI application for Git operations - 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. ### A few more interesting things about GitHub You can star, watch and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code. Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indicated otherwise, where people discuss issues related to the project. And the Pull Requests tab is where people discuss and review changes that are in progress. Projects might also have discussion in forums, mailing lists, or chat channels like Slack, Discord or IRC. 🔧 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! --- ## 🚀 Challenge Alright, it's time to put your shiny new GitHub superpowers to the test! 🚀 Here's a challenge that's going to make everything click in the most satisfying way: Grab a friend (or that family member who's always asking what you're up to with all this "computer stuff") and embark on a collaborative coding adventure together! This is where the real magic happens – create a project, let them fork it, make some branches, and merge changes like the pros you're becoming. I'm not gonna lie – you'll probably laugh at some point (especially when you both try to change the same line), maybe scratch your heads in confusion, but you'll definitely have those amazing "aha!" moments that make all the learning worth it. Plus, there's something special about sharing that first successful merge with someone else – it's like a tiny celebration of how far you've come! Don't have a coding buddy yet? No worries at all! The GitHub community is packed with incredibly welcoming people who remember what it was like to be new. Look for repositories with "good first issue" labels – they're basically saying "Hey beginners, come learn with us!" How awesome is that? ## Post-Lecture Quiz Post-lecture quiz ## Review & Keep Learning Whew! 🎉 Look at you – you've just conquered GitHub basics like an absolute champion! If your brain feels a little full right now, that's completely normal and honestly a good sign. You've just learned tools that took me weeks to feel comfortable with when I started. Git and GitHub are incredibly powerful (like, seriously powerful), and every developer I know – including the ones who seem like wizards now – had to practice and stumble around a bit before it all clicked. The fact that you've made it through this lesson means you're already on your way to mastering some of the most important tools in a developer's toolkit. Here are some absolutely fantastic resources to help you practice and become even more awesome: - Contributing to open source software guide – Your roadmap to making a difference - Git cheatsheet – Keep this handy for quick reference! And remember: practice makes progress, not perfection! The more you use Git and GitHub, the more natural it becomes. GitHub has created some amazing interactive courses that let you practice in a safe environment: - Introduction to GitHub - Communicate using Markdown - GitHub Pages - Managing merge conflicts Feeling adventurous? Check out these modern tools: - GitHub CLI documentation – For when you want to feel like a command-line wizard - GitHub Codespaces documentation – Code in the cloud! - GitHub Actions documentation – Automate all the things - Git best practices – Level up your workflow game ## 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 Your mission, should you choose to accept it: Complete the Introduction to GitHub course on GitHub Skills. This interactive course will let you practice everything you've learned in a safe, guided environment. Plus, you'll get a cool badge when you finish! 🏅 Feeling ready for more challenges? - Set up SSH authentication for your GitHub account (no more passwords!) - Try using GitHub CLI for your daily Git operations - Create a repository with a GitHub Actions workflow - Explore GitHub Codespaces by opening this very repository in a cloud-based editor --- ## 🚀 Your GitHub Mastery Timeline ### ⚡ What You Can Do in the Next 5 Minutes - [ ] Star this repository and 3 other projects that interest you - [ ] Set up two-factor authentication on your GitHub account - [ ] Create a simple README for your first repository - [ ] Follow 5 developers whose work inspires you ### 🎯 What You Can Accomplish This Hour - [ ] Complete the post-lesson quiz and reflect on your GitHub journey - [ ] Set up SSH keys for password-free GitHub authentication - [ ] Create your first meaningful commit with a great commit message - [ ] Explore GitHub's "Explore" tab to discover trending projects - [ ] Practice forking a repository and making a small change ### 📅 Your Week-Long GitHub Adventure - [ ] Complete the GitHub Skills courses (Introduction to GitHub, Markdown) - [ ] Make your first pull request to an open source project - [ ] Set up a GitHub Pages site to showcase your work - [ ] Join GitHub Discussions on projects you're interested in - [ ] Create a repository with proper community standards (README, License, etc.) - [ ] Try GitHub Codespaces for cloud-based development ### 🌟 Your Month-Long Transformation - [ ] Contribute to 3 different open source projects - [ ] Mentor someone new to GitHub (pay it forward!) - [ ] Set up automated workflows with GitHub Actions - [ ] Build a portfolio showcasing your GitHub contributions - [ ] Participate in Hacktoberfest or similar community events - [ ] Become a maintainer of your own project that others contribute to ### 🎓 Final GitHub Mastery Check-in Celebrate how far you've come: - What's your favorite thing about using GitHub? - Which collaboration feature excites you most? - How confident do you feel about contributing to open source now? - What's the first project you want to contribute to? Remember: every expert was once a beginner. You've got this! 💪

git

Creating Accessible Webpages

## Pre-Lecture Quiz Pre-lecture quiz Here's something that might surprise you: when you build accessible websites, you're not just helping people with disabilities—you're actually making the web better for everyone! Ever notice those curb cuts at street corners? They were originally designed for wheelchairs, but now they help people with strollers, delivery workers with dollies, travelers with rolling luggage, and cyclists too. That's exactly how accessible web design works—solutions that help one group often end up benefiting everyone. Pretty cool, right? In this lesson, we're going to explore how to create websites that truly work for everyone, no matter how they browse the web. You'll discover practical techniques that are already built into web standards, get hands-on with testing tools, and see how accessibility makes your sites more usable for all users. By the end of this lesson, you'll have the confidence to make accessibility a natural part of your development workflow. Ready to explore how thoughtful design choices can open up the web to billions of users? Let's dive in! ## Understanding Assistive Technologies Before we jump into coding, let's take a moment to understand how people with different abilities actually experience the web. This isn't just theory—understanding these real-world navigation patterns will make you a much better developer! Assistive technologies are pretty amazing tools that help people with disabilities interact with websites in ways that might surprise you. Once you get the hang of how these technologies work, creating accessible web experiences becomes way more intuitive. It's like learning to see your code through someone else's eyes. ### Screen readers Screen readers are pretty sophisticated pieces of technology that convert digital text into speech or braille output. While they're primarily used by people with visual impairments, they're also super helpful for users with learning disabilities like dyslexia. I like to think of a screen reader as having a really smart narrator reading a book to you. It reads content aloud in a logical order, announces interactive elements like "button" or "link," and provides keyboard shortcuts for jumping around a page. But here's the thing—screen readers can only work their magic if we build websites with proper structure and meaningful content. That's where you come in as a developer! Popular screen readers across platforms: - Windows: NVDA (free and most popular), JAWS, Narrator (built-in) - macOS/iOS: VoiceOver (built-in and very capable) - Android: TalkBack (built-in) - Linux: 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 ### Building your testing workflow Here's some good news—effective accessibility testing doesn't have to be overwhelming! You'll want to combine automated tools (they're fantastic at catching obvious issues) with some hands-on testing. Here's a systematic approach that I've found catches the most issues without eating up your entire day: Essential manual testing workflow: 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 You know how you sometimes pinch to zoom on your phone when text is too small, or squint at your laptop screen in bright sunlight? Many users rely on magnification tools to make content readable every single day. This includes people with low vision, older adults, and anyone who's ever tried to read a website outdoors. Modern zoom technologies have evolved beyond just making things bigger. Understanding how these tools work will help you create responsive designs that remain functional and attractive 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 (built-in), ZoomText - macOS/iOS: Zoom (built-in with advanced features) ✅ 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 people navigate the web with assistive technologies, let's explore the tools that help you build and test accessible websites. Think of it like this: automated tools are great at catching obvious issues (like missing alt text), while hands-on testing helps you ensure your site feels good to use in the real world. Together, they give you confidence that your sites work for everyone. ### Color contrast testing Here's some good news: 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 trying to read their phones at the beach. WCAG contrast requirements: Essential testing tools: - Colour Contrast Analyser - Desktop app with color picker - WebAIM Contrast Checker - Web-based with instant feedback - Stark - Design tool plugin for Figma, Sketch, Adobe XD - Accessible Colors - Find accessible color palettes ✅ 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. ### Comprehensive accessibility auditing The most effective accessibility testing combines multiple approaches. No single tool catches everything, so building a testing routine with various methods ensures thorough coverage. 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 Professional testing extensions: - axe DevTools - Industry-standard automated testing - WAVE - Visual feedback with error highlighting - Accessibility Insights - Microsoft's comprehensive testing suite Command-line and CI/CD integration: - axe-core - JavaScript library for automated testing - Pa11y - Command-line accessibility testing tool - Lighthouse CI - Automated accessibility scoring ### 🧠 Testing Skills Check: Ready to Find Issues? Let's see how you're feeling about accessibility testing: - Which testing method seems most approachable to you right now? - Can you imagine using keyboard-only navigation for a full day? - What's one accessibility barrier you've personally experienced online? ## Building Accessibility from the Ground Up The key to accessibility success is building it into your foundation from day one. I know it's tempting to think "I'll add accessibility later," but that's like trying to add a ramp to a house after it's already built. Possible? Yes. Easy? Not really. Think of accessibility like planning a house—it's much easier to include wheelchair accessibility in your initial architectural plans than to retrofit everything later. ### The POUR principles: Your accessibility foundation The Web Content Accessibility Guidelines (WCAG) are built around four fundamental principles that spell out POUR. Don't worry—these aren't stuffy academic concepts! They're actually practical guidelines for making content that works for everyone. Once you get the hang of POUR, making accessibility decisions becomes way more intuitive. It's like having a mental checklist that guides your design choices. Let's break it down: 🔍 Perceivable: Information must be presentable in ways users can perceive through their available senses - 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 🎮 Operable: All interface components must be operable through available input methods - 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) 📖 Understandable: Information and UI operation must be clear and comprehensible - Use clear, simple language appropriate for your audience - Ensure content appears and operates in predictable, consistent ways - Provide clear instructions and error messages for user input - Help users understand and correct mistakes in forms - Organize content with logical reading order and information hierarchy 💪 Robust: Content must work reliably across different technologies and assistive devices - Use valid, semantic HTML as your foundation - Ensure compatibility with current and future assistive technologies - Follow web standards and best practices for markup - Test across different browsers, devices, and assistive tools - Structure content so it degrades gracefully when advanced features aren't supported ### 🎯 POUR Principles Check: Making It Stick Quick reflection on the foundations: - Can you think of a website feature that fails each POUR principle? - Which principle feels most natural to you as a developer? - How might these principles improve design for everyone, not just disabled users? ## Creating Accessible Visual Design Good visual design and accessibility go hand in hand. When you design with accessibility in mind, you often discover that these constraints lead to cleaner, more elegant solutions that benefit all users. Let's explore how to create visually appealing designs that work for everyone, regardless of their visual abilities or the conditions under which they're viewing your content. ### Color and visual accessibility strategies Color is powerful for communication, but it should never be the only way you convey important information. Designing beyond color creates more robust, inclusive experiences that work in more situations. Design for color vision differences: Approximately 8% of men and 0.5% of women have some form of color vision difference (often called "color blindness"). The most common types are: - Deuteranopia: Difficulty distinguishing red and green - Protanopia: Red appears more dim - Tritanopia: Difficulty with blue and yellow (rare) Inclusive color strategies: Beyond basic contrast requirements: - Test your color choices with color blind simulators - Use patterns, textures, or shapes alongside color coding - Ensure interactive states remain distinguishable without color - Consider how your design looks in high contrast mode ✅ Test your color accessibility: Use tools like Coblis to see how your site appears to users with different types of color vision. ### Focus indicators and interaction design Focus indicators are the digital equivalent of a cursor—they show keyboard users where they are on the page. Well-designed focus indicators enhance the experience for everyone by making interactions clear and predictable. Modern focus indicator best practices: Focus indicator requirements: - Visibility: Must have at least 3:1 contrast ratio with surrounding elements - Width: Minimum 2px thickness around the entire element - Persistence: Should remain visible until focus moves elsewhere - Distinction: Must be visually different from other UI states ✅ Audit focus indicators: Tab through your website and note which elements have clear focus indicators. Are any difficult to see or missing entirely? ### Semantic HTML: The foundation of accessibility Semantic HTML is like giving assistive technologies a GPS system for your website. When you use the right HTML elements for their intended purpose, you're basically providing screen readers, keyboards, and other tools with a detailed roadmap to help users navigate effectively. Here's an analogy that really clicked for me: semantic HTML is the difference between a well-organized library with clear categories and helpful signs versus a warehouse where books are scattered randomly. Both places have the same books, but which one would you rather try to find something in? Exactly! Building blocks of accessible page structure: Why semantic HTML transforms accessibility: Screen reader superpowers with semantic HTML: - Landmark navigation: Jump between major page sections instantly - Heading outlines: Generate a table of contents from your heading structure - Element lists: Create lists of all links, buttons, or form controls - Context awareness: Understand relationships between content sections ### 🏗️ Semantic HTML Mastery Check: Building Strong Foundations Let's evaluate your semantic understanding: - Can you identify the landmarks on a webpage just by looking at the HTML? - How would you explain the difference between <section> and <div> to a friend? - What's the first thing you'd check if a screen reader user reported navigation problems? ✅ Audit your semantic structure: Use the Accessibility panel in your browser's DevTools to view the accessibility tree and ensure your markup creates a logical structure. ### Heading hierarchy: Creating a logical content outline Headings are absolutely crucial for accessible content—they're like the spine that holds everything together. Screen reader users rely heavily on headings to understand and navigate your content. Think of it as providing a table of contents for your page. Here's the golden rule for headings: Never skip levels. Always progress logically from <h1> to <h2> to <h3>, and so on. Remember making outlines in school? It's exactly the same principle—you wouldn't jump from "I. Main Point" straight to "C. Sub-sub-point" without a "A. Sub-point" in between, right? Perfect heading structure example: Heading best practices: - One <h1> per page: Typically your main page title or primary content heading - Logical progression: Never skip levels (h1 → h2 → h3, not h1 → h3) - Descriptive content: Make headings meaningful when read out of context - Visual styling with CSS: Use CSS for appearance, HTML levels for structure Screen reader navigation statistics: - 68% of screen reader users navigate by headings (WebAIM Survey) - Users expect to find a logical heading outline - Headings provide the fastest way to understand page structure ✅ Test your heading structure: Use a screen reader's heading navigation (H key in NVDA) to jump through your headings. Does the progression tell the story of your content logically? ### Advanced visual accessibility techniques Beyond the basics of contrast and color, there are sophisticated techniques that help create truly inclusive visual experiences. These methods ensure your content works across different viewing conditions and assistive technologies. Essential visual communication strategies: - Multi-modal feedback: Combine visual, textual, and sometimes audio cues - Progressive disclosure: Present information in digestible chunks - Consistent interaction patterns: Use familiar UI conventions - Responsive typography: Scale text appropriately across devices - Loading and error states: Provide clear feedback for all user actions CSS utilities for enhanced accessibility: ✅ Implement skip navigation: Add skip links to your pages and test them by pressing Tab as soon as the page loads. They should appear and allow you to jump to main content. ## Crafting Meaningful Link Text Links are basically the highways of the web, but poorly written link text is like having road signs that just say "Place" instead of "Downtown Chicago." Not very helpful, right? Here's something that blew my mind when I first learned it: screen readers can extract all the links from a page and show them as one big list. Imagine if someone handed you a directory of every link on your page. Would each one make sense on its own? That's the test your link text needs to pass! ### Understanding link navigation patterns Screen readers offer powerful link navigation features that rely on well-written link text: Link navigation methods: - Sequential reading: Links are read in context as part of content flow - Link list generation: All page links compiled into a searchable directory - Quick navigation: Jump between links using keyboard shortcuts (K in NVDA) - Search functionality: Find specific links by typing partial text Why context matters: When screen reader users generate a link list, they see something like this: - "Download report" - "Learn more" - "Click here" - "Privacy policy" - "Click here" Only two of these links provide useful information when read out of context! ### Common link text mistakes to avoid Understanding what doesn't work helps you recognize and fix accessibility issues in existing content. ❌ Generic link text that provides no context: Why these patterns fail: - "Click here" tells users nothing about the destination - "Read more" repeated multiple times creates confusion - Raw URLs are difficult for screen readers to pronounce clearly - Single words like "Go" or "See" lack descriptive context ### Writing excellent link text Descriptive link text benefits everyone—sighted users can quickly scan links, and screen reader users understand destinations immediately. ✅ Clear, descriptive link text examples: Link text best practices: - Be specific: "Download the quarterly financial report" vs. "Download" - Include file type and size: "(PDF, 1.2MB)" for downloadable files - Mention if links open externally: "(opens in new window)" when appropriate - Use active language: "Contact us" vs. "Contact page" - Keep it concise: Aim for 2-8 words when possible ### Advanced link accessibility patterns Sometimes visual design constraints or technical requirements need special solutions. Here are sophisticated techniques for common challenging scenarios: Using ARIA for enhanced context: Indicating file types and external destinations: ✅ Test your link context: Use your browser's developer tools to generate a list of all links on your page. Can you understand each link's purpose without any surrounding context? ## ARIA: Supercharging HTML Accessibility Accessible Rich Internet Applications (ARIA) is like having a universal translator between your complex web applications and assistive technologies. When HTML alone can't express everything your interactive components are doing, ARIA steps in to fill those gaps. I like to think of ARIA as adding helpful annotations to your HTML—kind of like stage directions in a play script that help actors understand their roles and relationships. Here's the most important rule about ARIA: Always use semantic HTML first, then add ARIA to enhance it. Think of ARIA as seasoning, not the main dish. It should clarify and enhance your HTML structure, never replace it. Get that foundation right first! ### Strategic ARIA implementation ARIA is powerful, but with power comes responsibility. Incorrect ARIA can make accessibility worse than no ARIA at all. Here's when and how to use it effectively: ✅ Use ARIA when: - Creating custom interactive widgets (accordions, tabs, carousels) - Building dynamic content that changes without page reloads - Providing additional context for complex UI relationships - Indicating loading states or live content updates - Creating app-like interfaces with custom controls ❌ Avoid ARIA when: - Standard HTML elements already provide the needed semantics - You're unsure how to implement it correctly - It duplicates information already provided by semantic HTML - You haven't tested with actual assistive technology The five categories of ARIA: 1. Roles: What is this element? (button, tab, dialog) 2. Properties: What are its features? (aria-required, aria-haspopup) 3. States: What's its current condition? (aria-expanded, aria-checked) 4. Landmarks: Where is it in page structure? (banner, navigation, main) 5. Live regions: How should changes be announced? (aria-live, aria-atomic) ### Essential ARIA patterns for modern web apps These patterns solve the most common accessibility challenges in interactive web applications: Naming and describing elements: Live regions for dynamic content: Interactive widget example (accordion): ### ARIA implementation best practices ARIA is powerful but requires careful implementation. Following these guidelines helps ensure your ARIA enhances rather than hinders accessibility: 🛡️ Core principles: 1. Semantic HTML first: Always prefer <button> over <div role="button"> 2. Don't break semantics: Never override existing HTML meaning (avoid <h1 role="button">) 3. Maintain keyboard accessibility: All interactive ARIA elements must be fully keyboard accessible 4. Test with real users: ARIA support varies significantly between assistive technologies 5. Start simple: Complex ARIA implementations are more likely to have errors 🔍 Testing workflow: 🚫 Common ARIA mistakes to avoid: - Conflicting information: Don't contradict HTML semantics - Over-labeling: Too much ARIA information overwhelms users - Static ARIA: Forgetting to update ARIA states when content changes - Untested implementations: ARIA that works in theory but fails in practice - Missing keyboard support: ARIA roles without corresponding keyboard interactions ### 🎭 ARIA Skills Check: Ready for Complex Interactions? Gauge your ARIA confidence: - When would you choose ARIA over semantic HTML? (Hint: almost never!) - Can you explain why <div role="button"> is usually worse than <button>? - What's the most important thing to remember about ARIA testing? ✅ Learn from experts: Study the ARIA Authoring Practices Guide for battle-tested patterns and implementations of complex interactive widgets. ## Making Images and Media Accessible Visual and audio content are essential parts of modern web experiences, but they can create barriers if not implemented thoughtfully. The goal is ensuring that the information and emotional impact of your media reaches every user. Once you get the hang of it, it becomes second nature. Different types of media need different accessibility approaches. It's like cooking—you wouldn't treat a delicate fish the same way you'd treat a hearty steak. Understanding these distinctions helps you choose the right solution for each situation. ### Strategic image accessibility Every image on your website serves a purpose. Understanding that purpose helps you write better alternative text and create more inclusive experiences. The four types of images and their alt text strategies: Informative images - convey important information: Decorative images - purely visual with no informational value: Functional images - serve as buttons or controls: Complex images - charts, diagrams, infographics: ### 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 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: Responsive images with accessibility: ✅ 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 navigate the web entirely with their keyboards. This includes people with motor disabilities, power users who find keyboards faster than mice, and anyone whose mouse has stopped working. Making sure your site works well with keyboard input is essential and often makes your site more efficient for everyone. ### 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: Skip links for efficient navigation: Proper tab order: ### Focus trapping in modals When opening modal dialogs, focus should be trapped within the modal: ✅ 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: ### Error handling and validation Accessible error messages: 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: ## Your Accessibility Journey: Key Takeaways Congratulations! You've just gained the foundational knowledge to create truly inclusive web experiences. This is pretty exciting stuff! Web accessibility isn't just about checking compliance boxes—it's about recognizing the diverse ways people interact with digital content and designing for that amazing complexity. You're now part of a growing community of developers who understand that great design works for everyone. Welcome to the club! 🎯 Your accessibility toolkit now includes: 🚀 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 The business case is crystal clear: Accessible websites reach more users, rank better in search engines, have lower maintenance costs, and avoid legal risks. But honestly? The real reason to care about accessibility goes so much deeper. Accessible websites embody the best values of the web—openness, inclusivity, and the idea that everyone deserves 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. That's pretty amazing when you think about it! ## Additional Resources Continue your accessibility learning journey with these essential resources: 📚 Official Standards and Guidelines: - WCAG 2.1 Guidelines - The official accessibility standard with quick reference - ARIA Authoring Practices Guide - Comprehensive patterns for interactive widgets - WebAIM Guidelines - Practical, beginner-friendly accessibility guidance 🛠️ Tools and Testing Resources: - axe DevTools - Industry-standard accessibility testing - A11y Project Checklist - Step-by-step accessibility verification - Accessibility Insights - Microsoft's comprehensive testing suite - Color Oracle - Color blindness simulator for design testing 🎓 Learning and Community: - WebAIM Screen Reader Survey - Real user preferences and behaviors - Inclusive Components - Modern accessible component patterns - A11y Coffee - Quick accessibility tips and insights - Web Accessibility Initiative (WAI) - W3C's comprehensive accessibility resources 🎥 Hands-on Learning: - Accessibility Developer Guide - Practical implementation guidance - Deque University - 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 Take this HTML and rewrite it to be as accessible as possible, given the strategies you learned. 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 ## Review & Self Study Many governments have laws regarding accessibility requirements. Read up on your home country's accessibility laws. What is covered, and what isn't? An example is this government web site. ## Assignment Analyze a non-accessible web site Credits: Turtle Ipsum by Instrument --- ## 🚀 Your Accessibility Mastery Timeline ### ⚡ What You Can Do in the Next 5 Minutes - [ ] Install axe DevTools extension in your browser - [ ] Run a Lighthouse accessibility audit on your favorite website - [ ] Try navigating any website using only the Tab key - [ ] Test your browser's built-in screen reader (Narrator/VoiceOver) ### 🎯 What You Can Accomplish This Hour - [ ] Complete the post-lesson quiz and reflect on accessibility insights - [ ] Practice writing meaningful alt text for 10 different images - [ ] Audit a website's heading structure using HeadingsMap extension - [ ] Fix accessibility issues found in the challenge HTML - [ ] Test color contrast on your current project with WebAIM's tool ### 📅 Your Week-Long Accessibility Journey - [ ] Complete the assignment analyzing a non-accessible website - [ ] Set up your development environment with accessibility testing tools - [ ] Practice keyboard navigation on 5 different complex websites - [ ] Build a simple form with proper labels, error handling, and ARIA - [ ] Join an accessibility community (A11y Slack, WebAIM forum) - [ ] Watch real users with disabilities navigate websites (YouTube has great examples) ### 🌟 Your Month-Long Transformation - [ ] Integrate accessibility testing into your development workflow - [ ] Contribute to an open source project by fixing accessibility issues - [ ] Conduct usability testing with someone who uses assistive technology - [ ] Build an accessible component library for your team - [ ] Advocate for accessibility in your workplace or community - [ ] Mentor someone new to accessibility concepts ### 🏆 Final Accessibility Champion Check-in Celebrate your accessibility journey: - What's the most surprising thing you learned about how people use the web? - Which accessibility principle resonates most with your development style? - How has learning about accessibility changed your perspective on design? - What's the first accessibility improvement you want to make on a real project?

web,development

Basics of GIT for web-dev beginners👶

## Basics of GIT for web-dev beginners👶 ## What is Git? 1. Git is a distributed version control system. 2. The entire codebase and history is available on every developer’s computer, which allows for easy branching and merging. 3. It is used as Version Control System (VCS) for tracking changes in computer files. * Distributed version control * Coordinates work between multiple developers * Who made what changes and when * Revert back at any time * Local & remote repos ## CONCEPTS OF GIT * Keeps track of code history * Takes "snapshots" of your files * You decide when to take a snapshot by making a "commit" * You can visit any snapshot at any time * You can stage files before committing ### Difference Between Git & GitHub ## GIT Installation * Linux(Debian) $sudo apt-get install git * Linux(Fedora) $sudo yum install git * Download for Mac * Download for Windows ### Installation Process Steps: 1. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190359823-e421b976-515a-4565-990d-2f2e4e62977a.png"/> 2. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360530-a7bfa681-47f4-4859-9b8a-4120e0cad348.png"/> 3. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360760-30db7768-19e0-4848-a99d-a6c955e041e2.png"/> 4. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360896-473e1e54-f083-4b5c-a5f0-539f70469142.png"/> 5. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361144-bc670a2b-b776-4867-9785-7b509d416fbb.png"/> 6. And then Continue Next > Next > Next > <b>Install</b> 7. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361548-4b700d85-c7d5-4d26-90e7-e5cc3ce24311.png"/> ### After Installation We need To configure git using git bash 1. git config --global user.name 'YourName' 2. git config --global user.email 'YourEmail' ___ ## Git Commands ___ ### Getting & Creating Projects ### Basic Snapshotting ### Branching & Merging ### Sharing & Updating Projects ### Inspection & Comparison

git

Lesson Topic

## 🎥 Video --- ## Pre-lecture quiz --- Provide a brief overview of what students will learn in this lesson. --- ### Introduction Provide a short introduction describing what will be covered in this lesson. --- ### Prerequisite List the concepts or topics students should already be familiar with before starting this lesson. --- ### Preparation List any setup steps or tools required before starting the lesson. --- ### Content Step through the lesson content in structured sections. --- ## Topic 1 ### Task: Work together to progressively enhance your codebase to build the project with shared code: ✅ Knowledge Check Use this moment to stretch students' knowledge with open-ended questions. ## Topic 2 ## Topic 3 🚀 Challenge Add a collaborative challenge for students to enhance the project. Optional: Add a screenshot of the completed lesson's UI if appropriate. ## Post-lecture quiz Add a quiz link here after completing the lesson. ## Review & Self Study Assignment Due [MM/YY]: Assignment Name

web,development

Getting Started

## Getting Started First, run the development server: Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file. This project uses next/font to automatically optimize and load Geist, a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - Next.js Documentation - learn about Next.js features and API. - Learn Next.js - an interactive Next.js tutorial. You can check out the Next.js GitHub repository - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js. Check out our Next.js deployment documentation for more details.

web,development

Back to Home