Initial commit

.devcontainer/devcontainer.json

@@ -0,0 +1,15 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {}
+  },
+    "customizations": {
+    "vscode": {
+      "extensions": [        
+        "GitHub.copilot",
+        "ms-vscode.azure-account",
+        "ms-azuretools.vscode-azurestaticwebapps"
+      ]
+    }
+  }
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -0,0 +1,12 @@
+# Description
+
+Please include a summary of the changes and the related issue. Please also include relevant motivation and context.
+
+Fixes # (issue)
+
+## Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update

.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml

@@ -0,0 +1,38 @@
+name: Azure Static Web Apps CI/CD
+
+on: workflow_dispatch
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_RIVER_0DEBB7803 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/quiz-app" # App source code path
+          api_location: "" # Api source code path - optional
+          output_location: "dist" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_RIVER_0DEBB7803 }}
+          action: "close"

.github/workflows/links.yml

@@ -0,0 +1,29 @@
+name: Links
+
+on:
+  repository_dispatch:
+  workflow_dispatch:
+  schedule:
+    - cron: "00 18 * * 0"
+
+jobs:
+  linkChecker:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write # required for peter-evans/create-issue-from-file
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Link Checker
+        id: lychee
+        uses: lycheeverse/lychee-action@v2
+        with:
+          fail: false
+
+      - name: Create Issue From File
+        if: steps.lychee.outputs.exit_code != 0
+        uses: peter-evans/create-issue-from-file@v5
+        with:
+          title: Link Checker Report
+          content-filepath: ./lychee/out.md
+          labels: report, automated issue

.github/workflows/lock.yml

@@ -0,0 +1,13 @@
+name: Lock closed issue
+
+on: 
+  issues:
+    types: [closed]
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: OSDKDev/lock-issues@v1.1
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/stale.yml

@@ -0,0 +1,28 @@
+# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
+#
+# You can adjust the behavior by modifying this file.
+# For more information, see:
+# https://github.com/actions/stale
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: '35 8 * * *'
+
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+    - uses: actions/stale@v6
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue has not seen any action for a while! Closing for now, but it can be reopened at a later date.'
+        stale-pr-message: 'This PR has not seen any action for a while! Closing for now, but it can be reopened at a later date.'
+        stale-issue-label: 'no-issue-activity'
+        stale-pr-label: 'no-pr-activity'
+        days-before-close: -1

.gitignore

@@ -0,0 +1,357 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto-generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Visual Studio Code cache/options directory
+.vscode/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+dist/
+
+# Visual Studio 2017 auto-generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Mac-specific
+.DS_Store

1-getting-started-lessons/1-intro-to-programming-languages/README.md

@@ -0,0 +1,203 @@
+# Introduction to Programming Languages and Tools of the Trade
+
+This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer.
+
+![Intro Programming](../../sketchnotes/webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
+
+## Introduction
+
+In this lesson, we'll cover:
+
+- What is programming?
+- Types of programming languages
+- Basic elements of a program
+- Useful software and tooling for the professional developer
+
+> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## What is Programming?
+
+Programming (also known as coding) is the process of writing instructions for a device such as a computer or mobile device. We write these instructions with a programming language, which is then interpreted by the device. These sets of instructions may be referred to by various names, but *program*, *computer program*, *application (app)*, and *executable* are a few popular names.
+
+A *program* can be anything that is written with code; websites, games, and phone apps are programs. While it's possible to create a program without writing code, the underlying logic is interpreted by the device and that logic was most likely written with code. A program that is *running* or *executing* code is carrying out instructions. The device that you're reading this lesson with is running a program to print it to your screen.
+
+✅ Do a little research: who is considered to have been the world's first computer programmer?
+
+## Programming Languages
+
+Programming languages enable developers to write instructions for a device. Devices can only understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are the vehicle for communication between humans and computers.
+
+Programming languages come in different formats and may serve different purposes. For example, JavaScript is primarily used for web applications, while Bash is primarily used for operating systems.
+
+*Low level languages* typically require fewer steps than *high level languages* for a device to interpret instructions. However, what makes high level languages popular is their readability and support. JavaScript is considered a high level language.
+
+The following code illustrates the difference between a high level language with JavaScript and a low level language with ARM assembly code.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Believe it or not, *they're both doing the same thing*: printing a Fibonacci sequence up to 10.
+
+✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1. The first 10 numbers following the Fibonacci sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21 and 34.
+
+## Elements of a Program
+
+A single instruction in a program is called a *statement* and will usually have a character or line spacing that marks where the instruction ends, or *terminates*. How a program terminates varies with each language.
+
+Statements within a program may rely on data provided by a user or elsewhere to carry out instructions. Data can change how a program behaves, so programming languages come with a way to temporarily store data so that it can be used later. These are called *variables*. Variables are statements that instruct a device to save data in its memory. Variables in programs are similar to variables in algebra, where they have a unique name and their value may change over time.
+
+There's a chance that some statements will not be executed by a device. This is usually by design when written by the developer or by accident when an unexpected error occurs. This type of control over an application makes it more robust and maintainable. Typically, these changes in control happen when certain conditions are met. A common statement used in modern programming to control how a program runs is the `if..else` statement.
+
+✅ You'll learn more about this type of statement in subsequent lessons.
+
+## Tools of the Trade
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 Click the image above for a video about tooling
+
+In this section, you'll learn about some software that you may find to be very useful as you start your professional development journey.
+
+A **development environment** is a unique set of tools and features that a developer uses often when writing software. Some of these tools have been customized for a developer's specific needs, and may change over time if that developer changes priorities in work, personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them.
+
+### Editors
+
+One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you run your code.
+
+Developers rely on editors for a few additional reasons:
+
+- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages.
+- *Syntax highlighting* adds colors and text formatting to code, making it easier to read. Most editors allow customized syntax highlighting.
+- *Extensions and Integrations* are specialized tools for developers, by developers. These tools weren't built into the base editor. For example, many developers document their code to explain how it works. They may install a spell check extension to help find typos within the documentation. Most extensions are intended for use within a specific editor, and most editors come with a way to search for available extensions.
+- *Customization* enables developers to create a unique development environment to suit their needs. Most editors are extremely customizable and may also allow developers to create custom extensions.
+
+#### Popular Editors and Web Development Extensions
+
+- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+  
+- [Sublimetext](https://www.sublimetext.com/)
+  - [emmet](https://emmet.io/)
+  - [SublimeLinter](http://www.sublimelinter.com/en/stable/)
+
+### Browsers
+
+Another crucial tool is the browser. Web developers rely on the browser to see how their code runs on the web. It's also used to display the visual elements of a web page that are written in the editor, like HTML.
+
+Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to help developers collect and capture important information about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information.
+
+#### Popular Browsers and DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Command Line Tools
+
+Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Writing code requires a significant amount of typing and some developers prefer to not disrupt their flow on the keyboard. They will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save a custom configuration, change it later, and import it to other development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two.
+
+### Popular Command Line Options
+
+Options for the command line will differ based on the operating system you use.
+
+*💻 = comes preinstalled on the operating system.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Popular Command Line Tools
+
+- [Git](https://git-scm.com/) (💻 on most operating systems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers often rely on documentation to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works.
+
+#### Popular Documentation on Web Development
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, the publishers of the [Firefox](https://www.mozilla.org/firefox/) browser
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), from Google, publishers of [Chrome](https://www.google.com/chrome/)
+- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), for [Microsoft Edge](https://www.microsoft.com/edge)
+- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
+
+✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment.
+
+---
+
+## 🚀 Challenge
+
+Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Review & Self Study
+
+Study a bit on the different languages available to the programmer. Try to write a line in one language, and then rewrite it in two others. What did you learn?
+
+## Assignment
+
+[Reading the Docs](assignment.md)

1-getting-started-lessons/1-intro-to-programming-languages/assignment.md

@@ -0,0 +1,11 @@
+# Reading the Docs
+
+## Instructions
+
+There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs.
+
+## Rubric
+
+Exemplary | Adequate | Needs Improvement
+--- | --- | -- |
+|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md

@@ -0,0 +1,194 @@
+# Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία του Εμπορίου
+
+Αυτό το μάθημα καλύπτει τα βασικά των γλωσσών προγραμματισμού. Τα θέματα που καλύπτονται εδώ ισχύουν για τις περισσότερες σύγχρονες γλώσσες προγραμματισμού σήμερα. Στην ενότητα 'Εργαλεία του Εμπορίου', θα μάθετε για χρήσιμο λογισμικό που σας βοηθά ως προγραμματιστές.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=gr)
+
+## Εισαγωγή
+
+Σε αυτό το μάθημα, θα καλύψουμε:
+
+- Τι είναι ο προγραμματισμός;
+- Τύποι γλωσσών προγραμματισμού
+- Βασικά στοιχεία ενός προγράμματος
+- Χρήσιμο λογισμικό και εργαλεία για τους επαγγελματίες προγραμματιστές
+
+## Τι είναι ο προγραμματισμός;
+
+Προγραμματισμός(επίσης γνωστό ως κώδικας) είναι η διαδικασία συγγραφής οδηγιών σε μία συσκευή, όπως ένας υπολογιστής ή μία φορητή συσκευή. Γράφουμε αυτές τις οδηγίες με μία γλώσσα προγραμματισμού, η οποία ερμηνεύεται από τη συσκευή. Αυτά τα σύνολα οδηγιών μπορούν να αναφέρονται με διάφορα ονόματα, *πρόγραμμα*, *πρόγραμμα υπολογιστή*, *εφαρμογή* και *εκτελέσιμο* είναι μερικά δημοφιλή ονόματα.
+
+Ένα *πρόγραμμα* μπορεί να είναι οτιδήποτε γράφεται με κώδικα, ιστοσελίδες, παιχνίδια και εφαρμογές τηλεφώνου είναι προγράμματα. Ενώ είναι δυνατό να δημιουργηθεί ένα πρόγραμμα χωρίς να γραφτεί κώδικας, η υποκείμενη λογική θα βρίσκεται στη συσκευή και η λογική αυτή πιθανότατα γράφτηκε με κώδικα. Ένα πρόγραμμα που *τρέχει* ή *εκτελεί κώδικα* εκτελεί οδηγίες. Η συσκευή με την οποία διαβάζετε αυτό το μάθημα εκτελεί ένα πρόγραμμα για να το εκτυπώσει στην οθόνη σας.
+
+✅ Κάντε λίγη έρευνα: ποιος θεωρείται πως ήταν ο πρώτος προγραμματιστής στον κόσμο;
+
+## Γλώσσες Προγραμματισμού
+
+Οι γλώσσες προγραμματισμού εξυπηρετούν έναν κύριο σκοπό: για τους προγραμματιστές να δημιουργήσουν οδηγίες για αποστολή σε μια συσκευή. Οι συσκευές μπορούν να καταλάβουν μόνο δυαδικά (0 και 1) και για τους *περισσότερους* προγραμματιστές αυτός δεν είναι πολύ αποτελεσματικός τρόπος επικοινωνίας. Οι γλώσσες προγραμματισμού είναι ένα μέσο επικοινωνίας μεταξύ ανθρώπων και υπολογιστών.
+
+Οι γλώσσες προγραμματισμού διατίθενται σε διαφορετικές μορφές και ενδέχεται να εξυπηρετούν διαφορετικούς σκοπούς. Για παράδειγμα, η JavaScript χρησιμοποιείται κυρίως για εφαρμογές ιστού, ενώ το Bash χρησιμοποιείται κυρίως για λειτουργικά συστήματα.
+
+
+Οι *γλώσσες χαμηλού επιπέδου* συνήθως απαιτούν λιγότερα βήματα από *γλώσσες υψηλού επιπέδου* για να ερμηνευτούν από μία συσκευή. Ωστόσο, αυτό που κάνει τις γλώσσες υψηλού επιπέδου δημοφιλείς είναι η ευκολία στην ανάγνωση και η υποστήριξή τους. Η JavaScript θεωρείται γλώσσα υψηλού επιπέδου.
+
+Ο παρακάτω κώδικας δείχνει τη διαφορά μεταξύ γλώσσας υψηλού επιπέδου σε JavaScript και γλώσσας χαμηλού επιπέδου σε κώδικα ARM assembly.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Είτε το πιστεύετε είτε όχι, *και οι δύο κάνουν το ίδιο πράγμα*: τυπώνουν μία ακολουθία Fibonacci μέχρι το 10.
+
+✅ Μια ακολουθία Fibonacci [ορίζεται] (https://en.wikipedia.org/wiki/Fibonacci_number) ως ένα σύνολο αριθμών έτσι ώστε κάθε αριθμός να είναι το άθροισμα των δύο προηγούμενων, ξεκινώντας από το 0 και το 1.
+
+## Στοιχεία ενός προγράμματος
+
+Μια εντολή σε ένα πρόγραμμα ονομάζεται *δήλωση* και συνήθως έχει ένα χαρακτήρα ή διάστιχο που δείχνει που τελείωνει η εντολή αυτή ή όπως αλλίως λέμε που *τερματίζει* η εντολή. Ο τρόπος που τερματίζει ένα πρόγραμμα διαφέρει ανάλογα με τη γλώσσα.
+
+Τα περισσότερα προγράμματα βασίζονται στη χρήση δεδομένων είτε από έναν χρήστη είτε από κάπου αλλού, όπου οι δηλώσεις μπορεί να βασίζονται σε δεδομένα για την εκτέλεση οδηγιών. Τα δεδομένα μπορούν να αλλάξουν τον τρόπο συμπεριφοράς ενός προγράμματος, οπότε οι γλώσσες προγραμματισμού μπορούν να αποθηκεύουν προσωρινά τα δεδομένα και να τα χρησιμοποιούν αργότερα. Αυτά τα δεδομένα ονομάζονται *μεταβλητές*. Οι μεταβλητές είναι δηλώσεις που δίνουν εντολή σε μια συσκευή να αποθηκεύει δεδομένα στη μνήμη της. Οι μεταβλητές στα προγράμματα είναι παρόμοιες με αυτές στην άλγεβρα, όπου έχουν ένα μοναδικό όνομα και η τιμή τους μπορεί να αλλάξει με την πάροδο του χρόνου.
+
+Υπάρχει πιθανότητα ορισμένες δηλώσεις να μην εκτελεστούν από μια συσκευή. Αυτό συμβαίνει συνήθως είτε λόγω του σχεδιασμού που έχει κάνει ο προγραμματιστής είτε κατά λάθος όταν συμβαίνει ένα απροσδόκητο σφάλμα. Αυτός ο τύπος ελέγχου μιας εφαρμογής το καθιστά πιο στιβαρό και διατηρήσιμο. Συνήθως αυτές οι αλλαγές στον έλεγχο συμβαίνουν όταν πρέπει να ληφθούν κάποιες αποφάσεις. Μια κοινή δήλωση στις σύγχρονες γλώσσες προγραμματισμού για τον έλεγχο του τρόπου εκτέλεσης ενός προγράμματος είναι η δήλωση «if..else».
+
+✅ Θα μάθετε περισσότερα για αυτού του είδους τις δηλώσεις σε επόμενα μαθήματα.
+
+## Εργαλεία του Εμπορίου
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+Σε αυτήν την ενότητα, θα μάθετε για λογισμικό που μπορεί να σας φανεί πολύ χρήσιμο καθώς ξεκινάτε το επαγγελματικό σας ταξίδι.
+
+Ένα **περιβάλλον ανάπτυξης** είναι ένα μοναδικό σύνολο εργαλείων και λειτουργιών που ένας προγραμματιστής θα χρησιμοποιεί συχνά όταν φτιάχνει λογισμικό. Ορισμένα από αυτά τα εργαλεία έχουν προσαρμοστεί για συγκεκριμένες ανάγκες του προγραμματιστή και ενδέχεται να αλλάξουν με την πάροδο του χρόνου, εάν ένας προγραμματιστής αλλάξει προτεραιότητες στη δουλειά του ή στα προσωπικά του project ή όταν χρησιμοποιήσει διαφορετική γλώσσα προγραμματισμού. Τα περιβάλλοντα ανάπτυξης είναι τόσο μοναδικά όσο οι προγραμματιστές που τα χρησιμοποιούν.
+
+### Editors(Συντάκτες)
+
+Ένα από τα πιο κρίσιμα εργαλεία για την ανάπτυξη λογισμικού είναι ο συντάκτης. Οι συντάκτες είναι εκεί όπου γράφετε τον κωδικό σας και μερικές φορές εκεί όπου θα εκτελέσετε τον κωδικό σας.
+
+Οι προγραμματιστές χρησιμοποιούν τους συντάκτες για μερικούς επιπλέον λόγους:
+
+- *Εντοπισμός σφαλμάτων* Ανακάλυψη σφαλμάτων διαβάζοντας τον κώδικα, γραμμή προς γραμμή. Ορισμένοι συντάκτες έχουν δυνατότητες εντοπισμού σφαλμάτων ή μπορούν να προσαρμοστούν και να προστεθούν για συγκεκριμένες γλώσσες προγραμματισμού.  
+- *Επισήμανση σύνταξης* Προσθέτει χρώματα και μορφοποιεί το κείμενο του κώδικα, διευκολύνει την ανάγνωση. Οι περισσότεροι συντάκτες επιτρέπουν προσαρμοσμένη επισήμανση σύνταξης.
+- *Επεκτάσεις και ενσωματώσεις* Προσθήκες που είναι εξειδικευμένες για προγραμματιστές, από προγραμματιστές, για πρόσβαση σε πρόσθετα εργαλεία που δεν είναι ενσωματωμένα στον βασικό συντάκτη. Για παράδειγμα, πολλοί προγραμματιστές χρειάζονται επίσης έναν τρόπο να τεκμηριώσουν τον κώδικά τους και να εξηγήσουν πώς λειτουργεί και θα εγκαταστήσουν μια επέκταση ορθογραφικού ελέγχου για να ελέγξουν για τυπογραφικά λάθη. Οι περισσότερες από αυτές τις προσθήκες προορίζονται για χρήση σε ένα συγκεκριμένο συντάκτη και οι περισσότεροι συντάκτες έρχονται με έναν τρόπο αναζήτησης για διαθέσιμες επεκτάσεις.
+
+#### Δημοφιλείς Editors και Web Development Extensions(Επεκτάσεις Ανάπτυξης Ιστού)
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Browsers(Πρoγράμματα Περιήγησης)
+
+Ένα άλλο σημαντικό εργαλείο είναι το πρόγραμμα περιήγησης. Οι προγραμματιστές ιστού βασίζονται στο πρόγραμμα περιήγησης για να παρατηρήσουν πώς λειτουργεί ο κώδικάς τους στον ιστό, χρησιμοποιείται επίσης για την προβολή οπτικών στοιχείων μιας ιστοσελίδας που είναι γραμμένα στον συντάκτη, όπως HTML.
+
+Πολλά προγράμματα περιήγησης διαθέτουν *εργαλεία προγραμματιστών* (DevTools) που περιέχουν ένα σύνολο χρήσιμων λειτουργιών και πληροφοριών που βοηθούν τους προγραμματιστές να συλλέγουν και να συλλαμβάνουν σημαντικές πληροφορίες σχετικά με την εφαρμογή τους. Για παράδειγμα: Εάν μια ιστοσελίδα έχει σφάλματα, μερικές φορές είναι χρήσιμο να γνωρίζετε πότε συνέβησαν. Τα DevTools σε ένα πρόγραμμα περιήγησης μπορούν να ρυθμιστούν έτσι ώστε να συλλαμβάνουν αυτές τις πληροφορίες.
+
+#### Δημοφιλείς Browsers και DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Command Line Tools(Εργαλεία Γραμμής Εντολών)
+
+Ορισμένοι προγραμματιστές προτιμούν μια λιγότερο γραφική προβολή για τις καθημερινές τους εργασίες και βασίζονται στη γραμμή εντολών για να το επιτύχουν. Η ανάπτυξη κώδικα απαιτεί σημαντικό αριθμό δακτυλογράφησης και ορισμένοι προγραμματιστές προτιμούν να μην διακόπτουν τη ροή τους στο πληκτρολόγιο και γι'αυτό χρησιμοποιούν συντομεύσεις πληκτρολογίου για εναλλαγή μεταξύ παραθύρων επιφάνειας εργασίας, εργασία σε διαφορετικά αρχεία και χρήση εργαλείων. Οι περισσότερες εργασίες μπορούν να γίνουν με το ποντίκι, αλλά ένα πλεονέκτημα της χρήσης της γραμμής εντολών είναι ότι πολλά μπορούν να γίνουν με εργαλεία γραμμής εντολών χωρίς την ανάγκη εναλλαγής μεταξύ του ποντικιού και του πληκτρολογίου. Ένα άλλο πλεονέκτημα της γραμμής εντολών είναι ότι είναι διαμορφώσιμη και μπορείτε να αποθηκεύσετε την προσαρμοσμένη διαμόρφωση, να την αλλάξετε αργότερα και επίσης να την εισαγάγετε σε νέα μηχανήματα ανάπτυξης. Επειδή τα περιβάλλοντα ανάπτυξης είναι τόσο μοναδικά για κάθε προγραμματιστή, κάποιοι θα αποφύγουν τη χρήση της γραμμής εντολών, κάποιοι θα βασιστούν εξ ολοκλήρου σε αυτή και κάποιοι προτιμούν έναν συνδυασμό των δύο.
+
+### Δημοφιλείς επιλογές γραμμής εντολών
+
+Οι επιλογές για τη γραμμή εντολών θα διαφέρουν ανάλογα με το λειτουργικό σύστημα που χρησιμοποιείτε.
+
+*💻 = έρχεται προεγκατεστημένο στο λειτουργικό σύστημα*.
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (επίσης γνωστό ως CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
+
+#### Δημοφιλή εργαλεία γραμμής εντολών
+
+- [Git](https://git-scm.com/) (💻 στα περισσότερα λειτουργικά συστήματα)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation(Τεκμηρίωση)
+
+Όταν ένας προγραμματιστής θέλει να μάθει κάτι καινούργιο, πιθανότατα θα στραφεί στο documentation(τεκμηρίωση) για να μάθει πώς να το χρησιμοποιεί. Οι προγραμματιστές βασίζονται συχνά στo documentation για να μάθουν πώς να χρησιμοποιούν σωστά τα εργαλεία και τις γλώσσες, καθώς και για να αποκτήσουν βαθύτερη γνώση του πώς λειτουργεί.
+
+#### Δημοφιλή documentation για την ανάπτυξη Ιστού(Web Development)
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), από τη Μοζίλα, εκδότες του [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), από την Google, εκδότες του [Chrome](https://www.google.com/chrome/)
+- [Τα έγγραφα προγραμματιστών της Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), Για τον [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Κάντε λίγη έρευνα: Τώρα που γνωρίζετε τα βασικά για το περιβάλλον ενός προγραμματιστή ιστού(Web Developer), συγκρίνετέ το και βρείτε τις διαφορές με το περιβάλλον ενός σχεδιαστή ιστού(Web Designer).
+
+---
+
+## 🚀 Challenge
+
+Συγκρίνετε μερικές γλώσσες προγραμματισμού. Ποια είναι τα μοναδικά χαρακτηριστικά που έχει η JavaScript και δεν έχει η Java και το αντίστροφο; Τι γίνεται με τη COBOL εναντίον της Go;
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=gr)
+
+## Review & Self Study 
+
+Μελετήστε λίγο τις διαφορετικές γλώσσες που είναι διαθέσιμες στον προγραμματιστή. Προσπαθήστε να γράψετε μια γραμμή σε μία γλώσσα και μετά να την ξεναγράψετε σε άλλες δύο. Τι μάθατε?
+
+## Άσκηση 
+
+[Βλέπε έγγραφο](assignment.gr.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md

@@ -0,0 +1,195 @@
+# Introducción a lenguajes de programación y herramientas del oficio
+
+Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que aprenderemos aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderás sobre software y herramientas que te ayudarán como desarrollador.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Cuestionario Previo a la Clase
+[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+
+### Introducción
+
+En esta lección, cubriremos:
+
+- ¿Qué es la programación?
+- Tipos de lenguajes de programación
+- Elementos básicos de un programa
+- Software y herramientas para desarrolladores profesionales
+
+## ¿Qué es la programación?
+
+La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un celular. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Este conjuntos de instrucciones pueden tener varios nombres, como *programa*, *programa de computadora*, *aplicación (app)* o *ejecutable* son algunos de los más populares.
+
+Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los videojuegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código*, está ejecutando una serie de instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla.
+
+✅ Investigue un poco: ¿quién se considera el primer programador(a) de computadoras del mundo?
+
+## Lenguajes de programación
+
+Los lenguajes de programación tienen un propósito principal: que los desarrolladores creen instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender código binario (1 y 0), y para *la mayoría* de los desarrolladores, esa no es una forma muy amigable de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre los humanos y las computadoras.
+
+Los lenguajes de programación vienen en diferentes formatos y tienen diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos.
+
+*Los lenguajes de bajo nivel* normalmente requieren menos pasos que los *lenguajes de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript es considerado un lenguaje de alto nivel.
+
+El siguiente código ilustra la diferencia entre un lenguaje de alto nivel con JavaScript y un lenguaje de bajo nivel con código Assembly ARM.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Lo creas o no, *ambos hacen lo mismo*: imprimir una secuencia de Fibonacci hasta 10.
+
+✅ Una secuencia de Fibonacci se [define](https://en.wikipedia.org/wiki/Fibonacci_number) como un conjunto de números de modo que cada número es la suma de los dos precedentes, comenzando por 0 y 1.
+
+## Elementos de un programa
+
+Una sola instrucción en un programa se llama *instrucción* y generalmente tendrá un carácter o un espacio entre líneas que marca dónde termina esta. La forma en que termina un programa varía con cada idioma.
+
+La mayoría de los programas se basan en el uso de datos de un usuario o de otros lugares, donde las declaraciones pueden basarse en datos para llevar a cabo instrucciones. Los datos pueden cambiar la forma en que se comporta un programa, por lo que los lenguajes de programación vienen con una forma de almacenar temporalmente datos que se pueden usar más adelante. Estos datos se denominan *variables*. Las variables son declaraciones que indican a un dispositivo que guarde datos en su memoria. Las variables en los programas son similares a las del álgebra, donde tienen un nombre único y su valor puede cambiar con el tiempo.
+
+Existe la posibilidad de que un dispositivo no ejecute algunas declaraciones. Esto suele ser por diseño cuando lo escribe el desarrollador o por accidente cuando ocurre un error inesperado. Este tipo de control de una aplicación la hace más robusta y fácil de mantener. Por lo general, estos cambios en el control ocurren cuando se cumplen ciertas decisiones. Una declaración común en los lenguajes de programación modernos para controlar cómo se ejecuta un programa es la declaración `if..else`.
+
+✅ Aprenderás más sobre este tipo de afirmaciones en lecciones posteriores.
+
+## Herramientas del oficio
+
+[![Herramientas](https://img.youtube.com/vi/ysMrHssmhl0/0.jpg)](https://youtube.com/watch?v=ysMrHssmhl0 "Herramientas")
+
+En esta sección, aprenderás sobre software que puede ayudarte comenzar tu viaje de desarrollo profesional.
+
+Un **entorno de desarrollo** es un conjunto único de herramientas y características que un desarrollador utilizará a menudo para escribir software. Algunas de estas herramientas se han personalizado para las necesidades específicas de un desarrollador y pueden cambiar con el tiempo si un desarrollador cambia las prioridades en el trabajo o proyectos personales, o cuando usa un lenguaje de programación diferente. Los entornos de desarrollo son tan únicos como los desarrolladores que los utilizan.
+
+### Editores
+
+Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribes tu código y, a veces, donde lo ejecutarás.
+
+Los desarrolladores confían en los editores por algunas razones adicionales:
+
+- *Depuración* - Descubrimiento de errores al recorrer el código, línea por línea. Algunos editores tienen capacidades de depuración o se pueden personalizar y agregar para lenguajes de programación específicos.
+- *Resaltado de sintaxis* - Agrega colores y formato de texto al código, lo hace más fácil de leer. La mayoría de los editores permiten el resaltado de sintaxis personalizado.
+- *Extensiones e integraciones del navegador*  -  Adiciones especializadas para desarrolladores, por desarrolladores, para acceder a herramientas adicionales que no están integradas en el editor base. Por ejemplo, muchos desarrolladores también necesitan una forma de documentar su código y explicar cómo funciona, e instalarán una extensión de revisión ortográfica para verificar si hay errores. La mayoría de estas adiciones están diseñadas para usarse dentro de un editor específico, y la mayoría de los editores vienen con una forma de buscar extensiones disponibles.
+- *Personalización*  - La mayoría de los editores son extremadamente personalizables, y cada desarrollador tendrá su propio entorno de desarrollo único que se adapta a sus necesidades. Muchos también permiten a los desarrolladores crear su propia extensión.
+
+
+#### Editores populares y extensiones de desarrollo web
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Formateador de código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Editor de codigo Átom](https://atom.io/)
+  - [Code Spell Checker para Atom](https://atom.io/packages/spell-check)
+  - [Teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+* Teletype: Es una extensión que nos permite colaborar en un mismo espacio de trabajo entre muchas personas.
+
+### Navegadores
+
+Otra herramienta esencial es el navegador. Los desarrolladores Web confían en el navegador para observar cómo se ejecuta su código. También se usa para ver elementos visuales de una página web que están escritos en el editor, como HTML.
+
+Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que contienen un conjunto de características e información útil para ayudar a los desarrolladores a recopilar y capturar información importante sobre su aplicación. Por ejemplo: si una página web tiene errores, a veces es útil saber cuándo ocurrieron. Se puede configurar DevTools en un navegador para capturar esta información.
+
+#### Navegadores y herramientas de desarrollo populares
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Herramientas de línea de comandos (CLI)
+
+Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos **(CLI)** para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo de trabajo con el teclado es por eso que usan atajos (shortcuts) para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas sin la necesidad de cambiar entre el mouse y el teclado. Otro beneficio de esta es que son configurables, puedes guardar tu configuración personalizada, asi como también cambiarla más tarde o importarla a nueva máquina. Debido a que los entornos son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo, así como también otros pueden preferir una combinación de ambos.
+
+### Opciones de línea de comandos (CLI) populares
+
+Las opciones para la línea de comando varían según el sistema operativo que utilices.
+
+💻 = *viene preinstalado en el sistema operativo.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [Mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Línea de comandos (CLI) Populares
+
+- [Git](https://git-scm.com/) (💻 en la mayoría de los sistemas operativos)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentación
+
+Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurras a la documentación para aprender a usarla. Los desarrolladores a menudo confían en ésta para guiarlos a través de cómo usar ciertas herramientas así como también para entender como funcionan los lenguajes.
+
+#### Documentación popular sobre desarrollo de web
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, editores de [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), de Google, editores de [Chrome](https://www.google.com/chrome/)
+- [Documentos para desarrolladores propios de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Investiga un poco: ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo y contrasta con el entorno de un diseñador web.
+
+---
+
+## 🚀 Reto
+
+Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go?
+
+## [Cuestionario Posterior a la Clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Revisión y Autoestudio
+
+Estudia un poco sobre los diferentes lenguajes disponibles para programar. Intenta escribir una línea en un lenguaje y luego vuelve a hacerlo en otros dos. ¿Qué aprendiste?
+
+## [Tarea](./assignment.es.md)
+

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md

@@ -0,0 +1,198 @@
+# Panimula sa Programming Language at Tools of the Trade
+
+Sinasaklaw ng araling ito ang mga pangunahing kaalaman sa mga programming language. Ang mga paksang sakop dito ay nalalapat sa karamihan ng mga modernong programming language ngayon. Sa seksyong 'Tools of the Trade', matututunan mo ang tungkol sa kapaki-pakinabang na software na tumutulong sa iyo bilang isang developer.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pagsusulit bago ang lektura
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+
+## Panimula
+
+Sa araling ito, tatalakayin natin:
+
+- Ano ang programming?
+- Mga uri ng programming language
+- Mga pangunahing elemento ng isang programa
+- Kapaki-pakinabang na software at tooling para sa propesyonal na developer
+
+> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Ano ang Programming?
+
+Ang programming (kilala rin bilang coding) ay ang proseso ng pagsulat ng mga tagubilin sa isang device, gaya ng computer o mobile device. Isinulat namin ang mga tagubiling ito gamit ang isang programming language, na pagkatapos ay binibigyang-kahulugan ng device. Ang mga hanay ng mga tagubiling ito ay maaaring tukuyin ng iba't ibang pangalan, ngunit ang *program*, *computer program*, *application (app)*, at *executable* ay ilang sikat na pangalan.
+
+Ang *program* ay maaaring maging anumang nakasulat gamit ang code; Ang mga website, laro, at app ng telepono ay mga programa. Bagama't posibleng gumawa ng program nang walang pagsusulat ng code, ang pinagbabatayan na lohika ay binibigyang-kahulugan sa device at ang logic na iyon ay malamang na nakasulat gamit ang code. Ang isang program na *tumatakbo* o *nagpapatupad ng code* ay nagsasagawa ng mga tagubilin. Ang device na kasalukuyang binabasa mo ang araling ito ay nagpapatakbo ng isang programa upang i-print ito sa iyong screen.
+
+✅ Gumawa ng kaunting pananaliksik: sino ang itinuturing na unang computer programmer sa mundo?
+
+## Mga Wika sa Programming
+
+Ang mga programming language ay may pangunahing layunin: para sa mga developer na bumuo ng mga tagubilin para ipadala sa isang device. Ang mga device lang ang makakaintindi ng binary (1s at 0s), at para sa *karamihan* na mga developer, hindi iyon isang napakahusay na paraan para makipag-usap. Ang mga programming language ay isang sasakyan para sa komunikasyon sa pagitan ng mga tao at mga computer.
+
+Ang mga programming language ay may iba't ibang format at maaaring magsilbi ng iba't ibang layunin. Halimbawa, ang JavaScript ay pangunahing ginagamit para sa mga web application, habang ang Bash ay pangunahing ginagamit para sa mga operating system.
+
+*Mababang antas ng mga wika* ay karaniwang nangangailangan ng mas kaunting mga hakbang kaysa sa *mataas na antas ng mga wika* para sa isang device upang bigyang-kahulugan ang mga tagubilin. Gayunpaman, ang nagpapasikat sa mga mataas na antas ng wika ay ang kanilang pagiging madaling mabasa at suporta. Ang JavaScript ay itinuturing na isang mataas na antas ng wika.
+
+Ang sumusunod na code ay naglalarawan ng pagkakaiba sa pagitan ng mataas na antas ng wika na may JavaScript at mababang antas ng wika na may ARM assembly code.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Maniwala ka man o hindi, *pareho silang gumagawa ng parehong bagay*: pag-print ng Fibonacci sequence hanggang 10.
+
+✅ Ang Fibonacci sequence ay [tinukoy](https://en.wikipedia.org/wiki/Fibonacci_number) bilang isang hanay ng mga numero na ang bawat numero ay ang kabuuan ng dalawang nauna, simula sa 0 at 1.
+
+## Mga elemento ng isang programa
+
+Ang nag-iisang pagtuturo sa isang programa ay tinatawag na *pahayag* at kadalasang magkakaroon ng character o line spacing na nagmamarka kung saan nagtatapos ang pagtuturo, o *nagtatapos*. Nag-iiba-iba ang paraan ng pagwawakas ng isang programa sa bawat wika.
+
+Karamihan sa mga program ay umaasa sa paggamit ng data mula sa isang user o sa ibang lugar, kung saan ang mga pahayag ay maaaring umasa sa data upang magsagawa ng mga tagubilin. Maaaring baguhin ng data kung paano kumikilos ang isang program, kaya ang mga programming language ay may paraan upang pansamantalang mag-imbak ng data na magagamit sa ibang pagkakataon. Ang data na ito ay tinatawag na *mga variable*. Ang mga variable ay mga pahayag na nagtuturo sa isang device na mag-save ng data sa memorya nito. Ang mga variable sa mga programa ay katulad ng mga nasa algebra, kung saan mayroon silang natatanging pangalan at ang kanilang halaga ay maaaring magbago sa paglipas ng panahon.
+
+May posibilidad na ang ilang pahayag ay hindi isasagawa ng isang device. Ito ay karaniwang sa pamamagitan ng disenyo kapag isinulat ng developer o hindi sinasadya kapag may nangyaring hindi inaasahang error. Ang ganitong uri ng kontrol ng isang application ay ginagawa itong mas matatag at mapanatili. Karaniwang nangyayari ang mga pagbabagong ito sa kontrol kapag natugunan ang ilang partikular na desisyon. Ang isang karaniwang pahayag sa mga modernong programming language upang kontrolin kung paano pinapatakbo ang isang programa ay ang `if..else` na pahayag.
+
+✅ Matututo ka pa tungkol sa ganitong uri ng pahayag sa mga susunod na aralin
+
+## Mga Tool ng Kalakalan
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa tooling
+
+Sa seksyong ito, matututunan mo ang tungkol sa ilang software na maaari mong makitang lubhang kapaki-pakinabang habang sinisimulan mo ang iyong paglalakbay sa propesyonal na pag-unlad.
+
+Ang **development environment** ay isang natatanging hanay ng mga tool at feature na madalas gamitin ng developer kapag nagsusulat ng software. Ang ilan sa mga tool na ito ay na-customize para sa isang partikular na pangangailangan ng developer, at maaaring magbago sa paglipas ng panahon kung babaguhin ng developer ang mga priyoridad sa trabaho o personal na mga proyekto, o kapag gumagamit sila ng ibang programming language. Ang mga development environment ay kasing kakaiba ng mga developer na gumagamit ng mga ito.
+
+### Editors
+
+Ang isa sa mga pinakamahalagang tool para sa pagbuo ng software ay ang editor. Ang mga editor ay kung saan mo isusulat ang iyong code at kung minsan kung saan mo tatakbo ang iyong code.
+
+Umaasa ang mga developer sa mga editor para sa ilang karagdagang dahilan:
+
+- *Debugging* Pagtuklas ng mga bug at error sa pamamagitan ng hakbang sa code, linya sa linya. Ang ilang mga editor ay may mga kakayahan sa pag-debug, o maaaring i-customize at idagdag para sa mga partikular na programming language.  
+- *Syntax highlighting* Nagdaragdag ng mga kulay at pag-format ng teksto sa code, ginagawang mas madaling basahin. Pinapayagan ng karamihan sa mga editor ang naka-customize na pag-highlight ng syntax.
+- *Extensions and Integrations* Mga karagdagan na dalubhasa para sa mga developer, ng mga developer, para sa access sa mga karagdagang tool na hindi naka-built sa base editor. Halimbawa, kailangan din ng maraming developer ng paraan para idokumento ang kanilang code at ipaliwanag kung paano ito gumagana at mag-i-install ng extension ng spell check upang suriin kung may mga typo. Karamihan sa mga karagdagan na ito ay inilaan para sa paggamit sa loob ng isang partikular na editor, at karamihan sa mga editor ay may kasamang paraan upang maghanap ng mga available na extension.
+- *Customization* Karamihan sa mga editor ay lubos na napapasadya, at ang bawat developer ay magkakaroon ng kanilang sariling natatanging kapaligiran sa pag-unlad na nababagay sa kanilang mga pangangailangan. Marami rin ang nagpapahintulot sa mga developer na gumawa ng sarili nilang mga extension.
+
+#### Mga Sikat na Editor at Web Development Extension
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Browsers
+
+Ang isa pang mahalagang tool ay ang browser. Ang mga web developer ay umaasa sa browser upang obserbahan kung paano tumatakbo ang kanilang code sa web, ginagamit din ito upang tingnan ang mga visual na elemento ng isang web page na nakasulat sa editor, tulad ng HTML.
+
+Maraming browser ang kasama ng *developer tools* (DevTools) na naglalaman ng isang hanay ng mga kapaki-pakinabang na feature at impormasyon para tulungan ang mga developer na mangolekta at makakuha ng mahahalagang insight tungkol sa kanilang application. Halimbawa: Kung ang isang web page ay may mga error, minsan nakakatulong na malaman kung kailan nangyari ang mga ito. Maaaring i-configure ang DevTools sa isang browser upang makuha ang impormasyong ito.
+
+#### Mga sikat na Browser at DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Mga Tool sa Command Line
+
+Mas gusto ng ilang developer ang isang mas kaunting graphical na view para sa kanilang mga pang-araw-araw na gawain at umaasa sa command line para makamit ito. Ang pagbuo ng code ay nangangailangan ng malaking halaga ng pagta-type, at mas gusto ng ilang developer na huwag guluhin ang kanilang daloy sa keyboard at gagamit sila ng mga keyboard shortcut upang magpalit sa pagitan ng mga desktop windows, magtrabaho sa iba't ibang file, at gumamit ng mga tool. Karamihan sa mga gawain ay maaaring kumpletuhin gamit ang isang mouse, ngunit ang isang benepisyo ng paggamit ng command line ay ang maraming maaaring gawin gamit ang command line tool nang hindi nangangailangan ng pagpapalit sa pagitan ng mouse at keyboard. Ang isa pang benepisyo ng command line ay ang mga ito ay maaaring i-configure at maaari mong i-save ang iyong custom na configuration, baguhin ito sa ibang pagkakataon, at i-import din ito sa mga bagong development machine. Dahil natatangi ang mga development environment sa bawat developer, iiwasan ng ilan ang paggamit ng command line, ang ilan ay aasa dito nang buo, at ang ilan ay mas gusto ang paghahalo ng dalawa.
+
+### Mga Sikat na Opsyon sa Command Line
+
+Mag-iiba ang mga opsyon para sa command line batay sa operating system na iyong ginagamit.
+
+*💻 = ay paunang naka-install sa operating system.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
+
+#### Mga sikat na Command Line Tool
+
+- [Git](https://git-scm.com/) (💻 on most operating systems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+Kapag ang isang developer ay gustong matuto ng bago, malamang na bumaling sila sa dokumentasyon upang matutunan kung paano ito gamitin. Ang mga developer ay madalas na umaasa sa dokumentasyon upang gabayan sila sa kung paano gamitin nang maayos ang mga tool at wika, at upang makakuha din ng mas malalim na kaalaman sa kung paano ito gumagana.
+
+#### Popular Documentation sa Web Development
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, ang mga publisher ng [Firefox](https://www.mozilla.org/firefox/) browser
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), mula sa Google, mga publisher ng [Chrome](https://www.google.com/chrome/)
+- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para sa [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Magsaliksik: Ngayong alam mo na ang mga pangunahing kaalaman sa kapaligiran ng isang web developer, ihambing at ihambing ito sa kapaligiran ng isang web designer.
+
+---
+
+## 🚀 Hamon
+
+Ihambing ang ilang mga programming language. Ano ang ilan sa mga natatanging katangian ng JavaScript vs. Java? Kumusta naman ang COBOL vs. Go?
+
+## Pagsusulit pagkatapos ng Lektura
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Pagsusuri
+
+Mag-aral nang kaunti sa iba't ibang wika na magagamit ng programmer. Subukang magsulat ng isang linya sa isang wika, at pagkatapos ay gawing muli ito sa dalawang iba pa. Ano ang nalaman mo?
+
+## Assignment
+
+[Reading the Docs](assignment.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md

@@ -0,0 +1,193 @@
+# Introduction aux langages de programmation et aux outils du métier
+
+Cette leçon couvre les bases des langages de programmation. Les sujets abordés ici s'appliquent à la plupart des langages de programmation modernes d'aujourd'hui. Dans la section «Outils du métier», vous découvrirez des logiciels utiles qui vous aideront en tant que développeur.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz préalable
+[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=fr)
+
+## introduction
+
+Dans cette leçon, nous aborderons:
+
+- Qu'est-ce que la programmation?
+- Types de langages de programmation
+- Éléments de base d'un programme
+- Logiciel et outillage utiles pour le développeur professionnel
+
+## Qu'est-ce que la programmation?
+
+La programmation (également appelée codage) est le processus d'écriture d'instructions sur un appareil, tel qu'un ordinateur ou un appareil mobile. Nous écrivons ces instructions avec un langage de programmation, qui est ensuite interprété par l'appareil. Ces ensembles d'instructions peuvent être désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants.
+
+Un *programme* peut être tout ce qui est écrit avec du code; les sites Web, les jeux et les applications téléphoniques sont des programmes. Bien qu'il soit possible de créer un programme sans écrire de code, la logique sous-jacente est interprétée sur le périphérique et cette logique a probablement été écrite avec du code. Un programme qui *exécute* ou *exécute du code* exécute des instructions. L'appareil avec lequel vous lisez actuellement cette leçon exécute un programme pour l'imprimer sur votre écran.
+
+✅ Faites une petite recherche: qui est considéré comme le premier programmeur informatique au monde?
+
+## Langages de programmation
+
+Les langages de programmation ont un objectif principal: permettre aux développeurs de créer des instructions à envoyer à un appareil. Les appareils ne peuvent comprendre que le binaire (1 et 0), et pour *la plupart* les développeurs, ce n'est pas un moyen très efficace de communiquer. Les langages de programmation sont un vecteur de communication entre les humains et les ordinateurs.
+
+Les langages de programmation se présentent sous différents formats et peuvent servir à des fins différentes. Par exemple, JavaScript est principalement utilisé pour les applications Web, tandis que Bash est principalement utilisé pour les systèmes d'exploitation.
+
+*Les langues de bas niveau* nécessitent généralement moins d'étapes que les *langues de haut niveau* pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau.
+
+Le code suivant illustre la différence entre un langage de haut niveau avec JavaScript et un langage de bas niveau avec le code d'assembly ARM.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Croyez-le ou non, *ils font tous les deux la même chose*: l'affichage d'une séquence de Fibonacci jusqu'à 10.
+
+✅ Une séquence de Fibonacci est [définie](https://en.wikipedia.org/wiki/Fibonacci_number) comme un ensemble de nombres tels que chaque nombre est la somme des deux précédents, à partir de 0 et 1.
+
+## Éléments d'un programme
+
+Une seule instruction dans un programme est appelée une *instruction* et aura généralement un caractère ou un interligne qui marque où l'instruction se termine, ou *se termine*. La façon dont un programme se termine varie avec chaque langue.
+
+La plupart des programmes reposent sur l'utilisation des données d'un utilisateur ou d'ailleurs, où les déclarations peuvent s'appuyer sur des données pour exécuter des instructions. Les données peuvent modifier le comportement d'un programme, de sorte que les langages de programmation proposent un moyen de stocker temporairement des données pouvant être utilisées ultérieurement. Ces données sont appelées *variables*. Les variables sont des instructions qui demandent à un appareil d'enregistrer des données dans sa mémoire. Les variables des programmes sont similaires à celles de l'algèbre, où elles ont un nom unique et leur valeur peut changer avec le temps.
+
+Il est possible que certaines instructions ne soient pas exécutées par un périphérique. C'est généralement par conception lors de l'écriture par le développeur ou par accident lorsqu'une erreur inattendue se produit. Ce type de contrôle d'une application la rend plus robuste et maintenable. Généralement, ces changements de contrôle se produisent lorsque certaines décisions sont respectées. Une instruction courante dans les langages de programmation modernes pour contrôler la manière dont un programme est exécuté est l'instruction `if..else`.
+
+✅ Vous en apprendrez plus sur ce type d'énoncé dans les leçons suivantes
+
+## Outils métier
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+Dans cette section, vous découvrirez certains logiciels que vous pourriez trouver très utiles au début de votre parcours de développement professionnel.
+
+Un **environnement de développement** est un ensemble unique d'outils et de fonctionnalités qu'un développeur utilisera souvent lors de l'écriture d'un logiciel. Certains de ces outils ont été personnalisés pour les besoins spécifiques d'un développeur et peuvent changer au fil du temps si un développeur change de priorités dans ses projets professionnels ou personnels, ou lorsqu'il utilise un langage de programmation différent. Les environnements de développement sont aussi uniques que les développeurs qui les utilisent.
+
+### éditeurs
+
+L'éditeur est l'un des outils les plus cruciaux pour le développement logiciel. Les éditeurs sont l'endroit où vous écrivez votre code et parfois où vous exécuterez votre code.
+
+Les développeurs comptent sur les éditeurs pour quelques raisons supplémentaires:
+
+- *Débogage* Découverte des bogues et des erreurs en parcourant le code, ligne par ligne. Certains éditeurs ont des capacités de débogage ou peuvent être personnalisés et ajoutés pour des langages de programmation spécifiques.
+- *Mise en évidence de la syntaxe* Ajoute des couleurs et la mise en forme du texte au code, le rend plus facile à lire. La plupart des éditeurs permettent une coloration syntaxique personnalisée.
+- *Extensions et intégrations* Ajouts spécialisés pour les développeurs, par les développeurs, pour accéder à des outils supplémentaires qui ne sont pas intégrés à l'éditeur de base. Par exemple, de nombreux développeurs ont également besoin d'un moyen de documenter leur code et d'expliquer comment il fonctionne et installeront une extension de vérification orthographique pour vérifier les fautes de frappe. La plupart de ces ajouts sont destinés à être utilisés dans un éditeur spécifique, et la plupart des éditeurs proposent un moyen de rechercher les extensions disponibles.
+- *Personnalisation* La plupart des éditeurs sont extrêmement personnalisables, et chaque développeur aura son propre environnement de développement unique qui répond à ses besoins. Beaucoup permettent également aux développeurs de créer leur propre extension.
+
+#### Éditeurs et extensions de développement Web populaires
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Navigateurs
+
+Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le navigateur pour observer comment leur code s'exécute sur le Web, il est également utilisé pour afficher les éléments visuels d'une page Web qui sont écrits dans l'éditeur, comme le HTML.
+
+De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations.
+#### Navigateurs et outils de développement populaires
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### ligne de commande
+
+Certains développeurs préfèrent une vue moins graphique pour leurs tâches quotidiennes et comptent sur la ligne de commande pour y parvenir. Le développement de code nécessite une quantité importante de saisie, et certains développeurs préfèrent ne pas perturber leur flux sur le clavier et utiliseront des raccourcis clavier pour basculer entre les fenêtres du bureau, travailler sur différents fichiers et utiliser des outils. La plupart des tâches peuvent être effectuées avec une souris, mais un avantage de l'utilisation de la ligne de commande est que beaucoup peut être fait avec des outils de ligne de commande sans avoir besoin de permuter entre la souris et le clavier. Un autre avantage de la ligne de commande est qu'elle est configurable et que vous pouvez enregistrer votre configuration personnalisée, la modifier ultérieurement et également l'importer sur de nouvelles machines de développement. Parce que les environnements de développement sont si uniques à chaque développeur, certains éviteront d'utiliser la ligne de commande, certains s'y fieront entièrement, et certains préfèrent un mélange des deux.
+
+### Options de ligne de commande populaires
+
+Les options de la ligne de commande varient en fonction du système d'exploitation que vous utilisez.
+
+*💻 = est préinstallé sur le système d'exploitation.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (appellé également CMD) 💻
+- [Terminal Windows](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Command Line Tools ( CLI ) populaires
+
+- [Git](https://git-scm.com/) (💻 sur la plupart des SE)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tournera très probablement vers la documentation pour apprendre à l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider pour utiliser correctement les outils et les langages, et également pour acquérir une connaissance plus approfondie de son fonctionnement.
+
+#### Documentations populaires sur le développement Web
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, éditeurs de [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), de Google, éditeurs de [Chrome](https://www.google.com/chrome/)
+- [Documents de développeur de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pour [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Faites des recherches: maintenant que vous connaissez les bases de l'environnement d'un développeur Web, comparez-le à l'environnement d'un concepteur Web.
+
+---
+
+## 🚀 Défi
+
+Comparez quelques langages de programmation. Quelles sont les caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go?
+
+## Quiz de validation des connaissances
+[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=fr)
+
+## Révision et auto-apprentissage
+
+Étudiez un peu les différentes langues disponibles pour le programmeur. Essayez d'écrire une ligne dans une langue, puis refaites-la dans deux autres. Qu'apprenez-vous?
+
+## Consigne
+
+[Lire la documentation](assignment.fr.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md

@@ -0,0 +1,194 @@
+# प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय
+
+यह पाठ प्रोग्रामिंग भाषाओं की मूल बातें शामिल करता है। यहां शामिल विषय आज की अधिकांश आधुनिक प्रोग्रामिंग भाषाओं पर लागू होते हैं। 'टूल ऑफ़ ट्रेड' सेक्शन में, आप उपयोगी सॉफ़्टवेयर के बारे में जानेंगे जो आपको डेवलपर के रूप में मदद करता है।
+
+![इंट्रो प्रोग्रामिंग](/sketchnotes//webdev101-programming.png)
+>[टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
+
+## पूर्व व्याख्यान प्रश्नोत्तरी
+[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=hi)
+
+## परिचय
+
+इस पाठ में, हम कवर करेंगे:
+
+- प्रोग्रामिंग क्या है?
+- प्रोग्रामिंग भाषाओं के प्रकार
+- एक प्रोग्राम के बुनियादी तत्व
+- पेशेवर डेवलपर के लिए उपयोगी सॉफ्टवेयर और टूलिंग
+
+## प्रोग्रामिंग क्या है?
+
+प्रोग्रामिंग (कोडिंग के रूप में भी जाना जाता है) एक डिवाइस, जैसे कि कंप्यूटर या मोबाइल डिवाइस, को निर्देश लिखने की प्रक्रिया है। हम इन निर्देशों को एक प्रोग्रामिंग भाषा के साथ लिखते हैं, जो तब डिवाइस द्वारा व्याख्या की जाती है। निर्देशों के इन सेटों को विभिन्न नामों से संदर्भित किया जा सकता है, लेकिन *प्रोग्राम*, *कंप्यूटर प्रोग्राम*, *एप्लिकेशन(ऐप)*, और *निष्पादन योग्य* कुछ लोकप्रिय नाम हैं.
+
+एक *प्रोग्राम* कुछ भी हो सकता है जो कोड के साथ लिखा गया है; वेबसाइट, गेम और फ़ोन ऐप प्रोग्राम हैं। हालांकि, कोड लिखे बिना प्रोग्राम बनाना संभव है, अंतर्निहित तर्क की व्याख्या डिवाइस से की जाती है और उस तर्क को कोड के साथ लिखे जाने की सबसे अधिक संभावना है। एक प्रोग्राम जो *रनिंग* या *एक्जीक्यूटिंग कोड* निर्देश कर रहा है। जिस उपकरण के साथ आप वर्तमान में इस पाठ को पढ़ रहे हैं, वह आपकी स्क्रीन पर प्रिंट करने के लिए एक प्रोग्राम चला रहा है।
+
+✅ थोड़ा अनुसंधान करें: कौन  दुनिया का पहला कंप्यूटर प्रोग्रामर माना जाता है ?
+
+## प्रोग्रामिंग भाषाएँ
+
+प्रोग्रामिंग भाषाओं का एक मुख्य उद्देश्य है: डेवलपर्स को डिवाइस पर भेजने के लिए निर्देशों का निर्माण करना। डिवाइस केवल बाइनरी (1s और 0s) को समझ सकते हैं, और *सबसे अधिक* डेवलपर्स के लिए जो संवाद करने का एक बहुत ही कुशल तरीका नहीं है। प्रोग्रामिंग भाषाएं मनुष्य और कंप्यूटर के बीच संचार के लिए एक वाहन हैं।
+
+प्रोग्रामिंग भाषाएँ विभिन्न स्वरूपों में आती हैं और विभिन्न उद्देश्यों की पूर्ति कर सकती हैं। उदाहरण के लिए, जावास्क्रिप्ट का उपयोग मुख्य रूप से वेब अनुप्रयोगों के लिए किया जाता है, जबकि बैश मुख्य रूप से ऑपरेटिंग सिस्टम के लिए उपयोग किया जाता है।
+
+*निम्न स्तर की भाषाएं* आमतौर पर निर्देशों की व्याख्या करने के लिए एक उपकरण के लिए * उच्च स्तरीय भाषाओं की तुलना में कम चरणों की आवश्यकता होती है। हालांकि, उच्च स्तरीय भाषाओं को लोकप्रिय बनाने वाली इसकी पठनीयता और समर्थन है। जावास्क्रिप्ट को एक उच्च स्तरीय भाषा माना जाता है.
+
+निम्न कोड जावास्क्रिप्ट के साथ एक उच्च स्तर की भाषा और एआरएम विधानसभा कोड के साथ निम्न स्तर की भाषा के बीच अंतर को दर्शाता है।
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+मानो या न मानो, *वे दोनों एक ही काम कर रहे हैं*: 10 तक एक फाइबोनैचि अनुक्रम मुद्रित करना।
+
+✅ एक फाइबोनैचि अनुक्रम को संख्याओं के एक सेट के रूप में [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) किया जाता है जैसे कि प्रत्येक संख्या दो पूर्ववर्ती का योग है, जिसकी शुरुआत 0 और 1 से होती है।
+
+## एक प्रोग्राम के तत्व
+
+किसी प्रोग्राम में एक निर्देश को एक *स्टेटमेंट* कहा जाता है और इसमें आमतौर पर एक कैरेक्टर या लाइन स्पेस होता है, जो उन सिरों को चिह्नित करता है, जहां से निर्देश समाप्त होता है, या *टर्मिनेट* होता है। कैसे एक कार्यक्रम समाप्त होता है प्रत्येक भाषा के साथ बदलता रहता है।
+
+अधिकांश प्रोग्राम उपयोगकर्ता या कहीं और से डेटा का उपयोग करने पर निर्भर करते हैं, जहां कथन निर्देशों को पूरा करने के लिए डेटा पर भरोसा कर सकते हैं। डेटा बदल सकता है कि कोई प्रोग्राम कैसे व्यवहार करता है, इसलिए प्रोग्रामिंग भाषाएँ अस्थायी रूप से डेटा को संग्रहीत करने का एक तरीका है जो बाद में उपयोग किया जा सकता है। इस डेटा को *वैरिएबल* कहा जाता है। चर ऐसे कथन हैं जो किसी डिवाइस को उसकी मेमोरी में डेटा को बचाने का निर्देश देते हैं। कार्यक्रमों में विविधताएं बीजगणित में लोगों के समान हैं, जहां उनका एक अनूठा नाम है और समय के साथ उनका मूल्य बदल सकता है।
+
+एक मौका है कि कुछ बयानों को डिवाइस द्वारा निष्पादित नहीं किया जाएगा। यह आमतौर पर डिज़ाइनर द्वारा लिखा जाता है जब डेवलपर द्वारा लिखा जाता है या जब कोई अप्रत्याशित त्रुटि होती है तो दुर्घटना से। किसी एप्लिकेशन का इस प्रकार का नियंत्रण उसे अधिक मजबूत और बनाए रखने योग्य बनाता है। आमतौर पर नियंत्रण में ये परिवर्तन तब होते हैं जब कुछ निर्णय मिलते हैं।  `if..else` स्टेटमेंट आधुनिक प्रोग्रामिंग भाषाओं में एक सामान्य विवरण यह नियंत्रित करने के लिए कि प्रोग्राम कैसे चलाया जाता है।
+
+✅ आप बाद के पाठों में इस प्रकार के कथन के बारे में अधिक जानेंगे
+
+## व्यापार के उपकरण
+
+[![व्यापार के उपकरण](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "व्यापार के उपकरण")
+
+इस अनुभाग में, आप कुछ सॉफ़्टवेयर के बारे में जानेंगे जो आपको अपने व्यावसायिक विकास की यात्रा शुरू करने के दौरान बहुत उपयोगी लग सकते हैं .
+
+एक **विकास पर्यावरण** उपकरण और सुविधाओं का एक अनूठा सेट है जो एक डेवलपर सॉफ्टवेयर लिखते समय अक्सर उपयोग करेगा। इन उपकरणों में से कुछ को एक डेवलपर विशिष्ट आवश्यकताओं के लिए अनुकूलित किया गया है, और समय के साथ बदल सकता है यदि कोई डेवलपर काम या व्यक्तिगत परियोजनाओं में प्राथमिकताएं बदलता है, या जब वे एक अलग प्रोग्रामिंग भाषा का उपयोग करते हैं। विकास का वातावरण डेवलपर्स के रूप में अद्वितीय है जो उनका उपयोग करते हैं।
+
+### एडिटर्स 
+
+सॉफ्टवेयर विकास के लिए सबसे महत्वपूर्ण उपकरणों में से एक एडिटर्स है। एडिटर्स वे होते हैं जहाँ आप अपना कोड लिखते हैं और कभी-कभी जहाँ आप अपना कोड चलाते हैं।
+
+डेवलपर्स कुछ अतिरिक्त कारणों से एडिटर्स पर भरोसा करते हैं:
+
+- *डिबगिंग* कोड के माध्यम से कदम से, लाइन के द्वारा बग और त्रुटियों की खोज करना। कुछ एडिटर्स में डिबगिंग क्षमताएं होती हैं, या उन्हें विशिष्ट प्रोग्रामिंग भाषाओं के लिए अनुकूलित और जोड़ा जा सकता है।.  
+- *सिंटेक्स हाइलाइटिंग* कोड के लिए रंगों और पाठ स्वरूपण को जोड़ता है, यह पढ़ना आसान बनाता है। अधिकांश एडिटर अनुकूलित सिंटैक्स हाइलाइटिंग की अनुमति देते हैं.
+- *एक्सटेंशन और एकीकरण* डेवलपर्स के लिए जो अतिरिक्त हैं, डेवलपर्स के लिए, अतिरिक्त टूल तक पहुंच के लिए जो कि आधार एडिटर में निर्मित नहीं हैं। उदाहरण के लिए, कई डेवलपर्स को अपने कोड को दस्तावेज करने और यह समझाने का तरीका भी चाहिए कि यह कैसे काम करता है और टाइपोस की जांच के लिए वर्तनी जांच एक्सटेंशन स्थापित करेगा। इनमें से अधिकांश परिवर्धन एक विशिष्ट एडिटर के भीतर उपयोग के लिए हैं, और अधिकांश एडिटर उपलब्ध एक्सटेंशन की खोज करने का एक तरीका है।
+- *अनुकूलन* अधिकांश एडिटर अत्यंत अनुकूलन योग्य हैं, और प्रत्येक डेवलपर का अपना विशिष्ट विकास वातावरण होगा जो उनकी आवश्यकताओं के अनुरूप होगा। कई भी डेवलपर्स को अपना विस्तार बनाने की अनुमति देते हैं।
+
+#### लोकप्रिय एडिटर्स और वेब डेवलपमेंटका एक्सटेंशन
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### ब्राउज़र्स
+
+एक अन्य महत्वपूर्ण उपकरण ब्राउज़र है। वेब डेवलपर ब्राउज़र पर भरोसा करते हैं कि यह देखने के लिए कि उनका कोड वेब पर कैसे चलता है, इसका उपयोग वेब पेज के दृश्य तत्वों को देखने के लिए किया जाता है जो एडिटर में लिखे गए हैं, जैसे की HTML। 
+
+कई ब्राउज़र *डेवलपर टूल*(DevTools) के साथ आते हैं, जिसमें डेवलपर्स को अपने एप्लिकेशन के बारे में महत्वपूर्ण अंतर्दृष्टि एकत्र करने और कैप्चर करने में मदद करने के लिए उपयोगी सुविधाओं और जानकारी का एक सेट होता है। उदाहरण के लिए: यदि किसी वेब पेज में त्रुटियां हैं, तो कभी-कभी यह जानना उपयोगी होता है कि वे कब हुए। एक ब्राउज़र में DevTools इस जानकारी को पकड़ने के लिए कॉन्फ़िगर किया जा सकता है।
+
+#### लोकप्रिय ब्राउज़रों और DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### कमांड लाइन टूल्स
+
+कुछ डेवलपर्स अपने दैनिक कार्यों के लिए कम ग्राफ़िकल दृश्य पसंद करते हैं और इसे प्राप्त करने के लिए कमांड लाइन पर भरोसा करते हैं। विकासशील कोड के लिए महत्वपूर्ण मात्रा में टाइपिंग की आवश्यकता होती है, और कुछ डेवलपर्स कीबोर्ड पर अपने प्रवाह को बाधित नहीं करना पसंद करते हैं और डेस्कटॉप विंडो के बीच स्वैप करने के लिए कीबोर्ड शॉर्टकट का उपयोग करेंगे, विभिन्न फ़ाइलों पर काम करेंगे, और टूल का उपयोग करेंगे। अधिकांश कार्यों को एक माउस के साथ पूरा किया जा सकता है, लेकिन कमांड लाइन का उपयोग करने का एक लाभ यह है कि माउस और कीबोर्ड के बीच स्वैपिंग की आवश्यकता के बिना कमांड लाइन टूल के साथ बहुत कुछ किया जा सकता है। कमांड लाइन का एक और लाभ यह है कि वे कॉन्फ़िगर करने योग्य हैं और आप अपने कस्टम कॉन्फ़िगरेशन को सहेज सकते हैं, इसे बाद में बदल सकते हैं और इसे नई विकास मशीनों में भी आयात कर सकते हैं। क्योंकि विकास वातावरण प्रत्येक डेवलपर के लिए बहुत अनूठा है, कुछ कमांड लाइन का उपयोग करने से बचेंगे, कुछ इस पर पूरी तरह से भरोसा करेंगे, और कुछ दोनों का मिश्रण पसंद करते हैं।
+
+### लोकप्रिय कमांड लाइन विकल्प
+
+आपके द्वारा उपयोग किए जाने वाले ऑपरेटिंग सिस्टम के आधार पर कमांड लाइन के विकल्प अलग-अलग होंगे.
+
+*💻 = ऑपरेटिंग सिस्टम पर प्रीइंस्टॉल्ड आता है.*
+
+#### विंडोज
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### मैक ओएस
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### लिनक्स
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### लोकप्रिय कमांड लाइन टूल्स
+
+- [Git](https://git-scm.com/) (💻 अधिकांश ऑपरेटिंग साइटम पर)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### प्रलेखन
+
+जब कोई डेवलपर कुछ नया सीखना चाहता है, तो वे इसका उपयोग करने के तरीके जानने के लिए प्रलेखन की ओर रुख करेंगे। डेवलपर्स अक्सर टूल और भाषाओं का सही तरीके से उपयोग करने के लिए, और यह भी कि यह कैसे काम करता है के गहन ज्ञान प्राप्त करने के लिए मार्गदर्शन के लिए प्रलेखन पर भरोसा करते हैं।
+
+#### वेब विकास पर लोकप्रिय प्रलेखन
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla से, [Firefox](https://www.mozilla.org/firefox/) के प्रकाशक
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), Google की ओर से, [Chrome](https://www.google.com/chrome/) के प्रकाशक
+- [Microsoft के अपने डेवलपर दस्तावेज़](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), के लिए [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ कुछ शोध करें: अब जब आप वेब डेवलपर के परिवेश की मूल बातें जानते हैं, तो इसकी तुलना वेब डिज़ाइनर के परिवेश से करें।
+
+---
+
+## 🚀 चुनौती
+
+कुछ प्रोग्रामिंग भाषाओं की तुलना करें। जावास्क्रिप्ट बनाम जावा के कुछ विशिष्ट लक्षण क्या हैं? COBOL बनाम GO के बारे मे?
+
+## व्याख्यान उपरांत प्रश्नोत्तरी
+[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=hi)
+
+## समीक्षा और स्व अध्ययन
+
+प्रोग्रामर के लिए उपलब्ध विभिन्न भाषाओं पर थोड़ा अध्ययन करें। एक भाषा में एक पंक्ति लिखने का प्रयास करें, और फिर इसे दो अन्य में फिर से लिखें। आप क्या सीखते हैं?
+
+## असाइनमेंट
+
+[डॉक्स पढ़ना](assignment.hi.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md

@@ -0,0 +1,196 @@
+# Pengantar Bahasa Pemrograman dan Alat Keterampilan
+
+Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sini berlaku untuk sebagian besar bahasa pemrograman modern saat ini. Di bagian 'Alat Keterampilan', Anda akan belajar tentang perangkat lunak yang berguna yang membantu Anda sebagai pengembang.
+
+![Pemrograman Intro](/sketchnotes/webdev101-programming.png)
+> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuis Pra-Kuliah
+
+[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=id)
+
+## Pengantar
+
+Dalam pelajaran ini, kami akan membahas:
+
+- Apa itu pemrograman?
+- Jenis bahasa pemrograman
+- Elemen dasar dari sebuah program
+- Perangkat lunak dan alat-alat yang berguna untuk pengembang profesional
+
+## Apa itu Pemrograman?
+
+Pemrograman (juga dikenal sebagai koding) adalah proses penulisan instruksi ke perangkat, seperti komputer atau perangkat seluler. Kami menulis instruksi ini dengan bahasa pemrograman, yang kemudian diinterpretasikan oleh perangkat. Kumpulan instruksi ini dapat dirujuk dengan berbagai nama, tetapi *program*, *program komputer*, *aplikasi (app)*, dan *dapat dijalankan (executable)* adalah beberapa nama populer.
+
+Sebuah *program* dapat berupa apapun yang ditulis dengan kode; situs web, permainan, dan aplikasi telepon adalah program. Meskipun memungkinkan untuk membuat program tanpa menulis kode, logika dasarnya diinterpretasikan ke perangkat dan logika itu kemungkinan besar ditulis dengan kode. Sebuah program yang *berjalan (running)* atau *menjalankan kode (executing code)* sedang menjalankan instruksi. Perangkat yang saat ini Anda gunakan untuk membaca pelajaran ini menjalankan program untuk mencetaknya ke layar Anda.
+
+✅ Lakukan sedikit riset: siapa yang dianggap pemrogram komputer pertama di dunia?
+
+## Bahasa pemrograman
+
+Bahasa pemrograman memiliki tujuan utama: bagi pengembang untuk membuat instruksi untuk dikirim ke perangkat. Perangkat hanya dapat memahami biner (1 dan 0), dan untuk *sebagian besar* pengembang itu bukan cara yang sangat efisien untuk berkomunikasi. Bahasa pemrograman adalah wahana komunikasi antara manusia dan komputer.
+
+Bahasa pemrograman memiliki format yang berbeda dan mungkin memiliki tujuan yang berbeda. Misalnya, JavaScript terutama digunakan untuk aplikasi web, sedangkan Bash terutama digunakan untuk sistem operasi.
+
+*Bahasa tingkat rendah (Low level languages)* biasanya membutuhkan lebih sedikit langkah daripada *bahasa tingkat tinggi (high level languages)* agar perangkat dapat menafsirkan instruksi. Namun, yang membuat bahasa tingkat tinggi lebih populer adalah keterbacaan dan dukungannya. JavaScript dianggap sebagai bahasa tingkat tinggi.
+
+Kode berikut menggambarkan perbedaan antara bahasa tingkat tinggi dengan JavaScript dan bahasa tingkat rendah dengan kode rakitan ARM (ARM assembly code).
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Percaya atau tidak, *mereka berdua melakukan hal yang sama*: mencetak urutan Fibonacci hingga 10.
+
+✅ Urutan Fibonacci [didefinisikan](https://en.wikipedia.org/wiki/Fibonacci_number) sebagai sekumpulan angka sedemikian rupa sehingga setiap angka adalah jumlah dari dua angka sebelumnya, mulai dari 0 dan 1.
+
+## Elemen program
+
+Satu instruksi dalam program disebut *statement* dan biasanya akan memiliki karakter atau penspasian baris yang menandai di mana instruksi berakhir, atau *mengakhiri (terminates)*. Bagaimana sebuah program berakhir bervariasi menurut setiap bahasa.
+
+Sebagian besar program mengandalkan penggunaan data dari pengguna atau di tempat lain, di mana pernyataan dapat mengandalkan data untuk melakukan instruksi. Data dapat mengubah bagaimana sebuah program berperilaku, sehingga bahasa pemrograman datang dengan cara untuk menyimpan data sementara yang dapat digunakan nanti. Data ini disebut *variabel*. Variabel adalah pernyataan yang menginstruksikan perangkat untuk menyimpan data dalam memorinya. Variabel dalam program mirip dengan yang ada di aljabar, di mana mereka memiliki nama yang unik dan nilainya dapat berubah dari waktu ke waktu.
+
+Ada kemungkinan bahwa beberapa pernyataan tidak akan dijalankan oleh perangkat. Ini biasanya oleh desain ketika ditulis oleh pengembang atau secara tidak sengaja ketika kesalahan yang tidak terduga terjadi. Jenis kontrol aplikasi ini membuatnya lebih kuat dan dapat dipertahankan. Biasanya perubahan kontrol ini terjadi ketika keputusan tertentu terpenuhi. Pernyataan umum dalam bahasa pemrograman modern untuk mengontrol bagaimana program dijalankan adalah pernyataan `if..else`.
+
+✅ Anda akan mempelajari lebih lanjut tentang jenis pernyataan ini dalam pelajaran berikutnya
+
+## Alat Keterampilan
+
+[![Alat Keterampilan](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Alat Keterampilan")
+
+Di bagian ini, Anda akan mempelajari beberapa perangkat lunak yang mungkin berguna saat memulai perjalanan pengembangan profesional.
+
+***Lingkungan pengembangan (development environment)*** adalah seperangkat alat dan fitur unik yang sering digunakan pengembang saat menulis perangkat lunak. Beberapa alat ini telah disesuaikan untuk kebutuhan khusus pengembang, dan dapat berubah seiring waktu jika pengembang mengubah prioritas dalam proyek kerja atau pribadi, atau ketika mereka menggunakan bahasa pemrograman yang berbeda. Lingkungan pengembangan sama uniknya dengan pengembang yang menggunakannya.
+
+### Editor
+
+Salah satu alat yang paling penting untuk pengembangan perangkat lunak adalah editor. Editor adalah tempat Anda menulis kode dan kadang-kadang di mana Anda akan menjalankan kode Anda.
+
+Pengembang mengandalkan editor karena beberapa alasan tambahan:
+
+- *Debugging* Menemukan bug dan kesalahan dengan melangkah melalui kode, baris demi baris. Beberapa editor memiliki kemampuan debugging, atau dapat disesuaikan dan ditambahkan untuk bahasa pemrograman tertentu.  
+- *Penyorotan sintaks* Menambahkan warna dan pemformatan teks ke kode, membuatnya lebih mudah dibaca. Sebagian besar editor memungkinkan penyorotan sintaks yang disesuaikan.
+- *Ekstensi dan Integrasi* Penambahan yang khusus untuk pengembang, oleh pengembang, untuk akses ke alat tambahan yang tidak dibangun ke dalam editor dasar. Misalnya, banyak pengembang juga membutuhkan cara untuk mendokumentasikan kode mereka dan menjelaskan cara kerjanya dan akan menginstal ekstensi pemeriksaan ejaan untuk memeriksa kesalahan ketik. Sebagian besar penambahan ini dimaksudkan untuk digunakan dalam editor tertentu, dan sebagian besar editor datang dengan cara untuk mencari ekstensi yang tersedia.
+- *Kustomisasi* Sebagian besar editor sangat dapat disesuaikan, dan setiap pengembang akan memiliki lingkungan pengembangan unik mereka sendiri yang sesuai dengan kebutuhan mereka. Banyak juga yang memungkinkan pengembang untuk membuat ekstensi mereka sendiri.
+
+#### Editor dan Ekstensi Pengembangan Web Populer
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Browser
+
+Alat penting lainnya adalah browser. Pengembang web mengandalkan browser untuk mengamati bagaimana kode mereka berjalan di web, itu juga digunakan untuk melihat elemen visual dari halaman web yang ditulis di editor, seperti HTML.
+
+Banyak browser datang dengan *alat pengembang* (DevTools) yang berisi serangkaian fitur dan informasi bermanfaat untuk membantu pengembang mengumpulkan dan menangkap wawasan penting tentang aplikasi mereka. Misalnya: Jika halaman web memiliki kesalahan, terkadang berguna untuk mengetahui kapan halaman web tersebut terjadi. DevTools di browser dapat dikonfigurasi untuk mengambil informasi ini.
+
+#### Browser dan DevTools Populer
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Alat Command Line
+
+Beberapa pengembang lebih suka tampilan grafis yang kurang untuk tugas sehari-hari mereka dan mengandalkan command line (baris perintah) untuk mencapai ini. Mengembangkan kode membutuhkan sejumlah besar pengetikan, dan beberapa pengembang lebih suka tidak mengganggu aliran mereka pada keyboard dan akan menggunakan pintasan keyboard untuk bertukar antara jendela desktop, mengerjakan file yang berbeda, dan menggunakan alat. Sebagian besar tugas dapat diselesaikan dengan mouse, tetapi satu manfaat menggunakan command line adalah bahwa banyak yang dapat dilakukan dengan alat command line tanpa perlu bertukar antara mouse dan keyboard. Manfaat lain dari command line adalah bahwa mereka dapat dikonfigurasi dan Anda dapat menyimpan konfigurasi kustom Anda, mengubahnya nanti, dan juga mengimpornya ke mesin pengembangan baru. Karena lingkungan pengembangan sangat unik untuk setiap pengembang, beberapa akan menghindari menggunakan command line, beberapa akan mengandalkannya sepenuhnya, dan beberapa lebih suka campuran keduanya.
+
+### Pilihan Command Line Populer
+
+Pilihan untuk command line akan berbeda berdasarkan sistem operasi yang Anda gunakan.
+
+*💻 = sudah terinstall dengan sistem operasi.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Alat Command Line Populer
+
+- [Git](https://git-scm.com/) (💻 on most operating sytems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Dokumentasi
+
+Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar akan mengandalkan dokumentasi untuk mempelajari cara menggunakannya. Pengembang sering mengandalkan dokumentasi untuk memandu mereka melalui cara menggunakan alat dan bahasa dengan benar, dan juga untuk mendapatkan pengetahuan yang lebih mendalam tentang cara kerjanya.
+
+#### Dokumentasi Populer tentang Pengembangan Web
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web) dari Mozilla, penerbit [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), dari Google, penerbit [Chrome](https://www.google.com/chrome/)
+- [Dokumen pengembang Microsoft sendiri](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), untuk [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Lakukan riset: Sekarang Anda tahu dasar-dasar lingkungan pengembang web, bandingkan dan kontras dengan lingkungan desainer web.
+
+---
+
+## 🚀 Tantangan
+
+Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. Java? Bagaimana dengan COBOL vs. Go?
+
+## Kuis Pasca-Kuliah
+
+[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=id)
+
+## Ulasan & Belajar Mandiri
+
+Pelajari sedikit tentang berbagai bahasa yang tersedia untuk programmer. Cobalah untuk menulis baris dalam satu bahasa, dan kemudian mengulanginya pada dua bahasa lainnya. Apa yang Anda pelajari?
+
+## Tugas
+
+[Membaca Dokumentasi](assignment.id.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md

@@ -0,0 +1,194 @@
+# Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari
+
+Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore.
+
+![Introduzione alla  Programmazione](/sketchnotes/webdev101-programming.png)
+> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Pre-Lezione
+[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=it)
+
+## Introduzione
+
+In questa lezione tratteremo di:
+
+- Cos'è la programmazione?
+- Tipi di linguaggi di programmazione
+- Elementi base di un programma
+- Software utili e strumenti per lo sviluppatore professionista
+
+## Cos'è la programmazione?
+
+La programmazione (conosciuta anche come scrivere codice) è il processo con il quale si scrivono istruzioni a un dispositivo, tipo un computer o dispositivo mobile. Queste istruzioni vengono scritte con un linguaggio di programmazione, quindi vengono interpretate dal dispositivo. Ci si può riferire a questo insieme di istruzioni in vari modi, ma *programma*, *programma di computer*, *applicazione (app)*, ed *eseguibile* sono alcuni dei nomi più conosciuti.
+
+Un *programma* può essere qualsiasi cosa che sia scritta con codice; siti web, giochi, app per telefono sono programmi. Mentre è possibile creare un programma senza scrivere codice, la logica sottostante viene interpretata dal dispositivo e quella logica è molto probabile che sia stata scritta con codice. Un programma che sta *girando* o sta*eseguendo codice* sta effettuando istruzioni. Il dispositivo con il quale state attualmente leggendo questa lezione sta eseguendo un programma per stamparla sul vostro schermo.
+
+✅ Fate una piccola ricerca: quale si ritiene sia stato il primo programmatore al mondo?
+
+## Linguaggi di programmazione
+
+I linguaggi di programmazione servono uno scopo principale: fare in modo che gli sviluppatori costruiscano istruzioni da inviare a un dispositivo. I dispositivi possono comprendere solo codice binario (gli 1 e gli 0), e per la *maggior parte* degli sviluppatori questo non è un modo molto efficace di comunicare. I linguaggi di programmazione sono un veicolo per comunicare tra umani e computer.
+
+I linguaggi di programmazione sono disponibili in diversi formati e possono servire per scopi diversi. Ad esempio, JavaScript è principalmente usato per applicazioni web, mentre Bash è principalmente usato per sistemi operativi.
+
+I *linguaggi a basso livello* richiedono in genere a un dispositivo meno passi per interpretare le istruzioni rispetto ai *linguaggi di alto livello*. Tuttavia ciò che rende popolari i *linguaggi di alto livello* è la loro leggibilità e supporto. JavaScript è considerato un *linguaggio di alto livello*
+
+Il codice seguente illustra le differenze tra un linguaggio ad alto livello come JavaScript e un linguaggio a basso livello come il codice assembly ARM.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Credeteci o no, *stanno entrambi facendo la stessa cosa*: stampare una successione di Fibonacci fino a 10.
+
+✅ Una successione di Fibonacci è [definita](https://www.wikiwand.com/it/Successione_di_Fibonacci) come un insieme di numeri tali che ciascun numero è la somma dei due precedenti, a partire da 0 e 1.
+
+## Elementi di un programma
+
+Una singola istruzione in un programma è detta *istruzione* e in genere avrà un carattere o spaziatura di riga che identifica dove essa finisce, o *termina*. Il modo nel quale un programma termina varia per ogni linguaggio.
+
+La maggior parte dei programmi dipende dall'utilizzo di dati ricevuti da un utente o altrove, dove le istruzioni potrebbero dipendere da dati per essere effettuate. I dati possono modificare il comportamento di un programma, quindi i linguaggi di programmazione sono dotati della possibilità di conservare temporaneamente dati che possono essere usati successivamente. Questi dati sono detti *variabili*. Le variabili sono istruzioni che richiedono a un dispositivo di salvare dati nella sua memoria. Le variabili nei programmi sono simili a quelle dell'algebra, dove devono avere un nome univoco e il loro valore potrebbe mutare nel tempo.
+
+Esiste la possibilità che alcune istruzioni non saranno eseguite da un dispositivo. In genere è una cosa voluta quando scritta dallo sviluppatore oppure per caso quando si verifica un errore inaspettato. Questo tipo di controllo di un'applicazione la rende più robusta e mantenibile. In genere queste modifiche nel controllo accadono quando si verificano certe condizioni. Una istruzione comune nei moderni linguaggi di programmazione per controllare come viene eseguito un programma è `if..else`.
+
+✅ Saprete di più circa questo tipo di istruzione nelle lezioni successive
+
+## Strumenti Necessari
+
+[![Strumenti Necessari](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+In questa sezione conoscerete qualche software che potreste trovare molto utile per iniziare il vostro viaggio come programmatori professionisti.
+
+Un *ambiente di sviluppo* è un insieme univoco di strumenti e caratteristiche che uno sviluppatore usa spesso quando scrive software. Alcuni di questi strumenti sono stati personalizzati per specifiche necessità dello sviluppatore e potrebbero cambiare nel tempo se lo sviluppatore cambia le priorità dei progetti di lavoro o personali, oppure quando usa un diverso linguaggio di programmazione. Gli ambienti di sviluppo sono unici tanto quanto gli sviluppatori che li utilizzano.
+
+### Editor
+
+Uno degli strumenti cruciali per lo sviluppo del software è l'editor. Gli editor sono dove scrivete il vostro codice e talvolta dove eseguirete il vostro codice.
+
+Gli sviluppatori si affidano agli editor per qualche altra ragione aggiuntiva:
+
+- *Debugging* La scoperta di bug ed errori seguendo passo passo il codice, riga per riga. Alcuni editor hanno capacita di debugging o possono essere personalizzate e aggiunte per linguaggi di programmazione specifici.
+- *Evidenziazione della Sintassi* Aggiunge colorazione e formattazione al testo del codice, rendendone più facile la lettura. La maggior parte degli editor consente la personalizzazione dell'evidenziazione della sintassi.
+- *Estensioni e integrazioni* Aggiunte specializzate per gli sviluppatori, dagli sviluppatori, per accedere a strumenti addizionali che non sono incluse come caratteristiche base dell'editor. Ad esempio molti sviluppatori hanno bisogno di un modo per documentare il proprio codice e spiegare come funziona e installeranno una estensione in grado di verificare la sintassi per trovare errori di ortografia. La maggior parte di queste aggiunte sono rivolte all'uso per un editor specifico, e molti editor hanno un modo per ricercare le estensioni disponibili.
+- *Personalizzazione* La maggior parte degli editor sono estremamente personalizzabili, e ciascun sviluppatore avrà il suo proprio ambiente di programmazione in grado di soddisfare le sue necessità. Molti consentono agli sviluppatori di creare le loro proprie estensioni.
+
+#### Popolari Editor ed Estensioni per lo Sviluppo Web
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Browser
+
+Un altro strumento cruciale è il browser. Gli sviluppatori web fanno affidamento sul browser per osservare come il proprio codice viene eseguito nel web, viene anche usato per vedere elementi grafici di una pagina web che sono scritti nell'editor, come HTML.
+
+Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che contengono un insieme di caratteristiche e informazioni per aiutare gli sviluppatori nella raccolta e cattura di importanti approfondimenti in merito alle proprie applicazioni. Ad esempio: se una pagina web ha errori, è talvolta utile sapere dove questi errori sono capitati. DevTools in un browser può essere configurato per catturare queste informazioni.
+
+#### Popolari Browser e DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://sviluppatore.mozilla.org/docs/Tools)
+
+### Strumenti da Riga di Comando
+
+Alcuni sviluppatori preferiscono una visione meno grafica per i propri compiti quotidiani e si appoggiano alla riga di comando per completarli. Lo sviluppo del codice richiede un significativo ammontare di digitazione e taluni sviluppatori preferiscono non interrompere il proprio flusso sulla tastiere e usano scorciatoie da tastiera per spostarsi tra finestre del desktop, lavorare su file diversi, e usare strumenti. La maggior parte dei compiti può essere completata con un mouse, ma un vantaggio dell'usare la riga di comando è che molto può essere fatto con essa senza dover passare dalla tastiera al mouse e viceversa. Un altro vantaggio è che è configurabile ed è possibile salvare la propria configurazione, modificarla successivamente, e anche importarla su nuove macchine di sviluppo. Poiché gli ambienti di sviluppo sono così particolari per ciascun sviluppatore, alcuni eviteranno l'uso della riga di comando, altri la utilizzeranno esclusivamente e altri preferiranno mescolare le due tattiche.
+
+### Popolari Alternative per Riga di Comando
+
+Le alternative per la riga di comando differiriscono in base al sistema operativo che si sta usando.
+
+*💻 = preinstallate nel sistema operativo.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Popolari Strumenti da Riga di Comando
+
+- [Git](https://git-scm.com/) (💻 nella maggior parte dei sistemi operativi)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentazione
+
+Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte delle volte farà riferimento alla documentazione per imparare come usarlo. Gli sviluppatori fanno spesso affidamento alla documentazione per essere guidati all'utilizzo corretto degli strumenti e dei linguaggi, oltre a ottenere una più profonda conoscenza del funzionamento.
+
+#### Popolari Documentazioni sullo Sviluppo Web
+
+- [Mozilla sviluppatore Network (MDN)](https://sviluppatore.mozilla.org/docs/Web), di Mozilla, editori di [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), di Google, editori di [Chrome](https://www.google.com/chrome/)
+- [Documenti per sviluppatori di Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), per [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Fate qualche ricerca: Ora che sapete le basi per un ambiente di sviluppo web, confrontate e rilevate le differenze rispetto all'ambiente di sviluppo di un web designer.
+
+---
+
+## 🚀 Sfida
+
+Confrontate alcuni linguaggi di programmazione. Quali sono i tratti univoci di  JavaScript rispetto a Java? E COBOL rispetto a Go?
+
+## Quiz Post-Lezione
+[Quiz Post-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=it)
+
+## Revisione e Auto Istruzione
+
+Studiate un poco sui diversi linguaggi di programmazione a disposizione di un programmatore. Cercate di scrivere una riga in un linguaggio, poi rifatelo con altri due. Cosa avete imparato?
+
+## Compito 
+
+[Leggere la documentazione](assignment.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md

@@ -0,0 +1,249 @@
+# プログラミング言語と開発ツール入門
+
+このレッスンでは、まずプログラミング言語の基礎を学びます。
+ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。
+次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 事前クイズ
+[事前クイズ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ja)
+
+## Introduction
+
+この講座には以下が含まれています。
+
+- プログラミングとは何か？
+- プログラミング言語の種類
+- プログラムの基本要素
+- 開発ツール
+
+## プログラミングとは何か？
+
+プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。
+命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。
+この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。
+
+*プログラム*とは、コードで書かれている何かです。
+Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。
+コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。
+プログラムはコードを実行し、デバイスに命令を出します。
+あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。
+
+✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？
+
+## プログラミング言語
+
+プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。
+デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。
+プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。
+
+世の中には様々な目的のために様々なプログラミング言語が存在しています。
+たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。
+
+*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。
+高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。
+JavaScriptは高レベル言語とされています。
+
+次のコードは、高レベル言語であるJavaScriptと、低レベル言語であるARMアセンブリの違いを表したものです。
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+信じられないかもしれませんが、両者は同じ処理をしています。
+いずれもフィボナッチ数を順番に10個出力します。
+
+✅ [フィボナッチ数](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0)とは、各数がその手前の二つの値の和である値の集合です。
+
+## プログラムの基本要素
+
+プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。
+プログラムの区切り文字は言語によって異なります。
+
+多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。
+データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。
+そのデータは*変数*と呼ばれています。
+変数とは、デバイス内のメモリにデータを保存する文のことです。
+プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。
+
+プログラムには、実行されない文が現れることがあります。
+これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。
+アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。
+制御は、何らかの条件が満たされたことによって発生することが一般的です。
+最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。
+
+✅ これら文については次のレッスンで詳しく学びます。
+
+## 開発ツール
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。
+
+**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。
+開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。
+開発環境は、それを使用する開発者の数と同じくらい千差万別です。
+
+### エディタ
+
+ソフトウェア開発において最も重要なツールのひとつが、エディタです。
+エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。
+
+開発者がエディタを使う理由は、それ以外にも多々あります。
+
+- *デバッグ*
+コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。
+デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。
+
+- *シンタックスハイライト*
+コードに色や書式を設定することで、コードを読みやすくします。
+多くのエディタはシンタックスハイライトをカスタマイズすることもできます。
+
+- *拡張機能*
+デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。
+例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。
+ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。
+
+- *カスタマイズ*
+ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。
+さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。
+
+#### 有名なエディタとWeb開発向けのエクステンション
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### ブラウザ
+
+もうひとつの重要なツールはブラウザです。
+Web開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。
+
+多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。
+たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。
+
+
+#### 有名なブラウザ
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### コマンドラインツール
+
+開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。
+コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。
+
+多くのタスクはマウスだけでも実行可能です。
+しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。
+またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。
+さらにマシンを新調したときに設定を移動することもできます。
+
+開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。
+両方とも使う人も多いでしょう。
+
+### 有名なコマンドラインオプション
+
+コマンドラインオプションは、OSによって異なります。
+
+💻はOSにプリインストールされているものです。
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### 有名なコマンドラインツール
+
+- [Git](https://git-scm.com/) (多くのOSで 💻)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### ドキュメント
+
+何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。
+開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。
+
+#### Web開発者向けの有名なドキュメント
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), [Firefox](https://www.mozilla.org/firefox/) の発行元である Mozilla から
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), [Chrome](https://www.google.com/chrome/) の発行元である Google から
+- [Microsoft 独自の開発者向けドキュメント](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) の場合
+
+✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。
+
+---
+
+## 🚀 チャレンジ
+
+いくつかのプログラミング言語について比較してみましょう。
+JavaScriptとJavaの特徴は？
+COBOLとGoについては？
+
+## 事後テスト
+[事後テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ja)
+
+## レビュー & 自習
+
+プログラマーが利用できる様々な言語について、少しだけかじってみましょう。
+ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。
+なにかわかりましたか？
+
+## 課題
+
+[ドキュメントを読む](assignment.ja.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md

@@ -0,0 +1,194 @@
+# 프로그래밍 언어 및 도구 소개
+
+이 강의에서는 프로그래밍 언어의 기초를 다룹니다. 여기에서 다루는 주제는 오늘 날 많은 최신 프로그래밍 언어에 적용됩니다. 'Tools of the Trade' 세션에서는 개발자에게 도움이 되는 유용한 소프트웨어에 대해 알아보겠습니다.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ko)
+
+## 소개
+
+이 강의에서 다음 내용을 다룹니다.
+
+- 프로그래밍이란?
+- 프로그래밍 언어의 타입
+- 프로그램의 기본 요소
+- 전문적인 개발자를 위한 유용한 소프트웨어와 도구
+
+## 프로그래밍이란?
+
+프로그래밍(코딩)은 컴퓨터 또는 모바일에 명령을 내리는 프로세스입니다. 프로그래밍 언어로 명령어를 작성한 후 장치에서 해석합니다. 이러한 명령어 세트는 다양한 이름으로 참조 될 수 있지만 *program*, *computer program*, *application (app)*, 그리고 *executable* 로도 인기있는 이름입니다.
+
+*program*은 코드로 작성된 모든 것이 될 수 있습니다; 웹 사이트, 게임과 전화 앱도 프로그램입니다. 코드를 작성하지 않고 프로그램을 만들 수는 있지만, 기본 로직은 장치로 해석되며 코드로 작성되었을 가능성이 높습니다. *running* 또는 *executing code* 프로그램이 명령을 수행하고 있습니다. 현재 이 강의를 읽고있는 장치는 화면에 출력하는 프로그램을 실행하고 있습니다.
+
+✅ 약간의 조사를 해보세요: 세계 최초의 컴퓨터 프로그래머는 누구일까요?
+
+## 프로그래밍 언어
+
+프로그래밍 언어는 개발자가 기기에 보낼 명령어를 빌드할 때 사용됩니다. 장치는 바이너리(0과 1)만 이해할 수 있으며, *대부분* 개발자에게는 매우 효율적인 통신 방법이 아닙니다. 프로그래밍 언어는 인간과 컴퓨터의 소통을 위한 방법입니다.
+
+프로그래밍 언어는 각자 다른 형식으로 제공되며 다른 용도로 사용될 수 있습니다. 예를 들어 JavaScript는 주로 웹 애플리케이션에 사용되지만, Bash는 주로 운영체제에서 사용됩니다.
+
+*저레벨 언어*는 일반적으로 기기에서 명령을 해석할 때 *고수준 언어*보다 적은 단계로 할 수 있습니다. 그러나 고수준 언어가 인기있는 이유는 가독성과 지원입니다. JavaScript는 고수준 언어로 간주됩니다.
+
+다음 코드는 JavaScript를 사용하는 고수준 언어와 ARM 어셈블리 코드를 사용하는 저수준 언어의 차이점을 보여줍니다.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+안 믿어도 되지만, *두 언어는 같은 일을 하고 있습니다* : 피보나치 수열을 최대 10개까지 출력합니다.
+
+✅ 피보나치 수열은 각 숫자가 0과 1에서 시작하는 앞의 두 숫자의 합이되는 숫자의 집합으로 [정의](https://en.wikipedia.org/wiki/Fibonacci_number)됩니다.
+
+## 프로그램의 요소
+
+프로그램의 단일 명령어를 *statement*라고 불리며, 일반적으로 명령어가 끝나거나 *terminates*되는 위치를 표시하는 문자 또는 줄 간격이 있습니다. 프로그램 종료 방법은 언어마다 다릅니다.
+
+대부분의 프로그램은 명령을 수행하기 위해 명령문을 데이터에 의존 할 수 있는 사용자 또는 다른 곳의 데이터 사용에 의존합니다. 데이터는 프로그램의 작동 방식을 변경할 수 있으므로 프로그래밍 언어에서 나중에 사용할 수 있는 데이터를 임시 저장하도록 제공합니다. 이 데이터를 *변수*라고 불립니다. 변수는 메모리에 데이터를 저장하도록 장치에 지시하는 명령입니다. 프로그램의 변수는 고유 이름을 가지며, 시간이 지남에 따라 값이 변경 될 수 있는 대수학의 변수와 유사합니다.
+
+일부 구문이 장치에서 실행되지 않을 가능성이 있습니다. 이는 일반적으로 개발자가 코드 작성할 때 의도적으로 설계되었거나, 오류가 발생할 때 우연히 발생합니다. 이러한 유형의 애플리케이션 제어는 더 강력하게 유지될 수 ​​있도록 합니다. 일반적으로 제어를 변경하려면 특정 조건이 충족되는 순간에 발생합니다. 프로그램 실행 방법을 제어하는 ​​최신 프로그래밍 언어의 일반적인 구문은`if..else` 구문입니다.
+
+✅ 이후 강의에서 이러한 구문의 타입에 대해 자세히 알아볼 것입니다.
+
+## Tools of the Trade
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+이 세션에서는 전문적인 개발 여정을 떠날 때 매우 유용할 수 있는 일부 소프트웨어에 대해 알아봅니다.
+
+**개발 환경**은 개발자가 소프트웨어를 작성할 때 자주 사용하는 도구 및 기능 집합입니다. 이러한 도구 중 일부는 개발자의 특정 요구에 맞게 변경되었으며, 개발자가 작업 또는 개인 프로젝트에서 우선 순위를 변경하거나 다른 프로그래밍 언어를 사용할 때 시간이 지남에 따라 변경 될 수 있습니다. 개발 환경은 이를 사용하는 개발자만큼 독특합니다.
+
+### 에디터
+
+소프트웨어 개발을 위한 가장 중요한 도구 중 하나는 에디터입니다. 에디터는 코드를 작성하고 때로는 코드를 실행하는 곳입니다.
+
+개발자는 몇 가지 추가 이유로 에디터에 의존합니다.
+
+- *디버깅* 코드를 한 줄씩 단계별로 실행하여 버그와 오류를 발견합니다. 일부 에디터에는 디버깅 기능이 있거나, 특정 프로그래밍 언어에 맞게 변경하거나 추가할 수 있습니다.
+- *Syntax highlighting* 코드에 색상 및 텍스트 서식을 추가하여 읽기 쉽게 만듭니다. 대부분 에디터에는 Syntax highlighting을 허용합니다.
+- *확장 및 통합* 기본 에디터에는 없는 추가 도구에 접근하기 위해 개발자를 위한 전문화된 추가 기능입니다. 예를 들어, 많은 개발자는 코드를 문서화하고 작동 방식을 설명하는 방법이 필요하며 오타를 확인하기 위해 맞춤법 검사 확장 프로그램을 설치합니다. 이러한 추가 기능의 대부분은 특정 에디터 내에서 사용하기 위한 것이며, 대부분의 에디터는 사용 가능한 확장 검색을 제공합니다.
+- *커스터마이즈* 대부분의 에디터는 커스터마이즈가 가능하며 각 개발자는 자신이 필요한 개발 환경을 가지게 됩니다. 또한 많은 개발자가 자신의 확장을 만들 수 있습니다.
+
+#### 인기있는 에디터와 웹 개발 확장
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### 브라우저
+
+또 다른 중요 도구는 브라우저입니다. 웹 개발자는 웹에서 코드가 어떻게 실행되는지 보기 위해 브라우저에 의존하며, HTML과 같은 에디터에서 작성된 웹 페이지의 시각적 요소를 보는데도 사용됩니다.
+
+많은 브라우저에는 개발자가 애플리케이션에 대한 중요한 인사이트를 수집하고 잡아내는 것에 도움이 되는 유용한 기능 및 정보가 포함된 *개발자 도구* (DevTools)가 함께 제공됩니다. 예시: 웹 페이지에 오류가 있는 경우, 오류가 발생한 시기를 아는 것이 도움될 때가 있습니다. 이 정보를 잡을 수 있도록 브라우저의 DevTools를 구성 할 수 있습니다.
+
+#### 인기있는 브라우저와 DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Command Line 도구
+
+일부 개발자는 일상적인 작업에 그래픽 작업을 덜 하기 위해 Command Line에 의존합니다. 코드를 개발하려면 상당한 양의 코드 타이핑이 필요하며, 일부 개발자는 키보드의 흐름을 방해하지 않는 것을 선호하므로 키보드 단축키를 사용하여 데스크톱 창을 전환하여 다른 파일에서 작업하거나, 도구를 사용합니다. 대부분 작업은 마우스로 완료할 수 있지만, Command Line을 사용하는 한 가지 이점은 마우스와 키보드를 서로 바꾸지 않고도 Command Line 도구로 많은 작업을 수행할 수 있다는 것입니다. Command Line의 또 다른 이점은 사용자 지정 구성을 저장하고, 나중에 변경하거나 새 컴퓨터로 개발 할 때 그대로 가져올 수도 있다는 것입니다. 개발 환경은 각 개발자마다 다르기  때문에 일부는 Command Line 사용을 피하고 일부는 전적으로 의존하며 일부는 두 가지를 혼용하여 사용하는 것을 선호합니다.
+
+### 인기 있는 Command Line 옵션
+
+command line 옵션은 사용하는 운영체제에 따라 다릅니다.
+
+*💻 = 운영체제에 사전 설치되어 있습니다.*
+
+#### 윈도우즈
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### 맥OS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### 리눅스
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### 인기있는 Command Line 도구
+
+- [Git](https://git-scm.com/) (💻 on most operating sytems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### 문서
+
+개발자가 새로운 것을 배우고 싶거나, 방식을 알기 위해 문서를 찾을 가능성이 높습니다. 개발자는 종종 문서에 의존하여 도구와 언어를 올바르게 사용하는 방법을 안내하고, 작동 방식에 대한 더 깊은 지식을 얻습니다.
+
+#### 웹 개발의 인기있는 문서
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla, [Firefox](https://www.mozilla.org/firefox/) 게시자
+- [Frontend Masters](https://frontendmasters.com/learn/)
+-[Web.dev](https://web.dev), Google의 [Chrome](https://www.google.com/chrome/) 게시자
+-[Microsoft 자체 개발자 문서](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) 용 
+
+✅ 약간의 조사를 해보세요: 이제 웹 개발자 환경의 기본 사항을 알았으므로, 웹 디자이너 환경과 비교하고 대조하십시오.
+
+---
+
+## 🚀 도전
+
+일부 프로그래밍 언어를 비교하십시오. JavaScript와 자바의 특징은 무엇입니까? COBOL과 Go는 어떻습니까?
+
+## 강의 후 퀴즈
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=ko)
+
+## 리뷰 & 자기주도 학습
+
+프로그래머가 사용할 수 있는 다른 언어에 대해 조금 공부하십시오. 한 언어로 한 줄을 쓴 다음, 다른 언어로 다시 실행하십시오. 무엇을 배우나요?
+
+## 과제 
+
+[Reading the Docs](../assignment.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md

@@ -0,0 +1,192 @@
+# Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan
+
+Pelajaran ini merangkumi asas bahasa pengaturcaraan. Topik yang anda akan belajar di sini dapat mengaplikasikan untuk kebanyakan bahasa pengaturcaraan moden hari ini. Pada bahagian 'Alat Perdagangan', anda akan belajar bagaimana mengenai perisian berguna yang membantu anda sebagai pembangun.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuiz Pra-Kuliah
+[Kuiz Pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+
+## Pengenalan
+
+Dalam bab ini, kita akan belajar:
+
+- Apa itu pengaturcaraan?
+- Jenis bahasa pengaturcaraan
+- Elemen asas program
+- Perisian dan perkakas yang berguna untuk pembangun profesional
+
+## Apa itu pengaturcaraan?
+
+Pengaturcaraan (juga dikenali sebagai pengekodan) adalah proses menulis arahan ke peranti, seperti komputer atau peranti mudah alih. Kami menulis arahan ini dengan bahasa pengaturcaraan, yang kemudian ditafsirkan oleh peranti. Set arahan ini dapat disebut dengan pelbagai nama, tetapi *program*, *program komputer*, *aplikasi (app)*, dan *boleh dilaksanakan* ialah beberapa nama yang popular.
+
+*Program* boleh menjadi apa-apa sahaja yang ditulis dengan kod; laman web, permainan, dan aplikasi telefon adalah program. Walaupun mungkin kita boleh membuat program tanpa menulis kod, logik yang mendasari ditafsirkan ke peranti dan logik itu kemungkinan besar ditulis dengan kod. Program yang *melaksanakan kod* ialah dedefinisikan sebagai program yang sedang menjalankan arahan. Peranti yang anda sedang gunakan untuk membaca pelajaran ini sedang menjalankan program sendiri untuk mencetakkan pada skrin anda.
+
+✅ Lakukan sedikit pengajian: siapakah yang dianggap sebagai pengaturcara komputer pertama di dunia?
+
+## Bahasa Pengaturcaraan
+
+Bahasa pengaturcaraan berfungsi untuk tujuan utama: bagi pembangun untuk membina arahan untuk menghantar ke peranti. Peranti hanya dapat memahami binari (1s dan 0s), dan *untuk  kebanyakan* pembangun itu bukan kaedah yang sangat efisien untuk berkomunikasi. Bahasa pengaturcaraan adalah wahana berkomunikasi antara manusia dan komputer.
+
+Bahasa pengaturcaraan terdapat dalam format-format yang berbeza dan mungkin mempunyai tujuan yang berbeza. Sebagai contoh, ('JavaScript') digunakan terutamanya untuk aplikasi web dan ('Bash') digunakan terutamanya untuk sistem operasi.
+
+*Bahasa tahap rendah* biasanya memerlukan langkah yang lebih sedikit berbanding daripada *bahasa tahap tinggi* agar peranti dapat menafsirkan arahan. Walau bagaimanapun, apa yang menjadikan bahasa peringkat tinggi menjadi popular adalah kebolehbacaan dan sokongannya. ('JavaScript') dianggap bahasa tahap tinggi.
+
+Kod berikut akan menggambarkan perbezaan antara bahasa tahap tinggi dengan ('JavaScript') dan bahasa tahap rendah dengan kod pemasangan ARM.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Percaya atau tidak, *mereka berdua melakukan perkara yang sama*: mencetak urutan Fibonacci hingga 10.
+
+✅ Urutan Fibonacci [didefinisikan] (https://en.wikipedia.org/wiki/Fibonacci_number) sebagai satu set nombor sehingga setiap nombor adalah jumlah dari dua nombor sebelumnya, bermula dari 0 dan 1.
+
+## Elemen Asas Program
+
+Satu arahan dalam program dipanggil *pernyataan* dan biasanya akan mempunyai watak atau jarak baris yang menandakan di mana arahan itu berakhir, atau *diterminasikan*. Bagaimanakah program ditamatkan berbeza-beza dengan setiap bahasa.
+
+Sebilangan besar program bergantung pada penggunaan data dari pengguna atau di tempat lain, di mana pernyataan mungkin bergantung pada data untuk melaksanakan arahan. Data dapat mengubah bagaimana program berperilaku, sehingga bahasa pengaturcaraan dilengkapi dengan cara untuk menyimpan data sementara yang dapat digunakan kemudian. Data ini dipanggil *pemboleh ubah* (*Variable*). Pemboleh ubah ialah pernyataan yang memerintahkan peranti menyimpan data dalam ingatannya. Pemboleh ubah dalam program serupa dengan ('algebra'), di mana mereka mempunyai nama yang unik dan nilainya mungkin berubah dari semasa ke semasa.
+
+Ada kemungkinan beberapa penyataan tidak akan dilaksanakan oleh peranti. Ini biasanya berdasarkan reka bentuk apabila ditulis oleh pembangun atau secara tidak sengaja apabila berlaku kesalahan yang tidak dijangka. Jenis kawalan aplikasi ini menjadikannya lebih mantap dan dapat dikendalikan. Biasanya perubahan kawalan ini berlaku apabila keputusan tertentu dipenuhi. Pernyataan umum dalam bahasa pengaturcaraan moden untuk mengawal bagaimana program dijalankan adalah pernyataan `if..else`.
+
+✅ Anda akan belajar lebih mendalam tentang jenis pernyataan ini dalam pelajaran seterusnya
+
+## Alat Perdagangan
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+Dalam bahagian ini, anda akan belajar tentang beberapa perisian yang mungkin berguna bagi anda semasa memulakan perjalanan pengembangan profesional anda.
+
+**Persekitaran pengembangan** ('development enviroment') ialah sekumpulan alat dan ciri unik yang sering digunakan oleh pembangun semasa menulis perisian. Sebilangan alat ini telah disesuaikan untuk keperluan khusus pembangun, dan mungkin berubah dari masa ke masa jika pembangun mengubah keutamaan dalam kerja atau projek peribadi, atau ketika mereka menggunakan bahasa pengaturcaraan yang berbeda. Persekitaran pembangunan sama uniknya dengan pemaju yang menggunakannya.
+
+### Editor
+
+Salah satu alat yang paling penting untuk pembangunan perisian adalah ('editor'). ('Editor') ialah tempat anda menulis kod anda dan kadang kala anda akan menjalankan kod anda.
+
+Pembangun bergantung pada editor untuk beberapa sebab tambahan:
+
+- *Debugging* Mencari bug dan kesilapan dengan melangkah ke kod, baris demi baris. Beberapa editor mempunyai kemampuan debug, atau dapat disesuaikan dan ditambahkan untuk bahasa pengaturcaraan tertentu.
+- *Penyorotan sintaks* Menambah warna dan format teks ke kod, menjadikannya lebih mudah dibaca. Sebilangan besar editor membenarkan penyorotan sintaks yang disesuaikan.
+- *Sambungan dan Integrasi* Penambahan yang dikhususkan untuk pembangun, oleh pemaju, untuk akses ke alat tambahan yang tidak terdapat dalam penyunting asas. Sebagai contoh, banyak pembangun juga memerlukan cara untuk mendokumentasikan kod mereka dan menerangkan cara kerjanya dan akan memasang pelanjutan pemeriksaan ejaan untuk memeriksa kesalahan ketik. Sebilangan besar penambahan ini dimaksudkan untuk digunakan dalam editor tertentu, dan kebanyakan editor datang dengan cara untuk mencari sambungan yang tersedia.
+- *Penyesuaian* Sebilangan besar editor sangat disesuaikan, dan setiap pembangun akan mempunyai persekitaran pembangunan unik mereka sendiri yang sesuai dengan keperluan mereka. Banyak juga yang membenarkan pembangun membuat peluasan mereka sendiri.
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Penyemak Imbas
+
+ Alat penting lain ialah penyemak imbas. Pembangun web bergantung pada penyemak imbas untuk melihat bagaimana kod mereka berjalan di web, ia juga digunakan untuk melihat elemen visual dari laman web yang ditulis dalam editor, seperti HTML.
+
+ Banyak penyemak imbas dilengkapi dengan *developer tools* (DevTools) yang mengandungi sekumpulan ciri dan maklumat berguna untuk membantu pembangun mengumpulkan dan menangkap pandangan penting mengenai aplikasinya. Contohnya: Sekiranya halaman web mempunyai kesilapan, kadang-kadang bermanfaat untuk mengetahui kapan halaman tersebut berlaku. DevTools dalam penyemak imbas boleh dikonfigurasi untuk menangkap maklumat ini.
+
+### Penyemak Imbas Popular dan DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Alat Command Line
+
+Sebahagian pembangun lebih suka paparan yang kurang grafik untuk tugas harian mereka dan bergantung kepada baris perintah untuk mencapainya. Membangunkan kod memerlukan sebilangan besar menaip, dan sebilangan pembangun memilih untuk tidak mengganggu aliran mereka pada papan kekunci dan akan menggunakan pintasan papan kekunci untuk menukar antara tetingkap desktop, mengerjakan fail yang berbeza, dan menggunakan alat. Sebilangan besar tugas dapat diselesaikan dengan tetikus, tetapi satu manfaat menggunakan baris perintah adalah banyak yang dapat dilakukan dengan alat baris perintah tanpa perlu menukar antara tetikus dan papan kekunci. Manfaat yang lain daripada baris perintah ialah mereka boleh dikonfigurasi dan anda dapat menukar konfigurasi yang sesuai untuk anda, mengubahnya kemudian, dan juga mengimportnya ke mesin pengembangan baru. Kerana persekitaran pembangunan sangat unik bagi setiap pembangun, ada yang akan menghindari penggunaan baris perintah, ada yang akan bergantung sepenuhnya, dan ada yang lebih suka gabungan kedua-duanya.
+
+### Pilihan Command Line Popular
+
+Pilihan untuk ('command line') akan berbeza berdasarkan sistem operasi yang anda mengguna.
+
+*💻 = sudah dimuat turun dalam sistem operasi.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (Juga dikenali sebagai CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
+
+#### Popular Command Line Tools
+
+- [Git](https://git-scm.com/) (💻 Dimuat turun pada kebanyakkan sistem operasi)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Dokumentasi
+
+Apabila pembangun ingin mempelajari sesuatu yang baru, kemungkinan besar mereka akan beralih ke dokumentasi untuk mengetahui cara menggunakannya. Pembangun sering bergantung pada dokumentasi untuk membimbing mereka bagaimana menggunakan alat dan bahasa dengan betul, dan juga untuk mendapatkan pengetahuan yang lebih mendalam tentang cara ia berfungsi.
+
+#### Dokumentasi Popular untuk Pembangunan Web
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), dari Mozilla, penerbit [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), dari Google, penerbit [Chrome](https://www.google.com/chrome/)
+- [Dokumen pembangun Microsoft sendiri](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), untuk [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Lakukan penyelidikan: Sekarang setelah anda mengetahui asas-asas persekitaran pembangun web, membandingkan dan membezakannya dengan persekitaran pereka web.
+
+---
+
+## 🚀 Cabaran
+
+Bandingkan beberapa bahasa pengaturcaraan. Apa ciri unik JavaScript berbanding dengan Java? Bagaimanakah dengan COBOL vs. Go?
+
+## Kuiz Pasca Kuliah
+[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Mengkaji sendiri & Belajar sendiri
+
+Belajar sedikit mengenai bahasa yang disediakan untuk pengaturcara. Cuba menulis baris dalam satu bahasa pengaturcaraan, dan kemudian membuat semula dalam dua bahasa pengaturcaraan lain. Apakah yang anda pelajari?
+
+## Tugasan
+
+[Membaca Dokumentasi](assignment.ms.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md

@@ -0,0 +1,195 @@
+# Introductie van Programmeertalen en Bijbehorend Vakgereedschap
+
+Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leert u over nuttige toepassingen die u helpen als web ontwikkelaar.
+
+![Introductie Programmeren](/sketchnotes/webdev101-programming.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+
+## Introductie
+
+In deze les hebben we het over:
+
+- Wat is programmeren?
+- Verschillende typen programmeertalen.
+- Basis elementen van een programma.
+- Nuttige toepassingen en gereedschap voor de professionele web ontwikkelaar.
+
+## Wat is programmeren?
+
+Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, *script* en *executable*.
+
+Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat u nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen.
+
+✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur?
+
+## Programmeertalen
+
+Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiënte manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers.
+
+Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. JavaScript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen.
+
+*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is JavaScript.
+
+Het volgende codevoorbeeld laat het verschil zien tussen een hogere (JavaScript) en een lagere (ARM assembly) programeertaal.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Geloof het of niet, maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal.
+
+✅ Een Fibonacci reeks is [gedefinieerd](https://nl.wikipedia.org/wiki/Rij_van_Fibonacci) als een set van getallen waarvan elk getal de som is van de vorige twee getallen, beginnend met 0 en 1.
+
+## Elementen van een programma
+
+Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal.
+
+De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan wat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd.
+
+Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement.
+
+✅ U leert meer over het `if..else` statement in de volgende lessen.
+
+## Vakgereedschap
+
+[![Vakgereedschap](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap")
+
+In dit onderdeel leert u welke applicaties u wellicht handig vindt om mee te werken als u uw professionele web ontwikkelaar carrière start.
+
+Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moet worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken.
+
+### Editors
+
+Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijft u uw code en soms runt u daar ook uw code.
+
+Ontwikkelaars gebruiken editors ook om de volgende redenen:
+
+- *Debugging* Het regel voor regel runnen van uw code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen.
+- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar uw eigen smaak.  
+- *Extensies en Integraties* Uitbreidingen van de editor, speciaal voor ontwikkelaars en gemaakt door ontwikkelaars, om extra functionaliteiten toe te voegen die standaard niet in de editor inzitten. Bijvoorbeeld een spellingscontrole extensie wat documentatie kan controleren op spelfouten. Vaak zijn extensies ontwikkeld voor een specifieke code editor. De meeste editors bieden een zoekfunctie om relevante extensies te vinden.
+- *Persoonlijke instellingen* De meeste editors hebben instellingen die volledig aan te passen zijn naar de wens van de ontwikkelaar. Elke ontwikkelaar zal daarom een unieke ontwikkelomgeving hebben wat voldoet aan hun specifieke wensen.
+
+#### Populaire Editors en Web Ontwikkeling Extensies
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Browsers
+
+Nog een zeer belangrijke applicatie is de webbrowser. Web ontwikkelaars zijn afhankelijk van de browser om na te gaan hoe hun code draait op het web. De browser wordt ook gebruikt om de visuele elementen van een web pagina weer te geven die geschreven zijn in de editor, zoals HTML.  
+
+Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwikkelaars makkelijk inzicht kunnen krijgen over hun applicatie. Bijvoorbeeld: als een webpagina fouten heeft, is het handig om te weten wanneer die fouten zijn opgetreden. In zo'n situatie kan DevTools kan geconfigureerd worden om deze informatie te verzamelen.
+
+#### Populaire Browsers en DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Command Line Applicaties
+
+Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat u heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en u deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties.
+
+### Populaire Command Lines
+
+Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat u gebruikt.
+
+*💻 = is geïnstalleerd met het besturingssysteem.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (ook bekend als CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Populaire Command Line Applicaties
+
+- [Git](https://git-scm.com/) (💻 op de meeste besturingssystemen)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentatie
+
+Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie (Docs) raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk.
+
+#### Populaire Documentatie over Web Ontwikkeling
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), van Mozilla, uitgevers van [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), van Google, uitgevers van [Chrome](https://www.google.com/chrome/)
+- [eigen ontwikkelaarsdocumenten van Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), voor [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Doe wat onderzoek: Nu u de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer.
+
+---
+
+## 🚀 Uitdaging
+
+Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Java. En het verschil tussen COBOL en Go?
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Review & Zelfstudie
+
+Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijgt u een goed idee wat er voor nodig is om tekst in de browser te tonen.
+
+## Opdracht
+
+[Lees de documentatie](../assignment.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md

@@ -0,0 +1,97 @@
+# प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय
+
+यो पाठले प्रोग्रामिङ भाषाहरूको आधारभूत कुराहरू समेट्छ। यहाँ समेटिएका विषयहरू आजका अधिकांश आधुनिक प्रोग्रामिङ भाषाहरूमा लागू हुन्छन्। 'व्यापारका उपकरणहरू' खण्डमा, तपाईंले विकासकर्ताको रूपमा मद्दत गर्ने उपयोगी सफ्टवेयरको बारेमा सिक्नुहुनेछ।
+
+![Intro Programming](../../../sketchnotes/webdev101-programming.png)
+> [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा स्केचनोट
+
+## प्रि-लेक्चर क्विज
+[प्री-लेक्चर क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1)
+
+## परिचय
+
+यस पाठमा, हामी कभर गर्नेछौं:
+
+- प्रोग्रामिङ भनेको के हो?
+- प्रोग्रामिङ भाषाहरूको प्रकार
+- कार्यक्रमको आधारभूत तत्वहरू
+- व्यावसायिक विकासकर्ताको लागि उपयोगी सफ्टवेयर र उपकरण
+
+> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) मा यो पाठ लिन सक्नुहुन्छ!
+
+## प्रोग्रामिङ भनेको के हो?
+
+प्रोग्रामिङ (कोडिङ पनि भनिन्छ) कम्प्युटर वा मोबाइल उपकरण जस्ता उपकरणका लागि निर्देशनहरू लेख्ने प्रक्रिया हो। हामी यी निर्देशनहरू प्रोग्रामिङ भाषाको साथ लेख्छौं, जुन त्यसपछि उपकरणद्वारा व्याख्या गरिन्छ। निर्देशनहरूको यी सेटहरू विभिन्न नामहरूद्वारा उल्लेख गर्न सकिन्छ, तर *कार्यक्रम*, *कम्प्युटर प्रोग्राम*, *एप्लिकेशन (एप)*, र *कार्यान्वयनयोग्य* केही लोकप्रिय नामहरू हुन्।
+
+एक *कार्यक्रम* कोड संग लेखिएको कुनै पनि हुन सक्छ; वेबसाइटहरू, खेलहरू, र फोन एपहरू कार्यक्रमहरू हुन्। कोड नलिइकन एउटा कार्यक्रम सिर्जना गर्न सम्भव भए पनि, अन्तर्निहित तर्कलाई यन्त्रद्वारा व्याख्या गरिन्छ र त्यो तर्क सम्भवतः कोडसँग लेखिएको थियो। एउटा प्रोग्राम जुन * चलिरहेको * वा * कार्यान्वयन * कोड निर्देशनहरू पूरा गर्दैछ। तपाईंले यो पाठ पढिरहनुभएको यन्त्रले यसलाई तपाईंको स्क्रिनमा प्रिन्ट गर्नको लागि एउटा कार्यक्रम चलाउँदैछ।
+
+✅ थोरै अनुसन्धान गर्नुहोस्: संसारको पहिलो कम्प्युटर प्रोग्रामर कसलाई मानिन्छ?
+
+## प्रोग्रामिङ भाषाहरू
+
+प्रोग्रामिङ भाषाहरूले विकासकर्ताहरूलाई उपकरणको लागि निर्देशनहरू लेख्न सक्षम बनाउँछन्। यन्त्रहरूले बाइनरी (1s र 0s) मात्र बुझ्न सक्छन्, र *धेरै* विकासकर्ताहरूका लागि यो सञ्चार गर्ने एकदमै प्रभावकारी तरिका होइन। प्रोग्रामिङ भाषाहरू मानिसहरू र कम्प्युटरहरू बीच सञ्चारको माध्यम हो।
+
+प्रोग्रामिङ भाषाहरू विभिन्न ढाँचाहरूमा आउँछन् र विभिन्न उद्देश्यहरू पूरा गर्न सक्छन्। उदाहरणका लागि, जाभास्क्रिप्ट मुख्यतया वेब अनुप्रयोगहरूको लागि प्रयोग गरिन्छ, जबकि Bash मुख्य रूपमा अपरेटिङ सिस्टमहरूको लागि प्रयोग गरिन्छ।
+
+*निम्न स्तरका भाषाहरू* लाई निर्देशनहरू व्याख्या गर्न यन्त्रको लागि *उच्च स्तरका भाषाहरू* भन्दा कम चरणहरू चाहिन्छ। यद्यपि, उच्च स्तरका भाषाहरूलाई लोकप्रिय बनाउने कुरा भनेको तिनीहरूको पठनीयता र समर्थन हो। जाभास्क्रिप्टलाई उच्च स्तरको भाषा मानिन्छ।
+
+निम्न कोडले जाभास्क्रिप्टको साथ उच्च स्तरको भाषा र ARM असेंबली कोडको साथ निम्न स्तरको भाषा बीचको भिन्नतालाई चित्रण गर्दछ।
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+विश्वास गर्नुहोस् वा नगर्नुहोस्, *तिनीहरू दुवैले एउटै काम गरिरहेका छन्*: 10 सम्मको फिबोनाची अनुक्रम प्रिन्ट गर्दै।
+
+✅ फिबोनाची अनुक्रम [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) संख्याहरूको सेटको रूपमा हो जसमा प्रत्येक संख्या ० र १ बाट सुरु हुने दुई अघिल्लो संख्याहरूको योग हो।
+
+## कार्यक्रमका तत्वहरू
+
+कार्यक्रममा एकल निर्देशनलाई *कथन* भनिन्छ र सामान्यतया एउटा क्यारेक्टर वा लाइन स्पेसिङ हुन्छ जहाँ निर्देशन समाप्त हुन्छ, वा *समाप्त हुन्छ*। कार्यक्रम कसरी समाप्त हुन्छ प्रत्येक भाषा अनुसार फरक हुन्छ।
+
+कार्यक्रम भित्रका कथनहरू निर्देशनहरू पूरा गर्नका लागि प्रयोगकर्ता वा अन्यत्र प्रदान गरिएको डाटामा भर पर्न सक्छन्। डेटाले प्रोग्रामको व्यवहार कसरी परिवर्तन गर्न सक्छ, त्यसैले प्रोग्रामिङ भाषाहरू अस्थायी रूपमा डेटा भण्डारण गर्ने तरिकाको साथ आउँछन् ताकि यसलाई पछि प्रयोग गर्न सकिन्छ। यसलाई *चर* भनिन्छ। चरहरू कथनहरू हुन् जसले यन्त्रलाई यसको मेमोरीमा डेटा बचत गर्न निर्देशन दिन्छ। कार्यक्रमहरूमा चरहरू बीजगणितका चरहरू जस्तै हुन्छन्, जहाँ तिनीहरूको एक अद्वितीय नाम हुन्छ र तिनीहरूको मान समयसँगै परिवर्तन हुन सक्छ।
+
+त्यहाँ एक मौका छ कि केहि कथनहरू यन्त्रद्वारा कार्यान्वयन गरिने छैन। यो सामान्यतया डिजाइन द्वारा हो जब विकासकर्ता द्वारा लेखिएको वा दुर्घटना द्वारा जब एक अप्रत्याशित त्रुटि हुन्छ। अनुप्रयोगमा यस प्रकारको नियन्त्रणले यसलाई अझ बलियो र मर्मतयोग्य बनाउँछ। सामान्यतया, नियन्त्रणमा यी परिवर्तनहरू हुन्छन् जब निश्चित सर्तहरू पूरा हुन्छन्। कार्यक्रम कसरी चल्छ भनेर नियन्त्रण गर्न आधुनिक प्रोग्रामिङमा प्रयोग गरिने सामान्य कथन `if..else` कथन हो।
+
+✅ तपाईले यस प्रकारको कथनको बारेमा पछिल्ला पाठहरूमा जान्नुहुनेछ।
+
+## व्यापार को उपकरण
+
+[![व्यापारका उपकरणहरू](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "व्यापारको उपकरण")
+
+> 🎥 टूलिङको बारेमा भिडियोको लागि माथिको छविमा क्लिक गर्नुहोस्
+
+यस खण्डमा, तपाइँ केहि सफ्टवेयर बारे जान्नुहुनेछ जुन तपाइँ तपाइँ जस्तै धेरै उपयोगी हुन सक्छ

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md

@@ -0,0 +1,215 @@
+# Introdução a Linguagens de Programação e Ferramentas
+
+Essa lição trata dos básicos de linguagens de programação. Os tópicos tratados aqui se aplicam na maioria das linguagens de programação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que ajudarão como uma pessoa desenvolvedora.
+
+![Introdução à Programação](../../../sketchnotes/webdev101-programming.png)
+
+> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Pré-Lição
+
+[Quiz Pré-Lição](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+
+## Introdução
+
+Nessa lição, vamos falar sobre:
+
+- O que é Programação?
+- Tipos de linguagens de programação
+- Elementos básicos de um programa
+- Ferramentas e softwares utéis para a pessoa desenvolvedora
+
+## O que é Programação?
+
+Programação (também conhecida como codificação) é o processo de escrever instruções em um dispositivo, como um computador ou dispositivo móvel. Escrevemos essas instruções com uma linguagem de programação, que é então interpretada pelo dispositivo. Esses conjuntos de instruções podem ser chamados de vários nomes, mas _programa_, _programa de computador_, _aplicativo (app_ e _executável_) são alguns nomes populares.
+
+Um _programa_ pode ser qualquer coisa escrita com código; sites, jogos e aplicativos de celular são programas. Embora seja possível criar um programa sem escrever código, a lógica subjacente é interpretada para o dispositivo e essa lógica provavelmente foi escrita com o código. Um programa que está * executando* ou *executando código* está executando instruções. O dispositivo com o qual você está lendo esta lição está executando um programa para exibi-la em sua tela.
+
+✅ Faça uma pequena pesquisa: quem é considerado a primeira pessoa programadora de computador do mundo?
+
+## Linguagens de Programação
+
+Linguagens de programação têm um propósito principal: Serem usadas por pessoas desenvolvedoras para criar instruções para enviar a um dispositivo. Os dispositivos só podem entender binários (1s e 0s) e, para *a maioria* das pessoas desenvolvedoras, essa não é uma maneira muito eficiente de se comunicar. As linguagens de programação são um veículo de comunicação entre humanos e computadores.
+
+As linguagens de programação vêm em formatos diferentes e podem servir a propósitos diferentes. Por exemplo, JavaScript é usado principalmente para aplicativos da web, enquanto Bash é usado principalmente para sistemas operacionais.
+
+*Linguagens de baixo nível* normalmente requerem menos etapas do que *linguagens de alto nível* para um dispositivo interpretar as instruções. No entanto, o que torna as linguagens de alto nível populares é sua legibilidade e suporte. JavaScript é considerado uma linguagem de alto nível.
+
+O código a seguir ilustra a diferença entre uma linguagem de alto nível com JavaScript e uma linguagem de baixo nível com código ARM assembly.
+
+```javascript
+let number = 10;
+let n1 = 0,
+  n2 = 1,
+  nextTerm;
+
+for (let i = 1; i <= number; i++) {
+  console.log(n1);
+  nextTerm = n1 + n2;
+  n1 = n2;
+  n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Acredite ou não, *ambos estão fazendo a mesma coisa*: imprimir uma sequência de Fibonacci de até 10.
+
+✅ A sequência de Fibonacci [definida](https://en.wikipedia.org/wiki/Fibonacci_number) como um conjunto de números em que cada número é a soma dos dois anteriores, começando em 0 e 1.
+
+## Elementos de um programa
+
+Uma única instrução em um programa é chamada de _declaração_ e geralmente terá um caractere ou espaçamento de linha que marca onde a instrução termina, ou _acaba_. Como um programa termina varia com cada idioma.
+
+
+A maioria dos programas depende do uso de dados de um usuário ou de outro lugar, onde as declarações podem se basear em dados para realizar as instruções. Os dados podem alterar o comportamento de um programa, portanto, as linguagens de programação vêm com uma maneira de armazenar dados temporariamente que podem ser usados ​​posteriormente. Esses dados são chamados de _variáveis_. Variáveis ​​são statements que instruem um dispositivo a salvar dados em sua memória. As variáveis ​​nos programas são semelhantes às da álgebra, onde têm um nome exclusivo e seu valor pode mudar com o tempo.
+
+
+Há uma chance de que algumas instruções não sejam executadas por um dispositivo. Isso geralmente ocorre de propósito, quando escrito pela pessoa desenvolvedora, ou por acidente, quando ocorre um erro inesperado. Esse tipo de controle de um aplicativo o torna mais robusto e sustentável. Normalmente, essas mudanças no controle acontecem quando certas decisões são cumpridas. Uma declaração comum em linguagens de programação modernas para controlar como um programa é executado é a declaração `if..else`.
+
+
+✅ Você aprenderá mais sobre esse tipo de declaração nas lições seguintes
+
+
+## Ferramentas
+
+[![Ferramentas](https://img.youtube.com/vi/bynF1E0Hq98/0.jpg)](https://youtube.com/watch?v=bynF1E0Hq98 "Ferramentas")
+
+Nesta seção, você aprenderá sobre alguns softwares que podem ser muito úteis ao iniciar sua jornada de desenvolvimento profissional.
+
+
+Um **ambiente de desenvolvimento** é um conjunto exclusivo de ferramentas e recursos que uma pessoa desenvolvedora usará com frequência ao escrever software. Algumas dessas ferramentas foram personalizadas para as necessidades específicas de uma pessoa desenvolvedora e podem mudar com o tempo se as prioridades de trabalho ou projetos pessoais forem alterados, ou quando usar uma linguagem de programação diferente. Os ambientes de desenvolvimento são tão exclusivos quanto as pessoas desenvolvedoras que os utilizam.
+
+
+### Editores
+
+Uma das ferramentas mais importantes para o desenvolvimento de software é o editor. Os editores são onde você escreve seu código e, às vezes, onde o executará.
+
+Também contamos com os editores por alguns motivos adicionais:
+
+
+- _Debugging_ Descobrir bugs e erros ao passar pelo código, linha por linha. Alguns editores têm recursos de depuração ou podem ser personalizados e adicionados para linguagens de programação específicas.
+- _Destaque da sintaxe_ Adiciona cores e formatação de texto ao código, tornando-o mais fácil de ler. A maioria dos editores permite destaque de sintaxe personalizada.
+- _Extensões e integrações_ Adições especializadas para pessoas desenvolvedoras, por pessoas desenvolvedoras, para acesso a ferramentas adicionais que não são incorporadas ao editor de base. Por exemplo, muitas vezes precisamos de uma maneira de documentar nosso código e explicar como ele funciona, nesse caso, instalaremos uma extensão de verificação ortográfica para verificar erros de digitação. A maioria dessas adições se destina ao uso em um editor específico, e a maioria dos editores vem com uma maneira de pesquisar as extensões disponíveis.
+- _Personalização_ A maioria dos editores é extremamente personalizável e cada pessoa desenvolvedora terá seu ambiente de desenvolvimento exclusivo que atende às suas necessidades. Muitos também permitem que você crie suas próprias extensões.
+
+
+#### Editores Populares e Extensões para Desenvolvimento de Web
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker - verificador ortográfico de código ](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share - Compartilhamento ao vivo](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Formatador de Código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check - verificador ortográfico](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Navegadores
+
+Outra ferramenta crucial é o navegador. As pessoas desenvolvedoras da web contam com o navegador para observar como seu código é executado na internet, isso também é usado para visualizar elementos visuais de uma página da web que são escritos no editor, como HTML.
+
+Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que contêm um conjunto de recursos e informações úteis que ajudam a coletar e capturar percepções importantes sobre seus aplicativos. Por exemplo: se uma página da web contém erros, às vezes é útil saber quando eles ocorreram. DevTools em um navegador pode ser configurado para capturar essas informações. 
+
+
+#### Navegadores Populares e DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Ferramentas da Linha de Comando
+
+Algumas pessoas desenvolvedoras preferem uma visualização menos gráfica para suas tarefas diárias e contam com a linha de comando para fazer isso. O desenvolvimento de código requer uma quantidade significativa de digitação e algumas pessoas desenvolvedoras preferem não interromper seu fluxo no teclado e usam atalhos de teclado para alternar entre as janelas da área de trabalho, trabalhar em arquivos diferentes e usar ferramentas. 
+A maioria das tarefas pode ser concluída com um mouse, mas um benefício de usar a linha de comando é que muito pode ser feito com ferramentas de linha de comando sem a necessidade de alternar entre o mouse e o teclado. Outro benefício da linha de comando é que ela é configurável ​​e você pode salvar sua configuração personalizada, alterá-la posteriormente e também importá-la para novas máquinas de desenvolvimento. Como os ambientes de desenvolvimento são tão exclusivos para cada pessoa desenvolvedora, algumas evitam o uso da linha de comando e outras dependem dela inteiramente e existem também aquelas que preferem uma combinação dos dois.
+
+
+### Opções Populares de Linhas de Comando
+
+As opções da linha de comando variam de acordo com o sistema operacional que você usa.
+
+
+_💻 = já vem pré-instalado no sistema operacional._
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Ferramentas Populares para Linha de Comando
+
+- [Git](https://git-scm.com/) (💻 na maioria dos sistemas operacionais)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentação
+
+Quando uma pessoa desenvolvedora deseja aprender algo novo, provavelmente recorrerá à documentação para aprender como usá-la. As pessoas desenvolvedoras geralmente contam com a documentação para orientá-las sobre como usar ferramentas e linguagens de maneira adequada e também para obter um conhecimento mais profundo de como funciona.
+
+#### Documentações Populares para Desenvolvimento de Web
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), do Mozilla, editores do [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), do Google, editores do [Chrome](https://www.google.com/chrome/)
+- [Documentos de desenvolvedor da própria Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Faça uma pesquisa: agora que você conhece os fundamentos do ambiente de desenvolvimento da web, compare-o com o ambiente de um web designer.
+
+
+---
+
+## 🚀 Desafio
+
+Compare algumas linguagens de programação. Quais são algumas das características únicas de JavaScript vs. Java? E COBOL x Go?
+
+
+
+## Quiz Pós-Aula
+
+[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Revisão & Autoestudo
+
+Estude um pouco sobre as diferentes linguagens de programação à disposição. Tente escrever uma linha em uma delas e depois refaça em outras duas. O que você aprende?
+
+
+## Lição de casa
+
+[Lendo Documentação](assignment.pt.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md

@@ -0,0 +1,203 @@
+# Введение в языки программирования и инструменты разработки
+
+Этот урок охватывает основы языков программирования. Рассматриваемые здесь темы применимы к большинству современных языков программирования. В разделе «Инструменты разработки» вы узнаете о полезном программном обеспечении, которое поможет вам как разработчику.
+
+![Введение в программирование](/sketchnotes/webdev101-programming.png)
+
+> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предлекционный квиз
+
+[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
+
+## Введение
+
+В этом уроке мы рассмотрим:
+
+- Что такое программирование?
+- Типы языков программирования
+- Основные элементы программы
+- Полезный софт и инструментарий для профессионального разработчика
+
+> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
+
+## Что такое программирование?
+
+Программирование (также известное как кодирование) - это процесс записи инструкций на устройство, такое как компьютер или мобильное устройство. Мы пишем эти инструкции на языке программирования, который затем интерпретируется устройством. Эти наборы инструкций могут называться различными именами, но _программа_, _компьютерная программа_, _приложение_ и _исполняемый файл_ - это несколько популярных имен.
+
+_Программой_ может быть что угодно, написанное с помощью кода: веб-сайты, игры и приложения для телефона - это программы. Хотя можно создать программу без написания кода, основная логика интерпретируется на устройстве, и эта логика, скорее всего, была кем-то написана с помощью кода. Программа, которая _запущена_ или _исполняет код_, выполняет инструкции. Устройство, на котором вы сейчас читаете этот урок, запускает программу для его вывода на ваш экран.
+
+✅ Проведите небольшое исследование: кто считается первым в мире программистом?
+
+## Языки программирования
+
+Языки программирования служат основной цели: с их помощью разработчики могут создавать инструкции для отправки на устройство. Устройства могут понимать только двоичный код (единицы и нули), и для _большинства_ разработчиков это не очень эффективный способ общения. Языки программирования - это средство общения между людьми и компьютерами.
+
+Языки программирования бывают разных форматов и могут служить разным целям. Например, JavaScript в основном используется для веб-приложений, а Bash - в основном для операционных систем.
+
+_Языки низкого уровня_ обычно требуют меньше этапов, чем языки _высокого уровня_, чтобы устройство могло интерпретировать инструкции. Однако то, что делает языки высокого уровня популярными, - это их удобочитаемость и поддержка. JavaScript считается языком высокого уровня.
+
+Следующий код иллюстрирует разницу между языком высокого уровня (JavaScript) и языком низкого уровня (ARM ассемблер).
+
+```javascript
+let number = 10;
+let n1 = 0,
+  n2 = 1,
+  nextTerm;
+
+for (let i = 1; i <= number; i++) {
+  console.log(n1);
+  nextTerm = n1 + n2;
+  n1 = n2;
+  n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Вы не поверите, но _они оба делают одно и то же_: выводят последовательность Фибоначчи до 10.
+
+✅ Последовательность Фибоначчи [определена](https://ru.wikipedia.org/wiki/Числа_Фибоначчи) как набор чисел, каждое из которых является суммой двух предыдущих, начиная с 0 и 1.
+
+## Элементы программы
+
+Одиночная инструкция в программе называется _выражением_ и обычно имеет символ или межстрочный интервал, который отмечает, где инструкция разделяется, или _заканчивается_. Способ завершения программы зависит от языка.
+
+В тех местах, где выражения могут полагаться на данные для выполнения инструкций, большинство программ полагаются на использование данных от пользователя или из других источников. Данные могут изменить поведение программы, поэтому в языках программирования есть способ временного хранения данных, которые можно использовать позже. Эти данные называются _переменными_. Переменные - это выражения, которые инструктируют устройство сохранять данные в памяти устройства. Переменные в программах аналогичны переменным в алгебре, где они имеют уникальное имя, и их значение может меняться со временем.
+
+Есть вероятность, что некоторые выражения не будут выполнены устройством. Обычно это сделано намеренно, когда написано разработчиком, или случайно, когда возникает непредвиденная ошибка. Этот тип управления приложением делает его более надежным и удобным в обслуживании. Обычно эти изменения в управлении происходят, когда выполняются определенные условия. В современных языках программирования распространенным выражением для управления исполнением программы является `if..else` (если..то).
+
+✅ Вы узнаете больше об этом типе инструкций в следующих уроках.
+
+## Инструметы разработки
+
+[![Инструметы разработки](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 Нажмите на изображение выше, чтобы просмотреть видео об инструментах
+
+В этом разделе вы узнаете о программном обеспечении, которое может оказаться очень полезным в начале вашего пути профессионального развития.
+
+**Среда разработки** - это уникальный набор инструментов и функций, которые разработчик может часто использовать при написании программного обеспечения. Некоторые из этих инструментов были настроены для конкретных нужд разработчика и могут измениться со временем, если разработчик меняет приоритеты в работе или личных проектах, или когда он использует другой язык программирования. Среды разработки столь же уникальны, как и разработчики, которые их используют.
+
+### Редакторы
+
+Один из важнейших инструментов разработки программного обеспечения - редактор. Редакторы - это место, где вы пишете свой код, а иногда и где вы запускаете свой код.
+
+Разработчики полагаются на редакторы кода и по нескольким дополнительным причинам.:
+
+- _Отладка_ Выявление багов и ошибок путем пошагового выполнения кода, строка за строкой. Некоторые редакторы имеют возможности отладки или могут быть настроены для определенных языков программирования.
+- _Подсветка синтаксиса_ Добавляет в код цвета и форматирование текста, упрощает чтение. Большинство редакторов позволяют настраивать подсветку синтаксиса.
+- _Расширения и интеграции_ Дополнения, созданные разработчиками и специально предназначенные для разработчиков, предоставляют доступ к дополнительным инструментам, которые не встроены в базовый редактор. Например, многим разработчикам также нужен способ документировать свой код и объяснять, как он работает, и они установят расширение проверки орфографии для проверки опечаток. Большинство этих дополнений предназначены для использования в конкретном редакторе, и большинство редакторов имеют возможность поиска доступных расширений.
+- _Настройка_ Большинство редакторов легко настраиваются, и у каждого разработчика будет своя собственная уникальная среда разработки, которая соответствует его потребностям. Многие редакторы также позволяют разработчикам создавать свои собственные расширения.
+
+#### Популярные редакторы и расширения для веб-разработки
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Браузеры
+
+Еще один важный инструмент - браузер. Веб-разработчики полагаются на браузер, чтобы наблюдать за тем, как их код работает в сети, он также используется для просмотра визуальных элементов веб-страницы, написанных в редакторе, например HTML.
+
+Многие браузеры оснащены _инструментами разработчика_ (DevTools), содержащими набор полезных функций, которые помогают разработчикам собирать и фиксировать важную информацию о своем приложении. Например: если на веб-странице есть ошибки, иногда полезно знать, когда они произошли. DevTools в браузере можно настроить для сбора этой информации.
+
+#### Популярные браузеры и инструменты разработки
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Инструменты командной строки
+
+Некоторые разработчики предпочитают менее графическое представление для своих повседневных задач и полагаются на командную строку для достижения этой цели. Разработка кода требует значительного набора текста, и некоторые разработчики предпочитают не мешать работе с клавиатурой и будут использовать сочетания клавиш для переключения между окнами рабочего стола, работы с разными файлами и использования инструментов. Большинство задач можно выполнить с помощью мыши, но одним из преимуществ использования командной строки является то, что многое можно сделать с помощью инструментов командной строки без необходимости переключаться между мышью и клавиатурой. Еще одним преимуществом командной строки является то, что они настраиваются, и вы можете сохранить свою настраиваемую конфигурацию, изменить ее позже, а также импортировать ее на новые устройства для разработки. Поскольку среды разработки настолько уникальны для каждого разработчика, некоторые избегают использования командной строки, некоторые будут полностью полагаться на нее, а некоторые предпочитают сочетание двух.
+
+### Популярные варианты командной строки
+
+Варианты командной строки зависят от используемой вами операционной системы.
+
+_💻 = предустановлен в операционной системе._
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (также известный как CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Популярные инструменты командной строки
+
+- [Git](https://git-scm.com/) (💻 в большинстве операционных систем)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Документация
+
+Когда разработчик хочет узнать что-то новое, он, скорее всего, обратится к документации, чтобы узнать, как это использовать. Разработчики часто полагаются на документацию, которая поможет им понять, как правильно использовать инструменты и языки, а также получить более глубокие знания о том, как они работают.
+
+#### Популярная документация по веб-разработке
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), от Mozilla, создателей браузера [Firefox](https://www.mozilla.org/firefox/)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), от Google, создателей браузера [Chrome](https://www.google.com/chrome/)
+- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), для [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Проведите небольшое исследование: теперь, когда вы знаете основы среды веб-разработчика, сравните и сопоставьте ее со средой веб-дизайнера.
+
+---
+
+## 🚀 Челлендж
+
+Сравните несколько языков программирования. В чем заключаются уникальные черты JavaScript и Java? Как насчет COBOL vs. Go?
+
+## Постлекционный квиз
+
+[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
+
+## Обзор и самообучение
+
+Изучите немного разные языки программирования, доступные программисту. Попробуйте написать строку на одном языке, а затем повторите ее на двух других. Какие языки вы изучаете?
+
+## Задание
+
+[Чтение документации](assignment.ru.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md

@@ -0,0 +1,198 @@
+# வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்
+
+இந்த பாடம் நிரலாக்க மொழிகளின் அடிப்படைகளை உள்ளடக்கியது. இங்கே உள்ளடக்கப்பட்டுள்ள தலைப்புகள் இன்று பெரும்பாலான நவீன நிரலாக்க மொழிகளுக்கு பொருந்தும். 'வர்த்தககருவிகள்' பிரிவில், நீங்கள் ஒரு டெவலப்பராக உங்களுக்கு உதவும் பயனுள்ள மென்பொருள் பற்றி அறிந்து கொள்வீர்கள்.
+
+![அறிமுக நிரலாக்கம்](/sketchnotes/webdev101-programming.png)
+> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
+
+## விரிவுரைக்கு முந்தைய வினாடி வினா
+[விரிவுரைக்கு முந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ta)
+
+## அறிமுகம்
+
+இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்:
+
+- நிரலாக்க என்றால் என்ன?
+- நிரலாக்க மொழிகளின் வகைகள்
+- ஒரு நிரலின் அடிப்படை கூறுகள்
+- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி
+
+> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) பற்றி எடுத்துக் கொள்ளலாம்!
+
+## நிரலாக்க என்றால் என்ன??
+
+நிரலாக்கம் (குறியீட்டு முறை என்றும் அழைக்கப்படுகிறது) என்பது கணினி அல்லது மொபைல் சாதனம் போன்ற சாதனத்திற்கு அறிவுறுத்தல்களை எழுதும் செயல்முறையாகும். இந்த வழிமுறைகளை நிரலாக்க மொழியுடன் எழுதுகிறோம், இது சாதனத்தால் விளக்கப்படுகிறது. இந்த அறிவுறுத்தல்களின் தொகுப்புகள் பல்வேறு பெயர்களால் குறிப்பிடப்படலாம், ஆனால் *நிரல்*, *கணினி நிரல்*, *பயன்பாடு (பயன்பாடு)*, மற்றும் *செயல்படுத்தக்கூடிய* ஆகியவை சில பிரபலமான பெயர்கள்
+
+*நிரல்* என்பது குறியீடு டன் எழுதப்பட்ட தாக இருக்கலாம்; வலைத்தளங்கள், விளையாட்டுகள் மற்றும் தொலைபேசி பயன்பாடுகள் திட்டங்கள். குறியீட்டை எழுதாமல் ஒரு நிரலை உருவாக்க முடியும் என்றாலும், அடிப்படை தர்க்கம் சாதனத்திற்கு விளக்கப்படுகிறது மற்றும் அந்த தர்க்கம் பெரும்பாலும் குறியீட்டுடன் எழுதப்பட்டது. *இயங்கும்* அல்லது *செயல்படுத்தும் குறியீடு* என்று ஒரு நிரல் வழிமுறைகளை செயல்படுத்துகிறது. நீங்கள் தற்போது இந்த பாடத்தை படிக்கும் சாதனம் உங்கள் திரையில் அச்சிட ஒரு நிரலை இயக்குகிறது.
+
+✅ ஒரு சிறிய ஆராய்ச்சி செய்யுங்கள்: உலகின் முதல் கணினி நிரலாளராக யார் கருதப்படுகிறார்கள்?
+
+## நிரலாக்க மொழிகள்
+
+நிரலாக்க மொழிகள் ஒரு முக்கிய நோக்கத்தை வழங்குகின்றன: டெவலப்பர்கள் ஒரு சாதனத்திற்கு அனுப்புவதற்கான வழிமுறைகளை உருவாக்கவேண்டும். சாதனங்கள் மட்டுமே பைனரி (1 கள் மற்றும் 0 கள்) புரிந்து கொள்ள முடியும், மற்றும் *மிகவும்* டெவலப்பர்கள் தொடர்பு கொள்ள மிகவும் திறமையான வழி அல்ல. நிரலாக்க மொழிகள் மனிதர்களுக்கும் கணினிகளுக்கும் இடையிலான தகவல் தொடர்புக்கான ஒரு வாகனமாகும்.
+
+நிரலாக்க மொழிகள் வெவ்வேறு வடிவங்களில் வருகின்றன மற்றும் வெவ்வேறு நோக்கங்களுக்காக சேவை செய்யலாம். எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட் முதன்மையாக வலை பயன்பாடுகளுக்கு பயன்படுத்தப்படுகிறது, அதே நேரத்தில் பாஷ் முதன்மையாக இயக்க முறைமைகளுக்கு பயன்படுத்தப்படுகிறது.
+
+*குறைந்த நிலை மொழிகள்* பொதுவாக வழிமுறைகளை விளக்குவதற்கு ஒரு சாதனத்திற்கு *உயர் மட்ட மொழிகளை* விட குறைவான படிகள் தேவைப்படுகின்றன. எனினும், உயர் மட்ட மொழிகளை பிரபலமாக்குவது அவற்றின் வாசிப்பு மற்றும் ஆதரவு ஆகும். ஜாவாஸ்கிரிப்ட் ஒரு உயர் மட்ட மொழியாகக் கருதப்படுகிறது.
+
+பின்வரும் குறியீடு ஜாவாஸ்கிரிப்ட் கொண்ட உயர் நிலை மொழிக்கும் ஏஆர்எம் அசெம்பிளி குறியீட்டுடன் குறைந்த நிலை மொழிக்கும் இடையிலான வித்தியாசத்தை விளக்குகிறது.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+நம்பினால் நம்புங்கள், *அவர்கள் இருவரும் ஒரே காரியத்தைச் செய்கிறார்கள்*: 10 வரை ஒரு ஃபிபோனச்சி வரிசையை அச்சிடுதல்.
+
+✅ ஒரு ஃபிபோனச்சி வரிசை யானது [வரையறுக்கப்பட்ட](https://en.wikipedia.org/wiki/Fibonacci_number) எண்களின் தொகுப்பாகும், இது ஒவ்வொரு எண்ணும் 0 மற்றும் 1 இல் இருந்து தொடங்கும் இரண்டு முந்தைய எண்களின் தொகையாகும்.
+
+## நிரலின் கூறுகள்
+
+நிரலில் உள்ள ஒரே ஒரு அறிவுறுத்தல் *அறிக்கை* என்று அழைக்கப்படுகிறது, மேலும் வழக்கமாக ஒரு கேரக்டர் அல்லது வரி இடைவெளி யைக் கொண்டிருக்கும், இது அறிவுறுத்தல் முடிவடையும் இடத்தில் குறிக்கிறது, அல்லது *நிறுத்தப்படும்*. ஒரு நிரல் எவ்வாறு முடிவடைகிறது என்பது ஒவ்வொரு மொழிக்கும் மாறுபடும்.
+
+பெரும்பாலான நிரல்கள் ஒரு பயனர் அல்லது வேறு இடங்களிலிருந்து தரவைப் பயன்படுத்துவதை நம்பியுள்ளன, அங்கு அறிக்கைகள் அறிவுறுத்தல்களை மேற்கொள்ள தரவை நம்பலாம். ஒரு நிரல் எவ்வாறு நடந்துகொள்ளுகிறது என்பதை தரவு மாற்றலாம், எனவே நிரலாக்க மொழிகள் பின்னர் பயன்படுத்தக்கூடிய தரவை தற்காலிகமாக சேமிக்க ஒரு வழியுடன் வருகின்றன. இந்த தரவு *மாறிகள்* என்று அழைக்கப்படுகிறது. மாறிகள் என்பது ஒரு சாதனத்தின் நினைவகத்தில் தரவை சேமிக்க அறிவுறுத்தும் அறிக்கைகள். நிரல்களில் உள்ள மாறிகள் இயற்கணிதத்தில் உள்ளதைப் போலவே உள்ளன, அங்கு அவை ஒரு தனித்துவமான பெயரைக் கொண்டுள்ளன, மேலும் அவற்றின் மதிப்பு காலப்போக்கில் மாறலாம்.
+
+சில அறிக்கைகள் ஒரு சாதனத்தால் செயல்படுத்தப்படாது என்று ஒரு வாய்ப்பு உள்ளது. இது பொதுவாக டெவலப்பர் எழுதும் போது வடிவமைப்பு அல்லது எதிர்பாராத பிழை ஏற்படும் போது தற்செயலாக இருக்கும். ஒரு பயன்பாட்டின் இந்த வகை கட்டுப்பாடு அதை மிகவும் வலுவானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. பொதுவாக சில முடிவுகள் நிறைவேற்றப்படும் போது கட்டுப்பாட்டில் இந்த மாற்றங்கள் நிகழ்கின்றன. ஒரு நிரல் எவ்வாறு இயங்குகிறது என்பதைக் கட்டுப்படுத்த நவீன நிரலாக்க மொழிகளில் ஒரு பொதுவான அறிக்கை 'என்றால்.. வேறு ' அறிக்கை.
+
+
+✅ அடுத்தடுத்த பாடங்களில் இந்த வகை அறிக்கையைப் பற்றி மேலும் அறிந்து கொள்வீர்கள்
+
+## வர்த்தககருவிகள்
+
+[![வர்த்தககருவிகள்](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 கருவியாக்கல் பற்றிய வீடியோவிற்கு மேலே உள்ள படத்தை கிளிக் செய்யவும்
+
+இந்தப் பிரிவில், உங்கள் தொழில்முறை வளர்ச்சிப் பயணத்தைத் தொடங்கும்போது நீங்கள் மிகவும் பயனுள்ளதாக க் காணக்கூடிய சில மென்பொருளைப் பற்றி நீங்கள் கற்றுக்கொள்வீர்கள்.
+
+ஒரு **வளர்ச்சி சூழல்** மென்பொருள் எழுதும் போது ஒரு டெவலப்பர் அடிக்கடி பயன்படுத்தும் கருவிகள் மற்றும் அம்சங்கள் ஒரு தனிப்பட்ட தொகுப்பு ஆகும். இந்த கருவிகளில் சில ஒரு டெவலப்பர் குறிப்பிட்ட தேவைகளுக்கு தனிப்பயனாக்கப்பட்டிருக்கின்றன, மேலும் ஒரு டெவலப்பர் வேலை அல்லது தனிப்பட்ட திட்டங்களில் முன்னுரிமைகளை மாற்றினால் அல்லது அவர்கள் வேறு நிரலாக்க மொழியைப் பயன்படுத்தும்போது காலப்போக்கில் மாறலாம். வளர்ச்சி சூழல்கள் அவற்றைப் பயன்படுத்தும் டெவலப்பர்களைப் போலவே தனித்துவமானவை.
+
+### ஆசிரியர்கள்
+
+மென்பொருள் உருவாக்கத்திற்கான மிக முக்கியமான கருவிகளில் ஒன்று ஆசிரியர். ஆசிரியர்கள் நீங்கள் உங்கள் குறியீட்டை எழுதும் இடம் மற்றும் சில நேரங்களில் உங்கள் குறியீட்டை இயக்கும் இடம்.
+
+டெவலப்பர்கள் ஒரு சில கூடுதல் காரணங்களுக்காக ஆசிரியர்களை நம்பியுள்ளனர்:
+
+- *பிழைநீக்குதல்* குறியீடு மூலம், வரி வரி மூலம் நுழைவதன் மூலம் பிழைகள் மற்றும் பிழைகளைக் கண்டறிதல். சில ஆசிரியர்கள் பிழைநீக்கதிறன்களைக் கொண்டுள்ளனர், அல்லது குறிப்பிட்ட நிரலாக்க மொழிகளுக்காக தனிப்பயனாக்கலாம் மற்றும் சேர்க்கலாம்.  
+- *தொடரியல் சிறப்பித்துக் காட்டுதல்* வண்ணங்கள் மற்றும் உரை வடிவமைப்பை குறியீட்டுக்கு சேர்க்கிறது, படிக்க எளிதாக்குகிறது. பெரும்பாலான ஆசிரியர்கள் தனிப்பயனாக்கப்பட்ட தொடரியல் சிறப்பம்சத்தை அனுமதிக்கிறார்கள்.
+- *விரிவாக்கங்கள் மற்றும் ஒருங்கிணைப்புகள்* டெவலப்பர்கள், டெவலப்பர்கள், அடிப்படை ஆசிரியர் கட்டமைக்கப்படாத கூடுதல் கருவிகள் அணுகசிறப்பு என்று சேர்த்தல். உதாரணமாக, பல டெவலப்பர்கள் தங்கள் குறியீட்டை ஆவணப்படுத்தவும், அது எவ்வாறு செயல்படுகிறது என்பதை விளக்கவும் ஒரு வழி தேவை, மேலும் எழுத்துப்பிழைகளை சரிபார்க்க ஒரு எழுத்துப்பிழை காசோலை நீட்டிப்பை நிறுவும். இந்த சேர்த்தல் பெரும்பாலான ஒரு குறிப்பிட்ட ஆசிரியர் உள்ள பயன்படுத்த நோக்கம், மற்றும் பெரும்பாலான ஆசிரியர்கள் கிடைக்கும் நீட்டிப்புகள் தேட ஒரு வழி கொண்டு வருகின்றன.
+- *தனிப்பயனாக்கு* பெரும்பாலான ஆசிரியர்கள் மிகவும் தனிப்பயனாக்கலாம், மேலும் ஒவ்வொரு டெவலப்பரும் தங்கள் தேவைகளுக்கு ஏற்ற தங்கள் சொந்த தனித்துவமான வளர்ச்சி சூழலைக் கொண்டிருப்பார்கள். பலர் டெவலப்பர்கள் தங்கள் சொந்த நீட்டிப்புகளை உருவாக்க அனுமதிக்கிறார்கள்.
+
+#### பிரபலமான ஆசிரியர்கள் மற்றும் வலை மேம்பாட்டு நீட்டிப்புகள்
+
+- [விஷுவல் ஸ்டுடியோ குறியீடு](https://code.visualstudio.com/)
+  - [குறியீடு எழுத்துப்பிழை சரிபார்ப்பி](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [லிவ் ஷர்](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [ப்ரெட்திர் - குறியீடு பொருள்](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [அணு](https://atom.io/)
+  - [எழுத்துப்பிழை-சரிபார்த்தல்](https://atom.io/packages/spell-check)
+  - [டெலிடைப்](https://atom.io/packages/teletype)
+  - [அணு அழகுபடுத்தல்](https://atom.io/packages/atom-beautify)
+
+### மேய்வான்களில்
+
+மற்றொரு முக்கியமான கருவி உலாவி. வலை டெவலப்பர்கள் தங்கள் குறியீடு இணையத்தில் எவ்வாறு இயங்குகிறது என்பதைக் கண்காணிக்க உலாவியை நம்பியுள்ளனர், இது ஹெச்டிஎம்எல் போன்ற எடிட்டரில் எழுதப்பட்ட ஒரு வலைப் பக்கத்தின் காட்சி கூறுகளைக் காணவும் பயன்படுத்தப்படுகிறது.
+
+பல உலாவிகள் *டெவலப்பர் கருவிகள்* (தேவ்டூல்ஸ்) உடன் வருகின்றன, அவை டெவலப்பர்கள் தங்கள் பயன்பாட்டைப் பற்றிய முக்கியமான நுண்ணறிவுகளை சேகரிக்கவும் கைப்பற்றவும் உதவுவதற்கு பயனுள்ள அம்சங்கள் மற்றும் தகவல்களின் தொகுப்பைக் கொண்டுள்ளன. எடுத்துக்காட்டாக: வலைப்பக்கத்தில் பிழைகள் இருந்தால், அவை எப்போது நிகழ்ந்தன என்பதை அறிவது சில நேரங்களில் உதவியாக இருக்கும். இந்த தகவலை ப்வுசர் மூலம் கைப்பற்ற, ஒரு உலாவியில் உள்ள தேவ்டூல்களை உள்ளமைக்கலாம்.
+
+#### பிரபலமான உலாவிகள் மற்றும் தேவ்டூல்ஸ்
+
+- [விளிம்பு](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [குரோம்](https://developers.google.com/web/tools/chrome-devtools/)
+- [பயர்பாக்ஸ்](https://developer.mozilla.org/docs/Tools)
+
+### கட்டளை வரி கருவிகள் 
+
+சில டெவலப்பர்கள் தங்கள் தினசரி பணிகளுக்கு குறைவான வரைகலை பார்வையை விரும்புகிறார்கள் மற்றும் இதை அடைய கட்டளை வரியை நம்புகிறார்கள். குறியீட்டை உருவாக்குவதற்கு குறிப்பிடத்தக்க அளவு தட்டச்சு தேவைப்படுகிறது, மேலும் சில டெவலப்பர்கள் விசைப்பலகையில் தங்கள் ஓட்டத்தை சீர்குலைக்க விரும்பவில்லை, மேலும் டெஸ்க்டாப் ஜன்னல்களுக்கு இடையில் பரிமாற்றம் செய்ய விசைப்பலகை குறுக்குவழிகளைபயன்படுத்துவார்கள், வெவ்வேறு கோப்புகளில் வேலை செய்வார்கள், கருவிகளைப் பயன்படுத்துவார்கள்.பெரும்பாலான பணிகளை சுட்டிமூலம் முடிக்கலாம், ஆனால் கட்டளை வரியைப் பயன்படுத்துவதன் ஒரு நன்மை என்னவென்றால், சுட்டி மற்றும் விசைப்பலகைக்கு இடையில் மாற்றவேண்டிய அவசியம் இல்லாமல் கட்டளை வரி கருவிகளைக் கொண்டு நிறைய செய்ய முடியும். கட்டளை வரிமற்றொரு நன்மை அவர்கள் கட்டமைக்கமுடியும் என்று மற்றும் நீங்கள் உங்கள் விருப்ப கட்டமைப்பு சேமிக்க முடியும், பின்னர் அதை மாற்ற, மேலும் புதிய வளர்ச்சி இயந்திரங்கள் அதை இறக்குமதி.வளர்ச்சி சூழல்கள் ஒவ்வொரு டெவலப்பருக்குமிகவும் தனித்துவமானவை என்பதால், சிலர் கட்டளை வரியைப் பயன்படுத்துவதைத் தவிர்ப்பார்கள், சிலர் அதை முற்றிலும் நம்புவார்கள், சிலர் இரண்டின் கலவையை விரும்புகிறார்கள்.
+
+### பிரபலமான கட்டளை வரி விருப்பங்கள்
+
+நீங்கள் பயன்படுத்தும் இயக்க முறைமையின் அடிப்படையில் கட்டளை வரிக்கான விருப்பங்கள் வேறுபடும்.
+
+*💻 = இயக்க முறைமையில் முன்நிறுவல் வருகிறது..*
+
+#### விண்டோஸ்
+
+- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [கட்டளை வரி](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (சி.எம்.டி என்றும் அழைக்கப்படுகிறது) 💻
+- [விண்டோஸ் முனையம்](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [புதினா](https://mintty.github.io/)
+  
+#### MacOS
+
+- [முனையம்](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [ஐடெர்ம்](https://iterm2.com/)
+- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [பாஸ்](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [கேடிஇ கான்சோல்](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### பிரபலமான கட்டளை வரி கருவிகள்
+
+- [கிட்](https://git-scm.com/) (💻 பெரும்பாலான இயக்க முறைமைகளில்)
+- [என்பிஎம்](https://www.npmjs.com/)
+- [யர்ன்](https://classic.yarnpkg.com/en/docs/cli/)
+
+### ஆவணச்சான்று வழக்காட்சி
+
+ஒரு டெவலப்பர் புதிய ஒன்றைக் கற்றுக்கொள்ள விரும்பும்போது, அதை எவ்வாறு பயன்படுத்துவது என்பதைக் கற்றுக்கொள்ள அவர்கள் பெரும்பாலும் ஆவணத்திற்குத் திரும்புவார்கள். டெவலப்பர்கள் கருவிகள் மற்றும் மொழிகளை எவ்வாறு சரியாகப் பயன்படுத்துவது என்பதன் மூலம் அவர்களுக்கு வழிகாட்டவும், அது எவ்வாறு செயல்படுகிறது என்பது பற்றிய ஆழமான அறிவைப் பெறவும் பெரும்பாலும் ஆவணங்களை நம்பியுள்ளனர்.
+
+#### வலை அபிவிருத்தி பற்றிய பிரபலமான ஆவணப்படுத்தல்
+
+- [மொசில்லா டெவலப்பர் நெட்வொர்க் (எம்டிஎன்)](https://developer.mozilla.org/docs/Web), [பயர்பாக்ஸ்](https://www.mozilla.org/firefox/) வெளியீட்டாளர்களான மொசில்லாவிலிருந்து.
+- [முன்னணி முதுநிலை](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), கூகிள் இருந்து, [குரோம்](https://www.google.com/chrome/) வெளியீட்டாளர்கள்.
+- [மைக்ரோசாப்ட் இன் சொந்த டெவலப்பர் ஆவணம்](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers),  [மைக்ரோசாப்ட் எட்ஜ்](https://www.microsoft.com/edge)
+
+✅ சில ஆராய்ச்சிகளை செய்யுங்கள்: இப்போது நீங்கள் ஒரு வலை டெவலப்பரின் சூழலின் அடிப்படைகளை அறிந்திருக்கிறீர்கள், அதை ஒரு வலை வடிவமைப்பாளரின் சூழலுடன் ஒப்பிட்டு வேறுபடுத்திப் பாருங்கள்.
+---
+
+## 🚀 அறைகூவல்
+
+சில நிரலாக்க மொழிகளை ஒப்பிடுக. ஜாவாஸ்கிரிப்ட் எதிராக ஜாவா வின் தனித்துவமான பண்புகள் யாவை? எப்படி கோபோல் எதிராக கோ பற்றி?
+
+## விரிவுரைக்குப் பிந்தைய வினாடி வினா
+[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=ta)
+
+## ஆய்வு & சுய ஆய்வு
+
+நிரலாளர் களுக்கு கிடைக்கும் பல்வேறு மொழிகளில் ஒரு பிட் படிக்கவும். ஒரு மொழியில் ஒரு வரியை எழுத முயற்சிக்கவும், பின்னர் அதை மற்ற இரண்டு மொழிகளில் மீண்டும் செய்ய முயற்சிக்கவும். நீங்கள் என்ன கற்றுக்கொள்கிறீர்கள்?
+
+## வகுத்தமைத்தல்
+
+[ஆவணத்தைப் படித்தல்](assignment.ta.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md

@@ -0,0 +1,194 @@
+# 编程语言概述与工具介绍
+
+这节课涵盖了编程语言的基础知识，涉及到的内容适用于如今大多数现代编程语言。在“工具介绍”部分，你会了解到一些对开发者很有用的软件。
+
+![Intro Programming](../../../sketchnotes/webdev101-programming.png)
+> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 课前小测
+[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=zh_cn)
+
+## 大纲
+
+这节课我们将会介绍：
+
+- 什么是编程？
+- 编程语言的种类
+- 程序的基本要素
+- 对专业开发者很有用的软件和工具
+
+## 什么是编程？
+
+编程（programming） ，俗称写代码（coding），是向诸如计算机或移动设备之类的设备写入指令的过程。我们使用编程语言来编写这些指令，然后交由设备去解释（interpret）。这些指令的集合有许多叫法，常见的有*程序（program）*、*计算机程序（computer program）*、*应用程序（application / app）*和*可执行文件（executable）*。
+
+*程序*可以是任何由代码编写的东西，比如网站、游戏和手机应用。尽管的确有办法不编写任何代码就创建一个程序，但是设备还是会去解析其底层逻辑，这个逻辑大概率是由代码编写的。所谓*正在运行*或是*执行代码*的程序所做的其实都是执行指令。你现在用来阅读这段文字的设备，也正在运行一个将文字输出到你的屏幕上的程序。
+
+✅ 查一查：谁被认为是世界上第一位计算机程序员？
+
+## 编程语言
+
+编程语言的主要目的是：让开发者可以构建指令并将它们传递给设备。设备只能理解二进制（一堆 0 和 1），这对*大多数*开发者来说实在不算是高效的交流方式，而编程语言正是人类与计算机之间沟通的桥梁。
+
+编程语言有着不同的形式，也可能用于不同的目的。比如 JavaScript 主要用于 Web 应用，而 Bash 则主要用于操作系统。
+
+对于设备来说看，解释 *低级语言（low level languages）* 的指令一般会比解释 *高级语言（high level languages）* 的指令需要更少的步骤。然而，高级语言因为其可读性和兼容性会更加常用。JavaScript 就是一种高级语言。
+
+下面的代码展示了高级语言（以 JavaScript 为例）和低级语言（以 ARM 汇编代码为例）的区别：
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+不管你信不信，*它们做的事完全相同*：打印斐波那契数列的前 10 位。
+
+✅ [斐波那契数列](https://zh.wikipedia.org/wiki/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)是一个由 0 和 1 开头，每个数字都是它之前两个数字之和的数列。
+
+## 程序的基本要素
+
+程序中的单条指令（instruction）被称作*语句（statement）*，常用一个字符或是空行来标识指令结束的位置，这种标识可被称为*终止符（terminates）*。程序的结束方式也因语言而异。
+
+多数程序都需要用到从用户或其他地方获取到的数据（data），此时语句会根据这些数据来执行指令。数据会改变程序的行为，所以编程语言提供了一种临时存储此后会被用到的数据的方法。这些数据被称作*变量（variables）*。变量也是语句，用来指示设备将数据存到它的内存中。和代数学中的变量类似，程序中的变量也有独立的命名，其值在之后也可能发生改变。
+
+有的语句可能不会被设备执行，这通常是开发者有意为之，否则就是发生了意外的错误。这样的控制可以让应用程序更加稳定和可维护。一般来说这些控制的切换会在满足特定条件的情况下发生。`if..else` 语句就是一个在现代编程语言中常见的用于控制程序的语句。
+
+✅ 你会在此后的课程中学到更多关于此类语句的知识
+
+## 工具介绍
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "工具介绍")
+
+在这一部分，你将会了解到一些能在你的专业开发之旅中颇有帮助的软件。
+
+**开发环境（development environment）** 指的是一位开发者自己在编写软件时常会用到的工具和功能的集合。其中一些工具会按照开发者的特定需求被自定义配置，这些工具集也会随着时间发生变化，原因可能是开发者在工作或个人项目中改变了需求的优先级，抑或是切换到了另一种编程语言。开发环境往往因人而异。
+
+### 编辑器
+
+编辑器（Editors）是软件开发中最关键的工具之一，是你用来编写甚至运行你的代码的地方。
+
+开发者选用编辑器还有这些原因：
+
+- *调试（Debugging）* 通过逐步或逐行地运行代码来发现漏洞和错误。一些编辑器自身带有调试功能，或者可以被自定义添加对特定编程语言的调试功能。
+- *语法高亮（Syntax highlighting）* 为代码添加颜色和文本格式以便阅读。多数编辑器都可以对语法高亮进行自定义。
+- *插件和集成（Extensions and Integrations）* 开发者可以根据自身需要为编辑器添加其原生本不包含的功能。比如，许多开发者需要为代码撰写文档来解释其工作原理，就会安装一个拼写检查插件来检查有没有拼写错误。多数插件都只支持特定的编辑器，多数编辑器也会提供搜索可用插件的方法。
+- *自定义（Customization）* 多数编辑器都是高度可自定义的，每一位开发者都能根据自身需要来自定义自己的开发环境。许多开发者还会编写自己的插件。
+
+#### 主流编辑器和 Web 开发插件
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### 浏览器
+
+另一个关键工具是浏览器。Web 开发者需要用浏览器来观察它们的代码如何在网页上运行，还可以看到编辑器中编写的元素（如 HTML 元素）如何展现在网页上。
+
+许多浏览器都提供了*开发者工具*（DevTools），包括一系列有用的功能和信息，用以辅助开发者收集和捕获它们应用程序的重要信息。例如当网页发生错误时，获知错误是何时发生的有助于解决错误，而浏览器 DevTools 就可以被配置来捕获这个信息。
+
+#### 主流浏览器和 DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### 命令行工具（Command Line Tools）
+
+一些开发者更喜欢使用较少的图形化界面来执行日常任务，因此选择使用命令行。开发代码需要大量的文字输入，一些开发者不喜欢自己在键盘上的工作流被打断，会使用键盘快捷键来切换桌面窗口、切换工作文件、使用工具等。大多数任务都可以通过鼠标完成，而使用命令行的一个好处就是无需再鼠标和键盘之间切换就能完成多数工作。命令行的另一个好处是它们是可配置的，所以你可以保存你的配置并随时修改，还可以将其导入到新的开发设备上。但开发环境毕竟因人而异，有人完全不想用命令行，有人则希望在命令行做所有事，还有一些人两种方式都乐意接受。
+
+### 常用命令行选择
+
+命令行选择基于你使用的操作系统会有所不同。
+
+*💻 表示会预装在对应操作系统上*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (即 CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### 常用命令行工具
+
+- [Git](https://git-scm.com/) (💻 <- 在多数操作系统上)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### 文档
+
+当一位开发者想要学点新东西，他们基本都会去找文档（Documentation）来学习如何使用。开发者会依靠文档来指引他们如何合理地使用工具和语言，并且从中获取更多关于实现原理的深层知识。
+
+#### Web 开发常用文档
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), 来自 Mozilla，[Firefox](https://www.mozilla.org/firefox/) 的出版商
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev)，来自 Google，[Chrome](https://www.google.com/chrome/) 的发布者
+- [Microsoft 自己的开发人员文档](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，用于 [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ 查一查：既然你已经对 Web 开发者的环境有所了解，何不比较一下其与 Web 设计师的环境的差异？
+
+---
+
+## 🚀 挑战
+
+比较一些编程语言。JavaScript 和 Java 相互之间有什么独特的特征？COBOL 和 Go 之间呢？
+
+## 课后小测
+[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=zh_cn)
+
+## 复习 & 自学
+
+尝试接触一些不同的编程语言，用一种语言写一行代码，然后用另外两种语言重写这一行代码，你有什么感悟吗？
+
+## 作业
+
+[阅读文档](assignment.zh-cn.md)

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md

@@ -0,0 +1,195 @@
+# 程式語言概論與必備工具
+
+這堂課程解釋程式語言的基礎。這項主題能應用到當代多數的程式語言。關於必備工具的部分，你會學到許多實用的開發者軟體。
+
+![關於程式語言](/sketchnotes/webdev101-programming.png)
+> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製。
+
+## 課前測驗
+[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=zh_tw)
+
+## 大綱
+
+在這堂課中，包含：
+
+- 什麼是程式設計?
+- 程式語言的種類
+- 程式的基本架構
+- 給專業開發者的實用軟體與工具
+
+## 什麼是程式設計?
+
+程式設計，又稱作Coding，是編寫電腦或手機裝置的指令過程。我們以裝置看得懂的程式語言來編寫這些指令，這些指令集涉及到常見的*程式*、*電腦程式*、*應用程式(App)*或*執行檔*。
+
+一個*程式*以程式碼任意創作出來，網頁、遊戲、手機應用都是程式的一種。雖然我們可以在不編寫程式碼的情況下建出程式，但裝置底下的邏輯概念還是以程式碼為主。一個*執行中*、*執行編碼*的程式都是仰賴著指令。你眼前正閱讀的文字就是由程式輸出到螢幕。
+
+✅ 課外研究： 誰被認為是世界上第一位電腦工程師?
+
+## 撰寫程式語言
+
+編寫程式語言的主要目的是讓開發者得以指示裝置。裝置只能讀懂二元格式 ( 1 與 0 )，對於*大多數*的開發者而言，這並不是個很好理解溝通的方式。程式語言就像人類與電腦之間溝通的橋梁。
+
+程式語言有不同的格式與滿足的目的。舉例來說，JavaScript 常被用在網頁應用上，而 Bash 主要是用在作業系統上。
+
+*低階語言(Low level languages)* 通常比 *高階語言(high level languages)* 要求更少的裝置指示步數。然而，高階語言的閱讀性與支援性讓它成為最普及的程式語言。JavaScript 即是一種高階語言。
+
+下列程式碼說明高階語言(JavaScript)與低階語言(ARM assembly code)的差異：
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+事實上，*他們都做一樣的事情* ── 印出前十項費氏數列。
+
+✅ 費氏數列的[定義](https://zh.wikipedia.org/zh-tw/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)為該數是由之前的兩數相加而得出。初始值為 0 與 1。
+
+## 程式的基本架構
+
+程式中的一行指令(instruction)被稱做*陳述式(statement)*，通常會由特定符號或分行來決定結尾處，或是執行*程式終止*。程式終止的方式會依不同程式語言而有所不同。
+
+大多數程式需要使用用戶或其他位置的資料，陳述式依照這些資料決定指令。資料會影響程式的運作方式，編寫程式語言便是一種暫時性儲存資料的途徑。這些資料稱為*變數(Variables)*。變數會指引資料儲存到裝置上的位置，它們就像代數一樣：有自己的名稱、數值隨時間改變。
+
+有些情況裝置不會執行到陳述式。通常是開發者故意的選擇或意外性地輸入錯誤，讓應用程式變得更豐富且需要被維護。常見的發生情況在決定條件的時候，如當代程式語言以 `if..else` 條件式來決定程式的執行方式。
+
+✅ 往後的課程會講解各式各樣的陳述式型態。
+
+## 工欲善其事，必先利其器
+
+[![謀生工具 Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "謀生工具 Tools of the Trade")
+
+在這個章節，你會學習到一些實用的軟體來開始你的開發旅程。
+
+一個**開發環境**包含許多開發者撰寫程式需要用到的工具。它們會依照開發者的需求而不同，隨著時間、專案大小、程式語言而有所調整。每個開發者都有自己獨特的開發環境。
+
+### 文字編輯器
+
+文字編輯器可說是最重要的軟體開發工具。開發者可以在其中撰寫並執行程式。
+
+還有許多原因讓開發者選擇文字編輯器：
+
+- *偵錯(Debugging)* 在程式碼中一行一行地找尋錯誤。有些文字編輯器有偵錯的功能，可以依照不同的程式語言而調整。
+- *語法突顯(Syntax highlighting)* 將程式碼加上顏色並自動排版，方便開發者閱讀。文字編輯器也支援語法突顯的客製化。
+- *整合擴充插件(Extensions and Integrations)* 擴充插件不包含在預設的文字編輯器當中，開發者依照自己的需求建立並新增到文字編輯器當中。舉例來說，許多開發者需要統整程式文檔並註解這些檔案，他們就會加裝檢查拼字的插件。有些插件功能只支援特定的文字編輯器，文字編輯器也提供搜尋擴充插件的功能。
+- *客製化(Customization)* 大多數的文字編輯器都允許開發者做客製化，開發者依照自己的習慣，建立自己順手的開發環境。其中也包含建立自己的擴充插件。
+
+#### 常見文字編輯器與網頁開發插件
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### 瀏覽器
+
+另一款重要的工具是瀏覽器。網頁開發人員會藉由瀏覽器觀察程式的執行情況，瀏覽器也是常見的網頁編輯與檢視器，顯示來自檔案的可見物件，如 HTML 檔。
+
+許多瀏覽器都附加*開發者工具(DevTools)*，內含實用的功能協助開發者蒐集與取得重要的程式資訊。假設有一頁網頁出現錯誤，了解它出錯的時間與狀況就很重要，配置開發者工具即可蒐集這些資訊。
+
+#### 常見瀏覽器與網頁開發工具
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### 常用指令
+
+有些開發者偏好較少的介面，通常會使用指令來完成工作；撰寫程式碼要求大量的文字輸入，有些開發者偏好以不中斷文字輸入為首要條件，常用快捷鍵做視窗與檔案的切換。多數工作能以滑鼠操作，但為了減少鍵盤與滑鼠間的切換，指令輸入會是實踐上較合適的方式。另一項指令輸入的好處是它們彈性很高，隨時可以更新設定，甚至移植到其他機器上。每一位開發者有各自的開發習慣，開發環境也有所不同。
+
+### 常用指令選項
+
+指令選項(Command Line Options)會依不同的作業系統而有所不同。
+
+*💻 表示預設已安裝在作業系統上。*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (又稱作 CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
+
+#### 其他常用指令
+
+- [Git](https://git-scm.com/) (💻 已支援大多數的作業系統。)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### 技術文件
+
+若開發人員想學新的事物，技術文件會是很好的幫手。他們會參照文件來學習如何使用工具與新的程式語言，並瞭解如何鑽研更深入的用法。
+
+#### 常用的網頁開發文件
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), 來自 Mozilla，[Firefox](https://www.mozilla.org/firefox/) 的出版商
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev)，來自 Google，[Chrome](https://www.google.com/chrome/) 的發布者
+- [Microsoft 自己的開發人員文檔](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，用於 [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ 研究項目： 現在你已經了解基本的網頁開發環境了。請比較「網頁開發環境」與「網頁設計環境」之間的差異。
+
+---
+
+## 🚀 挑戰
+
+比較不同的程式語言： JavaScript 與 Java 間有什麼獨特的特徵? 那 COBOL 與 Go 呢?
+
+## 課後測驗
+[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=zh_tw)
+
+## 複習與自學
+
+學習不同的程式語言。試著在三種不同的程式語言寫幾行程式碼。你學到了什麼?
+
+## 作業
+
+[閱讀技術文件](assignment.zh-tw.md)
+

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.el.md

@@ -0,0 +1,11 @@
+# Βλέπε έγγραφο
+
+## Οδηγίες
+
+Υπάρχουν πολλά εργαλεία που μπορεί να χρειαστεί ένας web developer και τα οποία βρίσκονται στο [MDN έγγραφα για client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Επιλέξτε 3 εργαλεία που δεν αναφέρονται στο μάθημα, εξηγήστε γιατί θα τα χρησιμοποιούσε ένας web developer, αναζητήστε ένα εργαλείο που ανήκει σε αυτήν την κατηγορία και μοιραστείτε την τεκμηρίωσή σας. Μην χρησιμοποιήσετε το ίδιο παράδειγμα εργαλείου που αναφέρεται στα έγγραφα MDN.
+
+## 
+
+Εξήγηση | Τρόπος χρήσης | Χρειάζεται Βελτίωση
+--- | --- | -- |
+| Εξηγήστε γιατί να χρησιμοποιήσει αυτό το εργαλείο ένας web developer| Εξηγήστε το πως, αλλά όχι το γιατί ένας developer να χρησιμοποιήσει αυτό το εργαλείο| Μην αναφέρετε το πως και το γιατί ένας developer θα χρησιμοποιούσε αυτό το εργαλείο |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md

@@ -0,0 +1,12 @@
+# Lectura de documentos
+
+## Instrucciones
+
+Hay muchas herramientas que un desarrollador web puede necesitar, muchas de ellas se encuentran en la [Documentación de MDN - Herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Seleccionar 3 herramientas que no sean las comentadas en el artículo, explicar por qué un Desarrollador Web las debería usar, buscar una herramienta que pertenezca a esta categoría y compartir la documentación. No utilizar los ejemplos de herramientas brindados en la documentación de MDN.
+
+
+## Rúbrica
+
+Ejemplo | Adecuado | Necesita mejorar
+--- | --- | -- |
+| Explicar por qué el Desarrollador web usará la herramienta | Explicar cómo el desarrollador debería usar la herramienta| Por qué un desarrollador usaría la herramienta. |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md

@@ -0,0 +1,11 @@
+# Lire la documentation
+
+## Instructions
+
+Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN.
+
+## Rubrique
+
+Exemplaire | Adéquat | A besoin d'amélioration
+--- | --- | -- |
+| Expliqué pourquoi le développeur Web utiliserait l'outil | Expliqué comment, mais pas pourquoi le développeur utiliserait l'outil | N'a pas mentionné comment ou pourquoi un développeur utiliserait l'outil |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md

@@ -0,0 +1,11 @@
+# डॉक्स पढ़ना
+
+## अनुदेश
+
+ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें.
+
+## सरनामा
+
+| उदाहरणात्मक                                  | पर्याप्त                                                   | सुधार की जरूरत                                                      |
+| -------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
+| बताया कि वेब डेवलपर टूल का उपयोग क्यों करेगा | समझाया कि कैसे, लेकिन डेवलपर टूल का उपयोग क्यों नहीं करेगा | यह उल्लेख नहीं किया कि एक डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md

@@ -0,0 +1,11 @@
+# Membaca Dokumentasi
+
+## Instruksi
+
+Ada banyak alat yang mungkin diperlukan pengembang web yang ada di [dokumentasi MDN untuk alat sisi klien](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) . Pilih 3 alat yang tidak tercakup dalam pelajaran, jelaskan mengapa pengembang web akan menggunakannya, dan cari alat yang termasuk dalam kategori ini dan bagikan dokumentasinya. Jangan gunakan contoh alat yang sama pada dokumen MDN.
+
+## Rubrik
+
+| Teladan                                                  | Memenuhi Syarat                                                             | Perlu Perbaikan                                                                  |
+|----------------------------------------------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------|
+| Menjelaskan mengapa pengembang web akan menggunakan alat | Dijelaskan bagaimana, tetapi tidak mengapa pengembang akan menggunakan alat | Tidak disebutkan bagaimana atau mengapa seorang pengembang akan menggunakan alat |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md

@@ -0,0 +1,11 @@
+# Leggere la Documentazione
+
+## Istruzioni
+
+Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN.
+
+## Rubrica
+
+Ottimo | Adeguato | Necessari miglioramenti
+--- | --- | -- |
+|Spiega perchè uno sviluppatore web dovrebbe usare lo strumento| Spiega come, ma non perchè uno sviluppatore web dovrebbe usare lo strumento| Non menziona come o perchè uno sviluppatore web dovrebbe usare lo strumento  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md

@@ -0,0 +1,11 @@
+# ドキュメントを読む
+
+## 説明書
+
+Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。
+
+## ルーブリック
+
+模範的な例 | 適切な | 改善が必要
+--- | --- | -- |
+|Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md

@@ -0,0 +1,11 @@
+# 공식문서 읽기
+
+## 설명
+
+웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다.
+
+## 평가 기준
+
+모범 답안 | 적당한 답안 | 개선이 필요한 답안
+--- | --- | ---
+웹 개발자가 도구를 사용하는 이유를 설명한 경우 | 개발자가 도구를 사용하는 방법은 설명했지만 도구를 사용하는 이유는 설명하지 않은 경우 | 개발자가 도구를 사용하는 이유나 방법을 설명하지 않은 경우

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ml.md

@@ -0,0 +1,11 @@
+# ഡോക്‌സ് വായിക്കുന്നു
+
+## നിർദ്ദേശങ്ങൾ
+
+ഒരു വെബ് ഡെവലപ്പർക്ക് ആവശ്യമായേക്കാവുന്ന നിരവധി ടൂളുകൾ ഇതിൽ ഉണ്ട് [ക്ലയന്റ് സൈഡ് ടൂളിങ്ങിനുള്ള MDN ഡോക്യുമെന്റേഷൻ](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). പാഠത്തിൽ ഉൾപ്പെടുത്താത്ത 3 ഉപകരണങ്ങൾ തിരഞ്ഞെടുക്കുക, എന്തുകൊണ്ടാണ് ഒരു വെബ് ഡെവലപ്പർ ഇത് ഉപയോഗിക്കുന്നതെന്ന് വിശദീകരിക്കുക, കൂടാതെ ഈ വിഭാഗത്തിൽ പെടുന്ന ഒരു ടൂളിനായി തിരയുകയും അതിന്റെ ഡോക്യുമെന്റേഷൻ പങ്കിടുകയും ചെയ്യുക. MDN ഡോക്സിൽ നിന്നുള്ള ടൂൾ ഉദാഹരണം ഉപയോഗിക്കരുത്.
+
+## റൂബ്രിക്
+
+മാതൃകാപരമായ | മതിയായ | കൂടുതൽ നന്നാകാൻ ഉണ്ട്
+--- | --- | -- |
+|എന്തുകൊണ്ട് വെബ് ഡെവലപ്പർ ടൂൾ ഉപയോഗിക്കുമെന്ന് വിശദീകരിച്ചു എങ്ങനെയെന്ന് വിശദീകരിച്ചു, പക്ഷേ എന്തുകൊണ്ട് ഡവലപ്പർ ടൂൾ ഉപയോഗിക്കും| ഒരു ഡെവലപ്പർ എങ്ങനെ അല്ലെങ്കിൽ എന്തുകൊണ്ട് ഉപകരണം ഉപയോഗിക്കുമെന്ന് പരാമർശിച്ചിട്ടില്ല  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md

@@ -0,0 +1,10 @@
+# Membaca Docs
+
+## Arahan
+Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN.
+
+## Rubrik 
+
+Contoh | Mencukupi | Usaha Lagi
+--- | --- | -- |
+|Terangkan mengapa pembangun web menggunakan alat| Terangkan bagaimana dan mengapa pembangun akan menggunakan alat| Tidak menyebut bagaimana atau mengapa pembangun menggunakan alat  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md

@@ -0,0 +1,11 @@
+# De Documenten lezen
+
+## Instructies
+
+Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten.
+
+## Rubriek
+
+Voorbeeldig | Voldoende | Moet Worden Verbeterd
+--- | --- | -- |
+|Uitgelegd waarom webontwikkelaar een tool zou gebruiken| Uitgelegd hoe, maar niet waarom de ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar een tool zou gebruiken  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md

@@ -0,0 +1,11 @@
+# Lendo a documentação
+
+## Instruções
+
+Existem muitas ferramentas que uma pessoa desenvolvedora de web pode precisar que estão na [documentação MDN para ferramentas do lado do cliente (versão em inglês)](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas não abordadas na lição, explique por que uma dev Web as usaria, procure uma ferramenta que se enquadre nesta categoria e compartilhe sua documentação. Não use o mesmo exemplo de ferramenta em documentos MDN.
+
+## Rubrica
+
+Exemplar | Adequado | Precisa de melhorias
+--- | --- | - |
+| Explicado por que uma pessoa desenvolvedora de web usaria a ferramenta | Explicou como, mas não por que uma pessoa desenvolvedora de web usaria a ferramenta | Não mencionou como ou por que uma pessoa desenvolvedora de web usaria a ferramenta |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ru.md

@@ -0,0 +1,11 @@
+# Чтение документации
+
+## Инструкция
+
+Существует много инструментов, которые могут понадобиться веб-разработчику в процессе работы. Их можно найти на [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Выберите 3 инструмента из тех, которые не были рассмотрены в этом уроке и объясните, с какой целью веб-разработчик мог бы их использовать. Найдите тот, который входит в данную категорию, и поделитесь его документацией. Не используйте тот же пример инструмента, как и в документации MDN.
+
+## Категории
+
+| Образцовая                                                       | Адекватная                                                                 | Нуждается в улучшении                                |
+| ---------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------- |
+| Объяснение почему веб-разработчик мог бы использовать инструмент | Объяснение как, а не почему веб-разработчик мог бы использовать инструмент | Нет упоминаний зачем или как использовать инструмент |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md

@@ -0,0 +1,13 @@
+# Soma Nyaraka
+
+## Maagizo
+
+Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). 
+
+Chagua zana 3 ambazo hazijafunikwa kwenye somo, eleza ni kwanini msanidi wa wavuti atatumia, pata zana ambayo iko kwenye kitengo hiki, na ushiriki nyaraka zake. Usitumie zana sawa ya sampuli kwenye hati za MDN.
+
+## Kichwa
+
+| Nakili | Inatosha                                                                                                                           | Inahitaji kuimarishwa                                      |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| Imefafanuliwa kwanini msanidi wa wavuti atatumia zana hiyo | Imefafanuliwa jinsi, lakini sio kwa nini msanidi programu atatumia zana | Haikutaja jinsi au kwa nini msanidi programu atatumia zana |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ta.md

@@ -0,0 +1,12 @@
+# ஆவணத்தைப் படித்தல்
+
+## செயல்துறைக்கட்டளை
+
+ஒரு வலை டெவலப்பர் தேவைஎன்று பல கருவிகள் உள்ளன [வாடிக்கையாளர் பக்க கருவிகளுக்கு எம்டிஎன் இன் ஆவணங்கள்](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).பாடத்தில் உள்ளடக்கப்படாத 3 கருவிகளைத் தேர்ந்தெடுத்து, ஒரு வலை டெவலப்பர் ஏன் அதைப் பயன்படுத்துவார் என்பதை விளக்கவும், இந்த வகையின் கீழ் வரும் ஒரு கருவியைத் தேடவும் மற்றும் அதன் ஆவணங்களைப் பகிர்ந்து கொள்ளவும். எம்டிஎன் ஐ ஆவணத்தில் ஒரே கருவி உதாரணத்தைப் பயன்படுத்த வேண்டாம்.
+
+
+## இயல் மேல்வரி
+
+பின்பற்றத்தக்க | போதிய | தேவை மேம்பாடு
+--- | --- | -- |
+|வலை உருவாக்குநர் ஏன் கருவியைப் பயன்படுத்துவார் என்பதை விளக்கினார்| எப்படி விளக்கினார், ஆனால் டெவலப்பர் ஏன் கருவியைப் பயன்படுத்துவார் என்று அல்ல| ஒரு டெவலப்பர் கருவியை எவ்வாறு அல்லது ஏன் பயன்படுத்துவார் என்பதைக் குறிப்பிடவில்லை  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md

@@ -0,0 +1,11 @@
+# Читання документів
+
+## Інструкції
+
+Існує багато інструментів, які можуть знадобитися веб-розробнику  [MDN документація для client-side інструментів](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Виберіть 3 інструменти, які не розглянуті в уроці, поясніть, чому веб-розробник використав би їх, знайдіть інструмент, який підпадає під цю категорію, і поділіться його документацією. Не використовуйте той самий приклад інструмента для документів MDN.
+
+## Рубрика
+
+Зразковий | Достатній | Потребує покращення
+--- | --- | -- |
+| Пояснено, чому веб-розробник використовує інструмент| Пояснив як, але не пояснив чому розробник використовує інструмент| Не згадав як і чому розробник буде використовувати інструмент  |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md

@@ -0,0 +1,11 @@
+# 阅读文档
+
+## 说明
+
+[MDN 客户端工具文档](https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)中介绍了需要 Web 开发者可能需要用到的工具。从中选取三种本节课中没有提到的工具，并说明为什么 Web 开发者需要用到它们，搜索其中一种工具并给出它的文档。不要直接使用 MDN 中给出的示例。
+
+## 评价表
+
+| 优秀 | 良好 | 尚可进步 |
+| --- | --- | --- |
+| 解释了 Web 开发者为什么需要这些工具 | 解释了开发者如何使用这些工具，但却没有解释为什么需要它们 | 既没有解释为什么使用这些工具，也没有给出使用它们的方法 |

1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md

@@ -0,0 +1,11 @@
+# 閱讀技術文件
+
+## 說明
+
+網頁開發人員所需要使用的工具套件可以參考 [MDN Client端技術開發文件](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。 請選擇三種未被本課程提及的工具，試解釋為何網頁開發人員使用它，並搜尋其相關的工具與它的技術文件。這些資料不能出現在前述的 MDN 文件當中。
+
+## 學習評量
+
+| 優良                           | 普通                 | 待改進                         |
+| ------------------------------ | -------------------- | ------------------------------ |
+| 解釋為何網頁開發人員會用此工具 | 只解釋工具的使用方法 | 未提及工具的使用意義與使用方法 |

1-getting-started-lessons/2-github-basics/README.md

@@ -0,0 +1,329 @@
+# Introduction to GitHub
+
+This lesson covers the basics of GitHub, a platform to host and manage changes to your code.
+
+![Intro to GitHub](../../sketchnotes/webdev101-github.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Introduction
+
+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
+
+Before you begin, you'll need to check if Git is installed. In the terminal type: 
+`git --version`
+
+If Git is not installed, [download Git](https://git-scm.com/downloads). Then, setup your local Git profile in the terminal:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+To check if Git is already configured you can type:
+`git config --list`
+
+You'll also need a GitHub account, a code editor (like Visual Studio Code), and you'll need to open your terminal (or: command prompt).
+
+Navigate to [github.com](https://github.com/) and create an account if you haven't already, or log in and fill out your profile. 
+
+✅ 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.  
+
+---
+
+## Code management
+
+Let's say you have a folder locally with some code project and you want to start tracking your progress using git - the version control system. Some people compare using git to writing a love letter to your future self. Reading your commit messages days or weeks or months later you'll be able to recall why you made a decision, or "rollback" a change - that is, when you write good "commit messages".
+
+### Task: Make a repository and commit code  
+
+> Check out video
+> 
+> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+
+1. **Create repository on GitHub**. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the **new repo** button.
+
+   1. Give your repository (folder) a name
+   1. Select **create repository**.
+
+1. **Navigate to your working folder**. In your terminal, switch to the folder (also known as the directory) you want to start tracking. Type:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Initialize a git repository**. In your project type:
+
+   ```bash
+   git init
+   ```
+
+1. **Check status**. To check the status of your repository type:
+
+   ```bash
+   git status
+   ```
+
+   the output can look something like this:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist.
+
+1. **Add all files for tracking**
+   This also called as staging files/ adding files to the staging area.
+
+   ```bash
+   git add .
+   ```
+
+   The `git add` plus `.` argument indicates that all your files & changes for tracking. 
+
+1. **Add selected files for tracking**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   This helps us to add only selected files to the staging area when we don't want to commit all files at once.
+
+1. **Unstage all files**
+
+   ```bash
+   git reset
+   ```
+
+   This command helps us to unstage all files at once.
+
+1. **Unstage a particular file**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   This command helps us to unstage only a particular file at once that we don't want to include for the next commit.
+
+1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   This commits all of your files, adding the message "first commit". For future commit messages you will want to be more descriptive in your description to convey what type of change you've made.
+
+1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command:
+
+   > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace ```https://github.com/username/repository_name.git``` with your GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier.
+
+1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: 
+   
+   > Note, your branch name may be different by default from ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+   This sends your commits in your "main" branch to GitHub.
+
+2. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
+
+#### 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?
+
+### Task: Collaborate
+
+The main reason for putting things on GitHub was to make it possible to collaborate with other developers.
+
+## Working on projects with others
+
+> Check out video
+>
+> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+In your repository, navigate to `Insights > Community` to see how your project compares to recommended community standards.
+
+   Here are some things that can improve your GitHub repo:
+   - **Description**. Did you add a description for your project?
+   - **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
+   - **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon), 
+   - **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **License**. Perhaps most importantly, a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+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](https://www.makeareadme.com/) 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?
+
+> Note, be the change you want to see in the world, and create branches for your own work as well. Any commits you make will be made on the branch you’re currently “checked out” to. Use `git status` to see which branch that is.
+
+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]
+   ```
+
+1. **Switch to working branch**. Switch to the specified branch and update the working directory with `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+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"
+   ```
+
+   Ensure you give your commit a good name, for your sake as well as the maintainer of the repo you are helping on.
+
+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
+   ```
+
+   This will bring in all changes from `main` into your branch and 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.
+
+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.
+
+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 :)
+
+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`
+
+## How to contribute to open source
+
+First, let's find a repository (or **repo**) on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy its contents to your machine.
+
+✅ A good way to find 'beginner-friendly' repos is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](images/clone_repo.png)
+
+There are several ways of copying code. One way is to "clone" the contents of the repository, using HTTPS, SSH, or using the GitHub CLI (Command Line Interface). 
+
+Open your terminal and clone the repository like so:
+`git clone https://github.com/ProjectURL`
+
+To work on the project, switch to the right folder:
+`cd ProjectURL`
+
+You can also open the entire project using [Codespaces](https://github.com/features/codespaces), GitHub's embedded code editor / cloud development environment, or [GitHub Desktop](https://desktop.github.com/).
+
+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.
+
+✅ Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, and creating a project (like a Kanban board). There's a lot you can do!
+
+---
+
+## 🚀 Challenge 
+
+Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes.
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Review & Self Study
+
+Read more about [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Practice, practice, practice. GitHub has great learning paths available via [skills.github.com](https://skills.github.com):
+
+- [First Week on GitHub](https://skills.github.com/#first-week-on-github)
+
+You'll also find more advanced courses. 
+
+## Assignment 
+
+Complete [the First Week on GitHub course](https://skills.github.com/#first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.es.md

@@ -0,0 +1,332 @@
+# Introducción a GitHub
+
+Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en tu código.
+
+![Introducción a GitHub](/sketchnotes/webdev101-github.png)
+> Dibujo de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+### Introducción
+
+En esta lección, cubriremos:
+
+- Seguimiento de trabajo que se realiza en su máquina.
+- Trabajar en proyectos con otros.
+- Cómo contribuir al software de código abierto (Open Source)
+
+### Prerrequisitos
+
+Antes de comenzar, debemos verificar si Git está instalado. Escribe en tu terminal:
+`git --version`
+
+Si Git no está instalado, [descargue Git desde aquí](https://git-scm.com/downloads). Luego, configure su perfil de Git local en la terminal:
+`git config --global user.name "tu-nombre"`
+`git config --global user.email "tu-email"`
+
+Para comprobar si Git ya está configurado, escribe:
+`git config --list`
+
+También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) una terminal (también conocida como línea de comandos o símbolo del sistema).
+
+Ve a [GitHub.com](https://github.com/) y crea una cuenta si aún no lo has hecho, o inicia sesión y completa tu perfil.
+
+✅ GitHub no es el único lugar para almacenar código; hay otros, pero GitHub es el más conocido.
+
+### Preparación
+
+Necesitarás un directorio con un proyecto de código en tu máquina local (computadora portátil o PC) y un repositorio público en GitHub, que te servirá como ejemplo de cómo contribuir a los proyectos de otros.
+
+---
+
+## Gestión de código
+
+Digamos que tienes una directorio local con algún proyecto de código y deseas rastrear tu progreso usando git (sistema de control de versiones). Algunas personas comparan el uso de git con escribir una carta de amor a tu futuro. Al leer tus mensajes de confirmación días, semanas o meses después, podrás recordar por qué tomaste una decisión o "revertiste" un cambio, siempre y cuando escribas buenos mensajes a la hora de enviar un commit.
+
+### Tarea: Hacer un repositorio git y enviar código
+
+> Revisa este video
+> 
+> [![Video de los conceptos básicos de Git y GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
+
+1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busca el botón **nuevo repositorio**.
+
+    1. Dale un nombre a tu repositorio (directorio)
+    1. Selecciona **Crear Repositorio**.
+
+1. **Navegue a su directorio de trabajo**. En su terminal, navegue hasta el directorio donde tiene su proyecto que deseas comenzar a rastrear. Escribe:
+
+   ```bash
+   cd [nombre de su directorio]
+   ```
+
+1. **Inicializar un repositorio de git**. En su proyecto escribe:
+
+   ```bash
+   git init
+   ```
+
+1. **Comprobar estado**. Para comprobar el estado del proyecto escribe:
+
+   ```bash
+   git status
+   ```
+
+   La respuesta de la terminal (CLI) probablemente se verá así:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Por lo general, el comando `git status` nos avisa qué archivos están listos para ser guardados en el repositorio o cambios en tu codigo que puedes conservar.
+
+1. **Agregar archivos al seguimiento**
+
+   ```bash
+   git add .
+   ```
+
+   El comando `git add` más `.` indica que todos tus archivos y cambios están listos para darles seguimiento.
+
+1. **Agregar archivos puntuales**
+
+   ```bash
+   git add [nombre de archivo o carpeta]
+   ```
+
+  Esto nos ayuda a agregar solo los archivos seleccionados al área de preparación cuando no queremos confirmar todos los archivos a la vez.
+
+
+1. **Eliminar archivos de la zona de staging**
+
+   ```bash
+   git reset
+   ```
+
+  Este comando nos ayuda a eliminar todos los archivos a la vez.
+
+
+1. **Quitar un archivo en particular**
+
+   ```bash
+   git reset [nombre del archivo o carpeta]
+   ```
+
+  Este comando nos ayuda a eliminar un archivo/directorio puntual, para que éste no sea enviado en el próximo commit.
+
+
+1. **Persistir en tu trabajo**. En este punto, has agregado los archivos a lo que se denomina _stagin area_. Un lugar donde Git rastrea tus archivos. Para que el cambio sea permanente, debes realizar un _commit_. Para hacerlo, utilizas el siguiente commando `git commit`. Un _commit_ representa un punto en el historial de tu repositorio que estás guardando, este viene acompañado de un mensaje, el cual nos sirve para saber que cambios se hicieron dentro de ese commit. Ejecuta el siguiente comando para realizar tu primer commit.
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Esto confirma todos tus archivos, agregando el mensaje "first commit". Para futuros mensajes de confirmación, querrás ser más descriptivo en tu descripción para transmitir qué tipo de cambio has realizado.
+
+1. **Conecta tu repositorio de Git local con GitHub**. Es bueno tener un repositorio de Git en tu máquina, pero también tienes que guardar todos estos archivos en algún lugar e invitar a otras personas a trabajar contigo en tu repositorio. Un buen lugar para hacerlo es GitHub. Recuerda que ya hemos creado un repositorio en GitHub, por lo que lo único que debemos hacer es conectar nuestro repositorio de Git local con GitHub. El comando `git remote add` hará precisamente eso. Escribe el siguiente comando:
+
+   > Nota, antes de escribir el comando, ve a la página de tu repositorio de GitHub para encontrar el URL del repositorio. Lo usarás en el siguiente comando. Reemplaza `repository_name` con tu URL de GitHub.
+
+   ```bash
+   git remote add origin https://github.com/USUARIO/NOMBRE_DEL_REPOSITORIO.git
+   ```
+
+   Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creaste anteriormente.
+   
+   Si tienes una conexión previa con algún "origin" y deseas cambiar la dirección puedes utilizar el siguiente comando:
+   
+   ```bash
+   git remote set-url https://github.com/USUARIO/NOMBRE DEL REPOSITORIO.git
+   ```
+
+1. **Envía archivos locales a GitHub**. Hasta ahora ha creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, así:
+ 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Esto envía una confirmación en tu rama "main" en GitHub.
+
+1. **Para agregar más cambios**. Si deseas continuar haciendo cambios y enviarlos a GitHub, solo necesitas usar los siguientes tres comandos:
+
+   ```bash
+   git add .
+   git commit -m "escribe tu mensaje de confirmación aquí"
+   git push
+   ```
+
+   > Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](https://github.com/github/gitignore).
+
+
+#### Confirmar mensajes
+
+Una buena línea de asunto (subject line), completa la siguiente frase: "Si se aplica, este commit hará..."
+
+Para el asunto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiará".
+Como en el asunto, en el cuerpo (opcional) también use el presente imperativo. El cuerpo debe incluir el motivo del cambio y contrastarlo con el funcionamiento previo. Estás explicando el "por qué", no el "cómo".
+
+✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de commit realmente bueno? ¿Puedes hallar uno aún más simple? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de commit?
+
+### Tarea: Colaborar
+
+La razón principal para poner cosas en GitHub fue hacer posible la colaboración con otros desarrolladores.
+
+## Trabajando en proyectos con otros
+
+> Revisa este video
+>
+> [![Video de los conceptos básicos de Git y GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
+
+En tu repositorio, ve a `Insights > Community` para ver cómo se compara tu proyecto con los estándares comunitarios recomendados.
+
+   Aquí hay algunas cosas que pueden mejorar tu repositorio de GitHub:
+   - **Descripción**. ¿Agregaste una descripción para tu proyecto?
+   - **README**. ¿Agregaste un archivo README? GitHub proporciona una guía para escribir un [README](https://docs.github.com/articles/about-readmes/).
+   - **Guía de contribución**. ¿Tiene [guías de contribución](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) tu proyecto?
+   - **Código de Conducta**. Crea un [Código de conducta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/).
+   - **Licencia**. Quizás lo más importante, una [licencia](https://docs.github.com/articles/adding-a-license-to-a-repository/).
+
+Todos estos recursos beneficiarán la incorporación de nuevos miembros del equipo. Y esos son típicamente el tipo de cosas que los nuevos colaboradores miran antes incluso de mirar tu código, para descubrir si tu proyecto es el lugar adecuado para que ellos pasen su tiempo.
+
+✅ Los archivos README, aunque requieren tiempo para prepararse, a menudo son descuidados por los mantenedores. ¿Puedes encontrar un ejemplo de uno particularmente descriptivo? Nota: aquí hay algunas [herramientas para ayudar a crear buenos archivos READMEs](https://www.makeareadme.com/) que te puedes probar.
+
+
+### Tarea: Fusionar (merging) código
+
+Los documentos de contribución ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones estás buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a tu repositorio en GitHub:
+
+1. **Bifurcando (forking) tu repositorio** Probablemente querrás que la gente _bifurque_ (fork) tu proyecto. Bifurcar significa crear una réplica de tu repositorio en su perfil de GitHub.
+1. **Clonar**. Desde allí, clonarán el proyecto en su máquina local.
+1. **Crear una rama**. Querrás pedirles que creen una _rama_ para su trabajo.
+1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 ó 1 de 3 cambios?
+
+✅ Imagínate una situación en la que las ramas (branches) de git son particularmente críticas para escribir y enviar buen código. ¿Qué casos de uso se te ocurren?
+
+> Sé el cambio que deseas ver en el mundo y crea también ramas  para tu propio trabajo. Todos los commits que hagas se realizarán en la rama en la que estás actualmente "registrado". Usa `git status` para ver qué rama es.
+
+Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador ya ha _bifurcado_ y _clonado_ el repositorio para que tenga un repositorio de Git listo para trabajar en su máquina local:
+
+1. **Crea una rama**. Usa el comando `git branch` para crear una rama que tendrá los cambios que quieres contribuir:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Cambiar a rama de trabajo**. Cambia a la rama especificada y actualiza tu directorio de trabajo con `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Trabaja**. En este punto, deseas agregar tus cambios. No olvides informarle a Git con los siguientes comandos:
+
+   ```bash
+   git add .
+   git commit -m "mis cambios"
+   ```
+
+   Asegúrate de darle un buen nombre a tu commit, tanto por tu bien como por el del mantenedor del repositorio en el que estás ayudando.
+
+1. **Combina tu trabajo con la rama `principal`**. En algún momento has terminado de trabajar y deseas combinar tu trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrate de actualizarla con los siguientes comandos:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   En este punto, querrás asegurarte de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurran en tu rama de trabajo. Por lo tanto, ejecuta los siguientes comandos:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Esto traerá todos los cambios de `main` a su rama y es de esperar que pueda continuar. De lo contrario, VS Code le dirá dónde está _confundido_ Git y simplemente modificará los archivos afectados para decir qué contenido es el más preciso.
+
+1. **Envía tu trabajo a GitHub**. Enviar tu trabajo a GitHub significa dos cosas. Empujar tu rama a tu repositorio y luego abrir un PR (Pull Request).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   El comando anterior crea la rama en tu repositorio bifurcado.
+
+2. **Abre un Pull Request**. A continuación, abre un PR. Para hacerlo, navega al repositorio bifurcado en GitHub. Verás una indicación en GitHub donde te preguntarán si deseas crear un nuevo PR. Haz clic allí y te llevará a una interfaz donde puedes cambiar el título del mensaje de commit, asígnale una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcaste verá esta PR y _dedos cruzados_ valorarán y _fusionarán_ tu PR. Ahora eres un colaborador, ¡yay! :)
+
+3. **Limpiar**. Se considera una buena práctica "_limpiar_" después de que tu Pull Request fue combinado a la rama principal exitosamente. Limpia tanto tu rama local como la rama que enviaste a GitHub. Primero eliminémoslo localmente con el siguiente comando:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Asegúrate de ir a la página de GitHub del repositorio bifurcado a continuación y elimina la rama remota que acabas de ingresar.
+
+`Solicitud de extracción` (Pull request) parece un término tonto porque realmente deseas impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar tus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente estás solicitando una decisión de cambio a un mantenedor.
+
+Una Pull request es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena Pull request sigue aproximadamente las mismas reglas que un mensaje de commit. Puedes agregar una referencia a un problema (issue) en el rastreador de problemas, cuando tu trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de tu problema. Por ejemplo, `#97`.
+
+🤞 Cruza los dedos para que todos los controles pasen y los propietarios del proyecto combinen tus cambios en el proyecto🤞
+
+Actualiza tu rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub:
+
+`git pull`
+
+## Cómo contribuir al código abierto
+
+Primero, busquemos un repositorio en GitHub que te interese y al que te gustaría contribuir con un cambio. Querrás copiar el contenido a nuestra máquina.
+
+✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `good-first-issue`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/).
+
+![Copia un repositorio localmente](../images/clone_repo.png)
+
+Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o usando GitHub CLI (Interfaz de línea de comandos).
+
+Abre tu terminal y clona el repositorio así:
+`git clone https://github.com/ProjectURL`
+
+Para trabajar en el proyecto, cambia al directorio correcto:
+`cd ProjectURL`
+
+También puedes abrir todo el proyecto utilizando [Codespaces](https://github.com/features/codespaces), el entorno de desarrollo en la nube / editor de código integrado de GitHub o [GitHub Desktop](https://desktop.github.com/).
+
+Por último, puedes descargar el código en un directorio comprimido.
+
+### Algunas cosas más interesantes sobre GitHub
+
+Puedes destacar, ver y/o hacer "fork" cualquier repositorio público en GitHub. Asimismo, encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
+
+Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Pull requests es donde las personas debaten y revisan los cambios que están en curso.
+
+Los proyectos también pueden tener discusiones en foros, listas de correo o canales de chat como Slack, Discord o IRC.
+
+✅ Echa un vistazo a tu nuevo repositorio de GitHub y prueba algunas cosas, como editar la configuración, agregar información a tu repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer!
+
+---
+
+## 🚀 Reto
+
+Reúnete con un amigo para trabajar en el código del otro. Crea un proyecto en colaboración, haz fork del código, crea ramas y hagan merge a los cambios.
+
+## [Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Revisión y Autoestudio
+
+Obtén más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Practica, practica, practica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [skills.github.com](https://skills.github.com/):
+
+- [Primera semana en GitHub](https://skills.github.com/#first-week-on-github)
+
+También encontrarás laboratorios más avanzados.
+
+## Tarea
+
+Completa [La Primera Semana en el Laboratorio de capacitación de GitHub](https://skills.github.com/#first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.fil.md

@@ -0,0 +1,318 @@
+# Panimula sa GitHub
+
+Sinasaklaw ng araling ito ang mga pangunahing kaalaman ng GitHub, isang platform para mag-host at mamahala ng mga pagbabago sa iyong code.
+
+![Intro to GitHub](../sketchnotes/webdev101-github.png)
+> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pagsusulit bago ang lektura
+[Pagsusulit bago ang lektura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Panimula
+
+Sa araling ito, tatalakayin natin ang:
+
+- pagsubaybay sa gawaing ginagawa mo sa iyong makina
+- nagtatrabaho sa mga proyekto kasama ang iba
+- paano mag-ambag sa open source software
+
+### Mga kinakailangan
+
+Bago ka magsimula, kakailanganin mong suriin kung naka-install ang Git. Sa uri ng terminal: 
+`git --version`
+
+Kung hindi naka-install ang Git, [download Git](https://git-scm.com/downloads). Pagkatapos, i-setup ang iyong lokal na profile sa Git sa terminal:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Upang tingnan kung naka-configure na ang Git maaari kang mag-type:
+`git config --list`
+
+Kakailanganin mo rin ang isang GitHub account, isang code editor (tulad ng Visual Studio Code), at kakailanganin mong buksan ang iyong terminal (or: command prompt).
+
+Mag-navigate sa [github.com](https://github.com/) at gumawa ng account kung hindi mo pa nagagawa, o mag-log in at punan ang iyong profile. 
+
+✅ Ang GitHub ay hindi lamang ang code repository sa mundo; may iba pa, ngunit ang GitHub ang pinakakilala
+
+### Paghahanda
+
+Kakailanganin mo ang parehong folder na may proyekto ng code sa iyong lokal na makina (laptop o PC), at isang pampublikong imbakan sa GitHub, na magsisilbing halimbawa kung paano mag-ambag sa mga proyekto ng iba.  
+
+---
+
+## Pamamahala ng code
+
+Sabihin nating mayroon kang lokal na folder na may ilang proyekto ng code at gusto mong simulan ang pagsubaybay sa iyong pag-unlad gamit ang git - ang version control system. Inihambing ng ilang tao ang paggamit ng git sa pagsulat ng love letter sa iyong sarili sa hinaharap. Ang pagbabasa ng iyong mga commit na mensahe mga araw o linggo o buwan mamaya, maaalala mo kung bakit ka gumawa ng desisyon, o "rollback" ng isang pagbabago - iyon ay, kapag sumulat ka ng magagandang "commit messages".
+
+### Gawain: Gumawa ng repository at mag-commit ng code
+
+1. **Create repository on GitHub**. Sa GitHub.com, sa tab na mga repositoryo, o mula sa kanang bahagi ng navigation bar, hanapin ang **new repo** pindutan.
+
+   1. Bigyan ng pangalan ang iyong repositoryo (folder).
+   1. Piliin **create repository**.
+
+1. **Navigate to your working folder**. Sa iyong terminal, lumipat sa folder (kilala rin bilang direktoryo) na gusto mong simulan ang pagsubaybay. Uri:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Initialize a git repository**. Sa uri ng iyong proyekto:
+
+   ```bash
+   git init
+   ```
+
+1. **Check status**. Upang suriin ang katayuan ng iyong uri ng imbakan:
+
+   ```bash
+   git status
+   ```
+
+   ang output ay maaaring magmukhang ganito:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Karaniwang ang `git status` Ang command ay nagsasabi sa iyo ng mga bagay tulad ng kung anong mga file ang handa na _save_ sa repo o may mga pagbabago dito na maaaring gusto mong magpatuloy.
+
+1. **Idagdag ang lahat ng mga file para sa pagsubaybay**
+   Tinatawag din itong staging file/pagdaragdag ng mga file sa staging area.
+
+   ```bash
+   git add .
+   ```
+
+   The `git add` plus `.` argument indicates that all your files & changes for tracking. 
+
+1. **Magdagdag ng mga napiling file para sa pagsubaybay**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Nakakatulong ito sa amin na magdagdag lamang ng mga napiling file sa staging area kapag ayaw naming i-commit ang lahat ng file nang sabay-sabay.
+
+1. **Alisin ang lahat ng mga file**
+
+   ```bash
+   git reset
+   ```
+
+   Ang command na ito ay tumutulong sa amin na i-unstage ang lahat ng mga file nang sabay-sabay.
+
+1. **Alisin ang isang partikular na file**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Tinutulungan kami ng command na ito na i-unstage lang ang isang partikular na file nang sabay-sabay na hindi namin gustong isama para sa susunod na commit.
+
+1. **Ipagpatuloy ang iyong trabaho**. Sa puntong ito naidagdag mo ang mga file sa isang tinatawag na _staging area_. Isang lugar kung saan sinusubaybayan ng Git ang iyong mga file. Upang gawing permanente ang pagbabago kailangan mong gawin _commit_ ang mga papeles. Upang gawin ito, lumikha ka ng isang _commit_ kasama ang `git commit` atas. A _commit_ kumakatawan sa isang punto ng pag-save sa kasaysayan ng iyong repo. I-type ang sumusunod upang lumikha ng a _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Iko-commit nito ang lahat ng iyong file, idinaragdag ang mensaheng "first commit". Para sa mga commit na mensahe sa hinaharap, gugustuhin mong maging mas mapaglarawan sa iyong paglalarawan upang maihatid kung anong uri ng pagbabago ang iyong ginawa.
+
+1. **Ikonekta ang iyong lokal na Git repo sa GitHub**. Ang isang Git repo ay mabuti sa iyong makina ngunit sa isang punto gusto mong magkaroon ng backup ng iyong mga file sa isang lugar at mag-imbita rin ng ibang mga tao na magtrabaho kasama mo sa iyong repo. Ang isang magandang lugar para gawin ito ay ang GitHub. Tandaan na nakagawa na kami ng repo sa GitHub kaya ang kailangan lang naming gawin ay ikonekta ang aming lokal na Git repo sa GitHub. Ang utos `git remote add` gagawin lang yan. I-type ang sumusunod na command:
+
+   > Tandaan, bago mo i-type ang command pumunta sa iyong GitHub repo page para mahanap ang repository URL. Gagamitin mo ito sa utos sa ibaba. Palitan `repository_name` gamit ang iyong GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Lumilikha ito ng isang _remote_, o koneksyon, pinangalanan "origin" na tumuturo sa GitHub repository na ginawa mo kanina.
+
+1. **Magpadala ng mga lokal na file sa GitHub**. Sa ngayon ay nakagawa ka ng isang _connection_ sa pagitan ng lokal na repo at ng GitHub repo. Ipadala natin ang mga file na ito sa GitHub gamit ang sumusunod na command `git push`, tulad nito: 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Ipinapadala nito ang iyong mga commit sa iyong "pangunahing" branch sa GitHub.
+
+1. **Upang magdagdag ng higit pang mga pagbabago**. Kung gusto mong magpatuloy sa paggawa ng mga pagbabago at itulak ang mga ito sa GitHub kakailanganin mo lang gamitin ang sumusunod na tatlong utos:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip, Baka gusto mo ring magpatibay ng isang `.gitignore` file upang maiwasan ang mga file na hindi mo gustong subaybayan mula sa paglabas sa GitHub - tulad ng mga talang iyon na iniimbak mo sa parehong folder ngunit walang lugar sa isang pampublikong imbakan. Makakahanap ka ng mga template para sa `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
+
+#### Mag-commit ng mga mensahe
+
+Ang isang mahusay na linya ng paksa ng Git commit ay kumukumpleto sa sumusunod na pangungusap:
+Kung inilapat, gagawin ng commit na ito <your subject line here>
+
+Para sa paksa gamitin ang pautos, kasalukuyang panahunan: "pagbabago" hindi "binago" o "pagbabago". 
+Tulad ng sa paksa, sa katawan (opsyonal) ay ginagamit din ang imperative, present tense. Dapat isama ng katawan ang motibasyon para sa pagbabago at ihambing ito sa nakaraang pag-uugali. Ipinapaliwanag mo ang `why`, hindi ang `how`.
+
+✅ Maglaan ng ilang minuto upang mag-surf sa GitHub. Makakahanap ka ba ng talagang mahusay na commit message? Makakahanap ka ba ng talagang minimal? Anong impormasyon sa tingin mo ang pinakamahalaga at kapaki-pakinabang na ihatid sa isang commit message?
+
+### Gawain: Magtulungan
+
+Ang pangunahing dahilan ng paglalagay ng mga bagay sa GitHub ay upang gawing posible ang pakikipagtulungan sa ibang mga developer.
+
+## Paggawa sa mga proyekto kasama ang iba
+
+Sa iyong imbakan, mag-navigate sa `Insights > Community` upang makita kung paano inihahambing ang iyong proyekto sa mga inirerekomendang pamantayan ng komunidad.
+
+   Narito ang ilang bagay na maaaring mapabuti ang iyong GitHub repo:
+   - **Description**. Nagdagdag ka ba ng paglalarawan para sa iyong proyekto?
+   - **README**. Nagdagdag ka ba ng README? Nagbibigay ang GitHub ng gabay para sa pagsulat ng a [README](https://docs.github.com/articles/about-readmes/).
+   - **Contributing guideline**. Mayroon ba ang iyong proyekto [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **License**. Marahil ang pinakamahalaga, ang [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Makikinabang ang lahat ng mapagkukunang ito sa pag-onboard ng mga bagong miyembro ng team. At iyon ang karaniwang mga uri ng mga bagay na tinitingnan ng mga bagong kontribyutor bago man lang tingnan ang iyong code, upang malaman kung ang iyong proyekto ay ang tamang lugar para sa kanila na gugulin ang kanilang oras.
+
+✅ Ang mga file ng README, bagama't nangangailangan sila ng oras upang maghanda, ay kadalasang napapabayaan ng mga abalang tagapangasiwa. Makakahanap ka ba ng isang halimbawa ng isang partikular na naglalarawan? Tandaan: may ilan [tools to help create good READMEs](https://www.makeareadme.com/) na baka gusto mong subukan.
+
+### Gawain: Pagsamahin ang ilang code
+
+Ang mga nag-aambag na doc ay tumutulong sa mga tao na mag-ambag sa proyekto. Ipinapaliwanag nito kung anong mga uri ng mga kontribusyon ang iyong hinahanap at kung paano gumagana ang proseso. Ang mga kontribyutor ay kailangang dumaan sa isang serye ng mga hakbang upang makapag-ambag sa iyong repo sa GitHub:
+
+
+1. **Forking your repo** Malamang na gusto mo ang mga tao _fork_ your project. Ang ibig sabihin ng forking ay paggawa ng replica ng iyong repository sa kanilang profile sa GitHub.
+1. **Clone**. Mula doon ay i-clone nila ang proyekto sa kanilang lokal na makina. 
+1. **Create a branch**. Gusto mong hilingin sa kanila na lumikha ng isang _branch_ para sa kanilang trabaho. 
+1. **Focus their change on one area**. Hilingin sa mga kontribyutor na ituon ang kanilang mga kontribusyon sa isang bagay sa isang pagkakataon - sa paraang iyon ang mga pagkakataong magagawa mo _merge_ sa kanilang trabaho ay mas mataas. Isipin na magsulat sila ng pag-aayos ng bug, magdagdag ng bagong feature, at mag-update ng ilang pagsubok - paano kung gusto mo, o maaari lang ipatupad ang 2 sa 3, o 1 sa 3 pagbabago?
+
+✅ Isipin ang isang sitwasyon kung saan ang mga sangay ay partikular na kritikal sa pagsulat at pagpapadala ng magandang code. Anong mga use case ang maiisip mo?
+
+> Tandaan, maging ang pagbabagong gusto mong makita sa mundo, at lumikha din ng mga sangay para sa iyong sariling gawain. Ang anumang commit na gagawin mo ay gagawin sa branch na kasalukuyan mong kinaroroonan “checked out” sa. Gamitin `git status` para makita kung saang branch yan.
+
+Dumaan tayo sa isang daloy ng trabaho ng contributor. Ipagpalagay na ang nag-ambag ay mayroon na _forked_ at _cloned_ ang repo para magkaroon sila ng Git repo na handang gawin, sa kanilang lokal na makina:
+
+1. **Create a branch**. Gamitin ang command `git branch` upang lumikha ng isang sangay na maglalaman ng mga pagbabagong ibig nilang i-ambag:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Switch to working branch**. Lumipat sa tinukoy na sangay at i-update ang gumaganang direktoryo gamit ang `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Do work**. Sa puntong ito gusto mong idagdag ang iyong mga pagbabago. Huwag kalimutang sabihin kay Git ang tungkol dito gamit ang mga sumusunod na utos:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Siguraduhing bibigyan mo ng magandang pangalan ang iyong commit, para sa iyong kapakanan pati na rin ang maintainer ng repo na tinutulungan mo.
+
+1. **Combine your work with the `main` branch**. Sa ilang mga punto ay tapos ka nang magtrabaho at gusto mong pagsamahin ang iyong trabaho sa iyong trabaho `main` sangay. Ang `main` maaaring nagbago ang branch samantala kaya siguraduhing i-update mo muna ito sa pinakabago gamit ang mga sumusunod na command:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Sa puntong ito gusto mong tiyakin na anuman _conflicts_, mga sitwasyon kung saan hindi madali ang Git _combine_ ang mga pagbabago ay nangyayari sa iyong nagtatrabaho na sangay. Samakatuwid, patakbuhin ang sumusunod na mga atas:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Dadalhin nito ang lahat ng pagbabago mula sa `main` into your branch and sana matuloy mo na lang. Kung hindi, sasabihin sa iyo ng VS Code kung nasaan ang Git _confused_ at babaguhin mo lang ang mga apektadong file para masabi kung aling content ang pinakatumpak.
+
+1. **Send your work to GitHub**. Ang pagpapadala ng iyong trabaho sa GitHub ay nangangahulugan ng dalawang bagay. Itulak ang iyong sangay sa iyong repo at pagkatapos ay magbukas ng isang PR, Hiling na Hilahin.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Ang utos sa itaas ay lumilikha ng sangay sa iyong forked repo.
+
+1. **Open a PR**. Susunod, gusto mong magbukas ng PR. Ginagawa mo iyon sa pamamagitan ng pag-navigate sa forked repo sa GitHub. Makakakita ka ng indikasyon sa GitHub kung saan itatanong nito kung gusto mong lumikha ng bagong PR, i-click mo iyon at dadalhin ka sa isang interface kung saan maaari mong baguhin ang pamagat ng commit message, bigyan ito ng mas angkop na paglalarawan. Ngayon ay makikita ng tagapangasiwa ng repo na iyong tinira ang PR na ito at _fingers crossed_ sila ay pahalagahan at _merge_ your PR. Isa ka na ngayong contributor, yay :)
+
+1. **Clean up**. Ito ay itinuturing na mabuting kasanayan sa _clean up_ pagkatapos mong matagumpay na pagsamahin ang isang PR. Gusto mong linisin ang iyong lokal na sangay at ang sangay na itinulak mo sa GitHub. Una, tanggalin natin ito nang lokal gamit ang sumusunod na utos: 
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Tiyaking pupunta ka sa pahina ng GitHub para sa susunod na forked repo at alisin ang malayong sangay na itinulak mo lang dito.
+
+`Pull request` parang silly term kasi gusto mo talagang i-push yung mga pagbabago mo sa project. Ngunit kailangang isaalang-alang ng maintainer (may-ari ng proyekto) o pangunahing koponan ang iyong mga pagbabago bago ito isama sa "pangunahing" sangay ng proyekto, kaya talagang humihiling ka ng desisyon sa pagbabago mula sa isang maintainer.  
+
+Ang pull request ay ang lugar upang paghambingin at pag-usapan ang mga pagkakaibang ipinakilala sa isang sangay na may mga review, komento, pinagsamang pagsubok, at higit pa. Ang isang mahusay na kahilingan sa paghila ay sumusunod sa halos kaparehong mga panuntunan gaya ng isang commit na mensahe. Maaari kang magdagdag ng reference sa isang isyu sa issue tracker, kapag ang iyong trabaho halimbawa ay nag-ayos ng isyu. Ginagawa ito gamit ang a `#` na sinusundan ng bilang ng iyong isyu. Halimbawa `#97`.
+
+🤞Pinilit na ang lahat ng mga tseke ay pumasa at ang (mga) may-ari ng proyekto ay pinagsama ang iyong mga pagbabago sa proyekto🤞
+
+I-update ang iyong kasalukuyang lokal na nagtatrabaho na sangay sa lahat ng mga bagong commit mula sa kaukulang remote na sangay sa GitHub:
+
+`git pull`
+
+## Paano mag-ambag sa open source
+
+Una, maghanap tayo ng isang imbakan (o **repo**) sa GitHub ng interes sa iyo at kung saan mo gustong mag-ambag ng pagbabago. Gusto mong kopyahin ang mga nilalaman nito sa iyong makina.
+
+✅ Ang isang mahusay na paraan upang makahanap ng 'beginner-friendly' repos ay ang [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](images/clone_repo.png)
+
+Mayroong ilang mga paraan ng pagkopya ng code. Ang isang paraan ay ang "i-clone" ang mga nilalaman ng repository, gamit ang HTTPS, SSH, o gamit ang GitHub CLI (Command Line Interface). 
+
+Buksan ang iyong terminal at i-clone ang repositoryo tulad nito:
+`git clone https://github.com/ProjectURL`
+
+Upang magtrabaho sa proyekto, lumipat sa kanang folder:
+`cd ProjectURL`
+
+Maaari mo ring buksan ang buong proyekto gamit ang [Codespaces](https://github.com/features/codespaces), Ang naka-embed na code editor / cloud development environment ng GitHub, o [GitHub Desktop](https://desktop.github.com/).
+
+Panghuli, maaari mong i-download ang code sa isang naka-zip na folder. 
+
+### Ilang mas kawili-wiling bagay tungkol sa GitHub
+
+Maaari mong lagyan ng star, panoorin at/o "i-fork" ang anumang pampublikong repository sa GitHub. Mahahanap mo ang iyong mga naka-star na repository sa kanang tuktok na drop-down na menu. Ito ay tulad ng pag-bookmark, ngunit para sa code. 
+
+Ang mga proyekto ay may tagasubaybay ng isyu, karamihan ay nasa GitHub sa tab na "Issues" maliban kung iba ang ipinahiwatig, kung saan tinatalakay ng mga tao ang mga isyung nauugnay sa proyekto. At ang tab na Pull Requests ay kung saan tinatalakay at sinusuri ng mga tao ang mga pagbabagong kasalukuyang isinasagawa.
+
+Maaaring magkaroon din ng talakayan ang mga proyekto sa mga forum, mailing list, o mga channel ng chat tulad ng Slack, Discord o IRC.
+
+✅ Tingnan ang iyong bagong GitHub repo at subukan ang ilang bagay, tulad ng pag-edit ng mga setting, pagdaragdag ng impormasyon sa iyong repo, at paggawa ng proyekto (tulad ng Kanban board). Marami kang magagawa!
+
+---
+
+## 🚀 Hamon 
+
+Ipares sa isang kaibigan para magtrabaho sa code ng isa't isa. Gumawa ng proyekto nang magkakasama, mag-fork ng code, gumawa ng mga sangay, at magsama ng mga pagbabago.
+
+## Pagsusulit pagkatapos ng Lektura
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Pagsusuri at Sariling pag-aaral
+
+Magbasa pa tungkol sa [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Magsanay, magsanay, magsanay. Ang GitHub ay may mahusay na mga landas sa pag-aaral na magagamit sa pamamagitan ng [lab.github.com](https://lab.github.com/):
+
+- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Makakahanap ka rin ng mas advanced na mga lab. 
+
+## Takdang-aralin 
+
+Kumpletuhin [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.fr.md

@@ -0,0 +1,318 @@
+# Introduction à GitHub
+
+Cette leçon couvre les principes de base de GitHub, une plateforme permettant d’héberger et de gérer les modifications apportées à votre code.
+
+![Intro to GitHub](/sketchnotes/webdev101-github.png)
+> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz préalable
+[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=fr)
+
+## Introduction
+
+Dans cette leçon, nous allons couvrir :
+
+- suivre le travail que vous faites sur votre machine
+- travailler sur des projets avec d’autres personnes
+- comment contribuer aux logiciels open source
+
+### Prérequis
+
+Avant de commencer, vous devrez vérifier si Git est installé. Dans le type de terminal : 
+`git --version`
+
+Si Git n’est pas installé, [télécharger Git](https://git-scm.com/downloads). Ensuite, configurez votre profil Git local dans le terminal:
+* `git config --global user.name " votre-nom"`
+* `git config --global user.email " your-email"`
+
+Pour vérifier si Git est déjà configuré, vous pouvez taper :
+`git config --list`
+
+Vous aurez également besoin d’un compte GitHub, d’un éditeur de code (comme Visual Studio Code), et vous devrez ouvrir votre terminal (ou : invite de commandes).
+
+Accédez à [github.com](https://github.com/) et créez un compte si vous ne l’avez pas déjà fait, ou connectez-vous et remplissez votre profil. 
+
+✅ GitHub n’est pas le seul référentiel de code au monde; il y en a d’autres, mais GitHub est le plus connu
+
+### Préparation
+
+Vous aurez besoin à la fois d’un dossier avec un projet de code sur votre ordinateur local (ordinateur portable ou PC) et d’un référentiel public sur GitHub, qui servira d’exemple pour contribuer aux projets d’autres personnes.  
+
+---
+
+## Gestion du code
+
+Supposons que vous ayez un dossier localement avec un projet de code et que vous souhaitiez commencer à suivre votre progression à l’aide de git - le système de contrôle de version. Certaines personnes comparent l’utilisation de git à l’écriture d’une lettre d’amour à votre futur moi. En lisant vos messages de validation des jours, des semaines ou des mois plus tard, vous pourrez vous rappeler pourquoi vous avez pris une décision, ou " annuler " une modification - c’est-à-dire lorsque vous écrivez de bons " messages de validation ".
+
+### Tâche : créer un référentiel et valider le code
+
+1. **Créer un référentiel sur GitHub**. Sur GitHub.com, dans l’onglet Référentiels ou dans la barre de navigation en haut à droite, recherchez le bouton **nouveau référentiel**.
+
+   1. Donnez un nom à votre référentiel (dossier)
+   1. Sélectionnez **créer un référentiel**.
+
+1. **Accédez à votre dossier de travail**. Dans votre terminal, basculez vers le dossier (également connu sous le nom de répertoire) que vous souhaitez démarrer le suivi. Tapez :
+
+   ```bash
+   cd [nom de votre dossier]
+   ```
+
+1. **Initialiser un dépôt git**. Dans votre type de projet :
+
+   ```bash
+   git init
+   ```
+
+1. **Vérifier l’état**. Pour vérifier l’état de votre type de référentiel :
+
+   ```bash
+   git status
+   ```
+
+   la sortie peut ressembler à ceci :
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   En règle générale, une commande `git status` vous indique des choses comme quels fichiers sont prêts à être _enregistrés_ dans le référentiel ou contient des modifications que vous voudrez peut-être conserver.
+
+1. **Ajouter tous les fichiers pour le suivi**
+   Cela s’appelle aussi fichiers intermédiaires/ ajout de fichiers à la zone de transit.
+
+   ```bash
+   git add .
+   ```
+
+   L’argument `git add` plus `.` indique que tous vos fichiers &changes pour le suivi. 
+
+1. **Ajouter les fichiers sélectionnés pour le suivi**
+
+  ```bash
+   git add [nom du fichier ou du dossier]
+   ```
+
+   Cela nous aide à ajouter uniquement les fichiers sélectionnés à la zone de transit lorsque nous ne voulons pas valider tous les fichiers à la fois.
+
+1. **Défaire la scène de tous les fichiers**
+
+   ```bash
+   git reset
+   ```
+
+   Cette commande nous aide à défaire tous les fichiers à la fois.
+
+1. **Défaire un fichier particulier**
+
+   ```bash
+   git reset [nom du fichier ou du dossier]
+   ```
+
+   Cette commande nous aide à défaire un fichier particulier à la fois que nous ne voulons pas inclure pour le prochain commit.
+
+1. **Persistance de votre travail**. À ce stade, vous avez ajouté les fichiers à un soi-disant _staging area_. Un endroit où Git suit vos fichiers. Pour rendre la modification permanente, vous devez _valider_ les fichiers. Pour ce faire, vous créez un _commit_ avec la commande `git commit`. Un _commit_ représente un point d’enregistrement dans l’historique de votre référentiel. Tapez ce qui suit pour créer un _commit_ :
+
+   ```bash
+   git commit -m " premier commit "
+   ```
+
+   Cela valide tous vos fichiers, en ajoutant le message " premier commit ". Pour les futurs messages de validation, vous voudrez être plus descriptif dans votre description pour indiquer le type de modification que vous avez apportée.
+
+1. **Connectez votre référentiel Git local avec GitHub**. Un référentiel Git est bon sur votre machine, mais à un moment donné, vous voulez avoir une sauvegarde de vos fichiers quelque part et également inviter d’autres personnes à travailler avec vous sur votre dépôt. GitHub est un excellent endroit pour le faire. N’oubliez pas que nous avons déjà créé un référentiel sur GitHub, donc la seule chose que nous devons faire est de connecter notre référentiel Git local à GitHub. La commande `git remote add` fera exactement cela. Tapez la commande suivante :
+
+   > Remarque, avant de taper la commande, accédez à votre page de référentiel GitHub pour trouver l’URL du référentiel. Vous l’utiliserez dans la commande ci-dessous. Remplacez `repository_name` par votre URL GitHub.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Cela crée un _remote_, ou une connexion, nommé " origin " pointant vers le référentiel GitHub que vous avez créé précédemment.
+
+1. **Envoyer des fichiers locaux à GitHub**. Jusqu’à présent, vous avez créé une _connexion_ entre le référentiel local et le référentiel GitHub. Envoyons ces fichiers à GitHub avec la commande suivante `git push`, comme suit: 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Cela envoie vos commits dans votre branche "main" à GitHub..
+
+1. **Pour ajouter d’autres modifications**. Si vous souhaitez continuer à apporter des modifications et à les pousser vers GitHub, il vous suffit d’utiliser les trois commandes suivantes:
+
+   ```bash
+   git add .
+   git commit -m " tapez votre message de validation ici "
+   git push
+   ```
+
+   > Conseil, vous pouvez également adopter un fichier `.gitignore` pour empêcher les fichiers que vous ne souhaitez pas suivre d’apparaître sur GitHub - comme ce fichier de notes que vous stockez dans le même dossier mais n’a pas sa place sur un référentiel public. Vous pouvez trouver des modèles pour les fichiers `.gitignore` dans [.gitignore templates](https://github.com/github/gitignore).
+
+#### Valider les messages
+
+Une grande ligne d’objet de commit Git complète la phrase suivante:
+S’il est appliqué, ce commit le sera
+
+Pour le sujet, utilisez l’impératif, présent: "changement" pas "changé" ni "changements". 
+Comme dans le sujet, dans le corps (facultatif) utilisez également l’impératif, le présent. Le corps doit inclure la motivation du changement et contraster cela avec le comportement précédent. Vous expliquez le `pourquoi`, pas le `comment`.
+
+✅ Prenez quelques minutes pour surfer sur GitHub. Pouvez-vous trouver un très bon message d’engagement? Pouvez-vous en trouver un vraiment minime? Quelles informations pensez-vous être les plus importantes et les plus utiles à transmettre dans un message de validation ?
+
+### Tâche : Collaborer
+
+La principale raison de mettre des choses sur GitHub était de permettre de collaborer avec d’autres développeurs.
+
+## Travailler sur des projets avec d’autres
+
+Dans votre référentiel, accédez à `Insights > Community ` pour voir comment votre projet se compare aux normes communautaires recommandées.
+
+   Voici quelques éléments qui peuvent améliorer votre référentiel GitHub :
+   - **Description**. Avez-vous ajouté une description pour votre projet ?
+   - **README**. Avez-vous ajouté un fichier README ? GitHub fournit des conseils pour l’écriture d’un [README](https://docs.github.com/articles/about-readmes/).
+   - **Guide de contribution**. Votre projet a-t-il des [directives de contribution](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Code de conduite**. Un [Code de conduite](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **Licence**. Peut-être plus important encore, une [licence](https://docs.github.com/articles/adding-a-license-to-a-repository/) ?
+
+
+Toutes ces ressources profiteront à l’intégration des nouveaux membres de l’équipe. Et ce sont généralement le genre de choses que les nouveaux contributeurs regardent avant même de regarder votre code, pour savoir si votre projet est le bon endroit pour qu’ils passent leur temps.
+
+✅ fichiers README, bien qu’ils prennent du temps à préparer, sont souvent négligés par les mainteneurs occupés. Pouvez-vous trouver un exemple particulièrement descriptif? Remarque: il y a quelques [outils pour aider à créer de bons README](https://www.makeareadme.com/) que vous voudrez peut-être essayer.
+
+### Tâche : fusionner du code
+
+Les documents contributeurs aident les gens à contribuer au projet. Il explique les types de contributions que vous recherchez et comment le processus fonctionne. Les contributeurs devront passer par une série d’étapes pour pouvoir contribuer à votre référentiel sur GitHub :
+
+
+1. **Forker votre repo** Vous voudrez probablement que les gens _fork_ votre projet. La duplication signifie la création d’un réplica de votre référentiel sur leur profil GitHub.
+1. **Cloner**. De là, ils cloneront le projet sur leur ordinateur local. 
+1. **Créer une branche**. Vous voudrez leur demander de créer une _branche_ pour leur travail. 
+1. **Concentrez leur changement sur un seul domaine**. Demandez aux contributeurs de concentrer leurs contributions sur une chose à la fois - de cette façon, les chances que vous puissiez _fusionner_ dans leur travail sont plus élevées. Imaginez qu’ils écrivent un correctif de bogue, ajoutent une nouvelle fonctionnalité et mettent à jour plusieurs tests - que se passe-t-il si vous le souhaitez ou si vous ne pouvez implémenter que 2 modifications sur 3 ou 1 sur 3?
+
+✅ Imaginez une situation où les branches sont particulièrement essentielles à l’écriture et à l’expédition d’un bon code. À quels cas d’utilisation pouvez-vous penser ?
+
+> Remarque, soyez le changement que vous voulez voir dans le monde et créez également des branches pour votre propre travail. Tous les commits que vous faites seront effectués sur la branche que vous avez actuellement "extraite". Utilisez `git status` pour voir de quelle branche il s’agit.
+
+Passons en revue un flux de travail de contributeur. Supposons que le contributeur a déjà _forked_ et _cloné_ le référentiel afin qu’il ait un référentiel Git prêt à être travaillé, sur sa machine locale :
+
+1. **Créer une branche**. Utilisez la commande `git branch` pour créer une branche qui contiendra les modifications qu’ils veulent contribuer:
+
+   ```bash
+   git branch [nom_branche]
+   ```
+
+1. **Passer à la branche de travail**. Basculez vers la branche spécifiée et mettez à jour le répertoire de travail avec `git switch`:
+
+   ```bash
+   git switch [nom_branche]
+   ```
+
+1. **Travailler**. À ce stade, vous souhaitez ajouter vos modifications. N’oubliez pas d’en parler à Git avec les commandes suivantes:
+
+   ```bash
+   git add .
+   git commit -m " mes modifications "
+   ```
+
+   Assurez-vous de donner à votre engagement une bonne réputation, pour votre bien ainsi que pour le mainteneur du repo que vous aidez.
+
+1. **Combinez votre travail avec la branche `main`**. À un moment donné, vous avez fini de travailler et vous voulez combiner votre travail avec celui de la branche `main`. La branche `main`" a peut-être changé entre-temps, alors assurez-vous de la mettre à jour au plus tard avec les commandes suivantes:
+
+   ```bash
+   git switch principal
+   git pull
+   ```
+
+   À ce stade, vous voulez vous assurer que tous les _conflits_, les situations où Git ne peut pas facilement _combiner_ les modifications se produisent dans votre branche de travail. Par conséquent, exécutez les commandes suivantes :
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Cela apportera tous les changements de `main` dans votre branche et j’espère que vous pourrez simplement continuer. Sinon, VS Code vous dira où Git est _confus_ et vous modifiez simplement les fichiers affectés pour dire quel contenu est le plus précis.
+
+1. **Envoyez votre travail à GitHub**. L’envoi de votre travail à GitHub signifie deux choses. Pousser votre succursale à votre dépôt, puis ouvrir un PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [nom_branche]
+   ```
+
+   La commande ci-dessus crée la branche sur votre référentiel duppliqué.
+
+1. **Ouvrez une PR**. Ensuite, vous souhaitez ouvrir une PR. Pour ce faire, accédez au référentiel forké sur GitHub. Vous verrez une indication sur GitHub où il vous demande si vous souhaitez créer une nouvelle PR, vous cliquez dessus et vous êtes emmené vers une interface où vous pouvez changer le titre du message de validation, lui donner une description plus appropriée. Maintenant, le mainteneur du repo que vous avez forké verra ce PR et _croisons les doigts_ qu’il apprécieront et _fusionnera_ votre PR. Vous êtes maintenant un contributeur, yay :)
+
+1. **Nettoyer**. Il est considéré comme une bonne pratique de _clean up_ après avoir fusionné avec succès un PR. Vous voulez nettoyer à la fois votre branche locale et la branche que vous avez poussée vers GitHub. Commençons par le supprimer localement avec la commande suivante: 
+
+   ```bash
+   git branch -d [nom_branche]
+   ```
+
+   Assurez-vous d’accéder à la page GitHub pour le référentiel duppliqué suivant et supprimez la branche distante que vous venez d’y pousser.
+
+`Pull request` semble être un terme stupide parce que vous voulez vraiment pousser vos modifications au projet. Mais le responsable (propriétaire du projet) ou l’équipe principale doit prendre en compte vos modifications avant de la fusionner avec la branche " principale " du projet, vous demandez donc vraiment une décision de modification à un responsable.  
+
+Une pull request est l’endroit idéal pour comparer et discuter des différences introduites sur une branche avec des révisions, des commentaires, des tests intégrés, etc. Une bonne pull request suit à peu près les mêmes règles qu’un message de validation. Vous pouvez ajouter une référence à un problème dans le suivi des problèmes, lorsque votre travail, par exemple, résout un problème. Cela se fait à l’aide d’un `#` suivi du numéro de votre problème. Par exemple `#97`.
+
+🤞croisons les doigts pour que toutes les vérifications réussissent et que le ou les propriétaires du projet fusionnent vos modifications dans le projet🤞
+
+Mettez à jour votre branche de travail locale actuelle avec tous les nouveaux commits de la branche distante correspondante sur GitHub :
+
+`git pull`
+
+## Comment contribuer à l’open source
+
+Tout d’abord, trouvons un référentiel (ou **repo**) sur GitHub qui vous intéresse et auquel vous souhaitez apporter une modification. Vous voudrez copier son contenu sur votre machine.
+
+✅ Un bon moyen de trouver des repos " conviviaux pour les débutants " est de [rechercher par la balise 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](../images/clone_repo.png)
+
+Il existe plusieurs façons de copier du code. Une façon consiste à " cloner " le contenu du référentiel, en utilisant HTTPS, SSH ou en utilisant l’interface de ligne de commande GitHub CLI (Interface de ligne de commande). 
+
+Ouvrez votre terminal et clonez le référentiel comme suit:
+`git clone https://github.com/ProjectURL`
+
+Pour travailler sur le projet, basculez vers le dossier de droite :
+`cd ProjectURL`
+
+Vous pouvez également ouvrir l’ensemble du projet à l’aide de [Codespaces](https://github.com/features/codespaces), de l’éditeur de code intégré / environnement de développement cloud de GitHub ou de [GitHub Desktop](https://desktop.github.com/).
+
+Enfin, vous pouvez télécharger le code dans un dossier compressé. 
+
+### Quelques choses plus intéressantes sur GitHub
+
+Vous pouvez mettre en vedette, regarder et / ou " fork " n’importe quel référentiel public sur GitHub. Vous pouvez trouver vos référentiels étoilés dans le menu déroulant en haut à droite. C’est comme le bookmarking, mais pour le code. 
+
+Les projets ont un suivi des problèmes, principalement sur GitHub dans l’onglet " Problèmes ", sauf indication contraire, où les gens discutent des problèmes liés au projet. Et l’onglet Pull Requests est l’endroit où les gens discutent et examinent les modifications en cours.
+
+Les projets peuvent également avoir des discussions dans des forums, des listes de diffusion ou des canaux de chat tels que Slack, Discord ou IRC.
+
+✅ Jetez un coup d’œil à votre nouveau référentiel GitHub et essayez quelques éléments, comme la modification des paramètres, l’ajout d’informations à votre référentiel et la création d’un projet (comme un tableau Kanban). Il y a beaucoup de choses que vous pouvez faire!
+
+---
+
+## 🚀 Challenge
+
+Associez-vous à un ami pour travailler sur le code de l’autre. Créez un projet en collaboration, bifurquez du code, créez des branches et fusionnez les modifications.
+
+## Quiz de validation des connaissances
+[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=fr)
+
+## Examen & Auto-apprentissage
+
+En savoir plus sur [contribuer à un logiciel open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Pratique, pratique, pratique. GitHub a d’excellents chemins d’apprentissage disponibles via [lab.github.com](https://lab.github.com/):
+
+- [Première semaine sur GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Vous trouverez également des laboratoires plus avancés. 
+
+## Affectation
+
+Complétez [la première semaine dans le laboratoire de formation GitHub](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.hi.md

@@ -0,0 +1,315 @@
+# गिटहब का परिचय
+
+इस पाठ में GitHub की मूल बातें शामिल हैं, जो आपके कोड में परिवर्तनों को होस्ट और प्रबंधित करने के लिए एक मंच है।
+
+![GitHub का परिचय](/sketchnotes//webdev101-github.png)
+> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
+
+## पूर्व व्याख्यान प्रश्नोत्तरी
+[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=hi)
+
+## परिचय
+
+इस पाठ में, हम कवर करेंगे:
+
+- आपके द्वारा मशीन पर किए गए कार्य को ट्रैक करना
+- दूसरों के साथ परियोजनाओं पर काम करना
+- खुला स्त्रोत सॉफ़्टवेयर खोलने में योगदान कैसे करें
+
+### आवश्यक शर्तें
+
+ शुरू करने से पहले, आपको जांचना होगा कि क्या Git स्थापित है। टर्मिनल में लिखे:
+`git --version`
+
+यदि गिट स्थापित नहीं है तो , [गिट डाउनलोड करे](https://git-scm.com/downloads). फिर, टर्मिनल में अपनी स्थानीय Git प्रोफ़ाइल सेट करें:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+यह जाँचने के लिए कि क्या Git पहले से कॉन्फ़िगर है आप टाइप कर सकते हैं:
+`git config --list`
+
+आपको एक GitHub खाते, एक कोड एडिटर (जैसे Visual Studio कोड) की आवश्यकता होगी, और आपको अपना टर्मिनल (या: कमांड प्रॉम्प्ट) खोलने की आवश्यकता होगी।
+
+[Github.com](https://github.com/) पर नेविगेट करें और यदि आप पहले से नहीं हैं, तो एक खाता बनाएं या लॉग इन करें और अपना प्रोफ़ाइल भरें। 
+
+✅ GitHub दुनिया में एकमात्र कोड भंडार नहीं है; अन्य हैं, लेकिन GitHub सबसे अच्छा ज्ञात है
+
+### तैयारी
+
+आपको अपने स्थानीय मशीन (लैपटॉप या पीसी) पर एक कोड परियोजना के साथ एक फ़ोल्डर की आवश्यकता होगी, और GitHub पर एक सार्वजनिक भंडार, जो दूसरों की परियोजनाओं में योगदान करने के लिए एक उदाहरण के रूप में काम करेगा। 
+
+---
+
+## कोड प्रबंधन
+
+मान लें कि आपके पास कुछ कोड प्रोजेक्ट के साथ स्थानीय रूप से एक फ़ोल्डर है और आप संस्करण नियंत्रण प्रणाली - git का उपयोग करके अपनी प्रगति को ट्रैक करना शुरू करना चाहते हैं। कुछ लोग आपके भविष्य के लिए एक प्रेम पत्र लिखने के लिए git का उपयोग करने की तुलना करते हैं। अपने प्रतिबद्ध संदेशों को दिनों या हफ्तों या महीनों के बाद पढ़कर आप याद कर पाएंगे कि आपने निर्णय क्यों लिया, या "रोलबैक" में बदलाव किया - यानी जब आप अच्छा "कमिट मैसेज" लिखते हैं।
+
+### कार्य: एक रीपाज़टॉरी और कमिट कोड बनाएं
+1. **GitHub पर रीपाज़टॉरी बनाएँ**. GitHub.com पर, रिपॉजिटरी टैब में, या नेविगेशन बार टॉप-राइट से, **नया रेपो** बटन ढूंढें।
+
+   1. अपने रिपॉजिटरी (फ़ोल्डर) को एक नाम दें
+   1. **रिपॉजिटरी बनाएं** चुनें।
+
+1. **अपने कार्यशील फ़ोल्डर में नेविगेट करें**. अपने टर्मिनल में, उस फ़ोल्डर पर स्विच करें (जिसे निर्देशिका के रूप में भी जाना जाता है) जिसे आप ट्रैक करना चाहते हैं, लिखे :
+
+   ```bash
+   cd [फ़ोल्डरका नाम]
+   ```
+
+1. **एक गिट रिपॉजिटरी को प्रारंभ करें**. आपके प्रोजेक्ट मे लिखे:
+   ```bash
+   git init
+   ```
+
+1. **अवस्था जांच**. अपने भंडार प्रकार की स्थिति की जांच करने के लिए लिखे:
+
+   ```bash
+   git status
+   ```
+
+  आउटपुट कुछ इस तरह दिख सकता है:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+आमतौर पर एक `git status` कमांड आपको ऐसी चीजें बताती है जैसे रेपो में _saved_ होने के लिए कौन सी फाइलें तैयार हैं या इस पर ऐसे बदलाव हैं जिन्हें आप जारी रखना चाहते हैं।
+
+1. **ट्रैकिंग के लिए सभी फाइलें जोड़ें**
+  इसे स्टेजिंग फाइल / फाइल को स्टेजिंग एरिया में जोड़ना भी कहा जाता है।
+
+   ```bash
+   git add .
+   ```
+
+  `Git add` और `.` तर्क इंगित करता है कि आपकी सभी फाइलें और ट्रैकिंग के लिए परिवर्तन होगया है। 
+
+1. **ट्रैकिंग के लिए चयनित फ़ाइलें जोड़ें**
+
+   ```bash
+   git add [फ़ाइल या फ़ोल्डर का नाम]
+   ```
+
+   जब हम एक बार में सभी फ़ाइलों को कमिट नहीं करना चाहते हैं, तो यह हमें केवल स्टेजिंग क्षेत्र में चयनित फ़ाइलों को जोड़ने में मदद करता है।
+
+1. **सभी फाइलों को अनस्टेज करें**
+
+   ```bash
+   git reset
+   ```
+
+   यह कमांड हमें एक ही बार में सभी फ़ाइलों को अस्थिर करने में मदद करता है।
+
+1. **किसी विशेष फ़ाइल को अनस्टेज करें**
+
+   ```bash
+   git reset [फ़ाइल या फ़ोल्डर का नाम]
+   ```
+
+यह कमांड हमें केवल एक विशेष फ़ाइल को एक बार में अनस्टेज करने में मदद करती है जिसे हम अगले कमिट के लिए शामिल नहीं करना चाहते हैं।
+
+1. **अपना काम जारी रखना**. इस बिंदु पर आपने फ़ाइलों को तथाकथित _स्टैजिंग एरिया_ में जोड़ा है।एक जगह जहां Git आपकी फ़ाइलों को ट्रैक कर रही है। परिवर्तन को स्थायी करने के लिए आपको फ़ाइलों को _कॉमित_ की आवश्यकता होती है। ऐसा करने के लिए आप `git commit` कमांड के साथ एक _कमिट _ बनाते हैं। एक _कमिट_ आपके रेपो के इतिहास में एक बचत बिंदु का प्रतिनिधित्व करता है। _कमिट_ बनाने के लिए निम्नलिखित टाइप करें:
+
+   ```bash
+   git commit -m "पहला कमिट"
+   ```
+
+   यह आपकी सभी फ़ाइलों को "पहला कमिट" संदेश को जोड़ता है। भविष्य के कमिट संदेशों के लिए आप अपने विवरण में यह बताना चाहेंगे कि आपने किस प्रकार का परिवर्तन किया है।
+
+1. **अपने स्थानीय Git रेपो को GitHub से कनेक्ट करें**. आपके मशीन पर एक Git रेपो अच्छा है, लेकिन कुछ बिंदु पर आप अपनी फ़ाइलों का बैकअप कहीं और रखना चाहते हैं और अन्य लोगों को भी अपने रेपो पर आपके साथ काम करने के लिए आमंत्रित करते हैं। ऐसा करने के लिए एक महान जगह GitHub है। याद रखें कि हमने पहले ही GitHub पर एक रेपो बना लिया है, इसलिए हमें केवल अपने Git रेपो को GitHub के साथ जोड़ना है। कमांड `git remote add` बस यही करेगा। निम्न कमांड टाइप करें:
+
+   > ध्यान दें, इससे पहले कि आप कमांड टाइप करें अपने रिपॉजिटरी URL को खोजने के लिए अपने GitHub रेपो पेज पर जाएं। आप इसे नीचे दिए गए कमांड में उपयोग करेंगे। अपने GitHub URL से `repository_name` बदलें।
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   यह आपके द्वारा पहले बनाए गए GitHub रिपॉजिटरी को इंगित करते हुए "origin" नाम का एक _remote_, या कनेक्शन बनाता है।
+
+1. **GitHub पर स्थानीय फ़ाइलें भेजें**. अब तक आपने स्थानीय रेपो और गिटहब रेपो के बीच एक _कनेक्शन_ बनाया है। चलो निम्न कमांड `git push` के साथ इन फाइलों को गिटहब को भेजें, जैसे:
+
+   ```bash
+   git push -u origin main
+   ```
+
+   यह आपकी "मैन" शाखा में GitHub को आपके कमिट भेजता है।
+
+1. **अधिक परिवर्तन जोड़ने के लिए**. यदि आप परिवर्तन करना जारी रखना चाहते हैं और उन्हें GitHub पर धकेलना चाहते हैं, तो आपको निम्नलिखित तीन आदेशों का उपयोग करने की आवश्यकता होगी:
+
+   ```bash
+   git add .
+   git commit -m "अपना संदेश यहाँ लिखें"
+   git push
+   ```
+
+   > टिप, आप उन फ़ाइलों को रोकने के लिए एक `.gitignore` फ़ाइल भी अपनाना चाह सकते हैं जिन्हें आप GitHub पर दिखाने से रोकना चाहते हैं - जैसे नोट्स आप उसी फ़ोल्डर में संग्रहीत करते हैं, लेकिन सार्वजनिक रिपॉजिटरी में कोई स्थान नहीं है। आप `.gitignore` फाइल के लिए टेम्प्लेट में [.gitignore टेम्प्लेट](https://github.com/github/gitignore) पे पा सकते हैं
+#### कमिट संदेश
+
+एक महान Git कमिट विषय पंक्ति निम्नलिखित वाक्य को पूरा करती है:
+यदि लागू किया जाता है, तो यह प्रतिबद्ध होगा <आपकी विषय पंक्ति यहां>
+
+विषय के लिए अनिवार्य, वर्तमान काल का उपयोग करें: "परिवर्तन" न "बदला गया" और न ही "परिवर्तने"।
+विषय के रूप में, शरीर में (वैकल्पिक) भी अनिवार्य, वर्तमान काल का उपयोग करते हैं। शरीर में परिवर्तन के लिए प्रेरणा शामिल होनी चाहिए और पिछले व्यवहार के साथ इसके विपरीत होना चाहिए। आप `क्यों` को समझा रहे हैं,` कैसे` को नहीं।
+
+✅ GitHub के आसपास सर्फ करने के लिए कुछ मिनट लें। क्या आप वास्तव में महान कमिट संदेश पा सकते हैं? क्या आप वास्तव में न्यूनतम पा सकते हैं? आपको क्या संदेश लगता है कि एक कमिट संदेश देने के लिए सबसे महत्वपूर्ण और उपयोगी है?
+
+### कार्य: सहयोग करें
+
+गिटहब पर चीजें डालने का मुख्य कारण अन्य डेवलपर्स के साथ सहयोग करना संभव बनाना था।
+
+## दूसरों के साथ परियोजनाओं पर काम करना
+
+अपनी रिपॉजिटरी में, यह देखने के लिए कि आपकी परियोजना अनुशंसित सामुदायिक मानकों की तुलना कैसे करती है, `इनसाइट्स > कम्यूनिटी` पर जाएँ।
+
+   यहाँ कुछ चीजें हैं जो आपके GitHub रेपो में सुधार कर सकती हैं:
+   - **विवरण**. क्या आपने अपनी परियोजना के लिए एक विवरण जोड़ा?
+   - **README**. क्या आपने एक README जोड़ा? GitHub एक [README](https://docs.github.com/articles/about-readmes/) लिखने के लिए मार्गदर्शन प्रदान करता है।
+   - **योगदान दिशानिर्देश**. आपके प्रोजेक्टका [योगदान दिशानिर्देश](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) है, 
+   - **आचार संहिता**. एक [आचार संहिता](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **लाइसेंस**. शायद सबसे महत्वपूर्ण बात, एक [लाइसेंस](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+इन सभी संसाधनों से टीम के नए सदस्यों को लाभ मिलेगा। और वे आम तौर पर इस तरह की चीजें हैं जो आपके कोड को देखने से पहले भी नए योगदानकर्ताओं को देखते हैं, यह पता लगाने के लिए कि क्या आपका प्रोजेक्ट उनके लिए अपना समय बिताने के लिए सही जगह है।
+
+✅ README फाइलें, हालांकि उन्हें तैयार करने में समय लगता है, अक्सर व्यस्त रखवाले द्वारा उपेक्षित कर दिए जाते हैं। क्या आप एक विशेष रूप से वर्णनात्मक का एक उदाहरण पा सकते हैं? नोट: कुछ अच्छे [READMEs बनाने में मदद करने के लिए कुछ उपकरण हैं](https://www.makeareadme.com/) जिन्हें आप आज़माना चाहते हैं।
+
+### कार्य: कुछ कोड मर्ज करें
+
+डॉक्स में योगदान करने से लोगों को परियोजना में योगदान करने में मदद मिलती है। यह बताता है कि आप किस प्रकार के योगदान की तलाश कर रहे हैं और प्रक्रिया कैसे काम करती है। योगदानकर्ताओं को GitHub पर आपके रेपो में योगदान करने में सक्षम होने के लिए कई चरणों से गुजरना होगा:
+
+
+1. **अपने रेपो को फोर्क करना** आप शायद लोगों को अपनी परियोजना को _fork_ करना चाहेंगे। फोर्किंग का अर्थ है उनके GitHub प्रोफाइल पर अपनी रिपॉजिटरी की प्रतिकृति बनाना।
+1. **क्लोन**.वहां से वे इस परियोजना को अपनी स्थानीय मशीन से जोड़ देंगे।
+1. **एक शाखा बनाएँ**. आप उन्हें अपने काम के लिए एक _शाखा_ बनाने के लिए कहना चाहेंगे। 
+1. **एक क्षेत्र पर उनके परिवर्तन पर ध्यान दें**.योगदानकर्ताओं से एक समय में एक चीज़ पर उनके योगदान पर ध्यान केंद्रित करने के लिए कहें - इस तरह से संभावना है कि आप उनके काम में विलय कर सकते हैं। कल्पना कीजिए कि वे एक बग फिक्स लिखते हैं, एक नई सुविधा जोड़ते हैं, और कई परीक्षण अपडेट करते हैं - क्या होगा यदि आप चाहते हैं, या केवल 3 में से 2, या 3 में से 1 परिवर्तन लागू कर सकते हैं?
+
+✅ ऐसी स्थिति की कल्पना करें जहां शाखाएं विशेष रूप से अच्छे कोड लिखने और शिपिंग करने के लिए महत्वपूर्ण हैं। आप किन मामलों का उपयोग कर सकते हैं?
+
+> ध्यान दें, वह परिवर्तन हो जो आप दुनिया में देखना चाहते हैं, और अपने काम के लिए भी शाखाएँ बनाएँ। आपके द्वारा किया गया कोई भी शाखा उस शाखा पर बना दी जाएगी जिसे आप वर्तमान में "चेक आउट" कर रहे हैं। कौन सी शाखा है यह देखने के लिए `git status` का प्रयोग करें।
+
+चलो एक योगदानकर्ता वर्कफ़्लो के माध्यम से चलते हैं। मान लें कि योगदानकर्ता पहले से ही रेपो को _फोर्क_ और _क्लोन_ कर चुका है, इसलिए उनके पास अपने स्थानीय मशीन पर काम करने के लिए तैयार गिट रेपो है:
+
+1. **एक शाखा बनाएँ**.एक शाखा बनाने के लिए कमांड `git branch` का उपयोग करें जिसमें वे परिवर्तन होंगे जो उनके योगदान के लिए हैं:
+
+   ```bash
+   git branch [शाखाका-नाम]
+   ```
+
+1. **कार्यशील शाखा पर स्विच करें**. निर्दिष्ट शाखा में स्विच करें और `git switch` के साथ कार्य निर्देशिका को अपडेट करें:
+
+   ```bash
+   git switch [शाखाका-नाम]
+   ```
+
+1. **काम करो**. इस बिंदु पर आप अपने परिवर्तन जोड़ना चाहते हैं। निम्नलिखित आदेशों के बारे में Git को बताना न भूलें:
+
+   ```bash
+   git add .
+   git commit -m "मेरे परिवर्तन"
+   ```
+
+   यह सुनिश्चित करें कि आप अपनी खातिर एक अच्छा नाम दें, साथ ही साथ आप जिस रेपो में मदद कर रहे हैं उसका रखवालाका भी।
+
+1. **`main` शाखा के साथ अपने काम को मिलाएं**. कुछ बिंदु पर आप काम कर रहे हैं और आप `main` शाखा के साथ अपने काम को जोड़ना चाहते हैं। `main` शाखा इस बीच बदल सकती है, इसलिए सुनिश्चित करें कि आपने इसे निम्न कमांड के साथ नवीनतम में अपडेट किया है:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+  इस बिंदु पर आप यह सुनिश्चित करना चाहते हैं कि कोई भी _टकराव_, परिस्थितियां जहां Git आसानी से आपके कामकाजी शाखा में होने वाले परिवर्तनों को _संयोजित_ नहीं कर सकती है। इसलिए निम्न आदेश चलाएँ:
+
+   ```bash
+   git switch [शाखाका-नाम]
+   git merge main
+   ```
+
+   यह आपकी शाखा में `main` से सभी बदलाव लाएगा और उम्मीद है कि आप अभी भी जारी रख सकते हैं। यदि नहीं, तो VS कोड आपको बताएगा कि गिट कहां _उलझन_ में है और आप यह कहने के लिए प्रभावित फाइलों को बदल देते हैं कि कौन सी सामग्री सबसे सटीक है।
+
+1. **अपना काम GitHub को भेजें**. अपने काम को GitHub में भेजने का मतलब है दो चीजें। अपनी शाखा को अपने रेपो में धकेलना और फिर एक पीआर, पुल अनुरोध को खोलें।
+
+   ```bash
+   git push --set-upstream origin [शाखाका-नाम]
+   ```
+
+  उपरोक्त कमांड आपके फोर्क्ड रेपो पर शाखा बनाता है।
+
+1. **एक पीआर खोलें**. अगला, आप एक पीआर खोलना चाहते हैं। आप GitHub पर फोर्केड रेपो में नेविगेट करके ऐसा करते हैं। आपको GitHub पर एक संकेत दिखाई देगा जहां यह पूछता है कि क्या आप एक नया PR बनाना चाहते हैं, आप उस पर क्लिक करते हैं और आपको एक इंटरफ़ेस पर ले जाया जाता है जहाँ आप प्रतिबद्ध संदेश शीर्षक बदल सकते हैं, इसे अधिक उपयुक्त विवरण दे सकते हैं। अब रेपो के अनुरक्षक आप इस पीआर को देखेंगे और _उँगलियाँ पार_ कर जाएँगे जो आपके पीआर को सराहेंगे और _मर्ज_ करेंगे। अब आप एक योगदानकर्ता हैं, याय :)
+
+1. **साफ - सफाई**. अपने को सफलतापूर्वक मर्ज करने के बाद _सफाई करना_ अच्छा माना जाता है। आप अपनी स्थानीय शाखा और उस शाखा को साफ़ करना चाहते हैं जिसे आपने GitHub में धकेल दिया है। पहले इसे निम्नलिखित कमांड के साथ स्थानीय रूप से हटा दें: 
+
+   ```bash
+   git branch -d [शाखाका-नाम]
+   ```
+
+   सुनिश्चित करें कि आप अगले फोर्केड रेपो के लिए GitHub पृष्ठ पर जाएं और उस दूरस्थ शाखा को हटा दें जिसे आपने अभी पुश किया था।
+
+`पुल अनुरोध` एक मूर्खतापूर्ण शब्द की तरह लगता है क्योंकि वास्तव में आप परियोजना में अपने परिवर्तनों को आगे बढ़ाना चाहते हैं। लेकिन अनुरक्षक (परियोजना स्वामी) या कोर टीम को परियोजना की "main" शाखा के साथ विलय करने से पहले आपके परिवर्तनों पर विचार करने की आवश्यकता है, इसलिए आप वास्तव में एक अनुचर से परिवर्तन के निर्णय का अनुरोध कर रहे हैं।
+
+एक पुल अनुरोध समीक्षा, टिप्पणियों, एकीकृत परीक्षणों और अधिक के साथ एक शाखा पर पेश किए गए मतभेदों की तुलना और चर्चा करने का स्थान है। एक अच्छा पुल अनुरोध एक प्रतिबद्ध संदेश के समान नियमों का पालन करता है। आप समस्या ट्रैकर में किसी समस्या के संदर्भ को जोड़ सकते हैं, जब उदाहरण के लिए आपका कार्य किसी समस्या को हल करता है। यह आपके अंक की संख्या के बाद एक `#` का उपयोग करके किया जाता है। उदाहरण के लिए `# 97`।
+
+🤞उंगलियों ने पार कर दिया कि सभी चेक पास हो गए और परियोजना के मालिकों ने परियोजना में आपके बदलावों को मर्ज कर दिया🤞
+
+GitHub पर संबंधित दूरस्थ शाखा से सभी नए कमिट के साथ अपनी वर्तमान स्थानीय कार्य शाखा को अपडेट करें:
+
+`git pull`
+
+## कैसे खुला स्रोत में योगदान करे
+
+सबसे पहले, आप के हित के GitHub पर एक रिपॉजिटरी (या **रेपो**) ढूंढें और जिसमें आप बदलाव में योगदान करना चाहते हैं। आप इसकी सामग्री को अपनी मशीन पर कॉपी करना चाहेंगे।
+
+✅'शुरुआती-अनुकूल' रेपो को खोजने का एक अच्छा तरीका है, ['good-first-issue' द्वारा खोज करना](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![एक रेपो को स्थानीय रूप से कॉपी करें](../images/clone_repo.png)
+
+कोड को कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी की सामग्री को "क्लोन" करना, HTTPS, SSH का उपयोग करना, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करना। 
+
+अपना टर्मिनल खोलें और रिपॉजिटरी को क्लोन करें जैसे:
+`git clone https://github.com/ProjectURL`
+
+प्रोजेक्ट पर काम करने के लिए, सही फ़ोल्डर पर जाएँ:
+`cd ProjectURL`
+
+आप [Codespaces](https://github.com/features/codespaces), GitHub के एम्बेडेड कोड एडिटर / क्लाउड डेवलपमेंट एन्वायरमेंट, या [GitHub Desktop](https://desktop.github.com/) का उपयोग करके पूरी परियोजना भी खोल सकते हैं ) का है।
+
+अंत में, आप ज़िप फ़ोल्डर में कोड डाउनलोड कर सकते हैं।
+
+### GitHub के बारे में कुछ और दिलचस्प बातें
+
+आप GitHub पर किसी भी पब्लिक रिपॉजिटरी को स्टार, पहरा और/या "फोर्क" कर सकते हैं। आप शीर्ष-दाएँ ड्रॉप-डाउन मेनू में अपने तारांकित रिपॉजिटरी पा सकते हैं। यह बुकमार्क करने जैसा है, लेकिन कोड के लिए।
+
+परियोजनाओं में एक मुद्दा ट्रैकर है, ज्यादातर "इश्यू" टैब में गिटहब पर जब तक कि अन्यथा इंगित नहीं किया जाता है, जहां लोग परियोजना से संबंधित मुद्दों पर चर्चा करते हैं। और पुल अनुरोध टैब वह है जहां लोग उन परिवर्तनों की चर्चा और समीक्षा करते हैं जो प्रगति पर हैं।
+
+परियोजनाओं की चर्चा फ़ोरम, मेलिंग सूचियों, या चैट चैनलों जैसे स्लैक, डिस्कोर्ड या आईआरसी में भी हो सकती है।
+
+✅ अपने नए GitHub रेपो के चारों ओर एक नज़र डालें और कुछ चीजों को आज़माएं, जैसे कि सेटिंग्स को संपादित करना, अपने रेपो में जानकारी जोड़ना और एक प्रोजेक्ट बनाना (जैसे कंबन बोर्ड)। बहुत कुछ है जो आप कर सकते हैं!
+
+---
+
+## 🚀 चुनौती
+
+एक दूसरे के कोड पर काम करने के लिए एक दोस्त के साथ जोडे। सहयोगी रूप से एक परियोजना बनाएँ, कोड बनाएँ, शाखाएँ बनाएँ, और परिवर्तनों को मर्ज करें।
+
+## व्याख्यान उपरांत प्रश्नोत्तरी
+[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=hi)
+
+## समीक्षा और स्व अध्ययन
+
+[ओपन सोर्स सॉफ्टवेयर में योगदान](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) के बारे में और पढ़ें।
+
+[गिट चिटशीट](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+अभ्यास, अभ्यास, अभ्यास। GitHub में [lab.github.com](https://lab.github.com/) के माध्यम से सीखने के शानदार रास्ते उपलब्ध हैं:
+
+- [GitHub पर पहला सप्ताह](https://lab.github.com/githubtraining/first-week-on-github)
+
+आपको और भी उन्नत प्रयोगशालाएँ मिलेंगी।
+
+## असाइनमेंट 
+
+[GitHub प्रशिक्षण प्रयोगशाला पर पहला सप्ताह](https://lab.github.com/githubtraining/first-week-on-github) पूरा करे

1-getting-started-lessons/2-github-basics/translations/README.id.md

@@ -0,0 +1,293 @@
+# Dasar-dasar GitHub
+
+Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengelola perubahan pada kode Anda.
+
+![Dasar-dasar GitHub](/sketchnotes/webdev101-github.png)
+> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuis Pra-Kuliah
+
+[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=id)
+
+## Pengantar
+
+Dalam pelajaran ini, kami akan membahas:
+
+- melacak pekerjaan yang Anda lakukan di mesin Anda
+- mengerjakan proyek dengan orang lain
+- bagaimana berkontribusi pada perangkat lunak sumber terbuka
+
+### Prasyarat
+
+Sebelum memulai, Anda harus memeriksa apakah Git sudah diinstal. Di terminal ketik:
+`git --version`
+
+Jika Git tidak diinstal, [unduh Git](https://git-scm.com/downloads). Kemudian, atur profil Git lokal Anda di terminal:
+`git config --global user.name "nama-anda"`
+`git config --global user.email "email-anda"`
+
+Untuk memeriksa apakah Git sudah dikonfigurasi, Anda dapat mengetik:
+`git config --list`
+
+Anda juga memerlukan akun GitHub, editor kode (seperti Visual Studio Code), dan Anda harus membuka terminal (atau: command prompt).
+
+Buka [github.com](https://github.com/) dan buat akun jika Anda belum melakukannya, atau masuk dan isi profil Anda.
+
+✅ GitHub bukan satu-satunya repositori kode di dunia; ada yang lain, tapi GitHub adalah yang paling terkenal
+
+### Persiapan
+
+Anda akan memerlukan folder dengan proyek kode di komputer lokal Anda (laptop atau PC), dan repositori publik di GitHub, yang akan berfungsi sebagai contoh cara berkontribusi pada proyek orang lain.
+
+---
+
+## Manajemen kode
+
+Katakanlah Anda memiliki folder secara lokal dengan beberapa proyek kode dan Anda ingin mulai melacak kemajuan Anda menggunakan git - sistem kontrol versi. Beberapa orang membandingkan penggunaan git dengan menulis surat cinta untuk diri Anda di masa depan. Membaca pesan commit Anda beberapa hari atau minggu atau bulan kemudian, Anda akan dapat mengingat mengapa Anda membuat keputusan, atau "membatalkan" perubahan - yaitu, saat Anda menulis "pesan commit" yang baik.
+
+### Tugas: Membuat repositori dan menyerahkan kode
+
+1. **Buat repositori di GitHub**. Di GitHub.com, di tab repositories, atau dari kanan atas bilah navigasi, temukan tombol **repo baru (new repo)**.
+
+   1. Beri nama repositori (folder) Anda
+   1. Pilih **create repository**.
+
+1. **Arahkan ke folder kerja Anda**. Di terminal Anda, beralihlah ke folder (juga dikenal sebagai direktori) yang ingin Anda mulai lacak. Ketik:
+
+   ```bash
+   cd [nama folder anda]
+   ```
+
+1. **Inisialisasi repositori git**. Dalam proyek Anda ketik:
+
+   ```bash
+   git init
+   ```
+
+1. **Periksa status**. Untuk memeriksa status repositori Anda ketik:
+
+   ```bash
+   git status
+   ```
+
+   hasilnya akan terlihat seperti ini:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Pada umunya perintah `git status` memberi tahu Anda hal-hal seperti file apa yang siap untuk _simpan_ ke repo atau ada perubahan di dalamnya yang mungkin ingin Anda pertahankan.
+
+1. **Tambahkan file ke pelacakan**
+
+   ```bash
+   git add .
+   ```
+
+   `git add` ditambah argumen `.` menunjukkan bahwa semua file dan perubahan Anda untuk pelacakan.
+
+1. **Mempertahankan pekerjaan Anda**. Pada titik ini Anda telah menambahkan file ke apa yang disebut _staging area_ (area pementasan). Tempat di mana Git melacak file Anda. Untuk membuat perubahan permanen Anda perlu _commit_ (menyerahkan) file. Untuk melakukannya, Anda membuat _commit_ dengan perintah `git commit`. Sebuah _commit_ mewakili titik penyimpanan dalam riwayat repo Anda. Ketik berikut ini untuk membuat _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Ini menyerahkan (commit) semua file Anda, menambahkan pesan "first commit". Untuk pesan commit di masa mendatang, Anda akan ingin lebih deskriptif dalam deskripsi Anda untuk menyampaikan jenis perubahan apa yang telah Anda buat.
+
+1. **Hubungkan repo Git lokal Anda dengan GitHub**. Sebuah Repo Git bagus di mesin Anda tetapi pada titik tertentu Anda ingin memiliki cadangan file Anda di suatu tempat dan juga mengundang orang lain untuk bekerja dengan Anda di repo Anda. Salah satu tempat yang bagus untuk melakukannya adalah GitHub. Ingat kita sudah membuat repo di GitHub jadi satu-satunya hal yang perlu kita lakukan adalah menghubungkan repo Git lokal kita dengan GitHub. Perintah `git remote add` akan melakukan hal itu. Ketik perintah berikut:
+
+   > Catatan, sebelum Anda mengetik perintah, buka halaman repo GitHub Anda untuk menemukan URL repositori. Anda akan menggunakannya di perintah di bawah ini. Ganti `nama_repository` dengan URL GitHub Anda.
+
+   ```bash
+   git remote add origin https://github.com/username/nama_repository.git
+   ```
+
+   Ini membuat _remote_, atau koneksi, bernama "origin" yang menunjuk ke repositori GitHub yang Anda buat sebelumnya.
+
+1. **Kirim file lokal ke GitHub**. Sejauh ini Anda telah membuat _connection_ (koneksi) antara repo lokal dan repo GitHub. Ayo kirim file-file ini ke GitHub dengan perintah berikut `git push`, seperti itu:
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Ini mengirimkan komit Anda di cabang "main" Anda ke GitHub.
+
+1. **Untuk menambahkan lebih banyak perubahan**. Jika Anda ingin terus membuat perubahan dan menerapkannya ke GitHub, Anda hanya perlu menggunakan tiga perintah berikut:
+
+   ```bash
+   git add .
+   git commit -m "ketik pesan komit Anda di sini"
+   git push
+   ```
+
+   > Tip, Anda mungkin juga ingin mengadopsi file `.gitignore` untuk mencegah file yang tidak ingin Anda lacak muncul di GitHub - seperti file catatan yang Anda simpan di folder yang sama tetapi tidak memiliki tempat di repositori publik. Anda dapat menemukan template untuk file `.gitignore` di [.gitignore templates](github.com/github/gitignore).
+
+#### Pesan commit
+
+Baris subjek Git commit yang bagus melengkapi kalimat berikut:
+Jika diterapkan, komit ini akan <baris subjek Anda di sini>
+
+Untuk subjek gunakan imperatif, bentuk waktu sekarang (present tense): "merubah" bukan "perubahan" atau "mengubah". 
+Seperti pada subjek, dalam tubuh (opsional) juga gunakan imperatif, bentuk waktu sekarang. Tubuh harus memasukkan motivasi untuk perubahan dan membandingkannya dengan perilaku sebelumnya. Anda menjelaskan `mengapa`, bukan `bagaimana`.
+
+✅ Luangkan beberapa menit untuk menjelajahi GitHub. Dapatkah Anda menemukan pesan commit yang sangat bagus? Dapatkah Anda menemukan yang sangat minim? Informasi apa yang menurut Anda paling penting dan berguna untuk disampaikan dalam pesan commit?
+
+### Tugas: Berkolaborasi
+
+Alasan utama menempatkan sesuatu di GitHub adalah untuk memungkinkan kolaborasi dengan pengembang lain.
+
+## Mengerjakan proyek dengan orang lain
+
+Di repositori Anda, buka `Insights > Community` untuk melihat bagaimana proyek Anda dibandingkan dengan standar komunitas yang direkomendasikan.
+
+   Berikut beberapa hal yang dapat meningkatkan repo GitHub Anda:
+   - **Deskripsi**. Apakah Anda menambahkan deskripsi untuk proyek Anda?
+   - **README**. Apakah Anda menambahkan README? GitHub memberikan panduan untuk menulis [README](https://docs.github.com/articles/about-readmes/).
+   - **Panduan berkontribusi**. Apakah project Anda memiliki [pedoman kontribusi](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Kode etik**. sebuah [Kode etik](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **Lisensi**. Mungkin yang paling penting, sebuah [lisensi](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Semua sumber daya ini akan bermanfaat bagi anggota tim baru. Dan biasanya itu adalah jenis hal yang dilihat oleh kontributor baru bahkan sebelum melihat kode Anda, untuk mengetahui apakah proyek Anda adalah tempat yang tepat bagi mereka untuk menghabiskan waktu mereka..
+
+✅ File README, meskipun membutuhkan waktu untuk mempersiapkannya, sering kali diabaikan oleh pengelola yang sibuk. Dapatkah Anda menemukan contoh yang sangat deskriptif? Catatan: ada beberapa [alat untuk membantu membuat README yang baik](https://www.makeareadme.com/) yang mungkin ingin Anda coba.
+
+### Tugas: Menggabungkan beberapa kode
+
+Dokumen kontribusi membantu orang berkontribusi pada proyek. Itu menjelaskan jenis kontribusi yang Anda cari dan bagaimana prosesnya bekerja. Kontributor harus melalui serangkaian langkah untuk dapat berkontribusi ke repo Anda di GitHub:
+
+1. **Membagi (Forking) repo Anda** Anda mungkin ingin orang _fork_ proyek Anda. Forking berarti membuat replika repositori Anda di profil GitHub mereka.
+1. **Clone**. Dari sana mereka akan mengkloning proyek tersebut ke mesin lokal mereka. 
+1. **Buat cabang**. Anda akan ingin meminta mereka untuk membuat _branch_ (cabang) untuk pekerjaan mereka. 
+1. **Fokuskan perubahan mereka pada satu area**. Minta kontributor untuk memusatkan kontribusinya pada satu hal pada satu waktu - dengan begitu, peluang Anda untuk _menggabungkan_ dalam pekerjaan mereka lebih tinggi. Bayangkan mereka menulis perbaikan bug, menambahkan fitur baru, dan memperbarui beberapa pengujian - bagaimana jika Anda ingin, atau hanya dapat mengimplementasikan 2 dari 3, atau 1 dari 3 perubahan?
+
+✅ Bayangkan situasi di mana cabang sangat penting untuk menulis dan mengirimkan kode yang baik. Kasus penggunaan apa yang dapat Anda pikirkan?
+
+> Perhatikan, jadilah perubahan yang ingin Anda lihat di dunia, dan buat cabang untuk pekerjaan Anda juga. Komit apa pun yang Anda buat akan dilakukan di cabang tempat Anda "check out" saat ini. Gunakan `git status` untuk melihat cabang mana itu.
+
+Mari kita melalui alur kerja kontributor. Asumsikan kontributor sudah _forked (membagi)_ dan _cloned (mengkloning)_ repo sehingga mereka memiliki repo Git yang siap untuk dikerjakan, di mesin lokal mereka:
+
+1. **Buat cabang**. Gunakan perintah `git branch` untuk membuat cabang yang akan berisi perubahan yang dimaksudkan untuk dikontribusikan:
+
+   ```bash
+   git branch [nama-cabang]
+   ```
+
+1. **Beralih ke cabang kerja**. Beralih ke cabang yang ditentukan dan perbarui direktori kerja dengan `git switch`:
+
+   ```bash
+   git switch [nama-cabang]
+   ```
+
+1. **Bekerja**. Pada titik ini Anda ingin menambahkan perubahan Anda. Jangan lupa untuk memberi tahu Git tentangnya dengan perintah berikut:
+
+   ```bash
+   git add .
+   git commit -m "perubahan saya"
+   ```
+
+   Pastikan Anda memberikan nama yang baik pada komitmen Anda, demi Anda dan juga pemelihara repo yang Anda bantu.
+
+1. **Gabungkan pekerjaan Anda dengan cabang `main`**. Pada titik tertentu Anda telah selesai bekerja dan Anda ingin menggabungkan pekerjaan Anda dengan pekerjaan yang ada di cabang `main`. Cabang `main` mungkin telah berubah sementara itu jadi pastikan Anda terlebih dahulu memperbaruinya ke yang terbaru dengan perintah berikut:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Pada titik ini Anda ingin memastikan bahwa setiap _conflicts (konflik)_, situasi di mana Git tidak dapat dengan mudah _combine (menggabugkan)_ perubahan terjadi di cabang kerja Anda. Oleh karena itu jalankan perintah berikut:
+
+   ```bash
+   git switch [nama-cabang]
+   git merge main
+   ```
+
+   Ini akan membawa semua perubahan dari `main` ke cabang Anda dan mudah-mudahan Anda bisa langsung melanjutkan. Jika tidak, VS Code akan memberi tahu Anda di mana Git _confused (bingung)_ dan Anda hanya mengubah file yang terpengaruh untuk mengatakan konten mana yang paling akurat.
+
+1. **Kirim pekerjaan Anda ke GitHub**. Mengirim pekerjaan Anda ke GitHub berarti dua hal. Mendorong cabang Anda ke repo Anda dan kemudian membuka PR, Pull Request (Permintaan Tarik).
+
+   ```bash
+   git push --set-upstream origin [nama-cabang]
+   ```
+
+   Perintah di atas membuat cabang di repo bercabang Anda.
+
+1. ****. Selanjutnya, Anda ingin membuka PR. Anda melakukannya dengan menavigasi ke repo bercabang di GitHub. Anda akan melihat indikasi di GitHub yang menanyakan apakah Anda ingin membuat PR baru, Anda mengkliknya dan Anda akan dibawa ke antarmuka di mana Anda dapat mengubah judul pesan commit, berikan deskripsi yang lebih sesuai. Sekarang pengelola repo Anda bercabang akan melihat PR ini dan _semoga_ mereka akan menghargai dan _merge (menggabungkan)_ PR Anda. Anda sekarang menjadi kontributor, hore :)
+
+1. **Membersihkan**. Ini dianggap praktik yang baik untuk _membersihkan_ setelah Anda. Anda ingin membersihkan cabang lokal dan cabang yang Anda dorong ke GitHub. Pertama mari kita hapus secara lokal dengan perintah berikut:
+
+   ```bash
+   git branch -d [nama-cabang]
+   ```
+
+   Pastikan Anda membuka halaman GitHub untuk repo bercabang berikutnya dan hapus cabang jarak jauh yang baru saja Anda dorong ke sana.
+
+`Pull request` sepertinya istilah yang konyol karena Anda benar-benar ingin mendorong perubahan Anda ke proyek. Namun pengelola (pemilik proyek) atau tim inti perlu mempertimbangkan perubahan Anda sebelum menggabungkannya dengan cabang "main" proyek, jadi Anda benar-benar meminta keputusan perubahan dari pengelola.  
+
+Pull request adalah tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan ulasan, komentar, pengujian terintegrasi, dan banyak lagi. Pull request yang baik mengikuti aturan yang kira-kira sama dengan pesan komit. Anda dapat menambahkan referensi ke masalah di pelacak masalah, ketika pekerjaan Anda, misalnya, memperbaiki masalah (issue). Ini dilakukan dengan menggunakan `#` diikuti dengan nomor masalah (issue) Anda. Misalnya `#97`.
+
+🤞Semoga semua pemeriksaan lulus dan pemilik proyek menggabungkan perubahan Anda ke dalam proyek🤞
+
+Perbarui cabang lokal Anda saat ini dengan semua komit baru dari cabang jarak jauh yang sesuai di GitHub:
+
+`git pull`
+
+## Bagaimana berkontribusi pada open source
+
+Pertama, mari temukan repositori - atau: repo - di GitHub yang Anda minati dan yang ingin Anda beri kontribusi perubahan. Anda akan ingin menyalin konten ke mesin kami.
+
+✅ Cara yang baik untuk menemukan repositori 'ramah-pemula' adalah [menelusuri dengan tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-mulai-berkontribusi-ke-open-source/).
+
+![Salin repo secara lokal](../images/clone_repo.png)
+
+Ada beberapa cara untuk menyalin kode. Salah satu caranya adalah dengan "menggandakan" konten repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface).
+
+Buka terminal Anda dan kloning repositori seperti ini:
+`git clone https://github.com/ProjectURL`
+
+Untuk mengerjakan proyek, alihkan ke folder yang benar:
+`cd ProjectURL`
+
+Anda juga dapat membuka seluruh proyek menggunakan [Codespaces](https://github.com/features/codespaces), editor kode / lingkungan pengembangan cloud GitHub yang disematkan, atau [GitHub Desktop](https://desktop.github.com/ ).
+
+Terakhir, Anda dapat mengunduh kode dalam folder zip.
+
+### Beberapa hal menarik lainnya tentang GitHub
+
+Anda dapat membintangi, menonton, dan / atau "fork (membagi)" repositori publik apa pun di GitHub. Anda dapat menemukan repositori berbintang di menu tarik-turun kanan atas. Ini seperti mem-bookmark, tetapi untuk kode.
+
+Proyek memiliki pelacak masalah, sebagian besar di GitHub di tab "Issues (Masalah)" kecuali dinyatakan lain, tempat orang-orang mendiskusikan masalah yang terkait dengan proyek. Dan tab Pull Requests (Permintaan Tarik) adalah tempat orang mendiskusikan dan meninjau perubahan yang sedang berlangsung.
+
+Proyek mungkin juga memiliki diskusi di forum, milis, atau saluran obrolan seperti Slack, Discord atau IRC.
+
+✅ Lihatlah repo GitHub baru Anda dan coba beberapa hal, seperti mengedit pengaturan, menambahkan informasi ke repo Anda, dan membuat proyek (seperti papan Kanban). Banyak yang bisa Anda lakukan!
+
+---
+
+## 🚀 Tantangan
+
+Sandingkan dengan seorang teman untuk mengerjakan kode satu sama lain. Buat proyek secara kolaboratif, buat kode, buat cabang, dan gabungkan perubahan.
+
+## Kuis Pasca Kuliah
+
+[Kuis pasca kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=id)
+
+## Review & Belajar Mandiri
+
+Baca lebih lanjut tentang [berkontribusi pada software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Latihan, latihan, latihan. GitHub memiliki jalur pembelajaran yang bagus yang tersedia melalui [lab.github.com](https://lab.github.com/):
+
+- [Minggu Pertama di GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Anda juga akan menemukan lab yang lebih canggih.
+
+## Tugas
+
+Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.it.md

@@ -0,0 +1,315 @@
+# Introduzione a GitHub
+
+Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice.
+
+![Intro to GitHub](/sketchnotes/webdev101-github.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Pre-lezione
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=it)
+
+## Introduzione
+
+In questa lezione tratteremo come:
+
+- tracciare il lavoro che si fa sulla propria macchina
+- lavorare con altri su progetti
+- come contribuire a software open source
+
+### Prerequisiti
+
+Prima di iniziare, si dovrebbe verificare se Git è installato. Dal terminale digitare:
+`git --version`
+
+Se Git non è installato, [scaricare Git](https://git-scm.com/downloads). Poi impostare il proprio profilo locale Git dal terminale:
+* `git config --global user.name "il-proprio-nominativo"`
+* `git config --global user.email "la-propria-email"`
+
+Per verificare se Git è già configurato si può digitare:
+`git config --list`
+
+E' anche necessario un account GitHub, un editor di codice (tipo Visual Studio Code), e sarà necessario aprire il proprio terminale (o prompt di comando).
+
+Navigare su [github.com](https://github.com/) e creare un account se non se ne dispone già di uno, oppure accedere e compilare il proprio profilo. 
+
+✅ GitHub non è il solo deposito di codice nel mondo, ce ne sono altri, ma GitHub è il più conosciuto.
+
+### Preparazione
+
+Servirà sia una cartella con il codice di un progetto sulla propria macchina locale (laptop o PC), e un repository pubblico su GitHub, che servirà come esempio su come contribuire a progetti di altri.  
+
+---
+
+## Gestione del codice
+
+Diciamo che si ha una cartella in locale con del codice di un progetto e che si vuole iniziare a tracciarne lo sviluppo usando git - il sistema di controllo di versione. Alcuni paragonano l'uso di git alla scrittura di una lettera d'amore a se stessi nel futuro. Leggendo i messaggi di commit giorni, settimane o mesi più tardi si dovrà essere in grado di ricordare perchè è stata presa una certa decisione, o ripristinare ("rollback") una modifica - questo è, quando si scrivono dei buoni "messaggi di commit".
+
+### Compito: Creare un repository e inserirvi codice via commit
+
+1. **Creare un repository su GitHub**. Su GitHub.com, nella scheda repositories, o dalla barra di navigazione in alto a destra, trovare il bottone **new repository**.
+
+   1. Dare un nome al proprio repository (cartella)
+   1. Selezionare **create repository**.
+
+1. **Navigare verso la propria cartella di lavoro**. Nel proprio terminale, portarsi nella cartella (detta anche directory) che si vuole iniziare a tracciare. Digitare:
+
+   ```bash
+   cd [nome della cartella]
+   ```
+
+1. **Inizializzare un repository git**. Nel proprio progetto digitare:
+
+   ```bash
+   git init
+   ```
+
+1. **Verifica stato**. Per verificare lo stato del proprio repository digitare:
+
+   ```bash
+   git status
+   ```
+
+   il risultato potrebbe essere qualcosa tipo:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   In genere un comando `git status` informa circa quali file sono pronti per essere  _salvati_ nel repository o quali modifiche sono state effettuate che si vogliono persistere.
+
+1. **Aggiungere tutti i file per la tracciatura**
+   Fase nota anche come aggiungere file nell'area di staging.
+
+   ```bash
+   git add .
+   ```
+
+   Gli argomenti `git add` più `.` indicano che tutti i propri file e modifiche sono selezionati per la tracciatura. 
+
+1. **Aggiungere file selezionati per la tracciatura**
+
+   ```bash
+   git add [file o nome cartella]
+   ```
+
+   Questo consente di aggiungere file nell'area di staging quando non si vogliono aggiungere tutti in una volta.
+
+1. **Togliere dall'area di staging tutti i file**
+
+   ```bash
+   git reset
+   ```
+
+   Questo comando consente di togliere tutti i file dall'area di staging.
+
+1. **Togliere dall'area di staging uno specifico file**
+
+   ```bash
+   git reset [file o nome cartella]
+   ```
+
+   Questo comando consente di togliere dall'area di staging uno specifico file che non si vuole includere nel commit successivo.
+
+1. **Persistere il proprio lavoro**. A questo punto sono stati aggiunti tutti i file alla cosiddetta _area di staging_. Un posto nel quale Git sta tracciando i propri file. Per rendere permanenti le modifiche occorre eseguire un'azione di _commit_ dei file. Per farlo si crea un _commit_ con il comando `git commit`. Un _commit_ rappresenta un punto di salvataggio nella storia del proprio repository. Digitare questo per creare un _commit_:
+
+   ```bash
+   git commit -m "primo commit"
+   ```
+
+   Questo esegue il commit di tutti i file a suo tempo inclusi, aggiungendo il messaggio 'primo commit'. Per messaggi di commit successivi si vorrà essere più descrittivi nell'esposizione per identificare il tipo di modifiche effettuate.
+
+1. **Connettere il repository Git locale a GitHub**. Un repository Git va bene sulla propria macchina ma a un certo punto si vuole avere una copia dei propri file da qualche altra parte e anche invitare altre persone a lavorare al proprio progetto. Un gran posto per fare questo è GitHub. Si ricorderà che è stato già creato un repository in GitHub quindi la sola cosa da fare è connettere il repository Git locale con GitHub. Il comando `git remote add` farà proprio questo. Digitare il comando:
+
+   > Nota, prima di digitare il comando portarsi sulla propria pagina del repository su GitHub per trovare l'URL del repository. Dovrà essere usato nel comando seguente. Sostituire `repository_name` con il proprio URL di GitHub e `username` con il proprio nome utente di github.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Questo crea un  _remote_, o connessione, chiamata "origin" che punta al repository GitHub precedentemente creato.
+
+1. **Inviare file locali a GitHub**. Fino ad ora è stata creata una _connessione_ tra il repository locale e quello GitHub. Ora si inviano i file locali a GitHub usando il comando `git push`, in questo modo: 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Questo invia i propri commit nel ramo  "main" di GitHub.
+
+1. **Aggiungere ulteriori modifiche**. Se si vuole continuare a fare modifiche e inviarle a GitHub occorre usare uno dei tre comandi seguenti:
+
+   ```bash
+   git add .
+   git commit -m "digitare qui il messaggio di commit"
+   git push
+   ```
+
+   > Suggerimento, Si potrebbe anche utilizzare un file `.gitignore` per evitare che alcuni file che non si vogliono tracciare finiscano su GitHub - come le note che si salvano sulla cartella del progetto ma che non sono adatte in un repository pubblico. Si possono trovare modelli di file `.gitignore` a [modelli .gitignore](github.com/github/gitignore).
+
+#### Messaggi di commit
+
+Una grande riga di oggetto per un commit Git completa la seguente frase:
+Se applicato, questo commit farà ... (qui la vostra riga oggetto)
+
+Per l'oggetto utilizzare l'imperativo presente: "modifica" non "modificato" o "modifiche"- Come per l'oggetto nel corpo (opzionale) usar4 l'imperativo presente. Il corpo dovrebbe includere il motivo della modifica e il confronto con il precedente comportamento. Si sta spiegando il `perchè`, non il `come`.
+
+✅ Si prenda qualche minuto per esplorare GitHub. E' possibile scovare un bel messaggio di commit? Se ne puà trovare uno assolutamente minimale? Quali informazioni si pensa che siano le più importanti e utili per un messaggio di commit?
+
+### Compito: Collaborare
+
+La ragione principale per inserire cose in GitHub è di fare in modo che si possa collaborare tra sviluppatori.
+
+## Lavorare su progetti con altri
+
+Nel proprio repository, portarsi a `Insights > Community` per vedere come il proprio progetto si confronta con gli standard della comunità.
+
+   Ecco alcune cose che possono migliorare il proprio repository GitHub:
+   - **Descrizione**. E' stata aggiunta una descrizione per il proprio progetto?
+   - **README**. E' stato aggiunto un README (leggimi)? GitHub fornisce una traccia per scrivere un [README](https://docs.github.com/articles/about-readmes/).
+   - **Linee guida per contribuire**. Il proprio progetto fornisce [linne guida per contribuire](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Codice di Condotta**. un [Codice di Condotta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **Licenza**. Forse la più imporatante, una [licenza](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Tutte queste risorse favoriranno la salita a bordo di nuovi elementi nella squadra. Queste sono in genere il tipo di cose che i nuovi contributori cercano anche prima di dare un'occhiata al codice, per scoprire se il progetto è il posto giusto per spendere il loro tempo.
+
+✅ I file README, sebbene richiedono tempo per prepararli, sono spesso trascurati da manutentori troppo occupati. E' possibile trovare un esempio di uno particolarmente descrittivo? Nota: ci sono alcuni [strumenti per aiutare la creazione di buoni  README](https://www.makeareadme.com/) che si potrebbero provare.
+
+### Compito: Fondere del codice
+
+La documentazione per la collaborazione aiuta a fare sì che la gente contribuisca al progetto. Spiega che tipo di collaborazione ci si deve attendere e come funziona il processo. I contributori dovranno compiere una serie di passi per poter contribuire a un repository su GitHub:
+
+1. **Biforcare il repository** Probabilmente si vorrà che la gente possa  _biforcare_ il proprio progetto (forking). Questa azione crea una replica di un repository al quale si vuole contribuire sul profilo del contributore su GitHub.
+1. **Clonare**. Da qui verrà eseguita una azione di clonazione del progetto sulla  macchina locale del contributore. 
+1. **Creare un ramo**. Sarà richiesto al contributore di creare un _ramo_ (branch) per il suo lavoro. 
+1. **Concentrare le modifiche del contributore su una area**. Richiedere ai contributori di concentrarsi su una cosa sola alla volta - in questo modo le possibilità che si possa _fondere_ (merge) il lavoro del contributore sono più alte. Se viene scritta la risoluzione di un bug, o viene aggiunta una nuova funzionalità o vengono aggiornati parecchi test - cosa succede se si vuole o si può, solo implementarne 2 su 3 o 1 su 3 di queste modifiche?
+
+✅ Si immagini una situazione dove i rami sono particolarmente critici per la scrittura e lo sviluppo di buon codice. A quali casi d'uso sono stati individuati?
+
+> Nota, siate il cambiamento che volete vedere nel mondo, e si creino rami anche per il proprio lavoro. Qualsiasi commit che verrà fatto sarà su rami che si sta attualmente *verificando* (check out). Usare  `git status` per vedere su quale ramo ci si trova attualmente.
+
+Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia già eseguito il _fork_ e _clonato_ il repository in modo che lo stesso sia pronto per lavorarci, sulla sua macchina locale:
+
+1. **Creare un ramo**. Usare il comando `git branch` per creare un ramo che conterrà le modifiche per le quali si è offerta la collaborazione:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git switch`:
+
+   ```bash
+   git switch [nome ramo]
+   ```
+
+1. **Eseguire il lavoro**. A questo punto si vorranno aggiungere i propri cambiamenti. Non dimenticarsi di dirlo a Git tramite questi comandi:
+
+   ```bash
+   git add .
+   git commit -m "le mie modifiche"
+   ```
+
+   Assicurarsi che il commit abbia un buon messaggio, a beneficio proprio e del manutentore del repository sul quale si sta collaborando.
+
+1. **Combinare il proprio lavoro con il ramo `main`**. Una volta terminato il lavoro occorre combinarlo con quello del ramo principale (`main`). Il ramo principale potrebbe avere subito cambiamenti nel mentre quindi ci si deve assicurare di eseguire prima un aggiornamento all'ultima versione con i comandi:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   A questo punto occorre assicurarsi che qualsiasi eventuale _conflitto_ (conflict), situazioni dove Git non è in grado di determinare facilmente come _combinare_ le modifiche effettuate nel proprio ramo di lavoro. Eseguire i seguenti comandi:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Questo porterà tutte le modifiche da `main` verso il proprio ramo, augurandosi che si possa poi continuare. In caso contrario VS Code vi può indicare dove Git si _confonde_ e si potranno modificare i file coinvolti per determinare quale contenuto sia il più accurato.
+
+1. **Inviare il proprio lavoro a GitHub**. Questo significa due cose. Spingere il proprio ramo verso il proprio repository, quindi aprire una PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [nome-ramo]
+   ```
+
+   Il comando qui sopra crea il ramo sulla propria biforcazione del repository.
+
+1. **Aprire una PR**. Successivamente, si vorrà aprire una Pull Request. Si fa portandosi nel repository biforcato su GitHub. Si vedrà una indicazione su GitHub dove viene chiesto se si vuol creare una nuova PR, cliccando su questa si verrà portati su una interfaccia dove si potrà cambiare il titolo del messaggio di commit e fornire una descrizione più adatta. Ora il manutentore del repository che è stato biforcato vedrà questa PR e _incrociando le dita_ apprezzerà e _fonderà_ (merge) la PR. Ora si avrà contribuito, yay :)
+
+1. **Pulire**. E' considerata buona pratica effettuare una _pulizia_ dopo il lavoro compiuto. Si vorrà pulire sia il ramo locale che quello spinto su GitHub. Per prima cosa cancellarlo localmente con il comando: 
+
+   ```bash
+   git branch -d [nome-ramo]
+   ```
+
+   Successivamente assicurarsi di andare nella pagina GitHub per del repository biforcato per eliminare il ramo remoto che è stato appena spinto.
+
+`Pull request` sembra un termine sciocco in quanto in realtà si vogliono portare le proprie modifiche al progetto. Ma il manutentore (proprietario del progetto) o la squadra base deve valutare i cambiamenti dei contributori prima di fonderli con il ramo principale del progetto, quindi in realtà il contributore sta chiedendo una decisione sulle modifiche al manutentore.  
+
+Una pull request è il posto dove confrontare e discutere le differenze introdotte su un ramo con valutazioni, commenti, verifiche integrate e altro. Una buona pull request segue grossolanmente le stesse regole di un messaggio di commit. Si può aggiungere un riferimento al problema nel tracciatore di problemi (issue tracker), quando il proprio lavoro risolve ad esempio un problema. Questo viene fatto usando un `#` seguito dal numero del vostro problema. Ad esempio `#97`.
+
+🤞Incrociando le dita si spera che tutte le verifiche vengano superate e che il proprietario(i) del progetto voglia incorporare le modifiche all'interno del progetto🤞
+
+Aggiornare il proprio ramo corrente locale con tutti i nuovi commit per il ramo remoto corrispondente su GitHub:
+
+`git pull`
+
+## Come contribuire a progetti open source
+
+Per prima cosa, trovare un repository - o repo - che interessi su GitHub e per il quale si desideri contribuire con una modifica. Si vorrà copiare il contenuto sulla propria macchina.
+
+✅ Un buon modo di trovare repository 'adatti per i principianti' è di [cercare il tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copiare un repository localmente](../images/clone_repo.png)
+
+Ci sono parecchi modi di copiare il codice. Un modo è "clonare" il contenuto del repository, usando HTTPS, SSH, o usando l'interfaccia da riga di comando GitHub CLI. 
+
+Aprire il proprio terminale e clonare il repository così:
+`git clone https://github.com/URLdelProgetto`
+
+Per lavorare su un progetto, passare alla corretta cartella:
+`cd URLdelProgetto`
+
+Si può anche aprire l'intero progetto usando [Codespaces](https://github.com/features/codespaces), l'editor di codice incorporato di GitHub, oppure un ambiente di sviluppo nel cloud, oppure [GitHub Desktop](https://desktop.github.com/).
+
+Infine si può scaricare il codice in una cartella compressa. 
+
+### Qualche altra cosa interessante riguardo a GitHub
+
+E' possibile attribuire una stella, osservare, e/o "biforcare" un qualsiasi progetto pubblico su GitHub. Si possono trovare i propri repository che hanno stelle nel menù a tendina in alto a destra. E' come mettere un segnalibro, ma per il codice. 
+
+I progetti che hanno un tracciatore di problemi, per la maggior parte nella scheda "Issues" di GitHub a meno di indicazioni diverse, è dove la gente discute dei problemi relativi al progetto. E la scheda Pull Requests è dove la gente discute e verifica le modifiche in corso d'opera.
+
+I progetti potrebbero anche essere discussi nei forum, liste di distribuzione, o canali chat come Slack, Discord o IRC.
+
+✅ Dare una occhiata al proprio nuovo repository in GitHub e provare alcune cose, come modificare la configurazione, aggiungere informazioni al repository e creare un progetto come un tabellone Kanban. C'è tanto che si può fare!
+
+---
+
+## 🚀 Sfida
+
+Fare coppia con un amico per lavorare al codice dei progetti l'uno dell'altro. Creare un progetto in modo collaborativo, biforcare il codice, craare rami e fondere modifiche.
+
+## Quiz Post-lezione
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=it)
+
+## Revisione e Auto Apprendimento
+
+Leggene di più al riguardo: [contribuire a software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Esercizio, esercizio, esercizio. GitHub ha ottimi percorsi di apprendimento disponibili via [lab.github.com](https://lab.github.com/):
+
+- [Prima settimana su GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Si potranno trovare anche altri laboratori più avanzati. 
+
+## Compito 
+
+Completare [la prima settimana nel laboratorio di apprendimento di GitHub](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.ko.md

@@ -0,0 +1,294 @@
+# GitHub 소개
+
+이 강의에서는 코드 변경점을 호스팅하고 관리하는 플랫폼인 GitHub의 기본 사항을 다룹니다.
+
+![Intro to GitHub](/sketchnotes/webdev101-github.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=ko)
+
+## 소개
+
+이 강의에서는 다룹니다:
+
+- 기계에서 수행하는 작업 추적
+- 다른 사람들과 프로젝트 작업
+- 오픈소스 소프트웨어에 기여하는 방법
+
+### 작업 필요
+
+시작하기 전에 Git이 설치되어 있는지 확인해야합니다. 터미널에서 작업:
+`git --version`
+
+만약 Git이 설치되어 있지 않다면, [Git 내려받습니다](https://git-scm.com/downloads). 그리고, 터미널에서 로컬 Git 프로필을 설정합니다:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Git이 이미 구성되어 있는지 확인하려면 다음을 입력합니다:
+`git config --list`
+
+GitHub 계정, (Visual Studio Code와 같은) 코드 에디터가 필요하며, 터미널(혹은: command prompt)을 열어야 합니다.
+
+아직 계정이 없는 경우에는 [github.com](https://github.com/)으로 이동하여 계정을 생성하거나, 로그인하여 프로필을 작성합니다.
+
+✅ GitHub는 유일한 코드 저장소가 아닙니다. 다른 곳들도 있지만 GitHub가 가장 잘 알려져 있습니다.
+
+### 준비
+
+로컬 장치(노트북 또는 PC)에 코드 프로젝트 폴더와 다른 프로젝트에 기여하는 방법의 예시가 될 GitHub 공개 저장소가 모두 필요합니다.
+
+---
+
+## 코드 관리
+
+일부 코드 프로젝트에 포함된 폴더가 로컬에 있고 버전 제어 시스템인 git을 사용하여 진행 상황을 추적하려고 한다고 가정해보겠습니다. 어떤 사람들은 git을 사용하여 미래의 자신에게 연애 편지를 쓰는 것과 비교합니다. 며칠, 몇 주 또는 몇 달 후에 커밋 메시지를 읽으면 그 때 결정을 한 이유를 기억하거나 변경점을 "롤백"할 수 있습니다. 즉, 좋은 "커밋 메시지"를 작성할 때입니다.
+
+### 작업: 저장소 만들고 코드 커밋하기
+
+1. **GitHub에 저장소 만들기**. GitHub.com에서 repositories 탭을 보거나, 우측 상단 네비케이션 바에서 **new repo** 버튼을 찾습니다.
+
+   1. 저장소(폴더)에 이름을 지정합니다
+   1. **create repository** 선택합니다.
+
+1. **작업 폴더로 이동하기**. 터미널에서 추적을 시작할 폴더(디렉토리)로 이동하기 위해 입력합니다:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **git 저장소 초기화하기**. 프로젝트에서 입력합니다:
+
+   ```bash
+   git init
+   ```
+
+1. **상태 확인하기**. 상태를 확인하려면 저장소에서 입력합니다:
+
+   ```bash
+   git status
+   ```
+
+   다음과 같이 출력될 수 있습니다:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   일반적으로 `git status` 명령은 어떤 파일이 저장소에 _저장_ 될 준비가 되었는 지 또는 유지하고 싶은 변경점이 있는 지 등을 알려줍니다.
+
+1. **추적할 파일 추가하기**
+
+   ```bash
+   git add .
+   ```
+
+   `git add`와 같이 있는 `.` 인수는 모든 파일 및 변경점을 나타냅니다.
+
+1. **작업 지속하기**. Git이 파일을 추적하는 곳에 _staging area_ 라는 파일을 추가했습니다. 영구적으로 변경하려면 파일을 _commit_ 해야합니다. 그렇게 하려면`git commit` 명령으로 _commit_ 을 생성합니다. _commit_ 은 저장소 기록의 저장 시점을 나타냅니다. 다음을 입력하여 _commit_ 을 생성합니다:
+ 
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   이렇게하면 모든 파일이 커밋되고, "first commit" 메시지가 추가됩니다. 향후 커밋 메시지의 경우 변경점을 전달하기 위해 설명을 구체적으로 작성해야합니다.
+
+1. **GitHub와 로컬 Git 저장소 연결하기**. Git 저장소는 장치에 존재하기에 좋지만, 어느 시점에서 파일을 어딘가에 백업하고 다른 사람이 저장소에서 함께 작업하도록 초대하고 싶습니다. 그렇게 하기에 좋은 곳 중 하나는 GitHub입니다. 이미 GitHub에 저장소를 만들었으므로 로컬 Git 저장소를 GitHub에 연결할 뿐입니다. `git remote add`  명령을 수행합니다. 다음 명령을 입력합니다:
+
+   > Note, 명령을 입력하기 전에 GitHub 저장소 페이지로 이동하여 저장소 URL을 찾아두십시오. 아래 명령에서 사용됩니다. `repository_name`을 GitHub URL로 바꿉니다.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   이렇게 이전에 만든 GitHub 저장소를 가리키는 "origin"이라는 _remote_ 또는 커넥션이 생성됩니다.
+
+1. **GitHub로 로컬 파일 보내기**. 지금까지 로컬 저장소와 GitHub 저장소 사이에 _connection_ 을 생성했습니다. 다음과 같이 `git push` 명령을 사용하여 이러한 파일을 GitHub로 보냅니다:
+
+   ```bash
+   git push -u origin main
+   ```
+
+   "main" 브랜치는 GitHub로 커밋이 보내집니다.
+
+1. **더 많은 변경점 추가하기**. 계속 작업하여 GitHub로 푸시하려면 다음 세 가지 명령을 사용하면됩니다:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip, 추적하고 싶지 않은 파일이 GitHub에 표시되는 것을 방지하기 위해 `.gitignore` 파일을 채용할 수 있습니다. 동일한 폴더에 저장하지만 공개 저장소에는 존재하지 않는 노트 파일과 같습니다. `.gitignore` 파일의 템플릿은 [.gitignore templates](https://github.com/github/gitignore)에서 찾을 수 있습니다.
+
+#### 커밋 메시지
+
+A great Git commit subject line completes the following sentence:
+If applied, this commit will <your subject line here>
+
+훌륭한 Git 커밋 제목 줄은 다음 문장을 완성합니다:
+적용되면, 이 커밋은 <your subject line here>이 됩니다.
+
+제목에 대해서는 명령문 또는 현재 시제를 사용하십시오 : "변경됨" 또는 "변경점"이 아닌 "변경".
+제목과 마찬가지로 본문(선택 사항)에서도 명령문, 현재 시제를 사용합니다. 본문은 변화에 대한 동기를 포함하고 이를 이전 변경점과 대조해야 합니다. '어떻게'가 아니라 '왜'를 설명하고 있습니다.
+
+✅ 몇 분 동안 GitHub를 둘러보세요. 정말 훌륭한 커밋 메시지를 찾을 수 있습니까? 정말 최소한의 것을 찾을 수 있습니까? 커밋 메시지에서 전달하는 데 가장 중요하고 유용한 정보는 무엇이라고 생각하십니까?
+
+### 작업: 협업하기
+
+GitHub에 코드를 올리는 주 이유는 다른 개발자와 협력할 수 있도록 하기 위함입니다.
+
+## 다른 사람들과 함께 프로젝트 작업하기
+
+저장소에서, `Insights> Community`로 이동하여 프로젝트에 권장되는 커뮤니티 표준과 어떻게 비교되는지 확인합니다.
+
+다음은 GitHub 저장소를 개선 할 수있는 몇 가지 사항입니다:
+   - **설명**. 프로젝트에 설명을 추가했습니까?
+   - **README**. README를 추가했습니까? GitHub는 [README](https://docs.github.com/articles/about-readmes/) 작성에 대한 지침을 제공합니다.
+   - **기여 가이드**. [기여 가이드](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Code of Conduct**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **라이선스**. 아마도, 가장 중요한 [라이선스](https://docs.github.com/articles/adding-a-license-to-a-repository/)도 가지고 있습니까?
+
+이러한 모든 리소스는 새로운 팀원을 온보딩하는 데 도움이 됩니다. 그리고 일반적으로 새로운 기여자들이 여러분의 프로젝트가 시간을 보내기에 적합한 장소인지 확인하기 위해  코드를 보기 전 살펴 보는 것입니다.
+
+✅ README 파일은 준비하는 데 시간이 걸리지만 바쁜 관리자들은 종종 무시합니다. 특히 설명적인 예를 찾을 수 있습니까? Note: 몇 가지 [tools to help create good READMEs](https://www.makeareadme.com/)를 시도해 볼 수 있습니다.
+
+### 작업: 코드 병합하기
+
+문서를 제공하면 사람들이 프로젝트에 기여하는 데 도움이 됩니다. 찾고있는 기여 유형과 프로세스 작동 방식을 설명합니다. 기여자는 GitHub의 저장소에 기여할 수 있도록 일련의 단계를 거쳐야합니다:
+
+1. **저장소 포크하기** 아마도 사람들이 당신의 프로젝트를 _fork_ 하기를 원할 것입니다. 포크는 자신의 GitHub 프로필에 저장소 복제본을 만드는 걸 의미합니다.
+1. **복제하기**. 프로젝트를 로컬 컴퓨터에 복제합니다.
+1. **브랜치 생성하기**. 작업을 위해 _branch_ 를 만들도록 요청하고 싶을 것입니다.
+1. **한 영역에 변화를 집중하기**. 기여자에게 한 번에 한 가지만 집중하도록 요청하세요 - 그러면 작업에 _병합_ 할 수 있는 가능성이 더 높아집니다. 그들이 버그 수정을 작성하고, 새로운 기능을 추가하고, 여러 테스트를 추가한다고 상상해보십시오. 원한다면 3개 중 2개 또는 3개 중 1개만 구현할 수 있습니까?
+
+✅ 좋은 코드를 작성하고 전달하는 데 branches가 중요한 상황을 상상해보십시오. 어떤 사용 사례를 생각할 수 있습니까?
+
+> Note, 모두가 보고싶은 변경점이나, 자신의 작업만을 위한 브랜치를 만들 수도 있습니다. 모든 커밋은 현재 "체크 아웃"된 브랜치에서 이루어집니다. `git status`를 사용하여 어떤 브랜치인지 확인하십시오.
+
+기여자 워크플로우를 살펴봅니다. 기여자가 이미 저장소를 _forked_ 하거나 _cloned_ 했기 때문에 로컬 머신에서 작업할 준비가 된 Git 저장소가 있다고 가정합니다.
+
+1. **브랜치 생성하기**. `git branch` 명령을 사용하여 기여하려는 변경 사항을 포함하는 브랜치를 만듭니다:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **작업 브랜치 변경하기**. 지정된 브랜치로 전환하고 `git switch`으로 작업 디렉토리를 업데이트합니다:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **일하기**. 이 시점에서 변경 사항을 추가하려고 합니다. 다음 명령을 사용하여 Git에 알리는 것을 잊지 마시기 바랍니다:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   도와주고 있는 저장소의 관리자뿐만 아니라 당신을 위해서, 커밋에 좋은 이름을 부여해야 합니다.
+
+1. **`main` 브랜치에서 작업하기**. 어느 시점에서 작업을 마치고 `main` 브랜치의 작업과 병합하려고 합니다. 그동안 `main` 브랜치가 변경되었을 수 있으므로, 먼저 다음 명령을 사용하여 최신 버전으로 업데이트해야합니다:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   이 시점에서 Git이 변경 사항을 쉽게 _결합_ 할 수 없는 _충돌_ 상황이 작업 브랜치에서 발생하는지 확인하려고합니다. 따라서 다음 명령을 실행합니다:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   이렇게하면 `main` 에서 브랜치로 모든 변경점을 가져올 수 있으며 계속 진행할 수 있습니다. 그렇지 않은 경우에는 VS Code는 Git이 _혼란스러운_ 위치를 알려주고 영향받는 파일을 변경하여 가장 정확한 곳을 알려주면 됩니다.
+
+1. **GitHub로 작업 보내기**. 작업을 GitHub에 보내는 것은 두 가지를 의미합니다. 브랜치를 저장소로 푸시 한 다음 PR, Pull Request를 엽니다.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   위의 명령은 포크된 저장소에 브랜치를 만듭니다.
+
+1. **PR 열기**. 다음으로, PR을 열고 싶습니다. GitHub의 포크된 저장소로 이동하면 됩니다. GitHub에서 새 PR을 만들 것인지 묻는 표시가 표시되고 이를 클릭하면 커밋 메시지 제목을 변경할 수 있는 인터페이스로 이동하게 되며 더 적절한 설명을 작성할 수 있습니다. 이제 포크한 저장소의 관리자는 이 PR을 보고 _행운을 빌며_ 감사하고 _병합_ PR을 수행합니다. 당신은 이제 기여자입니다, yay :)
+
+1. **정라하기**. 나중에 _정리_ 하는 것은 좋은 습관으로 간주됩니다. 로컬 브랜치와 GitHub에 푸시한 브랜치를 모두 정리하려고 합니다. 먼저 다음 명령을 사용하여 로컬에서 삭제하겠습니다:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   포크된 저장소의 GitHub 페이지로 이동하여 방금 푸시한 원격 브랜치를 제거합니다.
+
+변경점을 프로젝트에 푸시하고 싶기 때문에 `Pull request`는 어리석은 용어처럼 보입니다. 그러나 관리자(프로젝트 소유자) 또는 핵심 팀은 변경점을 프로젝트의 "main" 브랜치와 병합하기 전에 고려해야 하므로 실제로 유지 관리자에게 결정을 요청하는 것입니다.
+
+pull request는 리뷰, 코멘트, 통합 테스트 등을 통해 브랜치에 도입된 차이점을 비교하고 논의하는 곳입니다. 좋은 pull request는 커밋 메시지와 거의 동일한 규칙을 따릅니다. 예를 들어 작업에서 문제를 해결할 때 이슈 트래커에서 이슈에 대한 참조를 추가할 수 있습니다. 이 작업은 `#` 다음에 이슈 번호를 사용하여 수행됩니다. 예를 들어 `#97` 처럼 말입니다.
+
+🤞 모든 검사가 통과되고 프로젝트 소유자가 변경 사항을 프로젝트에 병합한다는 손가락이 교차했습니다 🤞
+
+현재 로컬 작업 브랜치를 GitHub의 원격 브랜치의 커밋으로 모두 업데이트합니다:
+
+`git pull`
+
+## 오픈소스에 기여하는 방법
+
+먼저, GitHub에서 관심있고 변경 사항을 기여할 저장소를 찾아 보겠습니다. 그 곳의 내용을 자신의 장치에 복사하고 싶을 것입니다.
+
+✅ '입문-친화적'인 저장소를 찾는 좋은 방법은 ['good-first-issue 태그로 검색하는 것입니다.'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](../images/clone_repo.png)
+
+코드를 복사하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 HTTPS, SSH 또는 GitHub CLI (Command Line 인터페이스)를 사용하여 저장소의 내용을 "복제"하는 것입니다.
+
+터미널을 열고 다음과 같이 저장소를 복제합니다:
+`git clone https://github.com/ProjectURL`
+
+프로젝트에서 작업하려면 올바른 폴더로 전환합니다:
+`cd ProjectURL`
+
+[Codespaces](https://github.com/features/codespaces), GitHub의 내장 코드 에디터 / 클라우드 개발 환경 또는 [GitHub Desktop](https://desktop.github.com/)을 사용하여 전체 프로젝트를 열 수 있습니다.
+
+마지막으로 압축된 폴더로 코드를 내려받을 수 있습니다.
+
+### GitHub에 대한 몇 가지 흥미로운 사항
+
+GitHub의 모든 공개 저장소에 스타 표시, 워치 및/또는 "포크" 할 수 있습니다. 우측 상단 드롭다운 메뉴에서 스타 표시한 저장소를 찾을 수 있습니다. 북마크와 비슷하지만 코드를 위한 것 입니다.
+
+프로젝트에는 달리 명시되지 않는 한 대부분 GitHub에 "이슈" 탭의 이슈 트레커가 있습니다. 그리고 Pull Requests 탭은 사람들이 진행중인 변경 사항을 논의하고 검토하는 곳입니다.
+
+프로젝트는 포럼, 메일링 리스트 또는 Slack, Discord 또는 IRC와 같은 채팅 채널에서 토론 할 수도 있습니다.
+
+✅ 새로운 GitHub 리포지토리를 둘러보고 설정 편집, 저장소 정보 추가, (Kanban 보드와 같은) 프로젝트 생성을 비롯한 몇 가지 작업을 시도해보시기 바랍니다. 할 수 있는 일이 많이 있습니다!
+
+---
+
+## 🚀 도전 
+
+친구와 페어링하여 서로의 코드를 작업하세요. 공동으로 프로젝트를 만들고, 코드를 포크하고, 브랜치를 만들고, 변경 사항을 병합합니다.
+
+## 강의 후 퀴즈
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=ko)
+
+## 리뷰 & 자기주도 학습
+
+[contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)에 대해 읽습니다. 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Practice, practice, practice. GitHub에는 [lab.github.com](https://lab.github.com/)을 통해 사용할 수 있는 훌륭한 학습 경로가 있습니다:
+
+- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+더 많은 고급 실습도 찾을 수 있습니다.
+
+## 과제 
+
+[the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) 완료하기

1-getting-started-lessons/2-github-basics/translations/README.ms.md

@@ -0,0 +1,318 @@
+# Pengenalan Tentang GitHub
+
+Pelajaran ini merangkumi pengetahuan asas tentang GitHub, dan adalah salah satu platform untuk menjadi tuan rumah dan menguruskan perubahan pada kod anda.
+
+![Intro to GitHub](/sketchnotes/webdev101-github.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuiz Pra-Kuliah
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Pengenalan
+
+Dalam pelajaran ini, kita akan belajar tentang:
+
+- mengesan kerja yang anda lakukan di mesin anda
+- membuat projek dengan orang lain
+- bagaimanakah menyumbang kepada perisian sumber terbuka
+
+### Prasyarat
+
+Sebelum bermula, anda perlu memeriksa sama ada Git dipasang dalam komputer anda. Dalam terminal menaip:
+`git --version`
+
+Sekiranya Git tidak dipasang, [memuat turun Git](https://git-scm.com/downloads). Kemudian, siapkan profil Git anda di terminal:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Untuk memeriksa sama ada Git sudah dikonfigurasi, anda boleh menaip:
+`git config --list`
+
+Anda juga memerlukan akaun GitHub, penyunting kod (seperti Visual Studio Code), dan anda perlu membuka terminal anda (atau: command prompt).
+
+Navigasi ke [github.com] (https://github.com/) dan buat akaun jika anda belum melakukannya, atau log masuk dan isi profil anda.
+
+✅ GitHub bukan satu-satunya repositori kod di dunia; ada yang lain, tetapi GitHub adalah yang paling terkenal.
+
+### Persediaan
+
+Anda memerlukan kedua-dua folder dengan projek kod pada mesin tempatan anda (komputer riba atau PC), dan repositori awam di GitHub, yang akan menjadi contoh bagaimana menyumbang kepada projek orang lain.
+
+---
+
+## Pengurusan Kod
+
+Katakan anda mempunyai folder secara tempatan dengan beberapa projek kod dan anda ingin mula mengesan kemajuan anda menggunakan git - sistem kawalan versi. Sebilangan orang membandingkan menggunakan git dengan menulis surat cinta untuk diri masa depan anda. Membaca mesej komit anda beberapa hari atau minggu atau bulan kemudian anda akan dapat mengingat mengapa anda membuat keputusan, atau "memutar balik (rollback)" perubahan - iaitu ketika anda menulis "pesan komit (commit messages)" yang baik.
+
+### Tugasan: Buat repositori dan kod komit
+
+1. **Buat satu repository di GitHub**. Di GitHub.com, pada tab repositori, atau dari bar navigasi di sebelah kanan atas, cari butang   **repo baru (new repo)**.
+
+   1. Beri nama repositori (folder) anda
+   1. Pilih **repositori kreat (create repository)**.
+
+1. **Navigasi ke folder kerja anda**. Di terminal anda, beralih ke folder (juga dikenali sebagai direktori) yang ingin anda mulakan penjejakan. Jenis:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Memulakan git repositori**. Dalam jenis projek anda:
+
+   ```bash
+   git init
+   ```
+
+1. **Periksa status**. Untuk memeriksa status repositori anda:
+
+   ```bash
+   git status
+   ```
+
+   the output can look something like this:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Biasanya perintah `git status` memberitahu anda perkara seperti fail apa yang siap disimpan_ ke repo atau mempunyai perubahan di atasnya yang mungkin anda mahu berterusan.
+
+1. **Tambahkan semua fail untuk penjejakan**
+   Ini juga disebut sebagai fail pementasan / menambahkan fail ke kawasan pementasan (staging area).
+
+   ```bash
+   git add .
+   ```
+
+   Argumen `git add` plus `.` menunjukkan bahawa semua fail & perubahan anda untuk dijejaki.
+
+1. **Tambahkan fail terpilih untuk dijejaki**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Ini membantu kita untuk menambahkan fail yang dipilih hanya ke kawasan pementasan ketika kita tidak ingin melakukan semua fail sekaligus.
+
+1. **Lepaskan semua fail**
+
+   ```bash
+   git reset
+   ```
+
+   Perintah ini membantu kita untuk melepaskan semua fail sekaligus.
+
+1.  **Lepaskan fail yang tertentu**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Perintah ini membantu kita untuk melepaskan hanya fail yang tertentu sekaligus yang tidak ingin kita sertakan untuk komit berikutnya.
+
+1. **Meneruskan kerja anda**. Pada masa ini anda telah menambahkan fail ke yang disebut _staging area_. Salah satu tempat di mana Git mengesan fail anda. Untuk melakukan perubahan itu kekal, anda perlu _commit_ fail itu. Untuk melakukannya anda perlu membuat _commit_ dengan perintah `git commit`. _commit_ mewakili titik simpanan dalam sejarah repo anda. Menaip perintah tersebut untuk membuat _commit_: 
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Untuk komit semua fail anda, menaip mesej "komit pertama (first commit)". Untuk mesej komit pada masa kelak, anda ingin lebih terperinci dalam penerangan anda untuk menyampaikan jenis perubahan yang telah anda buat.
+
+1. **Sambungkan repo Git tempatan anda dengan GitHub**. Repo Git adalah bagus dalam mesin anda tetapi pada satu ketika anda ingin mempunyai sandaran fail anda di suatu tempat dan juga mengundang orang lain untuk bekerja dengan anda di repo anda. Salah satu tempat yang bagus untuk melakukannya adalah di GitHub. Ingatlah bahawa kita sudah membuat repo di GitHub jadi satu-satunya perkara yang perlu kita lakukan ialah menghubungkan repo Git tempatan kita dengan GitHub. Perintah ini `git remote add` akan membuat tugasan tersebut. Menaip perintah tersebut: 
+
+   > Perhatikan, sebelum anda mengetik perintah, pergi ke halaman repo GitHub anda untuk mencari URL repositori. Anda akan menggunakannya dalam arahan di bawah. Gantikan `repository_name` degan GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Ini membuat _remote_, atau sambungan, bernama "origin" yang menunjuk ke repositori GitHub yang anda buat sebelumnya.
+
+1. **Hantar fail tempatan ke GitHub**. Setakat ini anda telah membuat _connection_ antara repo tempatan dan repo GitHub. Marilah hantarkan fail-fail ini ke GitHub dengan perintah berikut `git push`, seperti di bawah:
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Perintah ini menghantar komit anda di cawangan "utama" (main branch) anda ke GitHub.
+
+1. **Untuk menambahkan perubahan lain**. Sekiranya anda ingin terus membuat perubahan dan menghantar ke GitHub, anda hanya perlu menggunakan tiga arahan berikut:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   >Tip, Anda mungkin juga mahu mengadopsi fail `.gitignore` untuk mengelakkan fail yang tidak ingin anda lacak muncul di GitHub - seperti fail nota yang anda simpan di folder yang sama tetapi tidak mempunyai tempat di repositori awam. Anda boleh mencari templat untuk `.gitignore` fail pada [.gitignore templates](github.com/github/gitignore).
+
+#### Mesej Komit
+
+Baris subjek Git komit yang hebat melengkapkan ayat berikut:
+Sekiranya berlaku, komit ini akan <baris subjek anda di sini>
+
+Untuk subjek gunakan keharusan, ketegangan sekarang: "perubahan" tidak "berubah" atau "perubahan".
+Seperti dalam subjek, dalam badan (pilihan) juga menggunakan keharusan, sekarang tegang. Tubuh harus merangkumi motivasi untuk perubahan dan membezakannya dengan tingkah laku sebelumnya. Anda menerangkan `mengapa`, bukan `bagaimana`.
+
+✅ Luangkan masa beberapa minit untuk melayari GitHub. Bolehkah anda menemui mesej komit yang sangat hebat? Bolehkah anda mencari yang paling minimum? Maklumat apa yang anda fikir paling penting dan berguna untuk disampaikan dalam pesanan komited?
+
+### Tugas: Kolaborasi
+
+Sebab utama meletakkan perkara di GitHub adalah untuk memungkinkan untuk berkolaborasi dengan pemaju lain.
+
+## Melakukan projek dengan orang lain
+
+Dalam repositori anda, arahkan ke `Insights> Community` untuk melihat bagaimana projek anda dibandingkan dengan standard komuniti yang disyorkan.
+
+   Berikut adalah beberapa perkara yang dapat meningkatkan repo GitHub anda:
+   - **Penerangan**. Adakah anda menambah keterangan untuk projek anda?
+   - **README**. Adakah anda menambah README? GitHub memberikan panduan untuk menulis [README](https://docs.github.com/articles/about-readmes/).
+   - **Garis panduan penyumbang**. Adakah projek anda mempunyai [cGaris panduan penyumbang](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Tatakelakuan**. a [Tatakelakuan](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **Lesen**. Yang paling penting, ialah [lesen](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Semua sumber ini akan memberi manfaat kepada ahli pasukan baru. Dan ini biasanya merupakan jenis perkara yang dilihat oleh penyumbang baru bahkan sebelum melihat kod anda, untuk mengetahui sama ada projek anda adalah tempat yang tepat untuk mereka menghabiskan masa.
+
+✅ README fail, walaupun memerlukan masa untuk disiapkan, sering diabaikan oleh penyelenggara yang sibuk. Bolehkah anda mencari contoh yang sangat deskriptif? Catatan: ada beberapa [alat untuk membantu mencipta README yang baik](https://www.makeareadme.com/) yang anda boleh cuba.
+
+### Tugas: Gabungkan beberapa kod
+
+Menyumbang kepada dokumen membantu orang menyumbang dalam projek tersebut. Ini menerangkan jenis sumbangan yang anda cari dan bagaimana prosesnya berjalan. Penyumbang perlu melalui beberapa langkah untuk dapat menyumbang kepada repo anda di GitHub:
+
+
+1. **Memalsukan repo anda** Anda mungkin mahu orang membuat projek anda. Memalsukan (_fork_) bermaksud membuat replika repositori anda di profil GitHub mereka.
+1. **Klon**. Dari sana mereka akan mengklonkan projek ke mesin tempatan mereka.
+1. **Buat branch**. Anda ingin meminta mereka membuat branch (_branch_) untuk kerja mereka.
+1. **Fokus perubahan mereka pada satu kawasan**. Minta penyumbang memusatkan sumbangan mereka pada satu perkara pada satu masa - dengan cara itu peluang yang anda dapat _merge_ dalam pekerjaan mereka adalah lebih tinggi. Bayangkan mereka menulis perbaikan pepijat, menambah ciri baru, dan mengemas kini beberapa ujian - bagaimana jika anda mahu, atau hanya dapat melaksanakan 2 dari 3, atau 1 dari 3 perubahan?
+
+✅ Bayangkan keadaan di mana branch sangat penting untuk menulis dan menghantar kod yang baik. Apa kes penggunaan yang boleh anda fikirkan?
+
+> Perhatikan, jadikan perubahan yang ingin anda lihat di dunia, dan buatlah cawangan untuk karya anda sendiri juga. Segala komit yang anda buat akan dibuat di cabang tempat Anda sedang "check out" gunakan `git status` untuk melihat cabang mana.
+
+Mari melalui aliran kerja penyumbang. Anggaplah penyumbang telah _forked_ dan _cloned_ repo sehingga mereka mempunyai repo Git yang siap diusahakan, di mesin tempatan mereka:
+
+1. **Membuat branch**. Guna perintah `git branch` untuk membuat branch baharu seperti berikut: 
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Tukar ke working branch**. Tukar ke branch yang ditentukan dan kemas kini direktori kerja dengan `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Membuat kerja**. Pada ketika ini anda ingin menambahkan perubahan anda. Jangan lupa memberitahu Git mengenainya dengan arahan berikut:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Pastikan anda memberikan ayat dengan baik kepada komit anda, demi anda dan juga penjaga repo yang anda bantu.
+
+1. **Gabungkan kerja anda dengan `main` branch**. Pada satu ketika anda selesai bekerja dan anda ingin menggabungkan kerja anda dengan `main` branch. `main` branch mungkin telah berubah sementara itu, pastikan anda mengemas kini terlebih dahulu kepada yang terbaru dengan arahan berikut:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Pada ketika ini anda ingin memastikan bahawa apa-apa _conflicts_, keadaan di mana Git tidak dapat dengan mudah _combine_ perubahan berlaku di working branch anda. Oleh itu, jalankan arahan berikut:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Ini akan membawa semua perubahan dari `main` ke branch anda dan semoga anda dapat meneruskannya. Sekiranya tidak, VS Code akan memberitahu anda di mana Git _confused_ dan anda hanya mengubah fail yang terjejas untuk mengatakan kandungan mana yang paling tepat.
+
+1. **Hantar kerja anda ke GitHub**. Menghantar karya anda ke GitHub bermaksud dua perkara. Menolak branch anda ke repo anda dan kemudian membuka PR, Tarik Permintaan (Pull Request).
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Perintah di atas membuat branch untuk forked repo.
+
+1. **Buka Tarik Permintaan (Pull Request)** Seterusnya, anda mahu membuka tarik permintaan (Pull Request). Anda melakukannya dengan menavigasi ke repo bercabang di GitHub. Anda akan melihat petunjuk di GitHub di mana ia bertanya sama ada anda mahu membuat tarik permintaan (Pull Request) baru, anda mengkliknya dan anda akan dibawa ke antara muka di mana anda boleh menukar tajuk mesej komit, berikan keterangan yang lebih sesuai. Sekarang penyelenggara repo yang anda garpu akan melihat PR ini dan _fingers crossed_ mereka akan menghargai dan _merge_ tarik permintaan (Pull Request) anda. Anda telah menjadi penyumbang, yay:)
+
+1. **Bersihkan**. Menjadikan amalan baik untuk _cleanup_ selepas anda. Anda mahu membersihkan local branch dan branch yang anda dorong ke GitHub. Pertama marilah hapuskannya secara tempatan dengan arahan berikut:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Pastikan anda pergi ke halaman GitHub untuk forked repo seterusnya dan keluarkan branch terpencil yang baru anda tolak.
+
+`Tarik Permintaan (Pull request)` nampaknya istilah yang tidak bermoral kerana anda benar-benar mahu mendorong perubahan anda ke projek. Tetapi penyelenggara (pemilik projek) atau pasukan inti perlu mempertimbangkan perubahan anda sebelum menggabungkannya dengan  "main" branch projek, jadi anda benar-benar meminta keputusan perubahan dari penyelenggara.
+
+Tarik permintaan (Pull Request) adalah tempat untuk membandingkan dan membincangkan perbezaan yang diperkenalkan di cabang dengan ulasan, komen, ujian bersepadu, dan banyak lagi. Tarik permintaan (Pull Request) yang baik mengikuti kira-kira peraturan yang sama dengan pesanan pesanan. Anda dapat menambahkan rujukan ke masalah dalam pelacak masalah, ketika pekerjaan Anda misalnya menyelesaikan masalah. Ini dilakukan dengan menggunakan `#` diikuti dengan jumlah masalah (issue) anda. Contohnya `# 97`.
+
+🤞 Jari memintas bahawa semua cek lulus dan pemilik projek menggabungkan perubahan anda ke dalam projek🤞
+
+Kemas kini working branch tempatan anda sekarang dengan semua komit baru dari branch terpencil yang sesuai di GitHub:
+
+`git pull`
+
+## Bagaimanakah menyumbang kepada sumber terbuka
+
+Pertama, marilah kita cari repositori - atau: repo - di GitHub yang menarik bagi anda dan yang anda ingin menyumbang perubahan. Anda mahu menyalin kandungannya ke mesin kami.
+
+✅ Kaedah yang baik untuk mencari repo 'mesra pemula (beginner-friendly)' adalah dengan [cari mengikut tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Salin repo secara tempatan](images/clone_repo.png)
+
+Terdapat beberapa cara menyalin kod. Salah satu cara adalah dengan "mengklon" kandungan repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface).
+
+Buka terminal dan klon repo seperti di bawah: 
+`git clone https://github.com/ProjectURL`
+
+Untuk kerja dengan projek tersebut, tukar the fail kanan:
+`cd ProjectURL`
+
+And juga boleh membuka keseluruhan projek dengan [Codespaces](https://github.com/features/codespaces), Penyunting kod terbitan GitHub / persekitaran pengembangan awan, atau [GitHub Desktop](https://desktop.github.com/).
+
+Akhirnya, anda boleh memuat turun kod dalam bentuk zip.
+
+### Beberapa perkara menarik mengenai GitHub
+
+Anda boleh membintangi, menonton, dan / atau "fork" mana-mana repositori awam di GitHub. Anda boleh mencari repositori berbintang anda di menu lungsur kanan atas. Ia seperti penanda buku, tetapi untuk kod.
+
+Projek mempunyai pelacak masalah, kebanyakannya di GitHub di tab "Isu" kecuali dinyatakan sebaliknya, di mana orang membincangkan masalah yang berkaitan dengan projek. Dan tab Tarik Permintaan adalah tempat orang membincangkan dan mengkaji perubahan yang sedang berlangsung.
+
+Projek mungkin juga ada perbincangan di forum, senarai surat, atau saluran sembang seperti Slack, Discord atau IRC.
+
+✅ Lihatlah repo GitHub baru anda dan cuba beberapa perkara, seperti menyunting tetapan, menambahkan maklumat ke repo anda, dan membuat projek (seperti papan Kanban). Banyak yang boleh anda lakukan!
+
+---
+
+### 🚀 Cabaran
+
+Berpasangan dengan rakan untuk mengerjakan kod masing-masing. Buat projek secara kolaboratif, fork kod, buat branch dan gabungkan perubahan.
+
+## Kuiz Pasca Kuliah
+[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Mengkaji dan belajar sendiri
+
+Membaca tentang [menyumbang kepada sumber terbuka](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git nota](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Berlatih, berlatih, berlatih. GitHub mempunyai jalan pembelajaran yang hebat yang tersedia melalui [lab.github.com](https://lab.github.com/):
+
+- [Minggu pertama di GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Anda juga akan menemui makmal yang lebih maju.
+
+## Tugasan
+
+Selesaikan [Minggu pertama di GitHub (training lab)](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.nl.md

@@ -0,0 +1,318 @@
+# Inleiding van GitHub
+
+Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en beheren van wijzigingen in uw code.
+
+![Intro to GitHub](/sketchnotes/webdev101-github.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz voorafgaand aan de lezing
+[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Inleiding
+
+In deze les behandelen we:
+
+- het volgen van het werk dat u op uw machine doet
+- samen met anderen aan projecten werken
+- hoe u kunt bijdragen aan open source software
+
+### Vereisten
+
+Voordat u begint, moet u controleren of Git is geïnstalleerd. In het terminal typ:
+`git --version`
+
+Als Git niet is geïnstalleerd, [download Git](https://git-scm.com/downloads). Stel vervolgens uw lokale Git-profiel in de terminal in:
+* `git config --global user.name "uw-naam"`
+* `git config --global user.email "uw-email"`
+
+Om te controleren of Git al is geconfigureerd, kunt u het volgende typen:
+`git config --list`
+
+U heeft ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code) en u moet uw terminal openen (of: command prompt).
+
+Navigeer naar [github.com](https://github.com/) en maak een account aan als u dat nog niet heeft gedaan, of log in en vul uw profiel in.
+
+✅ GitHub is niet de enige coderepository ter wereld; er zijn anderen, maar GitHub is de bekendste
+
+### Voorbereiding
+
+U heeft zowel een map met een codeproject op uw lokale computer (laptop of pc) als een openbare repository op GitHub nodig, die als voorbeeld zal dienen voor hoe u kunt bijdragen aan de projecten van anderen.  
+
+---
+
+## Code beheer
+
+Laten we zeggen dat u lokaal een map hebt met een of ander codeproject en u wilt beginnen met het volgen van uw voortgang met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan uw toekomstige zelf. Als u uw commitberichten dagen of weken of maanden later leest, zult u u kunnen herinneren waarom u een beslissing heeft genomen, of een wijziging "terugdraaien" - dat wil zeggen, wanneer u goede "commitberichten" schrijft.
+
+### Taak: maak een repository en leg code vast
+
+1. **Maak een repository op GitHub**. Zoek op GitHub.com, in het tabblad repositories, of in de navigatiebalk rechtsboven, de knop **new repo**.
+
+   1. Geef uw repository (map) een naam
+   1. Selecteer **create repository**.
+
+1. **Navigeer naar uw werkmap**. Schakel in uw terminal naar de map (ook bekend als de directory) die u wilt beginnen met volgen. Typ:
+
+   ```bash
+   cd [naam van uw map]
+   ```
+
+1. **Initialiseer een git-repository**. In uw project, typ:
+
+   ```bash
+   git init
+   ```
+
+1. **Controleer de status**. Om de status van uw repository te controleren, typ:
+
+   ```bash
+   git status
+   ```
+
+   de output kan er ongeveer zo uitzien:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Typisch vertelt een `git status` commando u dingen zoals welke bestanden klaar zijn om _opgeslagen_ te worden naar de repo of bevat veranderingen die u misschien wilt behouden.
+
+1. **Voeg alle bestanden toe voor tracking**
+   Dit wordt ook wel staging-bestanden/ bestanden toevoegen aan het staging-gebied genoemd.
+
+   ```bash
+   git add .
+   ```
+
+   Het `git add` plus `.` argument geeft aan dat al uw bestanden en wijzigingen voor tracking geselecteerd zijn. 
+
+1. **Voeg geselecteerde bestanden toe voor tracking**
+
+   ```bash
+   git add [bestands- of mapnaam]
+   ```
+
+   Dit helpt ons om alleen geselecteerde bestanden aan het staging-gebied toe te voegen als we niet alle bestanden tegelijk willen vastleggen.
+
+1. **Unstage alle bestanden**
+
+   ```bash
+   git reset
+   ```
+
+   Dit commando helpt ons om alle bestanden tegelijk te unstagen.
+
+1. **Unstage een bepaald bestand**
+
+   ```bash
+   git reset [bestands- of mapnaam]
+   ```
+
+   Dit commando helpt ons om alleen een bepaald bestand tegelijk te unstagen dat we niet willen opnemen voor de volgende commit.
+
+1. **Uw werk voortzetten**. Op dit punt heeft u de bestanden toegevoegd aan een zogenaamd _staging-gebied_. Een plek waar Git uw bestanden bijhoudt. Om de wijziging permanent te maken, moet u de bestanden _commiten_. Om dit te doen maakt u een _commit_ aan met het `git commit` commando. Een _commit_ vertegenwoordigt een besparingspunt in de geschiedenis van uw repo. Typ het volgende om een _commit_ te maken:
+
+   ```bash
+   git commit -m "eerste commit"
+   ```
+
+   Dit commit al uw bestanden door het bericht "first commit" toe te voegen. Voor toekomstige commitberichten wilt u meer beschrijvend zijn in uw beschrijving om over te brengen wat voor soort wijziging u heeft aangebracht.
+
+1. **Verbind uw lokale Git-repo met GitHub**. Een Git-repo is goed op uw computer, maar op een gegeven moment wilt u ergens een back-up van uw bestanden hebben en ook andere mensen uitnodigen om met u aan uw opslagplaats te werken. Een geweldige plek om dat te doen is GitHub. Onthoud dat we al een repo op GitHub hebben gemaakt, dus het enige dat we hoeven te doen, is onze lokale Git-repo verbinden met GitHub. Het commando `git remote add` zal precies dat doen. Typ de volgende commando:
+
+   > Let op: voordat u de opdracht typt, gaat u naar uw GitHub-repo-pagina om de repository-URL te vinden. U gebruikt het in het onderstaande commando. Vervang `repository_name` door uw GitHub-URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Dit creëert een _remote_, of verbinding, genaamd "origin", wijzend naar de GitHub-repository die u eerder heeft gemaakt.
+
+1. **Stuur lokale bestanden naar GitHub**. Tot nu toe heeft u een _verbinding_ gemaakt tussen de lokale repo en de GitHub-repo. Laten we deze bestanden naar GitHub sturen met het volgende commando `git push`, zoals zo:
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Dit stuurt uw commits in uw "main" tak naar GitHub.
+
+1. **Om meer wijzigingen toe te voegen**. Als u door wilt gaan met het aanbrengen van wijzigingen en ze naar GitHub wilt pushen, hoeft u alleen maar de volgende drie commando's te gebruiken:
+
+   ```bash
+   git add .
+   git commit -m "typ hier uw commitbericht"
+   git push
+   ```
+
+   > Tip, misschien wilt u ook een `.gitignore`-bestand adopteren om te voorkomen dat bestanden die u niet wilt volgen, verschijnen op GitHub - zoals dat notitiesbestand dat u opslaat in dezelfde map maar geen plaats heeft op een openbare repository. U kunt sjablonen voor `.gitignore` bestanden vinden op [.gitignore templates](https://github.com/github/gitignore).
+
+#### Commit berichten
+
+Een geweldige onderwerpregel voor een commitbericht van Git maakt de volgende zin compleet:
+Indien toegepast, zal deze commit <uw onderwerpregel hier>
+
+Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" noch "veranderingen".
+Net als in het onderwerp, gebruik in het lichaam (optioneel) ook de imperatieve tegenwoordige tijd. Het lichaam moet de motivatie voor de verandering opnemen en dit contrasteren met eerder gedrag. U legt het `waarom` uit, niet het `hoe`.
+
+✅ Neem een paar minuten de tijd om rond GitHub te surfen. Kunt u een echt geweldig commitbericht vinden? Kunt u een echt minimale vinden? Welke informatie is volgens u het belangrijkst en nuttigst om over te brengen in een commitbericht?
+
+### Taak: Samenwerken
+
+De belangrijkste reden om dingen op GitHub te zetten, was om het mogelijk te maken om samen te werken met andere ontwikkelaars.
+
+## Samen met anderen aan projecten werken
+
+Navigeer in uw repository naar `Insights > Community` om te zien hoe uw project zich verhoudt tot aanbevolen communitystandaarden.
+
+   Hier zijn enkele dingen die uw GitHub-repo kunnen verbeteren:
+   - **Omschrijving**. Heeft u een beschrijving voor uw project toegevoegd?
+   - **README**. Heeft u een README toegevoegd? GitHub biedt richtlijnen voor het schrijven van een [README](https://docs.github.com/articles/about-readmes/).
+   - **Richtlijn voor bijdragen**. Heeft uw project [richtlijnen voor bijdragen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Gedragscode**. Een [Gedragscode](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **Licentie**. Misschien nog belangrijker, een [licentie](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Al deze middelen zullen nieuwe teamleden helpen. En dat zijn typisch het soort dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar uw code kijken, om erachter te komen of uw project de juiste plek is om hun tijd door te brengen.
+
+✅ README-bestanden, hoewel ze wat tijd nodig hebben om voor te bereiden, worden vaak genegeerd door drukke beheerders. Kunt u een voorbeeld vinden van een bijzonder beschrijvende? Opmerking: er zijn enkele [tools om goede README's te maken](https://www.makeareadme.com/) die u misschien zou willen proberen.
+
+### Taak: voeg een code samen
+
+Documenten voor bijdragen helpen mensen bij te dragen aan het project. Het legt uit wat voor soort bijdragen u zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te dragen aan uw repo op GitHub:
+
+
+1. **Uw repo forken** Waarschijnlijk wilt u dat mensen uw project _forken_. Forken betekent het maken van een replica van uw repository op hun GitHub-profiel.
+1. **Kloon**. Van daaruit zullen ze het project naar hun lokale computer klonen (clone). 
+1. **Maak een tak**. U zult ze willen vragen om een _tak_ voor hun werk te creëren (branch). 
+1. **Richt hun verandering op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - op die manier is de kans groter dat u hun werk kan _samenvoegen_ (merge). Stelt u voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als u slechts 2 van de 3 of 1 van de 3 wijzigingen wilt of kunt implementeren?
+
+✅ Stelt u een situatie voor waarin takken bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke use-cases kunt u bedenken?
+
+> Let op: wees de verandering die u in de wereld wilt zien, en maak ook takken voor uw eigen werk. Alle commits die u maakt, worden gemaakt op de tak waar u momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke tak dat is.
+
+Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager de repo al _geforkt_ en _gekloond_ heeft, zodat ze een Git-repo hebben klaar om aan te werken, op hun lokale computer:
+
+1. **Maak een tak**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
+
+   ```bash
+   git branch [taknaam]
+   ```
+
+1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git switch`:
+
+   ```bash
+   git switch [taknaam]
+   ```
+
+1. **Werken**. Op dit punt wilt u uw wijzigingen toevoegen. Vergeet niet om Git erover te vertellen met de volgende commando's:
+
+   ```bash
+   git add .
+   git commit -m "mijn veranderingen"
+   ```
+
+   Zorg ervoor dat u uw commit een goede naam geeft, zowel voor u als voor de beheerder van de repo waarmee u helpt.
+
+1. **Combineer uw werk met de `main` tak**. Op een gegeven moment bent u klaar met werken en wilt u uw werk combineren met dat van de `main` tak. De `main` tak kan ondertussen veranderd zijn, dus zorg ervoor dat u deze eerst bijwerkt naar de laatste versie met de volgende commando's:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Op dit punt wilt u er zeker van zijn dat alle _conflicten_, situaties waarin Git niet gemakkelijk de veranderingen kan _combineren_ plaatsvinden in uw werkende tak. Voer daarom de volgende opdrachten uit:
+
+   ```bash
+   git switch [taknaam]
+   git merge main
+   ```
+
+   Dit brengt alle wijzigingen van `main` naar uw tak en hopelijk kunt u gewoon doorgaan. Als dit niet het geval is, zal VS Code u vertellen waar Git _in de war_ is en verandert u gewoon de betrokken bestanden om te zeggen welke inhoud het meest accuraat is.
+
+1. **Stuur uw werk naar GitHub**. Het verzenden van uw werk naar GitHub betekent twee dingen. Uw tak naar uw repo pushen en vervolgens een PR, Pull Request openen.
+
+   ```bash
+   git push --set-upstream origin [taknaam]
+   ```
+
+   Het bovenstaande commando maakt de tak op uw geforkte repo.
+
+1. **Open een PR**. Vervolgens wilt u een PR openen. U doet dat door naar de geforkte repo op GitHub te navigeren. U ziet een indicatie op GitHub waar het vraagt of u een nieuwe PR wilt maken, u klikt erop en u wordt naar een interface geleid waar u de titel van het commitbericht kunt wijzigen, geef het een meer geschikte beschrijving. Nu zal de beheerder van de repo die u heeft geforkt deze PR zien en, _vingers gekruist_, zullen ze uw PR waarderen en _samenvoegen_. U bent nu een bijdrager, yay :)
+
+1. **Opruimen**. Het wordt als een goede gewoonte beschouwd om _op te ruimen_ nadat u met succes een PR hebt samengevoegd. U wilt zowel uw lokale tak opruimen als de tak die u naar GitHub hebt gepusht. Laten we het eerst lokaal verwijderen met het volgende commando: 
+
+   ```bash
+   git branch -d [taknaam]
+   ```
+
+   Zorg ervoor dat u naar de GitHub-pagina gaat voor de geforkte repo en verwijder de externe tak die u er zojuist naartoe hebt gepusht.
+
+`Pull request` lijkt een gekke term, omdat u uw wijzigingen echt in het project wilt pushen. Maar de onderhouder (projecteigenaar) of het kernteam moet rekening houden met uw wijzigingen voordat u deze samenvoegt met de "main" tak van het project, dus u vraagt echt om een wijzigingsbesluit van een onderhouder.  
+
+Een pull request is de plek om de verschillen die op een tak zijn geïntroduceerd te vergelijken en te bespreken met recensies, opmerkingen, geïntegreerde tests en meer. Een goed pull request volgt ongeveer dezelfde regels als een commitbericht. U kunt een verwijzing naar een probleem (issue) toevoegen in de issue tracker, bijvoorbeeld wanneer uw werk een probleem oplost. Dit doet u met een `#` gevolgd door het nummer van uw probleem. Bijvoorbeeld `# 97`.
+
+🤞Duimen dat alle controles slagen en de projecteigenaar(s) uw wijzigingen in het project samenvoegen🤞
+
+Update uw huidige lokale werkende tak met alle nieuwe commits van de corresponderende remote tak op GitHub:
+
+`git pull`
+
+## Hoe u kunt bijdragen aan open source
+
+Laten we eerst een repository - of: repo - op GitHub zoeken die voor u interessant is en waaraan u een wijziging zou willen bijdragen. U zult de inhoud ervan naar uw machine kopiëren.
+
+✅ Een goede manier om 'beginnersvriendelijke' repos te vinden, is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Kopieer lokaal een repo](../images/clone_repo.png)
+
+Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "klonen" door HTTPS, SSH of de GitHub CLI (Command Line Interface) te gebruiken. 
+
+Open uw terminal en kloon de repository op deze manier:
+`git clone https://github.com/ProjectURL`
+
+Schakel naar de juiste map om aan het project te werken:
+`cd ProjectURL`
+
+U kunt ook het hele project openen met [Codespaces](https://github.com/features/codespaces), GitHub's ingesloten code-editor  /cloud-ontwikkelomgeving of [GitHub Desktop](https://desktop.github.com/).
+
+Ten slotte kunt u de code downloaden in een gecomprimeerde map. 
+
+### Nog een paar interessante dingen over GitHub
+
+U kunt elke openbare repository op GitHub een ster geven, bekijken en/of "forken". U kunt uw repositories met ster vinden in het vervolgkeuzemenu rechtsboven. Het is net als bladwijzers, maar dan voor code. 
+
+Projecten hebben een issue tracker, meestal op GitHub in de "Issues" tab, tenzij anders aangegeven, waar mensen problemen bespreken die verband houden met het project. En op het tabblad Pull Requests bespreken en beoordelen mensen lopende wijzigingen.
+
+Projecten kunnen ook worden besproken in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC.
+
+✅ Kijk eens rond in uw nieuwe GitHub-repo en probeer een paar dingen, zoals het bewerken van instellingen, het toevoegen van informatie aan uw repo en het maken van een project (zoals een Kanban-bord). U kunt veel doen!
+
+---
+
+## 🚀 Uitdaging 
+
+Koppel met een vriend om aan elkaars code te werken. Creëer gezamenlijk een project, fork code, maak takken en voeg wijzigingen samen.
+
+## Quiz na de lezing
+[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Beoordeling en zelfstudie
+
+Lees meer over [bijdragen aan open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git-cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Oefenen, oefenen, oefenen. GitHub heeft geweldige leertrajecten beschikbaar via [lab.github.com](https://lab.github.com/):
+
+- [Eerste week op GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+U zult ook meer geavanceerde labs vinden. 
+
+## Toewijzing 
+
+Voltooi [de eerste week op GitHub-trainingslaboratorium](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.pt.md

@@ -0,0 +1,317 @@
+# Introdução ao GitHub
+
+Esta lição cobre os fundamentos do GitHub, uma plataforma para hospedar e gerenciar alterações em seu código.
+
+![Intro ao GitHub](/sketchnotes/webdev101-github.png)
+> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Pré-Aula
+[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Introdução
+
+Nesta lição vamos falar sobre:
+
+- rastreando o trabalho que você faz em sua máquina
+- trabalhando em projetos com outros
+- como contribuir com software de código aberto
+
+### Pré-requisitos
+
+Antes de começar, você precisará verificar se o Git está instalado. No terminal, digite: 
+`git --version`
+
+Se o Git não estiver instalado, [baixe o Git aqui](https://git-scm.com/downloads). Em seguida, configure seu perfil Git local no terminal:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Para verificar se o Git já está configurado, você pode digitar:
+`git config --list`
+
+Você também precisará de uma conta do GitHub, um editor de código (como o Visual Studio Code) e abrir seu terminal (ou: prompt de comando).
+
+Navegue para [github.com](https://github.com/) e crie uma conta, caso ainda não o tenha feito, ou faça login e preencha o seu perfil. 
+
+✅ O GitHub não é o único repositório de código do mundo; existem outros, mas o GitHub é o mais conhecido.
+
+### Preparação
+
+Você precisará de uma pasta com um projeto de código em sua máquina local (laptop ou PC) e de um repositório público no GitHub, que servirá como um exemplo de como contribuir com os projetos de outras pessoas. 
+
+---
+
+## Gerenciamento de código
+
+Digamos que você tenha uma pasta localmente com algum projeto de código e deseja começar a monitorar seu progresso usando git - o sistema de controle de versão. Algumas pessoas comparam o uso do git a escrever uma carta de amor para o seu futuro eu. Lendo suas mensagens de commit dias, semanas ou meses depois, você será capaz de se lembrar por que tomou uma decisão, ou "reverter" uma mudança - isto é, quando você escreve boas "mensagens de commit".
+
+### Tarefa: Faça um repositório e conmmit o código
+
+1. **Crie um repositório no GitHub**. No GitHub.com, na guia de repositórios ou na barra de navegação superior direita, encontre o botão **new repo** .
+
+   1. Dê um nome ao seu repositório (pasta) 
+   1. Selecione **create repository**.
+
+1. **Navegue até sua pasta de trabalho**. Em seu terminal, mude para a pasta (também conhecida como diretório) que deseja iniciar o rastreamento. Digite:
+
+   ```bash
+   cd [nome da sua pasta]
+   ```
+
+1. **Inicialize um repositório git**. No seu projeto, digite:
+
+   ```bash
+   git init
+   ```
+
+1. **Cheque status**. Para checar o status de seu repositório, digite:
+
+   ```bash
+   git status
+   ```
+
+   a saída pode ser parecida com esta:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Geralmente o comando `git status` diz a você coisas como quais arquivos estão prontos para serem _salvos_ para o repo ou tem alterações que você pode querer persistir.
+
+1. **Adicionar todos os arquivos para rastreamento**
+   Isso também é chamado de arquivos de teste / adição de arquivos à área de teste.
+
+   ```bash
+   git add .
+   ```
+
+   O argumento `git add` plus `.` indiciona todos os seus arquivos e alterações para rastreamento. 
+
+1. **Adicionar arquivos selecionados para rastreamento**
+
+   ```bash
+   git add [nome do arquivo ou pasta]
+   ```
+
+Isso nos ajuda a adicionar apenas os arquivos selecionados à área de teste quando não queremos enviar todos os arquivos de uma vez.
+
+1. **Unstage todos os arquivos**
+
+   ```bash
+   git reset
+   ```
+   Este comando nos ajuda a unstage todos os arquivos de uma vez.
+
+1. **Unstage um arquivo em particular**
+
+   ```bash
+   git reset [nome do arquivo ou pasta]
+   ```
+
+   Este comando nos ajuda a remover stage de apenas um arquivo específico de uma vez que não queremos incluir no próximo commit.
+
+1. **Persistindo no seu trabalho**. Neste ponto, você adicionou os arquivos a um local chamado _staging area_. Um lugar onde o Git está rastreando seus arquivos. Para tornar a mudança permanente, você precisa _committar_ os arquivos. Para fazer isso, crie um _commit_ com o comando `git commit`. Um _commit_ representa um ponto na história do seu repo sendo salvo. Digite o seguinte para criar um _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Isso confirma todos os seus arquivos, adicionando a mensagem "first commit" (primeiro commit). Para mensagens de commit futuras, você desejará ser mais descritiva em sua descrição para transmitir que tipo de mudança você fez.
+
+1. **Conecte seu repositório Git local com GitHub**. Um repositório Git é bom em sua máquina, mas em algum momento você vai querer fazer backup de seus arquivos em algum lugar e também convidar outras pessoas para trabalhar com você em seu repositório. Um ótimo lugar para fazer isso é o GitHub. Lembre-se de que já criamos um repositório no GitHub, então a única coisa que precisamos fazer é conectar nosso repositório Git local ao GitHub. O comando `git remote add` fará exatamente isso. Digite o seguinte comando:
+
+   > Antes de digitar o comando, vá para a página do repositório GitHub para encontrar o URL do repositório. Você o usará no comando abaixo. Substitua `repository_name` pelo seu URL do GitHub.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Isso cria um _remote_, ou conexão, chamada "origin" apontando para o repositório GitHub que você criou anteriormente.
+
+1. **Envie arquivos locais para GitHub**. Até agora, você criou uma _conexão_ entre o repositório local e o repositório GitHub. Vamos enviar esses arquivos para o GitHub com o seguinte comando `git push`, assim: 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Isso envia seus commits em seu branch "principal" para o GitHub.
+
+1. **Para adicionar mais mudanças**. Se quiser continuar fazendo alterações e enviando-as para o GitHub, você só precisará usar os três comandos a seguir:
+
+   ```bash
+   git add .
+   git commit -m "digite sua mensagem de commit aqui"
+   git push
+   ```
+
+   > Dica, você também pode adotar um arquivo `.gitignore` para evitar que arquivos que você não deseja rastrear apareçam no GitHub - como aquele arquivo de notas que você armazena na mesma pasta, mas não tem lugar em um repositório público. Você pode encontrar modelos para arquivos `.gitignore` em [modelos .gitignore](https://github.com/github/gitignore).
+
+#### Mensagens de Commit 
+
+Uma ótima mensagem de Git commit completa a seguinte frase:
+Se aplicado, este commit irá <sua mensagem de commit aqui>
+
+Para o assunto use o tempo presente imperativo: "mudar" e não "mudou" nem "muda".
+Assim como no sujeito, no corpo (opcional) também use o tempo presente imperativo. O corpo deve incluir a motivação para a mudança e contrastar isso com o comportamento anterior. Você está explicando o `porquê`, não o` como`.
+
+✅ Reserve alguns minutos para navegar no GitHub. Você consegue encontrar uma mensagem de commit realmente ótima? Você pode encontrar uma ruim? Quais informações você acha que são as mais importantes e úteis para transmitir em uma mensagem de commit?
+
+### Tarefa: Colabore
+
+O principal motivo para colocar coisas no GitHub foi possibilitar a colaboração com outros desenvolvedores.
+
+## Trabalhando em projetos com outras pessoas
+
+Em seu repositório, navegue até `Insights> Community` para ver como seu projeto se compara aos padrões recomendados da comunidade.
+
+   Aqui estão algumas coisas que podem melhorar seu repositório GitHub: 
+   - **Descrição**. Você adicionou uma descrição para o seu projeto?
+   - **README**. Você adicionou um README? O GitHub fornece orientação para escrever um [README](https://docs.github.com/articles/about-readmes/).
+   - **Guia de Contribuição**. Seu projeto tem um [guia para contribuição](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Código de Conduta**. Um [Código de Conduta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **Licença**. Talvez o mais importante, a [licença](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Todos esses recursos irão beneficiar a integração de novos membros da equipe. E esses são normalmente o tipo de coisas que os novas pessoas colaboradoras olham antes mesmo de olhar para o seu código, para descobrir se o seu projeto é o lugar certo para elas passarem o tempo.
+
+✅ Arquivos README, embora levem tempo para serem preparados, são freqüentemente negligenciados por pessoas mantenedores ocupadas. Você pode encontrar um exemplo particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que você pode querer experimentar.
+
+### Tarefa: Dar merge em algum código
+
+Documentos contribuintes ajudam as pessoas a contribuir para o projeto. Ele explica quais tipos de contribuições você está procurando e como funciona o processo. As pessoas colaboradoras precisarão seguir uma série de etapas para poder contribuir com seu repo no GitHub:
+
+
+ 1. **Bifurcando seu repo** Você provavelmente vai querer que as pessoas _fork_ seu projeto. Bifurcação significa criar uma réplica de seu repositório em seu perfil GitHub.
+1. **Clone**. A partir daí, elas clonarão o projeto em sua máquina local.
+1. **Crie um branch**. Você vai querer pedir a elas que criem um _branch_ para seu trabalho.
+1. **Concentre sua mudança em uma área**. Peça aos colaboradores para concentrarem suas contribuições em uma coisa de cada vez - dessa forma, as chances de você se _mergir_ no trabalho delas são maiores. Imagine que elas escrevam uma correção de bug, adicionem um novo recurso e atualizem vários testes - e se você quiser ou só puder implementar 2 de 3, ou 1 de 3 alterações?
+
+✅ Imagine uma situação em que os branches são particularmente críticos para escrever e distribuir bons códigos. Em quais casos de uso você consegue pensar?
+
+> Nota, seja a mudança que você deseja ver no mundo e crie ramificações para o seu próprio trabalho também. Todos os commits que você fizer serão feitos no branch em que você está atualmente “check-out”. Use `git status` para ver qual branch é.
+
+Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela já _forked_ e _cloned_ o repo para que ela tenha um repositório Git pronto para ser trabalhado, em sua máquina local:
+
+1. **Crie um brancj**. Use o comando `git branch` para criar um branch que conterá as mudanças que pretendem contribuir:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Mudar para o branch de trabalho**. Mude para o branch especificado e atualize o diretório de trabalho com `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Trabalhe**. Neste ponto, você deseja adicionar suas alterações. Não se esqueça de contar ao Git sobre isso com os seguintes comandos:
+
+   ```bash
+   git add .
+   git commit -m "minhas mudancas"
+   ```
+
+   Certifique-se de dar ao seu commit um bom nome, para seu bem e também para os mantenedores do repo no qual você está ajudando.
+
+1. **Combine seu trabalho com o branch `main`**. Em algum ponto, você concluiu o trabalho e deseja combinar seu trabalho com o do branch `principal`. O branch `main` pode ter mudado enquanto isso, certifique-se de primeiro atualizá-lo para o mais recente com os seguintes comandos:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   Neste ponto, você quer ter certeza de que quaisquer _conflitos_, situações em que o Git não pode _combinar_ facilmente as mudanças aconteçam em seu branch de trabalho. Portanto, execute os seguintes comandos:
+
+   ```bash
+   git switch [branch_name]
+   git merge main
+   ```
+
+   Isso trará todas as mudanças de `main` em seu branch e esperançosamente você pode simplesmente continuar. Caso contrário, o VS Code dirá onde o Git está _confundido_ e você apenas alterará os arquivos afetados para dizer qual conteúdo é o mais preciso.
+
+1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Enviando seu branch para o repo e, em seguida, abra um PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+    O comando acima cria o branch em seu repositório bifurcado.
+
+1. **Abra um PR**. Em seguida, você deseja abrir um PR. Você faz isso navegando até o repositório bifurcado no GitHub. Você verá uma indicação no GitHub onde pergunta se você deseja criar um novo PR, você clica nele e é levado a uma interface onde pode alterar o título da mensagem de commit, dê-lhe uma descrição mais adequada. Agora, a mantenedora do repo que você bifurcou verá este PR e _dedos cruzados_, eles apreciarão e _mergirão_ seu PR. Agora você é uma pessoa contribuidora, eba :)
+
+1. **Limpeza**. É considerado uma boa prática _limpar_ após mesclar com sucesso um PR. Você deseja limpar seu branch local e o branch que você enviou para o GitHub. Primeiro, vamos excluí-lo localmente com o seguinte comando:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Em seguida, vá para a página GitHub do repositório bifurcado e remova o branch remoto que você acabou de enviar para ele.
+
+`Pull request` parece um termo bobo porque na verdade você deseja enviar suas alterações para o projeto. Mas a pessoa mantendo o repo ou equipe central precisa considerar suas mudanças antes de fundi-las com o branch "principal" do projeto, então você está realmente solicitando uma decisão de mudança de uma pessoa mantenedora. 
+
+Uma PR é o lugar para comparar e discutir as diferenças introduzidas em um branch com revisões, comentários, testes integrados e muito mais. Uma boa PR segue aproximadamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, quando seu trabalho, por exemplo, corrige um problema. Isso é feito usando um `#` seguido pelo número do seu problema. Por exemplo `# 97`.
+
+🤞 Dedos cruzados para que todas as verificações sejam aprovadas e as pessoas proprietárias do projeto deem merge nas suas alterações no projeto 🤞
+
+Atualize seu branch de trabalho local atual com todos os novos commits do branch remoto correspondente no GitHub:
+
+`git pull`
+
+## Como contribuir com Open Source
+
+Primeiramente, vamos encontrar um repositório (ou **repo**) no GitHub de interesse para você e para o qual você gostaria de contribuir. Você vai querer copiar o conteúdo desse repo para a sua máquina.
+
+✅ Uma boa maneira de encontrar repos 'iniciantes' é [buscar usando a tag  'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copiar um repo localmente](../images/clone_repo.png)
+
+Existem várias maneiras de copiar códigos. Uma maneira é "clonar" o conteúdo do repositório, usando HTTPS, SSH ou usando o GitHub CLI (Command Line Interface). 
+
+Abra seu terminal e clone o repositório assim:
+`git clone https://github.com/ProjectURL`
+
+Para trabalhar no projeto, mude para a pasta certa:
+`cd ProjectURL`
+
+Você também pode abrir todo o projeto usando [Codespaces](https://github.com/features/codespaces), O editor de código incorporado do GitHub/ ambiente de desenvolvimento em nuvem, ou o [GitHub Desktop](https://desktop.github.com/).
+
+Por último, você pode baixar o código em uma pasta como .zip.
+
+###  Mais algumas coisas interessantes sobre o GitHub
+
+Você pode dar uma estrela, assistir e/ou "bifurcação" em qualquer repositório público no GitHub. Você pode encontrar seus repositórios estrelados no menu suspenso de cima para a direita. É como marcar, mas para código. 
+
+Os projetos têm um rastreador de problemas, no GitHub na aba "Problemas", a menos que indicado o contrário, onde as pessoas discutem questões relacionadas ao projeto. E a aba de Pull Requests é onde as pessoas discutem e analisam as mudanças que estão em andamento.
+
+Os projetos também podem ter discussão em fóruns, listas de discussão ou canais de bate-papo como Slack, Discord ou IRC.
+
+✅ Dê uma olhada no seu novo GitHub repo e experimente algumas coisas, como editar configurações, adicionar informações ao seu repo e criar um projeto (como uma placa Kanban). Há muita coisa que você pode fazer!
+
+---
+
+## 🚀 Desafio 
+
+Parear com uma amiga para trabalhar no código uma da outra. Crie um projeto de forma colaborativa, de fork no código, crie branches e de merge mudanças.
+
+## Quiz pós-aula
+[Quiz pós-aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Revisão & Auto estudo
+
+Leia mais sobre [contribuindo para o software de código aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Pratique, pratique, pratique. GitHub tem ótimos caminhos de aprendizagem disponíveis via [lab.github.com](https://lab.github.com/):
+
+- [Primeira semana no GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Você também encontrará laboratórios mais avançados.
+
+## Lição de casa
+
+Complete [o lab a Primeira Semana gitHub](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.ru.md

@@ -0,0 +1,321 @@
+# Введение в GitHub
+
+В этом уроке рассматриваются основы GitHub - платформы для хранения и управления изменениями вашего кода.
+
+![Введение в GitHub](/sketchnotes/webdev101-github.png)
+
+> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Предлекционный квиз
+
+[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+
+## Введение
+
+В этом уроке мы рассмотрим:
+
+- отслеживание работы, которую вы делаете на своем устройстве
+- совместная работа над проектами с другими людьми
+- как внести свой вклад в программное обеспечение с открытым исходным кодом
+
+### Требования
+
+Прежде чем начать, вам нужно проверить, установлен ли Git. В терминале напечатайте:
+`git --version`
+
+Если Git не установлен, [установите Git](https://git-scm.com/downloads). Затем настройте свой локальный профиль Git в терминале:
+
+- `git config --global user.name "ваше-имя"`
+- `git config --global user.email "ваш-email"`
+
+Чтобы проверить, настроен ли уже Git, вы можете ввести:
+`git config --list`
+
+Вам также понадобится аккаунт на GitHub, редактор кода (например, Visual Studio Code) и вам нужно будет открыть свой терминал (или командную строку).
+
+Перейдите на [github.com](https://github.com/) и создайте аккаунт, если вы еще этого не сделали, или войдите в систему и заполните свой профиль.
+
+✅ GitHub - не единственная платформа для хранения репозиториев кода в мире; есть и другие, но GitHub - самый известный.
+
+### Подготовка
+
+Вам понадобится как папка с проектом кода на вашем локальном компьютере (ноутбуке или ПК), так и общедоступный репозиторий на GitHub, который мы используем, чтобы показать, как внести свой вклад в другие проекты.
+
+---
+
+## Управление кодом
+
+Допустим, у вас есть локальная папка с каким-то проектом и вы хотите начать отслеживать свой прогресс с помощью системы контроля версий Git. Некоторые люди сравнивают использование git с написанием любовного письма себе в будущем. Читая сообщения коммитов через несколько дней, недель или месяцев, вы сможете вспомнить, почему вы сделали так, а не иначе, или сможете «откатить» изменения.
+
+### Задание: Сделать репозиторий и сделать коммит
+
+1. **Создайте репозиторий на GitHub**. На GitHub.com на вкладке репозиториев или в правом верхнем углу панели навигации найдите кнопку **новый репозиторий**.
+
+   1. Дайте вашему репозиторию (папке) имя
+   1. Выберите **создать репозиторий**.
+
+1. **Перейдите в свою рабочую папку**. В вашем терминале перейдите в папку (также известную как каталог), которую вы хотите начать отслеживать. Введите:
+
+   ```bash
+   cd [имя вашей папки]
+   ```
+
+1. **Инициализируйте git репозиторий**. В вашем проекте напечатайте:
+
+   ```bash
+   git init
+   ```
+
+1. **Проверьте статус**. Чтобы проверить статус вашего репозитория введите:
+
+   ```bash
+   git status
+   ```
+
+   вывод может выглядеть примерно так:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Обычно команда `git status` сообщает вам, какие файлы готовы к _сохранению_ в репозиторий или в каких есть изменения, которые вы, возможно, захотите сохранить.
+
+1. **Добавьте все файлы для отслеживания**.
+   Это также называется подготовленными файлами (staging files) / добавлением файлов в область подготовленных файлов (staging area).
+
+   ```bash
+   git add .
+   ```
+
+   Команда `git add` с аргументом `.` указывает, что все ваши файлы и изменения будут добавлены для отслеживания.
+
+1. **Добавьте выбранные файлы для отслеживания**
+
+   ```bash
+   git add [название файла или папки]
+   ```
+
+   Это помогает нам добавлять только выбранные файлы в область подготовки, когда мы не хотим фиксировать все файлы сразу.
+
+1. **Удаление всех файлов из области подготовки**
+
+   ```bash
+   git reset
+   ```
+
+   Эта команда помогает нам убрать все файлы сразу из staging area.
+
+1. **Удаление определенного файла из области подготовки**
+
+   ```bash
+   git reset [название файла или папки]
+   ```
+
+   Эта команда помогает нам убрать определенный файл, который мы не хотим включать в следующий коммит.
+
+1. **Сохраняйте свою работу**. На этом этапе вы добавили файлы в так называемую _staging area (область подготовки)_. Место, где Git отслеживает ваши файлы. Чтобы сделать изменение постоянным, вам необходимо _закоммитить (зафиксировать)_ файлы. Для этого вы создаете _коммит_ с помощью команды `git commit`. _Коммит_ представляет собой точку сохранения в истории вашего репозитория. Введите следующее, чтобы создать новый _коммит_:
+
+   ```bash
+   git commit -m "первый коммит"
+   ```
+
+   Эта команда сохраняет все ваши файлы, добавляя сообщение «первый коммит». Для будущих сообщений коммитов вам нужно будет быть более информативным в своем описании, чтобы передать, какой тип изменения вы внесли.
+
+1. **Подключите локальный репозиторий Git к GitHub**. Репозиторий Git хорош на вашем компьютере, но в какой-то момент вы захотите сделать резервную копию ваших файлов, а также пригласить других людей поработать с вами над вашим проектом. Одно из таких прекрасных мест для этого - GitHub. Помните, что мы уже создали репозиторий на GitHub, поэтому единственное, что нам нужно сделать, это подключить наш локальный репозиторий Git к GitHub. Команда `git remote add` предназначена именно для этого. Введите следующую команду:
+
+   > Обратите внимание: прежде чем вводить команду, перейдите на страницу репозитория GitHub, чтобы найти URL-адрес репозитория. Вы будете использовать его в приведенной ниже команде. Замените `username/repository_name` своим URL-адресом репозитория на GitHub.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Эта команда создает _удаленное соединение_ с именем «origin», указывающее на репозиторий GitHub, который вы создали ранее.
+
+1. **Отправьте локальные файлы в GitHub**. Итак, вы создали _соединение_ между локальным репозиторием и репозиторием на GitHub. Давайте отправим эти файлы на GitHub с помощью следующей команды `git push`, вот так:
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Эта команда отправляет коммиты из вашей локальной ветки "main" в одноименную ветку на GitHub.
+
+1. **Добавление последующих изменений**. Если вы хотите продолжить вносить изменения и отправлять их на GitHub, вам просто нужно использовать следующие три команды:
+
+   ```bash
+   git add .
+   git commit -m "напишите здесь свое сообщения для коммита"
+   git push
+   ```
+
+   > Совет: вы также можете использовать файл `.gitignore`, чтобы файлы, которые вы не хотите отслеживать, не отправлялись на GitHub. Например, файл заметок, который вы храните в той же папке, но не хотите, чтобы он отображался в публичном репозитории. Вы можете найти шаблоны для файлов `.gitignore` по следующей ссылке [.gitignore templates](https://github.com/github/gitignore).
+
+#### Сообщения коммитов
+
+Хорошее сообщение к коммиту должно завершать следующее предложение:  
+_Если применить этот коммит, то он <ваше сообщение к коммиту>_  
+(_If applied, this commit will <your subject line here>_)
+
+Для основного сообщения к коммиту используйте повелительное наклонение в настоящем времени: «change», а не «changed» или «changes». Также и в расширенном сообщении (которое необязательно) используйте повелительное наклонение в настоящем времени. Основное сообщение должно включать мотивацию к изменению и противопоставлять это предыдущему поведению. Вы объясняете `почему`, а не `как`.
+
+✅ Потратьте несколько минут, чтобы немного исследовать GitHub. Сможете ли вы найти действительно отличное сообщение к коммиту? Можете ли вы найти минимальное сообщение к коммиту? Какую информацию вы считаете наиболее важной и полезной для передачи в сообщении к коммиту?
+
+### Задание: Сотрудничество
+
+Основная причина размещения проектов на GitHub заключается в том, чтобы дать возможность сотрудничать с другими разработчиками.
+
+## Работа над проектами с другими разработчиками
+
+В своем репозитории перейдите в `Insights > Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества.
+
+Вот несколько вещей, которые могут улучшить ваш репозиторий на GitHub:
+
+- **Описание**. Вы добавили описание для своего проекта?
+- **README**. Вы добавили README? GitHub предлагает руководство по написанию [README](https://docs.github.com/articles/about-readmes/).
+- **Рекомендации по внесению вклада**. У вашего проекта есть [рекомендации по внесению вклада (contributing guideline)](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)?
+- **Нормы поведения**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/).
+- **Лицензия**. Возможно, самое важное - это [лицензия](https://docs.github.com/articles/adding-a-license-to-a-repository/).
+
+Все эти ресурсы принесут пользу новым членам команды. И это, как правило, те вещи, на которые новые участники смотрят, прежде чем даже взглянуть на ваш код, чтобы узнать, является ли ваш проект подходящим местом для них, чтобы тратить свое время.
+
+✅ Файлы README часто игнорируются занятыми разработчиками из-за нехватки времени на их подготовку. Можете ли вы найти пример README с хорошим описанием проекта? Примечание: есть несколько [инструментов для создания хороших README](https://www.makeareadme.com/), которые вы, возможно, захотите попробовать.
+
+### Задание: Слияние кода
+
+Правила соучастия (например, документ `CONTRIBUTING.md`) помогают людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов:
+
+1. **Сделать ответвление вашего репозитория (Forking)**. Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub.
+1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер.
+1. **Создать ветку**. Вы можете попросить их создать _ветку_ для своей работы.
+1. **Сосредоточить свои изменения на одной области**. Попросите участников концентрировать свой вклад на чем-то одном - так шансы, что вы сможете провести _слияние кода_ с их работой, будут выше. Представьте, что они написали исправление ошибки, добавили новую функцию и обновили несколько тестов - что, если вы хотите или можете принять только 2 из 3 или 1 из 3 изменений?
+
+✅ Придумайте ситуацию, в которой ветки особенно важны для написания и распространения хорошего кода. Какие варианты использования приходят вам на ум?
+
+> Примечание: будьте тем изменением, которое вы хотите увидеть в мире, и также создавайте ответвления для своей собственной работы. Любые совершаемые вами коммиты будут выполняться в той ветке, в которой вы в настоящее время находитесь. Используйте `git status`, чтобы узнать, какая это ветка.
+
+Давайте рассмотрим рабочий процесс соавтора. Предположим, что соавтор уже _сделал ответвление_ и _склонировал_ ваш репозиторий, поэтому у него на локальном компьютере есть репозиторий Git, готовый к работе:
+
+1. **Создание ветки**. Используйте команду `git branch` для создания ветки, которая будет содержать изменения, которые вы хотите внести:
+
+   ```bash
+   git branch [название-ветки]
+   ```
+
+1. **Переход в рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую папку с помощью команды `git switch`:
+
+   ```bash
+   git switch [branch-name]
+   ```
+
+1. **Написание кода**. На этом этапе вы хотите добавить свои изменения. Не забудьте сообщить об этом Git с помощью следующих команд:
+
+   ```bash
+   git add .
+   git commit -m "мои изменения"
+   ```
+
+   Убедитесь, что вы написали хорошее сообщение для своего коммита, понятное как для себя, так и для владельца репозитория, которому вы помогаете.
+
+1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`. Ветка `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд:
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   На этом этапе вы хотите убедиться, что любые _конфликты_, ситуации, когда Git не может легко _комбинировать_ изменения, происходят в вашей рабочей ветке. Поэтому выполните следующие команды:
+
+   ```bash
+   git switch [название-ветки]
+   git merge main
+   ```
+
+   Это внесет все изменения из main в вашу ветку, и, надеюсь, вы сможете продолжить. Если нет, VS Code сообщит вам, где Git _не может самостоятельно решить конфликт_, и вы просто измените затронутые файлы, чтобы указать, какой контент является наиболее точным.
+
+1. **Отправьте свою работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Отправьте свою ветку (push) в репозиторий, а затем откройте пул реквест (сокращенно PR).
+
+   ```bash
+   git push --set-upstream origin [название-ветки]
+   ```
+
+   Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории.
+
+1. **Открытие PR**. Далее, вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :)
+
+1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного слияния PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды:
+
+   ```bash
+   git branch -d [название-ветки]
+   ```
+
+   Убедитесь, что вы перешли на страницу GitHub для ответвленного репозитория и удалили удаленную ветку, которую вы только что отправили на GitHub.
+
+`Pull request` (дословно: запрос на стягивание) кажется глупым термином, потому что на самом деле вы хотите отправить (push) свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед слиянием их с основной ветвью проекта ("main"), поэтому вы действительно запрашиваете разрешение у владедьца о стягивании ваших изменений.
+
+Pull request - это место, где можно сравнить и обсудить изменения, представленные в ветке, проверками, комментариями, интегрированными тестами и т.д. Хороший pull request следует примерно тем же правилам, что и сообщение к коммиту. Вы можете добавить ссылку на вопрос (issue) в систему отслеживания проблем, например, когда вы работаете над устранением проблемы/бага. Это делается с помощью символа `#`, за которым следует номер вашего issue. Например, `# 97`.
+
+🤞Скрестив пальцы, все проверки проходят, и владелец (владельцы) проекта проводят слияние ваших изменений в проект🤞
+
+Обновите текущую локальную рабочую ветку всеми новыми коммитами из соответствующей удаленной ветки на GitHub с помощью следующей команды:
+
+`git pull`
+
+## Как внести свой вклад в открытый исходный код
+
+Во-первых, давайте найдем репозиторий на GitHub, который вас интересует и в который вы хотели бы внести изменения. Вам неоходимо скопировать его содержимое на свой компьютер.
+
+✅ Хороший способ найти репозитории, удобные для новичков, - это [поиск по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](../images/clone_repo.png)
+
+Есть несколько способов копирования кода. Один из способов - «клонировать» содержимое репозитория, используя HTTPS, SSH или используя GitHub CLI (интерфейс командной строки).
+
+Откройте свой терминал и клонируйте репозиторий вот так:
+`git clone https://github.com/ProjectURL`
+
+Для работы над проектом перейдите в правильную папку:
+`cd ProjectURL`
+
+Вы также можете открыть весь проект, используя [Codespaces](https://github.com/features/codespaces), встроенный редактор кода / облачная среда разработки GitHub или [GitHub Desktop](https://desktop.github.com/).
+
+Наконец, вы можете загрузить код в заархивированной папке.
+
+### Еще несколько интересных вещей о GitHub
+
+Вы можете отметить, посмотреть и / или «разветвить» любой публичный репозиторий на GitHub. Вы можете найти свои отмеченные репозитории в раскрывающемся меню в правом верхнем углу. Это как закладка, но для кода.
+
+В проектах есть средство отслеживания проблем, в основном на GitHub на вкладке «Проблемы» (Issues), если не указано иное, где люди обсуждают проблемы, связанные с проектом. А на вкладке «Pull Requests» люди обсуждают и просматривают изменения, которые происходят.
+
+Проекты также могут обсуждаться на форумах, в списках рассылки или в чатах, таких как Slack, Discord или IRC.
+
+✅ Осмотрите свой новый репозиторий GitHub и попробуйте несколько вещей, например, отредактируйте настройки, добавьте информацию в репозиторий и создайте проект (например, доску Канбан). Вы можете многое сделать!
+
+---
+
+## 🚀 Челлендж
+
+Объединитесь с другом, чтобы работать над кодом друг друга. Совместно создавайте проект, разветвляйте код, создавайте ветви и объединяйте изменения.
+
+## Постлекционный квиз
+
+[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+
+## Обзор и самообучение
+
+Подробнее об [участие в разработке программного обеспечения с открытым исходным кодом](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Шпаргалка по Git](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Практика, практика, практика. GitHub предлагает отличные способы обучения, доступные через [lab.github.com](https://lab.github.com/):
+
+- [Первая неделя на GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Вы также можете найти более продвинутые лаборатории для практики.
+
+## Задание
+
+Завершите [первую неделю в учебной лаборатории GitHub](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.ta.md

@@ -0,0 +1,325 @@
+# கிட்ஹப் அறிமுகம்
+
+இந்த பாடம் கிட்ஹப் அடிப்படைகளை உள்ளடக்கியது, உங்கள் குறியீட்டில் மாற்றங்களை நடத்த மற்றும் நிர்வகிக்க ஒரு தளம்.
+
+![Iகிட்ஹப் அறிமுகம்](/sketchnotes/webdev101-github.png)
+> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
+
+
+##  விரிவுரைக்கு முந்தைய வினாடி வினா
+[ விரிவுரைக்கு முந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=ta)
+
+## அறிமுகம்
+
+இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்:
+
+- உங்கள் இயந்திரத்தில் நீங்கள் செய்யும் வேலையைக் கண்காணித்தல்
+- மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல்
+- திறந்த மூல மென்பொருள் பங்களிக்க எப்படி
+
+### முன் நிபந்தனைகள்
+
+நீங்கள் தொடங்குவதற்கு முன், கிட் நிறுவப்பட்டதா என்பதை நீங்கள் சரிபார்க்க வேண்டும். முனைய வகை:  
+`git --version`
+
+கிட் நிறுவப்படவில்லை என்றால், [கிட் பதிவிறக்க](https://git-scm.com/downloads) . பின்னர், முனையத்தில் உங்கள் உள்ளூர் கிட் சுயவிவரத்தை அமை:
+
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+கிட் ஏற்கனவே உள்ளமைக்கப்பட்டதா என்பதை சரிபார்க்க நீங்கள் தட்டச்சு செய்யலாம்:
+`git config --list`
+
+நீங்கள் ஒரு கிட்ஹப் கணக்கு, ஒரு குறியீட்டு ஆசிரியர் (விஷுவல் ஸ்டுடியோ குறியீடு போன்றவை) வேண்டும், மேலும் உங்கள் முனையத்தைத் திறக்க வேண்டும் (அல்லது: கட்டளை செயலழைப்பு).
+
+நீங்கள் ஏற்கனவே இல்லை என்றால் [github.com](https://github.com/) செல்லவும் மற்றும் ஒரு கணக்கை உருவாக்கவும், அல்லது உள்நுழைந்து உங்கள் சுயவிவரத்தை நிரப்பவும். 
+
+
+✅  கிட்ஹப் உலகின் ஒரே குறியீடு களஞ்சியம் அல்ல; மற்றவர்கள் இருக்கிறார்கள், ஆனால் கிட்ஹப் நன்கு அறியப்பட்டவர்
+
+### முன்னேற்பாடு செய்தல்
+
+உங்கள் உள்ளூர் இயந்திரத்தில் (மடிக்கணினி அல்லது பிசி) ஒரு குறியீட்டு திட்டத்துடன் ஒரு கோப்புறை மற்றும் கிட்ஹப்பில் ஒரு பொது களஞ்சியம் ஆகிய இரண்டும் உங்களுக்குத் தேவைப்படும், இது மற்றவர்களின் திட்டங்களுக்கு எவ்வாறு பங்களிக்க வேண்டும் என்பதற்கு ஒரு எடுத்துக்காட்டாக இருக்கும். 
+
+---
+
+## குறியீடு மேலாண்மை
+
+சில குறியீட்டு திட்டத்துடன் உள்நாட்டில் ஒரு கோப்புறை உள்ளது என்று வைத்துக்கொள்வோம், மேலும் உங்கள் முன்னேற்றத்தை கிட் - பதிப்பு கட்டுப்பாட்டு அமைப்பு பயன்படுத்தி கண்காணிக்க த் தொடங்க வேண்டும். சிலர் கிட் பயன்படுத்தி உங்கள் எதிர்கால சுய ஒரு காதல் கடிதம் எழுத ஒப்பிட்டு. நாட்கள் அல்லது வாரங்கள் அல்லது மாதங்களுக்குப் பிறகு உங்கள் ஒப்புக்கொள்ளும் செய்திகளைப் படிக்கும்போது, நீங்கள் ஏன் ஒரு முடிவை எடுத்தீர்கள், அல்லது ஒரு மாற்றத்தை "திரும்பப் பெறுகிறீர்கள்" என்பதை நீங்கள் நினைவுகூர முடியும் - அதாவது, நீங்கள் நல்ல "செய்திகளைச் செய்யுங்கள்" என்று எழுதும்போது.
+
+### பணி: ஒரு களஞ்சியத்தை உருவாக்கவும் மற்றும் குறியீட்டை செய்யவும்
+
+1.  **கிட்ஹப் இல் களஞ்சியத்தை உருவாக்கவும்** கிட்ஹப், களஞ்சியங்கள் தாவலை, அல்லது வழிசெலுத்தல் பட்டியில் மேல் வலது இருந்து, **புதிய ரெப்போ ** பொத்தானை கண்டுபிடிக்க.
+
+   1. உங்கள் களஞ்சியத்திற்கு (கோப்புறை) ஒரு பெயரைக் கொடுங்கள்
+   1. தேர்ந்தெடுக்கவும் **create repository**.
+
+1. **உங்கள் பணி கோப்புறைக்கு செல்லவும்**. உங்கள் முனையத்தில், கோப்புறைக்கு மாறவும் (கோப்பகம் என்றும் அழைக்கப்படுகிறது) நீங்கள் கண்காணிக்கத் தொடங்க விரும்புகிறீர்கள். மாதிப் படிவம்:
+
+   ```bash
+   cd [உங்கள் கோப்புறையின் பெயர்]
+   ```
+
+1. **ஒரு கிட் களஞ்சியத்தை துவக்கு**. உங்கள் திட்ட வகை:
+
+   ```bash
+   git init
+   ```
+
+1. **நிலையை சரிபார்க்கவும்**. உங்கள் களஞ்சிய வகையின் நிலையை சரிபார்க்க:
+
+   ```bash
+   git status
+   ```
+
+   வெளியீடு இந்த மாதிரி ஏதாவது இருக்க முடியும்:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+   பொதுவாக ஒரு `git status` கட்டளை, கோப்புகளில் _சேமிக்கதயாராக உள்ளது_ ரெப்போஅல்லது நீங்கள் தொடர்ந்து இருக்க விரும்பும் மாற்றங்களைக் கொண்டுள்ளது போன்ற விஷயங்களைஉங்களுக்குச் சொல்கிறது.
+
+1. **கண்காணிப்பு அனைத்து கோப்புகளை சேர்க்க**
+   இது ஸ்டேஜிங் கோப்புகள் / ஸ்டேஜிங் பகுதியில் கோப்புகளைச் சேர்ப்பது என்றும் அழைக்கப்படுகிறது.
+
+   ```bash
+   git add .
+   ```
+`git add` பிளஸ் `.` வாதம் உங்கள் கோப்புகள் அனைத்தும் கண்காணிக்க மாறும் என்பதைக் குறிக்கிறது.
+
+1. **கண்காணிப்புக்காக தேர்ந்தெடுக்கப்பட்ட கோப்புகளைச் சேர்க்கவும்**
+
+   ```bash
+   git add [கோப்பு அல்லது கோப்புறை பெயர்]
+   ```
+
+   ஒரே நேரத்தில் அனைத்து கோப்புகளையும் செய்ய விரும்பாத போது, தேர்ந்தெடுக்கப்பட்ட கோப்புகளை மட்டுமே ஸ்டேஜிங் பகுதியில் சேர்க்க இது உதவுகிறது.
+
+1. **அனைத்து கோப்புகளையும் நிலைநீக்கு**
+
+   ```bash
+   git reset
+   ```
+
+    இந்த கட்டளை அனைத்து கோப்புகளையும் ஒரே நேரத்தில் நிலைநீக்க உதவுகிறது.
+
+
+1. **ஒரு குறிப்பிட்ட கோப்பை நிலைநீக்கு**
+
+   ```bash
+   git reset [கோப்பு அல்லது கோப்புறை பெயர்]
+   ```
+
+    அடுத்த கமிட் செய்ய விரும்பாத ஒரு குறிப்பிட்ட கோப்பை மட்டும் ஒரே நேரத்தில் கட்டமைக்க இந்த கட்டளை நமக்கு உதவுகிறது.
+
+1. **உங்கள் வேலையை த் தொடருதல்**. இந்த கட்டத்தில் நீங்கள் _ஸ்டேஜிங் பகுதி_ என்று அழைக்கப்படும் கோப்புகளை சேர்த்துள்ளீர்கள். உங்கள் கோப்புகளை கிட் கண்காணிக்கும் இடம். மாற்றத்தை நிரந்தரமாக்க, கோப்புகளை _கமிட்_ செய்ய வேண்டும். அவ்வாறு செய்ய நீங்கள் `git commit` கட்டளையுடன் ஒரு _கமிட்_ உருவாக்குகிறீர்கள். ஒரு _கமிட்_ உங்கள் ரெப்போ வரலாற்றில் ஒரு சேமிப்பு புள்ளி யை குறிக்கிறது. _கமிட்_ உருவாக்க பின்வருவனவை தட்டச்சு செய்யவும்:
+
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+    இது உங்கள் கோப்புகள் அனைத்தையும் ஒப்புக்கொள்கிறது, "முதலில் ஒப்புக்கொள்ளுங்கள்" என்ற செய்தியைச் சேர்க்கிறது. எதிர்காலத்தில் செய்திகளைச் செய்ய நீங்கள் என்ன வகையான மாற்றத்தை செய்தீர்கள் என்பதை தெரிவிக்க உங்கள் விளக்கத்தில் இன்னும் விளக்கமாக இருக்க விரும்புகிறீர்கள்.
+
+1. **உங்கள் உள்ளூர் கிட் ரெப்போவை கிட்ஹப் உடன் இணைக்கவும்**. ஒரு கிட் ரெப்போ உங்கள் இயந்திரத்தில் நல்லது, ஆனால் ஒரு கட்டத்தில் நீங்கள் எங்காவது உங்கள் கோப்புகளை காப்புப்பிரதி எடுக்க விரும்புகிறீர்கள், மேலும் உங்கள் ரெப்போவில் உங்களுடன் வேலை செய்ய மற்ற நபர்களை அழைக்கவும் விரும்புகிறீர்கள். அவ்வாறு செய்ய ஒரு பெரிய இடம் கிட்ஹப் ஆகும். நாம் ஏற்கனவே கிட்ஹப்பில் ஒரு ரெப்போவை உருவாக்கியுள்ளோம் என்பதை நினைவில் கொள்ளுங்கள், எனவே நாம் செய்ய வேண்டிய ஒரே விஷயம் கிட்ஹப் உடன் எங்கள் உள்ளூர் கிட் ரெப்போவை இணைக்க வேண்டும். `git remote add` என்ற கட்டளை அதைச் செய்யும். பின்வரும் கட்டளையை தட்டச்சு செய்யவும்:
+
+   > குறிப்பு, நீங்கள் கட்டளையை தட்டச்சு செய்வதற்கு முன், உங்கள் கிட்ஹப் ரெப்போ பக்கத்திற்கு சென்று களஞ்சியத்தை கண்டுபிடிக்கவும். நீங்கள் கீழே உள்ள கட்டளையில் பயன்படுத்துவீர்கள். ```https://github.com/username/repository_name.git``` என்பதை உங்கள் கிட்ஹப் யுஆர்எல் மூலம் மாற்றவும்.
+
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+ இது ஒரு _தொலை__ அல்லது இணைப்பை உருவாக்குகிறது, "தோற்றம்" என்று பெயரிடப்பட்டது, நீங்கள் முன்பு உருவாக்கிய கிட்ஹப் களஞ்சியத்தை சுட்டிக்காட்டுகிறது.
+
+ 1. **கீதுப் க்கு உள்ளூர் கோப்புகளை அனுப்பவும்** இதுவரை நீங்கள் உள்ளூர் ரெப்போ மற்றும் கிட்ஹப் ரெப்போ இடையே ஒரு _இணைப்பு_ உருவாக்கியுள்ளீர்கள். பின்வரும் கட்டளை `git push`உடன் இந்த கோப்புகளை கிட்ஹப் க்கு அனுப்புவோம், இது போன்றது: 
+   
+   > குறிப்பு, உங்கள் கிளை பெயர் முன்னிருப்பாக வேறுபட்டிருக்கலாம் ```main```.
+
+   ```bash
+   git push -u origin main
+   ```
+
+      இது உங்கள் "main" கிளையில் உள்ள உங்கள் உறுதிகளை கிட்ஹப் க்கு அனுப்புகிறது.
+
+2. **மேலும் மாற்றங்களைச் சேர்க்க**. நீங்கள் மாற்றங்களைதொடர்ந்து செய்ய விரும்பினால், அவற்றை கிட்ஹப் க்கு தள்ளவிரும்பினால், பின்வரும் மூன்று கட்டளைகளைப் பயன்படுத்த வேண்டும்:
+
+   ```bash
+   git add .
+   git commit -m "உங்கள் ஒப்புக்கொள்ளும் செய்தியை இங்கே தட்டச்சு செய்யவும்"
+   git push
+   ```
+   > உதவிக்குறிப்பு, நீங்கள் கிட்ஹப்பில் காண்பிக்க விரும்பாத கோப்புகளைத் தடுக்க ஒரு `.gitignore` கோப்பை நீங்கள் ஏற்றுக்கொள்ள விரும்பலாம் - அதே கோப்புறையில் நீங்கள் சேமித்து வைக்கும் குறிப்புகள் கோப்பு போல, ஆனால் ஒரு பொது களஞ்சியத்தில் இடமில்லை. [.gitignore templates](https://github.com/github/gitignore) இல் `.gitignore` கோப்புகளுக்கான வார்ப்புருக்களை நீங்கள் காணலாம்
+
+#### செய்திகளை ஒப்புக்கொள்
+
+
+ஒரு பெரிய கிட் கமிட் சப்ஜெக்ட் லைன் பின்வரும் வாக்கியத்தை நிறைவு செய்யும்:
+பயன்படுத்தப்பட்டால், இந்த உறுதி <உங்கள் பொருள் வரி இங்கே>
+
+பொருள் கட்டாயபயன்படுத்த, தற்போதைய: "மாற்றம்" "மாற்ற" அல்லது "மாற்றங்கள்". 
+பொருள் போன்ற, உடலில் (விரும்பினால்) மேலும் கட்டாய பயன்படுத்த, தற்போதைய பதற்றம். உடல் மாற்றம் உந்துதல் சேர்க்க வேண்டும் மற்றும் முந்தைய நடத்தை இந்த மாறாக வேண்டும். நீங்கள் `ஏன்` விளக்குகிறீர்கள், `எப்படி` அல்ல.
+
+✅ கிட்ஹப் சுற்றி உலாவ சில நிமிடங்கள் எடுத்துக் கொள்ளுங்கள். நீங்கள் ஒரு பெரிய ஒப்புக்கொள்ளசெய்தி கண்டுபிடிக்க முடியும்? நீங்கள் ஒரு மிகவும் குறைந்த ஒரு கண்டுபிடிக்க முடியும்? ஒரு கமிட் செய்தியில் தெரிவிக்க மிகவும் முக்கியமான மற்றும் பயனுள்ள தகவல் என்று நீங்கள் நினைக்கிறீர்கள்?
+
+### பணி: ஒத்துழைக்க
+
+கிட்ஹப்பில் விஷயங்களை வைப்பதற்கான முக்கிய காரணம் மற்ற டெவலப்பர்களுடன் ஒத்துழைப்பதை சாத்தியமாக்குகிறது.
+
+## மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல்
+
+உங்கள் களஞ்சியத்தில், பரிந்துரைக்கப்பட்ட சமூக தரங்களுடன் உங்கள் திட்டம் எவ்வாறு ஒப்பிடுகிறது என்பதைப் பார்க்க `நுண்ணறிவு > சமூகம்` செல்லவும்.
+
+   இங்கே உங்கள் கிட்ஹப் ரெப்போ மேம்படுத்த முடியும் என்று சில விஷயங்கள் உள்ளன:
+   - **விளக்கம்**. உங்கள் திட்டத்திற்கான விளக்கத்தைச் சேர்த்தீர்களா?
+   - **ரீட்மே**. நீங்கள் ஒரு ரீட்மேசேர்த்தீர்களா? கிட்ஹப் ஒரு [ரீட்மே](https://docs.github.com/articles/about-readmes/) எழுதுவதற்கான வழிகாட்டலை வழங்குகிறது
+    - **பங்களிப்பு வழிகாட்டுதல்**. உங்கள் திட்டத்தில் [பங்களிப்பு வழிகாட்டுதல்கள்](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) உள்ளதா, 
+   - **நடத்தை விதிகள்**. அ [நடத்தை விதிகள்](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **உரிமம்**. ஒருவேளை மிக முக்கியமாக, ஒரு [உரிமம்](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+இந்த வளங்கள் அனைத்தும் புதிய குழு உறுப்பினர்களுக்கு பயனளிக்கும். உங்கள் குறியீட்டைப் பார்ப்பதற்கு முன்பு புதிய பங்களிப்பாளர்கள் பார்க்கும் விஷயங்கள் பொதுவாக உள்ளன, உங்கள் திட்டம் அவர்கள் தங்கள் நேரத்தை செலவழிக்க சரியான இடம் தானா என்பதைக் கண்டறிய.
+
+✅ ரீட்மே கோப்புகள், அவை தயாரிக்க நேரம் எடுத்துக்கொண்டாலும், பெரும்பாலும் பிஸியான பராமரிப்பாளர்களால் புறக்கணிக்கப்படுகின்றன. குறிப்பாக விளக்கப்பட்ட ஒரு உதாரணத்தை நீங்கள் கண்டுபிடிக்க முடியுமா? குறிப்பு: நீங்கள் முயற்சி செய்ய விரும்பும் சில [நல்ல ரீ.ஈ.டி.எம்.இ.க்களை உருவாக்க உதவும் கருவிகள்](https://www.makeareadme.com/) உள்ளன.
+
+### பணி: சில குறியீட்டை ஒன்றுசேர்
+
+பங்களிப்பு ஆவணங்கள் மக்கள் திட்டத்திற்கு பங்களிக்க உதவுகின்றன. நீங்கள் என்ன வகையான பங்களிப்புகளைத் தேடுகிறீர்கள் மற்றும் செயல்முறை எவ்வாறு செயல்படுகிறது என்பதை இது விளக்குகிறது. பங்களிப்பாளர்கள் கீதுப் மீது உங்கள் ரெப்போபங்களிக்க முடியும் படிகள் ஒரு தொடர் மூலம் செல்ல வேண்டும்:
+
+1. **உங்கள் ரெப்போவை ஃபோர்கிங்** ஒருவேளை நீங்கள் மக்கள் உங்கள் திட்டத்தை _ஃபோர்க்_ வேண்டும். ஃபோர்கிங் என்பது அவர்களின் கிட்ஹப் சுயவிவரத்தில் உங்கள் களஞ்சியத்தின் பிரதியை உருவாக்குவதாகும்.
+1. **குளோன்**. அங்கிருந்து அவர்கள் தங்கள் உள்ளூர் இயந்திரத்திற்கு திட்டத்தை குளோன் செய்வார்கள். 
+1. **ஒரு கிளை உருவாக்க**. நீங்கள் அவர்களின் வேலைக்கு ஒரு _கிளை_ உருவாக்க அவர்களை கேட்க வேண்டும். 
+1. **ஒரு பகுதியில் தங்கள் மாற்றத்தை கவனம் செலுத்தவும்**. பங்களிப்பாளர்களை ஒரு நேரத்தில் ஒரு விஷயத்தில் தங்கள் பங்களிப்புகளை ஒருமுகப்படுத்தும்படி கேளுங்கள் - அந்த வழியில் நீங்கள் அவர்களின் வேலையில் _ஒன்றிணைக்க_ வாய்ப்புகளை அதிகமாக உள்ளது. அவர்கள் ஒரு பிழை சரி எழுத கற்பனை, ஒரு புதிய அம்சம் சேர்க்க, மற்றும் பல சோதனைகள் புதுப்பிக்க - நீங்கள் விரும்பினால் என்ன, அல்லது மட்டுமே 3 வெளியே 2 செயல்படுத்த முடியும், அல்லது 3 மாற்றங்கள் 1?
+
+✅ நல்ல குறியீட்டை எழுதுவதற்கும் அனுப்புவதற்கும் கிளைகள் குறிப்பாக முக்கியமான ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். வழக்குகள் என்ன பயன் என்று நீங்கள் நினைக்கலாம்?
+
+> குறிப்பு, நீங்கள் உலகில் பார்க்க விரும்பும் மாற்றமாக இருங்கள், உங்கள் சொந்த வேலைக்கும் கிளைகளை உருவாக்குங்கள். நீங்கள் செய்யும் எந்தவொரு உறுதிப்படமும் நீங்கள் தற்போது "சரிபார்க்கப்பட்ட" கிளையில் செய்யப்படும். எந்த கிளை என்று பார்க்க `git status` பயன்படுத்தவும்.
+
+பங்களிப்பாளர் பணிப்பாய்வின் மூலம் செல்லலாம். பங்களிப்பாளர் ஏற்கனவே _ஃபோர்க்_ மற்றும் _குளோன்_ ரெப்போவை வைத்திருக்கிறார் என்று வைத்துக்கொள்ளுங்கள், எனவே அவர்கள் தங்கள் உள்ளூர் இயந்திரத்தில் வேலை செய்ய தயாராக ஒரு கிட் ரெப்போவை வைத்திருக்கிறார்கள்:
+
+1. **ஒரு கிளை உருவாக்க**. `git branch` என்ற கட்டளையைப் பயன்படுத்தி, அவர்கள் பங்களிக்க வேண்டிய மாற்றங்களைக் கொண்ட ஒரு கிளையை உருவாக்கவும்:
+
+   ```bash
+   git branch [கிளை பெயர்]
+   ```
+
+1. **வேலை செய்யும் கிளைக்கு மாறவும்**. குறிப்பிட்ட கிளைக்கு மாறி, பணி கோப்பகத்துடன் புதுப்பிக்கவும் `git switch`:
+
+   ```bash
+   git switch [கிளை பெயர்]
+   ```
+
+1. **வேலை செய்யுங்கள்**. இந்த கட்டத்தில் நீங்கள் உங்கள் மாற்றங்களை சேர்க்க விரும்புகிறீர்கள். பின்வரும் கட்டளைகளுடன் அதைப் பற்றி கிட் சொல்ல மறக்க வேண்டாம்:
+
+   ```bash
+   git add .
+   git commit -m "என் மாற்றங்கள்"
+   ```
+
+   உங்கள் நலனுக்காகவும், நீங்கள் உதவி செய்யும் ரெப்போவின் பராமரிப்பாளராகவும், உங்கள் உறுதிக்கு ஒரு நல்ல பெயரைக் கொடுப்பதை உறுதி செய்யுங்கள்.
+
+1.**உங்கள் வேலையை `main` கிளையுடன் இணைக்கவும்**. ஒரு கட்டத்தில் நீங்கள் வேலை செய்து விட்டீர்கள், உங்கள் வேலையை `main` கிளையுடன் இணைக்க விரும்புகிறீர்கள். `main` கிளை இதற்கிடையில் மாறியிருக்கலாம், எனவே பின்வரும் கட்டளைகளுடன் சமீபத்தியதை முதலில் புதுப்பிக்கவும்:
+
+   ```bash
+   git switch main
+   git pull
+
+   ```
+
+   இந்த கட்டத்தில், உங்கள் பணிக்கிளையில் மாற்றங்கள் எளிதாக _இணைவுகள்_ செய்ய முடியாத சூழ்நிலைகளில் ஏதேனும் _இணை_, இருப்பதை உறுதி செய்ய விரும்புகிறீர்கள். எனவே பின்வரும் கட்டளைகளை இயக்கவும்:
+
+   ```bash
+   git switch [கிளை பெயர்]
+   git merge main
+   ```
+
+
+இது உங்கள் கிளையில் `main` இருந்து அனைத்து மாற்றங்களையும் கொண்டு வரும் மற்றும் வட்டம் நீங்கள் தொடர முடியும். இல்லையெனில்,கிட்  _confused_ எங்கே என்று விஎஸ் குறியீடு உங்களுக்கு சொல்லும், மேலும் எந்த உள்ளடக்கம் மிகவும் துல்லியமானது என்று சொல்ல பாதிக்கப்பட்ட கோப்புகளை மாற்றவும்.
+
+1. 1. **உங்கள் வேலையை கிட்ஹப்**க்கு அனுப்பவும். உங்கள் வேலையை கிட்ஹப் க்கு அனுப்புவது என்பது இரண்டு விஷயங்களைக் குறிக்கிறது. உங்கள் கிளையை உங்கள் ரெப்போவுக்குத் தள்ளி, பின்னர் ஒரு பேஆர், புல் கோரிக்கையைத் திறக்கவும்.
+
+   ```bash
+   git push --set-upstream origin [கிளை பெயர்]
+   ```
+   மேலே கட்டளை உங்கள் முட்கரண்டி ரெப்போ கிளை உருவாக்குகிறது.
+
+1. **ஒரு பேஆர்** திறக்கவும். அடுத்து, நீங்கள் ஒரு பேஆர் ஐ திறக்க விரும்புகிறீர்கள். நீங்கள் கிட்ஹப் மீது ஃபோர்க்செய்யப்பட்ட ரெப்போவுக்கு வழிசெலுத்துவதன் மூலம் அதைச் செய்கிறீர்கள். நீங்கள் ஒரு புதிய பேஆர் ஐ உருவாக்க விரும்புகிறீர்களா என்று கேட்கும் கிட்ஹப்பில் ஒரு அறிகுறியைப் பார்ப்பீர்கள், அதை கிளிக் செய்து, செய்தி தலைப்பை மாற்றக்கூடிய ஒரு இடைமுகத்திற்கு நீங்கள் அழைத்துச் செல்லப்படுகிறீர்கள், அதற்கு மிகவும் பொருத்தமான விளக்கத்தை க்கொடுங்கள். இப்போது நீங்கள் ஃபோர்க் செய்த ரெப்போவின் பராமரிப்பாளர் இந்த பேஆர் ஐப் பார்ப்பார், _விரல்கள் கடந்து_ அவர்கள் பாராட்டுவார்கள் மற்றும் உங்கள் பேஆர் ஐ இணைப்பார்கள். நீங்கள் இப்போது ஒரு பங்களிப்பாளராக இருக்கிறீர்கள், நீங்கள் :)
+
+1. **சுத்தம்**. நீங்கள் வெற்றிகரமாக ஒரு பேஆர் ஐ இணைத்த பிறகு _சுத்தம்_ நல்ல நடைமுறையாகக் கருதப்படுகிறது. உங்கள் உள்ளூர் கிளை மற்றும் நீங்கள் கிட்ஹப் க்கு தள்ளிய கிளை இரண்டையும் சுத்தம் செய்ய விரும்புகிறீர்கள். முதலில் பின்வரும் கட்டளையுடன் அதை உள்நாட்டில் நீக்குவோம்: 
+
+   ```bash
+   git branch -d [கிளை பெயர்]
+   ```
+
+   நீங்கள் அடுத்த ஃபோர்க்செய்யப்பட்ட ரெப்போவிற்கு கிட்ஹப் பக்கம் செல்வதை உறுதி செய்து, நீங்கள் அதை தள்ளிய தொலைதூர கிளையை அகற்றவும்.
+
+`புல் கோரிக்கை` ஒரு முட்டாள்தனமான சொல் போல் தெரிகிறது, ஏனென்றால் உண்மையில் நீங்கள் திட்டத்தில் உங்கள் மாற்றங்களை தள்ள விரும்புகிறீர்கள். ஆனால் பராமரிப்பாளர் (திட்ட உரிமையாளர்) அல்லது முக்கிய குழு திட்டத்தின் "முக்கிய" கிளையுடன் இணைப்பதற்கு முன் உங்கள் மாற்றங்களை கருத்தில் கொள்ள வேண்டும், எனவே நீங்கள் உண்மையில் ஒரு பராமரிப்பவரிடமிருந்து ஒரு மாற்ற முடிவைக் கோருகிறீர்கள்.  
+
+ஒரு இழு கோரிக்கை மதிப்புரைகள், கருத்துக்கள், ஒருங்கிணைந்த சோதனைகள் மற்றும் பலவற்றுடன் ஒரு கிளையில் அறிமுகப்படுத்தப்பட்ட வேறுபாடுகளை ஒப்பிட்டு விவாதிக்க ும் இடம். ஒரு நல்ல இழுப்பு கோரிக்கை ஒரு ஒப்புக்கொள்ளும் செய்தி போன்ற கிட்டத்தட்ட அதே விதிகளைப் பின்பற்றுகிறது. எடுத்துக்காட்டாக, உங்கள் வேலை ஒரு சிக்கலைத் சரிசெய்யும்போது, சிக்கல் டிராக்கரில் உள்ள ஒரு பிரச்சினைக்கு நீங்கள் ஒரு குறிப்பைச் சேர்க்கலாம். இது ஒரு `#` பயன்படுத்தி செய்யப்படுகிறது, அதைத் தொடர்ந்து உங்கள் பிரச்சினையின் எண்ணிக்கை. உதாரணமாக `#97`.
+
+🤞அனைத்து காசோலைகளும் கடந்து, திட்ட உரிமையாளர்(கள்) உங்கள் மாற்றங்களை திட்டத்தில் இணைக்க வேண்டும் என்று விரல்கள் கடந்து விட்டன🤞
+
+கிட்ஹப்பில் உள்ள தொடர்புடைய தொலைநிலை கிளையிலிருந்து அனைத்து புதிய ஒப்புக்களுடன் உங்கள் தற்போதைய உள்ளூர் பணிகிளையைப் புதுப்பிக்கவும்:
+
+`git pull`
+
+## திறந்த மூலத்திற்கு எவ்வாறு பங்களிக்க வேண்டும்
+
+முதலில், உங்களுக்கு ஆர்வமுள்ள கிட்ஹப்பில் ஒரு களஞ்சியத்தை (அல்லது **ரெப்போ**) காணலாம், அதற்கு நீங்கள் ஒரு மாற்றத்தை பங்களிக்க விரும்புகிறீர்கள். அதன் உள்ளடக்கங்களை உங்கள் இயந்திரத்தில் நகலெடுக்க விரும்புகிறீர்கள்..
+
+✅  'தொடக்க நட்பு' ரெப்போஸைக் கண்டுபிடிக்க ஒரு நல்ல வழி ['நல்ல முதல் பிரச்சினை' என்ற குறிச்சொல்மூலம் தேடுவதாகும்](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![உள்ளூரில் ஒரு ரெப்போவை நகலெடுக்கவும்](../images/clone_repo.png)
+
+குறியீட்டை நகலெடுக்க பல வழிகள் உள்ளன. ஒரு வழி களஞ்சியத்தின் உள்ளடக்கங்களை "குளோன்" செய்வது, HTTPஎஸ், எஸ்எஸ்ஹெச், அல்லது கிட்ஹப் சிஎல்ஐ (கட்டளை வரி இடைமுகம்) பயன்படுத்தி. 
+
+உங்கள் முனையத்தைத் திறந்து களஞ்சியத்தை இவ்வாறு குளோன் செய்யுங்கள்:
+`git clone https://github.com/புரொஜக்ட்யுஆர்எல்`
+
+திட்டத்தில் வேலை செய்ய, சரியான கோப்புறைக்கு மாறவும்:
+`cd புரொஜக்ட்யுஆர்எல்`
+
+நீங்கள் [கோட்ஸ்பேஸ்](https://github.com/features/codespaces), கிட்ஹப்பின் உட்பொதிக்கப்பட்ட குறியீடு ஆசிரியர் / கிளவுட் மேம்பாட்டு சூழல் அல்லது [கிட்ஹப் டெஸ்க்டாப்](https://desktop.github.com/) பயன்படுத்தி முழு திட்டத்தையும் திறக்கலாம்
+
+இறுதியாக, நீங்கள் ஒரு ஜிப் செய்யப்பட்ட கோப்புறையில் குறியீட்டைப் பதிவிறக்கலாம்.
+
+### கிட்ஹப் பற்றி இன்னும் சில சுவாரஸ்யமான விஷயங்கள்
+
+நீங்கள் கீதுப்-இல் உள்ள எந்தவொரு பொது களஞ்சியத்தையும் நட்சத்திர, பார்வை மற்றும் /அல்லது "முட்கரண்டி" செய்யலாம். மேல்-வலது கீழ்-கீழ் மெனுவில் உங்கள் நட்சத்திரகளஞ்சியங்களை நீங்கள் காணலாம். இது புக்மார்க்கிங் போன்றது, ஆனால் குறியீட்டுக்கு.
+
+திட்டங்கள் ஒரு சிக்கல் டிராக்கர் வேண்டும், பெரும்பாலும் "சிக்கல்கள்" தாவலில் கிட்ஹப் இல்லையெனில் சுட்டிக்காட்டப்படாவிட்டால், அங்கு மக்கள் திட்டம் தொடர்பான சிக்கல்களைவிவாதிக்கிறார்கள். மற்றும் புல் கோரிக்கைகள் தாவல் மக்கள் விவாதிக்க மற்றும் முன்னேற்றத்தில் இருக்கும் மாற்றங்களை மதிப்பாய்வு எங்கே உள்ளது.
+
+திட்டங்கள் மன்றங்கள், அஞ்சல் பட்டியல்கள் அல்லது ஸ்லாக், டிஸ்ட்டர் அல்லது ஐஆர்சி போன்ற அரட்டை சேனல்களிலும் விவாதம் நடத்தலாம்.
+
+✅ உங்கள் புதிய கிட்ஹப் ரெப்போவைச் சுற்றி பாருங்கள் மற்றும் சில விஷயங்களை முயற்சிக்கவும், எடிட்டிங் அமைப்புகள், உங்கள் ரெப்போவில் தகவலைச் சேர்த்தல், மற்றும் ஒரு திட்டத்தை உருவாக்குதல் (ஒரு கன்பன் பலகை போன்றது). நீங்கள் செய்ய முடியும் நிறைய இருக்கிறது!
+
+---
+
+## 🚀 அறைகூவல் 
+
+ஒருவருக்கொருவர் குறியீட்டில் வேலை செய்ய ஒரு நண்பருடன் ஜோடி சேரவும். ஒரு திட்டத்தை கூட்டாக உருவாக்கவும், ஃபோர்க் குறியீடு, கிளைகளை உருவாக்கவும், மாற்றங்களை இணைக்கவும்.
+
+## விரிவுரைக்குப் பிந்தைய வினாடி வினா
+[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=ta)
+
+## ஆய்வு & சுய ஆய்வு
+
+மேலும் வாசிக்க [திறந்த மூல மென்பொருளுக்கு பங்களிப்பு](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[கிட் ஏமாற்றுதாள்](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+பயிற்சி, பயிற்சி, பயிற்சி. கிட்ஹப் [lab.github.com](https://lab.github.com/) வழியாக கிடைக்கும் சிறந்த கற்றல் பாதைகளைக் கொண்டுள்ளது:
+
+- [கிது முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github)
+
+
+நீங்கள் இன்னும் மேம்பட்ட ஆய்வகங்கள் காண்பீர்கள். 
+
+##  வகுத்தமைத்தல் 
+
+முழுமையான [கிட்ஹப் பயிற்சி ஆய்வகத்தில் முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md

@@ -0,0 +1,318 @@
+# GitHub 介绍
+
+这节课涵盖了 GitHub 的基础知识，这是一个可以用来存放代码和管理代码变更的平台。
+
+![Intro to GitHub](/sketchnotes/webdev101-github.png)
+> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 课前小测
+[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=zh_cn)
+
+## 大纲
+
+这节课我们将会介绍：
+
+- 在你的电脑上追踪你的工作
+- 与他人协同开发项目
+- 如何参与开源软件贡献
+
+### 开始之前
+
+开始之前，你需要确保安装了 Git，在终端（译注：即上一节课中介绍的命令行）中输入：
+`git --version`
+
+如果没有安装 Git，请先[下载并安装 Git](https://git-scm.com/downloads)。然后用如下命令设置你的本地 Git 使用者配置文件：
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+要检查 Git 使用者是否配置完成，可以输入：
+`git config --list`
+
+你还需要一个 GitHub 账户，一个代码编辑器（比如 Visual Studio Code），并且要打开你的终端（或者其他命令行）。
+
+如果你没有现成的 Github 账号，去 [github.com](https://github.com/) 创建一个。如果已经有账号，就登录进去并且完成个人资料的配置。
+
+✅ GitHub 并不是世界上唯一的代码仓库，但是最知名的。
+
+### 课前准备
+
+你需要在本地（你的笔记本或 PC）创建一个项目文件夹，还需要在 GitHub 上创建一个公开的仓库（译注：后文会有指引），作为本节课中向其他人的项目提贡献的示例。
+
+---
+
+## 代码管理
+
+假如你在本地有一个代码项目的文件夹，你希望开始使用 Git （版本控制系统）来追踪你的进度。有的人将使用 Git 比作给未来的你自己写一封情书，在数日、数周乃至数月后阅读你的提交信息（commit messages）时，你就可以想起你做出某个决定的原因，或者回滚（rollback）一次变更 —— 前提是你写了不错的提交信息。
+
+### 任务：创建仓库并提交代码
+
+1. **在 GitHub 上创建仓库**。进入 GitHub.com，在 “Repositories” 标签或者右上角导航栏找到 **New repository** 按钮。
+
+   1. 给你的仓库取个名字；
+   1. 点击 **Create repository**。
+
+1. **前往你的工作目录**。在你的终端中，通过输入下方命令切换到你希望开始追踪的文件夹（即目录）：
+
+   ```bash
+   cd [文件名称/目录路径]
+   ```
+
+1. **初始化一个 Git 仓库**。在你的项目下输入：
+
+   ```bash
+   git init
+   ```
+
+1. **检查状态**。要检查你的仓库状态，输入：
+
+   ```bash
+   git status
+   ```
+
+   输出看起来将会像这样：
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   一般来说 `git status` 命令会告诉你诸如什么文件已经 _被保存到_ 仓库内或者有一些你可能想要保留的变更之类的事。
+
+1. **追踪所有文件**
+   这个操作也叫做暂存（stage）文件或者将文件添加到暂存区（staging area）。
+
+   ```bash
+   git add .
+   ```
+
+   `git add` 命令加上 `.` 参数将会追踪你的所有文件和变更。
+
+1. **只追踪选定的文件**
+
+   ```bash
+   git add [文件或文件夹名]
+   ```
+
+   如果你不想一次性将所有文件添加到暂存区，可以用这个命令仅仅添加选定的文件。
+
+1. **取消所有文件的追踪**
+
+   ```bash
+   git reset
+   ```
+
+   这条命令可以帮我们取消暂存（unstage）所有文件。
+
+1. **取消特定文件的追踪**
+
+   ```bash
+   git reset [文件或文件夹名]
+   ```
+
+   如果你在下次提交中不希望提交某个已经暂存的文件，可以用这条命令取消它的暂存。
+
+1. **保存你的工作**。现在你应该已经将文件添加到了所谓 _暂存区_ 中，这是 Git 追踪你的文件的地方。为了永久地保存变更，你需要 _提交（commit）_ 这些文件。你可以用 `git commit` 命令创建一次 _提交_。一次 _提交_ 代表你的仓库历史中的一个存档点。输入下方命令来创建一次 _提交_：
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   这会提交你暂存区中的所有文件，并带上一条提交信息 —— “first commit”。在以后的提交信息中你会想要加入更加准确的描述，比如一些表示你这次变更的类型的信息。
+
+1. **将你的本地仓库连接到 GitHub**。现在 Git 仓库已经能在你的本地机器上正常运作，但是有时候你会想要将你的文件备份到别处，或者希望邀请其他人来一起参与这个仓库的协作。GitHub 就是一个可以满足你要求的好地方。我们此前已经在 GitHub 上创建了一个仓库，现在只需要将本地 Git 仓库连接到 GitHub 就可以了，用 `git remote add` 命令就可以做到。输入下面的命令：
+
+   > 注意，在你输入命令前，需要前往你的 GitHub 仓库而页面来找到仓库的地址（URL），用它来替换命令中 `username/repository_name` 这一部分。
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   这会创建一个被命名为 “origin” 的 _远程仓库位置（remote）_，也可以理解为一个连接，指向你早先创建的 GitHub 仓库。
+
+1. **将本地文件上传至 GitHub**。现在你已经创建了一个本地仓库和 GitHub 仓库间的 _连接_。让我们通过 `git push` 命令将这些文件上传至 GitHub，就像这样：
+
+   ```bash
+   git push -u origin main
+   ```
+
+   这样就会把你的提交上传到 GitHub 上你的 “main” 分支了。
+
+1. **添加更多的变更**。如果你想继续搞点变更并且将它们传到 GitHub 上，你只需要使用下面的三行命令：
+
+   ```bash
+   git add .
+   git commit -m "在这里填写你的提交信息"
+   git push
+   ```
+
+   > 提示，你可能还需要建立一个 `.gitignore` 文件来防止 Git 追踪一些文件并且让它们不会被上传到 GitHub，比如一些你写在本地仓库但并不想放到公开仓库的笔记文件。你可以在 [.gitignore templates](https://github.com/github/gitignore) 找到一些现成的 `.gitignore` 文件模板。
+
+#### 提交信息（Commit Messages）
+
+一条好的 Git 提交信息标题（subject line）可以理解为下方句子的填空：
+如果生效，这次提交将会 <你的提交信息标题>
+
+在标题内，使用祈使语气和现在时态，即使用 “change” 而非 “changed” 或 “changes”。 
+同理，在正文（body，可选）中也要用祈使语气和现在时态。正文中需要包括更改的动机，并对比与更改前后行为的变化。确保你说明的是`为什么`，而不是`怎么做`。
+
+✅ 花几分钟逛逛 GitHub。你能找到感觉非常棒的提交信息吗？你可以找到非常简洁的提交信息吗？你认为在一条提交信息中，传达什么信息是最重要和有用的？
+
+### 任务：协作
+
+将项目放到 GitHub 的主要原因是让和其他开发者协作开发成为可能。
+
+## 和其他人协作开发项目
+
+在你的仓库中，前往 `Insights > Community` 来查看你的项目和推荐的社区规范的对比。
+
+   这里有一些你可以改进你的项目仓库的点：
+   - **项目描述（Description）**。你为你的项目添加了描述吗？
+   - **README**。你有添加 README 吗？GitHub 提供了撰写 [README](https://docs.github.com/articles/about-readmes/) 的指南。
+   - **贡献指南（Contributing guideline）**。你的项目是否有[贡献指南](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)？
+   - **行为准则（Code of Conduct）**。添加一份 [行为准则](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)
+   - **开源协议（License）**。或许是最重要的，添加一个[开源协议](https://docs.github.com/articles/adding-a-license-to-a-repository/)
+
+
+所有这些资源对于新加入的团队成员都是很有好处的，这些一般是新的贡献者在看你的代码前会更先去看的东西，以确认你的项目是否值得他们在这上面花费时间。
+
+✅ 尽管很多人都准备了 README 文件，但常常会因为太忙而疏于维护。你能找到一个这样的例子吗？注：这里有一些可以[用于创建优秀的 README 的工具](https://www.makeareadme.com/)，你或许愿意试试。
+
+### 任务：合并（Merge）一些代码
+
+贡献文档帮助人们对项目做贡献，其中说明了你正需要什么样的贡献以及贡献的过程该是怎样的。贡献者需要完成一系列步骤才能在 GitHub 上参与你项目的贡献：
+
+
+1. **复刻（Fork）你的仓库**。你可能希望人们 _复刻_ 你的项目。复刻意味着在他们自己的 GitHub 账户下创建你的项目的一份副本。
+1. **克隆（Clone）**。在这里他们将会将项目克隆到他们的本地机器上。
+1. **创建一个分支（Branch）**。你可能希望他们能创建一个 _分支_ 来进行他们的工作。
+1. **集中进行一个区域的修改**。要求贡献者每次贡献只专注做一件事，这样你才更可能 _合并_ 他们的工作。想象一下如果他们修了一个 BUG，添加了一个新特性，然后更新了几个测试，而你其实只想要其中的一个或两个更改时该怎么办？
+
+✅ 想一想分支在什么情况下对于编写和发布优质的代码非常重要？你能想到哪些使用实例？
+
+> 注意，要以身作则，对你自己的工作也要创建分支。任何提交都需要在当前“检出（checked out）”的分支上进行。使用 `git status` 来查看是哪一个分支。
+
+让我们走一遍贡献者的工作流程。假设贡献者已经 _复刻_ 并 _克隆_ 了仓库，他们在本地机器已经有了一个可以工作的仓库：
+
+1. **创建一个分支**。使用命令 `git branch` 来创建一个他们希望用来包含计划进行的变更的分支：
+
+   ```bash
+   git branch [分支名]
+   ```
+
+1. **切换到工作分支**。使用 `git switch` 来切换到指定分支并且更新工作目录中的文件：
+
+   ```bash
+   git switch [分支名]
+   ```
+
+1. **干活**。现在你可以添加你的变更了，别忘了用下面的命令告诉 Git 你所做的工作：
+
+   ```bash
+   git add .
+   git commit -m "变更内容"
+   ```
+
+   确保你的提交有一个好名字，不论是对你自己还是你正在帮助的仓库维护者来说都有好处。
+
+1. **将你的工作合入 `main` 分支**。在完成工作后，你打算将你的工作和 `main` 分支上的合并。`main` 分支可能同时有了一些新的变更，所以要先用以下命令确保将其更新至最新版本：
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   这时你想确认是否存在 _冲突（conflicts）_，即 Git 没法简单地将这些变化 _合入_ 你的分支的情况。为此运行下面的命令：
+
+   ```bash
+   git switch [分支名]
+   git merge main
+   ```
+
+   这将会把所有 `main` 分支上的变更带入到你的分支上。运气好的话一切都会自动搞定，否则 VS Code 会告诉你哪些文件 Git _不确定_ 该如何合并，你只需要手动修改对应文件来解决冲突即可。
+
+1. **将你的工作上传至 GitHub**。将你的工作上传至 GitHub 意味着两件事：把你的分支上传到你自己的仓库，然后开启一个 PR（Pull Request）：
+
+   ```bash
+   git push --set-upstream origin [分支名]
+   ```
+
+   上述命令在你复刻的仓库中创建了一个分支。
+
+1. **开启一个 PR**。接下来，你打算开启一个 PR。前往 GitHub 上你打算贡献的仓库，你将会看到一个消息条询问你是否想要创建一个新的 PR，点击后即可进入创建 PR 的界面。在这里你可以更改提交标题，给出更准确的描述。创建 PR 后，仓库维护者将会看到这个，如果 _一切顺利_ 的话他们会表示感谢并且 _合并_ 你的 PR。你现在就是一位贡献者啦！ :)
+
+1. **清理**。成功合入一个 PR 后，做做 _清理_ 是一个好习惯。你会想要清理本地和你上传到 GitHub 的分支。首先让我们通过下面的命令来删除本地的分支：
+
+   ```bash
+   git branch -d [分支名]
+   ```
+
+   接下来请确保前往 GitHub 中对应仓库的页面并删除你刚才上传的分支。
+
+`Pull request` 这个术语看起来有些憨，因为你确实打算把你的变更提交到这个项目中。但是在将你的变更合入到项目的 `main` 分支前，维护者（项目拥有者）或者核心团队需要考虑和检查你的变更，这意味着你实际上是在请求（request）维护者的变更决定。
+
+Pull Request 是一个可以用来比较和讨论一个分支引入的改动的地方，并有代码审查、评论、集成测试等功能。优质的 Pull Request 严格遵照与提交信息相同的规则。如果你的工作是为了修复一个 Issues 面板中的事项，你可以在 PR 中提及这个事项。具体做法是写一个 `#` 加上事项的编号，比如 `#97`。
+
+🤞如果一切顺利，所有的检查都通过后项目拥有者就会将你的变更合入项目🤞
+
+使用这个命令即可将 GitHub 上对应远程分支的所有新提交更新到当前本地的工作分支上：
+
+`git pull`
+
+## 如何参与开源贡献
+
+首先，让我们在 GitHub 上找到一个你感兴趣且愿意参与贡献的仓库（**repo**），你会复制一份它的内容到你的机器上。
+
+✅ 一个寻找对入门者友好的仓库的好办法是[搜索 “good-first-issue” 标签](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
+
+![Copy a repo locally](../images/clone_repo.png)
+
+有很多种复制代码的方法，其中一种就是“克隆”仓库的内容，可以用 HTTPS、SSH 或者 GitHub CLI（Command Line Interface）来做到。
+
+打开你的终端并且用类似下方的命令来克隆仓库：
+`git clone https://github.com/ProjectURL`
+
+切换到正确的工作目录：
+`cd ProjectURL`
+
+你也可以用 [Codespaces](https://github.com/features/codespaces) 来打开整个项目，这是 GitHub 内置的代码编辑器和云开发环境，或者用 [GitHub Desktop](https://desktop.github.com/)。
+
+当然，你也可以直接下载代码的压缩包。
+
+### 更多 GitHub 的有趣小知识
+
+你可以收藏（star）、关注（watch）和复刻（fork）GitHub 上的任何公开仓库。可以在右上角的下拉菜单找到你收藏的仓库，这就像书签一样，但收藏的是代码。
+
+项目都有一个事项面板（issue tracker），用于让人们讨论和这个项目相关的事项，事项面板基本都在 GitHub 的 “Issues” 标签页中，偶尔也会指明在其他地方。而 “Pull Requests” 标签页则是人们讨论和检查正在进行的变更的地方。
+
+项目也可能会在论坛、邮件列表或者如 Slack、Discord、IRC 这样的聊天频道进行讨论。
+
+✅ 看看你新建立的 GitHub 仓库，尝试做一些其他事，比如编辑设置、为仓库增加信息、创建一个 Project（类似看板），有很多可以尝试的东西！
+
+---
+
+## 🚀 挑战
+
+找朋友一起编辑彼此的代码。协作创建一个项目、复刻代码、创建分支，然后合并变更。
+
+## 课后小测
+[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=zh_cn)
+
+## 复习 & 自学
+
+了解更多 [如何提交贡献](https://opensource.guide/zh-hans/how-to-contribute/#%E5%A6%82%E4%BD%95%E6%8F%90%E4%BA%A4%E8%B4%A1%E7%8C%AE)。
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/)。
+
+练习，练习，再练习。GitHub 在 [lab.github.com](https://lab.github.com/) 提供了很棒的学习路径：
+
+- [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github)
+
+你还可以在上面找到更多高阶的实验内容。
+
+## 作业 
+
+完成 [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md

@@ -0,0 +1,319 @@
+# GitHub 簡介
+
+這堂課程講述一個提供加設與管理程式碼的平台 ── Github的基本功能。
+
+![GitHub 簡介](/sketchnotes/webdev101-github.png)
+> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=zh_tw)
+
+## 大綱
+
+在這堂課中，包含：
+
+- 追蹤裝置上的工作專案
+- 與其他人共同開發專案
+- 如何貢獻網路上的開源軟體
+
+### 開始之前
+
+在你開始課程之前，你需要安裝 Git 這套套件。在你的終端機上輸入：
+`git --version`
+
+若你的裝置上沒有安裝 Git，[請下載並安裝 Git](https://git-scm.com/downloads)。 安裝完之後，請設定裝置本地 Git 的使用者設定。
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+要確認 Git 使用者設定是否完成，你可以輸入：
+`git config --list`
+
+此外，你需要一組 GitHub 的帳戶、一款文字編輯器 (如：Visual Studio Code) 與你的終端機 (或 command prompt)。
+
+若你缺少 GitHub 帳戶，請前往 [github.com](https://github.com/)建立並登入一組帳戶，遵循指示完成資料的填寫。 
+
+✅ GitHub 不是唯一的程式碼數據庫，但 GitHub 是家喻戶曉的。
+
+### 課前準備
+
+你需要在裝置(筆電或電腦)上建立程式專案的資料夾，與 GitHub 公共的數據庫(Public Repository)。之後的例子會使用到此公共數據庫來與他人分享程式碼。
+
+---
+
+## 程式碼管理
+
+假設你的本地端資料夾存放著一些程式專案，你想利用 Git 來作專案追蹤與版本控制，甚至是對未來的你寫一封情書。在一天、一週甚至是一個月後閱讀你的提交紀錄，了解當初你的決定，回想之前的更動。前提是當初你有寫一條完整的提交紀錄。
+
+### 課題：建立數據庫並提交程式碼
+
+1. **在 GitHub 上建立數據庫** 在 GitHub.com 上，在 "Repositories" 的標籤或導航欄的右上方，找到 **new repo** 的按鈕。
+
+   1. 為你的數據庫資料夾取個名字。
+   1. 選擇 **建立數據庫(create repository)**.
+
+1. **調查本地的專案資料夾** 在終端機中開啟儲存程式碼的資料夾，在你想追蹤的目錄下輸入：
+
+   ```bash
+   cd [資料夾名稱]
+   ```
+
+1. **初始化 git 數據庫(repo)** 在目錄下輸入：
+
+   ```bash
+   git init
+   ```
+
+1. **檢查狀態** 若想檢查目前數據庫的狀態，輸入：
+
+   ```bash
+   git status
+   ```
+
+   它會輸出類似以下的訊息：
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   指令 `git status` 會回報那些檔案已經準備 _被存到_ 數據庫或是被更動過但不想更新上去。
+
+1. **開始追蹤所有檔案**
+   新增檔案到暫存區(staging area)。
+
+   ```bash
+   git add .
+   ```
+
+   `git add` 加上路徑 `.` 表示追蹤該路徑下所有的檔案。 
+
+1. **只追蹤選擇的檔案**
+
+   ```bash
+   git add [檔案或資料夾路徑]
+   ```
+
+   上述指令幫助你只追蹤被選取的檔案，允許使用者分批提交。
+
+1. **取消追蹤所有檔案**
+
+   ```bash
+   git reset
+   ```
+
+   上述指令能取消追蹤(unstage)暫存區的檔案。
+
+1. **取消追蹤特定的檔案**
+
+   ```bash
+   git reset [檔案或資料夾路徑]
+   ```
+
+   上述指令只取消追蹤單一檔案，在下一次提交時不被圈選在裡面。
+
+1. **保存工作狀態** 現在，已經有一些檔案被標記在 _暫存區(staging area)_。 Git 會追蹤區域內的檔案。若要保存這些檔案的狀態，你需要 _提交(commit)_ 這些檔案。 _提交_ 會記錄當下數據庫中檔案的狀態到歷史紀錄中。 你需要指令`git commit` 完成這項工作。
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   這會提交暫存區內的檔案，"first commit"即提交紀錄。提交紀錄最好能識別出這次的提交主要做了那些更動。
+
+1. **連接本地數據庫到 GitHub 遠端數據庫** 現在 Git 數據庫已經成功運行在你的本地裝置上，但有時候你希望能將檔案備份到其他地方，或是邀請他人參與這項程式專案。 GitHub 便是一個好地方。先前我們已經建立遠端數據庫在 GitHub 上，現在我們只要連接本地數據庫到 GitHub上。指令 `git remote add` 能完成這項課題：
+
+   > 注意，在輸入指令前，你需要取得 GitHub 遠端數據庫的 URL 位置。請將下列的 `repository_name` 替換為你的遠端數據庫路徑。
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   這會在 GitHub 遠端數據庫上建立一個名叫 "origin" 的 _遠端位置(remote)_ ，或稱 _連接(connection)_。
+
+1. **上傳本地檔案到 GitHub** 現在已經建好了遠端與本地的 _連接_。 利用指令 `git push` 可以將本地檔案上傳到遠端數據庫當中： 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   所有的提交都會加到 GitHub 上 "main" 的分支當中。
+
+1. **增加更多的更動** 若之後再對程式碼有所更動、提交並上傳到 GitHub 上，只要輸入：
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > 提示：建立 `.gitignore` 檔案可以讓你自動排除的特定檔案項目不被 GitHub 追蹤。好比是有一個在同一個目錄下的筆記檔不想被上傳到遠端數據庫。以下是 `.gitignore` 的參考版型： [.gitignore 參考版型](https://github.com/github/gitignore)。
+
+#### 提交紀錄(Commit Messages)
+
+一條好的 Git 提交標題行最好滿足下列條件：
+提交完後，提交紀錄會顯示 <你的標題>
+
+標題使用祈使語句，如使用 "change" 而非 "changed" 或 "changes"。
+同理地，內文(選擇性)也使用祈使語句。內文須包含改動的動機與改動前後的差異。你需要解釋「為什麼改」而非「怎麼改」。
+
+✅ 花點時間在 GitHub 上閒晃。你能找到很棒的提交紀錄嗎? 你能找到簡潔的提交紀錄嗎? 哪些資訊是你認為一個提交紀錄要有的重要資訊?
+
+### 課題：多人合作
+
+另一個將專案上傳到 GitHub 的主要原因是讓其他開發者能參與其中。
+
+## 與其他人共同開發專案
+
+在你的遠端資料庫中，前往 `Insights > Community` 來對比你的專案與其他推薦社群專案。
+
+   以下是一些你的 GitHub 數據庫需要精進的地方：
+   - **專案描述(Description)** 你有為你的專案新增描述嗎?
+   - **README** 你有新增 README 嗎? GitHub 提供編寫 README 的指引與參考： [README](https://docs.github.com/articles/about-readmes/)
+   - **開發指引(Contributing guideline)** 你的專案內有[開發指引](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)嗎?
+   - **行為準則(Code of Conduct)** [行為準則](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)
+   - **授權條款License** 這或許是最重要的：[授權條款](https://docs.github.com/articles/adding-a-license-to-a-repository/)
+
+
+這些資源對剛加入到專案的新成員有所幫助。這些是新的合作夥伴比看程式碼還優先查詢的地方。完善它們能有效縮減他人消化的時間。
+
+✅ README 檔，雖然多數人都會配置，但忙碌的開發者都會疏於管理。 你能在社群中找到相關的例子嗎? 這邊有[關於建立 READMEs 的有利工具](https://www.makeareadme.com/)可以嘗試。
+
+### 課題：合併程式碼
+
+開發指引文件幫助他人了解如何共同開發專案。它提供專案需要被貢獻的部分與該如何運作。共同開發者需要經過下列步驟來與他人在 GitHub 共同開發專案：
+
+1. **分叉(Fork)專案** 你或許希望別人能 _分叉(fork)_ 你的專案。 分叉代表別人建立一份你的專案副本到他人的 GitHub 數據庫中。
+1. **複製(Clone)** 複製專案到他人的本地裝置中。
+1. **建立分支(branch)** 依照工作需求建立 _分支(branch)_。 
+1. **專注在他人投入的工作範圍** 要求他人只專注在單一課題上，這樣能提升他們工作 _合併(merge)_ 的機會。想像他們在修正錯誤，同時又新增新功能、更新測試機制......這時如果你只想合併其中的一個、或者是兩個功能呢? 
+
+✅ 想像一個情況：一個重要的分支是編輯與分享的主軸，它能被如何應用?
+
+> 注意，在做更動前，記得建立新的分支。任何提交都會在你所在的分支上，指令 `git status` 可以檢查你現在所在的分支。
+
+現在，我們以共同開發者的角度來看。假設開發者已經 _分支_ 且 _複製_ 了他人的數據庫到自己的 Git 數據庫上，準備開始編輯檔案：
+
+1. **建立新的分支** 利用指令 `git branch` 來建立新的分支，只做相關的工作改動。
+
+   ```bash
+   git branch [分支名稱]
+   ```
+
+1. **切換到該工作分支** 使用指令 `git switch` 來切換到特定分支，更新分支的檔案狀態：
+
+   ```bash
+   git switch [分支名稱]
+   ```
+
+1. **程式設計** 記得追蹤你所更改的地方，利用下列的指令來告訴 Git：
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   請確保提交都有適當的名稱，對管理者與你自己都有好處。
+
+1. **將工作分支與 `main` 分支進行合併** 當工作完成時，你會需要將工作分支與 `main` 分支進行合併。 `main` 分支可能會被他人更新，在合併之前記得更新主分支：
+
+   ```bash
+   git switch main
+   git pull
+   ```
+
+   這項步驟可能會面臨到 _衝突(conflicts)_，代表 Git 無法將本地的更動作 _合併(combine)_ 。此時你需要執行下列的指令：
+
+   ```bash
+   git switch [分支名稱]
+   git merge main
+   ```
+
+   這會將所有 `main` 分支的改動加入到你的本地目錄中。若出現狀況，VS Code會告訴你 Git 會對衝突的檔案感到 _困惑(confused)_， 你需要判斷哪一項檔案或程式碼才是最適當的選擇。
+
+1. **將你的成果上傳到 GitHub** 這代表著兩件事：將分支推到你的遠端數據庫以及準備建立 Pull Request(PR)。
+
+   ```bash
+   git push --set-upstream origin [分支名稱]
+   ```
+
+   上述的指令會在分叉的數據庫中新增分支。
+
+1. **建立 PR** 藉由造訪分叉的數據庫中建立 PR，GitHub 會指示你是否要建立 PR，之後要填寫提交紀錄以及編寫詳細的說明。讓管理者了解你做了哪些更動並進行 _交叉比對(fingers crossed)_。 他們會感激你的貢獻並 _合併(merge)_ 你的 PR。完成這步後，你就成為了專案貢獻者，恭喜！
+
+1. **清理專案** 在 PR 被成功合併後， _清除專案(clean up)_ 會是一個好習慣。 你需要清除你的本地分支以及你的遠端數據庫分支。首先，你可以利用下列的指令清除本地分支： 
+
+   ```bash
+   git branch -d [分支名稱]
+   ```
+
+   之後，請確保在 GitHub 頁面上刪除遠端分支。
+
+`Pull request` 要求更新更動到「自己」的專案數據庫，這看起來很蠢。但管理者與核心組員必須謹慎地考量你的更動才能合併到專案的主分支中。這便是向管理者請求上傳許可。
+
+一個 PR 提供比對以及討論的地方，解釋分支的意義、確認程式的合理性、留言與測試……等等。一個好的 PR 必須參照前述所說的提交紀錄準則。若你的 PR 有解決特定的 issue，記得標記在 PR 當中。使用 `#` 接在數字前面來標記 issue 編號，如 `#97`。
+
+🤞 交叉比對每個程式環節都正確無誤後，專案管理者才合併你所作的更動 🤞
+
+若要從 GitHub 遠端數據庫更新到目前的本地工作分支，使用：
+
+`git pull`
+
+## 如何貢獻網路上的開源軟體
+
+首先，尋找一個你感興趣的數據庫，你會複製一份副本到自己的裝置上。
+
+✅ 對新手而言，尋找「適合新手」的數據庫可以[搜尋 'good-first-issue' 標籤](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
+
+![複製數據庫到本地](../images/clone_repo.png)
+
+有許多方式來複製數據庫。 一種是利用 "clone" 整個數據庫的內容。可以使用 HTTPS、SSH 或是 GitHub CLI (Command Line Interface)。 
+
+打開終端機並輸入下列指令來複製數據庫：
+`git clone https://github.com/ProjectURL`
+
+複製完後記得切換到正確的資料夾當中：
+`cd ProjectURL`
+
+你也可以利用[Codespaces](https://github.com/features/codespaces)來打開專案，一款嵌入在 GitHub 中的雲端開發環境，或是使用[GitHub Desktop](https://desktop.github.com/)。
+
+最後，你也可以下載數據庫的壓縮檔。
+
+### 有關 GitHub 的小知識
+
+你可以為別人打星星(star)、追蹤(watch)或分叉(fork)任何一個 GitHub 上的共享數據庫。打上星星的數據庫會出現在右上方的導航欄中。就像是書籤，但是是給程式碼用的。
+
+專案內會有 issue 追蹤器。大多數的 issue 會在 GitHub "Issue" 的標籤內(有些Issue會由作者另外說明)，供大家進行討論。 Pull Requests 標籤內會有正在討論與審核的程式更動。
+
+專案也會有討論區、寄信功能以及聊天室如 Slack、Discord 或 IRC。
+
+✅ 花點時間觀察你的新專案，試著更新設定、新增描述、或架構成一個大型專案(像個大看板一樣！)。你可以創造出任何東西！
+
+---
+
+## 🚀 挑戰
+
+找朋友一起編輯彼此的程式。共同建立一項專案、分叉程式、建立分支、合併更動。
+
+## 課後測驗
+[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=zh_tw)
+
+## 複習與自學
+
+了解更多：
+
+[貢獻開源軟體](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/)
+
+練習，練習，再練習！ GitHub 有提供很好的學習管道：[lab.github.com](https://lab.github.com/)
+
+- [第一週在 GitHub 上](https://lab.github.com/githubtraining/first-week-on-github)
+
+你能找到更資深的實驗內容。 
+
+## 作業
+
+完成[第一週在 GitHub 上](https://lab.github.com/githubtraining/first-week-on-github)

1-getting-started-lessons/3-accessibility/README.md

@@ -0,0 +1,231 @@
+# Creating Accessible Webpages
+
+![All About Accessibility](../../sketchnotes/webdev101-a11y.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
+>
+> \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
+
+This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind. 
+
+> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Tools to use
+
+### Screen readers
+
+One of the best-known accessibility tools are screen readers.
+
+[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) are commonly used clients for those with vision impairments. As we spend time ensuring a browser properly conveys the information we wish to share, we must also ensure a screen reader does the same.
+
+At its most basic, a screen reader will read a page from top to bottom audibly. If your page is all text, the reader will convey the information in a similar fashion to a browser. Of course, web pages are rarely purely text; they will contain links, graphics, color, and other visual components. Care must be taken to ensure that this information is read correctly by a screen reader.
+
+Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems.
+
+Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
+
+✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
+
+### Zoom
+
+Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels.
+
+Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Contrast checkers
+
+Colors on web sites need to be carefully chosen to  answer the needs of color-blind users or people who have  difficulty seeing low-contrast colors.
+
+✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). What do you learn?
+
+### Lighthouse
+
+In the developer tool area of your browser, you'll find the Lighthouse tool. This tool is important to get a first view of the accessibility (as well as other analysis) of a web site. While it's important not to rely exclusively on Lighthouse, a 100% score is very helpful as a baseline.
+
+✅ Find Lighthouse in your browser's developer tool panel and run an analysis on any site. what do you discover?
+
+## Designing for accessibility
+
+Accessibility is a relatively large topic. To help you out, there are numerous resources available.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+While we won't be able to cover every aspect of creating accessible sites, below are some of the core tenets you will want to implement. Designing an accessible page from the start is **always** easier than going back to an existing page to make it accessible.
+
+## Good display principles
+
+### Color safe palettes
+
+People see the world in different ways, and this includes colors. When selecting a color scheme for your site, you should ensure it's accessible to all. One great [tool for generating color palettes is Color Safe](http://colorsafe.co/).
+
+✅ Identify a web site that is very problematic in its use of color. Why?
+
+### Use the correct HTML
+
+With CSS and JavaScript it's possible to make any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it conveys nothing to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
+
+✅ Go to any web site and see if the designers and developers are using HTML properly. Can you find a button that should be a link? Hint: right click and choose 'View Page Source' in your browser to look at underlying code.
+
+### Create a descriptive heading hierarchy
+
+Screen reader users [rely heavily on headings](https://webaim.org/projects/screenreadersurvey8/#finding) to find information and navigate through a page. Writing descriptive heading content and using semantic heading tags are important for creating an easily navigable site for screen reader users.
+
+### Use good visual clues
+
+CSS offers complete control over the look of any element on a page. You can create text boxes without an outline or hyperlinks without an underline. Unfortunately removing those clues can make it more challenging for someone who depends on them to be able to recognize the type of control.
+
+## The importance of link text
+
+Hyperlinks are core to navigating the web. As a result, ensuring a screen reader can properly read links allows all users to navigate your site.
+
+### Screen readers and links
+
+As you would expect, screen readers read link text in the same way they'd read any other text on the page. With this in mind, the text demonstrated below might feel perfectly acceptable.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. [Click here](https://en.wikipedia.org/wiki/Little_penguin) for more information.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. Visit https://en.wikipedia.org/wiki/Little_penguin for more information.
+
+> **NOTE** As you're about to read, you should **never** create links which look like the above.
+
+Remember, screen readers are a different interface from browsers with a different set of features.
+
+### The problem with using the URL
+
+Screen readers read the text. If a URL appears in the text, the screen reader will read the URL. Generally speaking, the URL does not convey meaningful information, and can sound annoying. You may have experienced this if your phone has ever audibly read a text message with a URL.
+
+### The problem with "click here"
+
+Screen readers also have the ability to read only the hyperlinks on a page, much in the same way a sighted person would scan a page for links. If the link text is always "click here", all the user will hear is "click here, click here, click here, click here, click here, ..." All links are now indistinguishable from one another.
+
+### Good link text
+
+Good link text briefly describes what's on the other side of the link. In the above example talking about little penguins, the link is to the Wikipedia page about the species. The phrase *little penguins* would make for perfect link text as it makes it clear what someone will learn about if they click the link - little penguins.
+
+> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
+
+✅ Surf the web for a few minutes to find pages that use obscure linking strategies. Compare them with other, better-linked sites. What do you learn?
+
+#### Search engine notes
+
+As an added bonus for ensuring your site is accessible to all, you'll help search engines navigate your site as well. Search engines use link text to learn the topics of pages. So using good link text helps everyone!
+
+### ARIA
+
+Imagine the following page:
+
+| Product      | Description        | Order        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Description]('#') | [Order]('#') |
+| Super widget | [Description]('#') | [Order]('#') |
+
+In this example, duplicating the text of description and order make sense for someone using a browser. However, someone using a screen reader would only hear the words *description* and *order* repeated without context.
+
+To support these types of scenarios, HTML supports a set of attributes known as [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). These attributes allow you to provide additional information to screen readers.
+
+> **NOTE**: Like many aspects of HTML, browser and screen reader support may vary. However, most mainline clients support ARIA attributes.
+
+You can use `aria-label` to describe the link when the format of the page doesn't allow you to. The description for widget could be set as
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `<div>` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contains more useful information.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Images
+
+It goes without saying screen readers are unable to automatically read what's in an image. Ensuring images are accessible doesn't take much work - it's what the `alt` attribute is all about. All meaningful images should have an `alt` to describe what they are.
+Images that are purely decorative should have their `alt` attribute set to an empty string: `alt=""`. This prevents screen readers from unnecessarily announcing the decorative image.
+
+✅ As you might expect, search engines are also unable to understand what's in an image. They also use alt text. So once again, ensuring your page is accessible provides additional bonuses!
+
+## The keyboard
+
+Some users are unable to use a mouse or trackpad, instead relying on keyboard interactions to tab from one element to the next. It's important for your web site to present your content in logical order so a keyboard user can access each interactive element as they move down a document. If you build your web pages with semantic markup and use CSS to style their visual layout, your site should be keyboard-navigable, but it's important to test this aspect manually. Learn more about [keyboard navigation strategies](https://webaim.org/techniques/keyboard/).
+
+✅ Go to any web site and try to navigate through it using only your keyboard. What works, what doesn't work? Why?
+
+## Summary
+
+A web accessible to some is not a truly 'world-wide web'. The best way to ensure the sites you create are accessible is to incorporate accessibility best practices from the start. While there are extra steps involved, incorporating these skills into your workflow now will mean all pages you create will be accessible.
+
+---
+
+## 🚀 Challenge
+
+Take this HTML and rewrite it to be as accessible as possible, given the strategies you learned.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## 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](https://accessibility.blog.gov.uk/).
+
+## Assignment
+ 
+[Analyze a non-accessible web site](assignment.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument

1-getting-started-lessons/3-accessibility/assignment.md

@@ -0,0 +1,15 @@
+# Analyze an inaccessible site
+
+## Instructions
+
+Identify a website that you believe is NOT accessible and create an action plan to improve its accessibility.
+Your first task would be to identify this site, detail the ways in which you think it is inaccessible without using analytical tools, and then submit it to a Lighthouse analysis. Capture a pdf of the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved.
+
+## Table to test site accessibility
+
+| Criteria | Exemplary | Adequate | Need to Improve |
+|----------|-----------|----------|----------------|
+|          | missing <10% of what is required | missing 20% of what is required | missing 50% of what is required |
+
+----
+Student Report: includes paragraphs on how inaccessible the site is, the Lighthouse report captured in pdf, a list of ten points to improve, with details on how to improve it

1-getting-started-lessons/3-accessibility/translations/README.es.md

@@ -0,0 +1,215 @@
+# Creación de páginas web accesibles
+
+![Todo sobre accesibilidad](/sketchnotes/webdev101-a11y.png)
+> Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de su discapacidad es un aspecto fundamental.
+>
+> \- Sir Timothy Berners-Lee, director del W3C e inventor de la World Wide Web
+
+Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará todo bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderás sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad. 
+
+## Herramientas para usar
+
+### Lectoras de pantalla
+
+Una de las herramientas de accesibilidad más conocidas son los lectores de pantalla.
+
+[Lectores de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
+
+En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si la página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Debemos tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
+
+Todo desarrollador web debería estar familiarizado con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
+
+✅ Prueba una extensión o herramienta del navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
+
+### Chequear contrastes
+
+Los colores en los sitios web deben elegirse cuidadosamente para responder a las necesidades de los usuarios daltónicos o de las personas que tienen dificultades para ver colores de bajo contraste.
+
+✅ Prueba un sitio web que te guste usar para el uso del color con una extensión de navegador como
+ [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendiste?
+
+### Lighthouse
+
+En el área de herramientas para desarrolladores en tu navegador, encontrarás la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia.
+
+✅ Busca Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecuta un análisis en cualquier sitio. ¿Qué descubres?
+
+## Diseñar para la accesibilidad
+
+La accesibilidad es un tema relativamente extenso. Para ayudarte, existen numerosos recursos disponibles.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es **siempre** más fácil que agarrar una página existente y hacerla accesible.
+
+## Buenos principios de visualización
+
+### Paletas de colores seguros
+
+La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para tu sitio, debes asegurarte de que sea accesible para todos. Una [herramiento genial para generar paletas de colores es Color Safe](http://colorsafe.co/).
+
+✅ Identifica un sitio web que sea muy problemático en el uso del color. ¿Por qué?
+
+### Resaltar correctamente el texto
+
+Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede estar en negrita porque es una palabra clave o porque es la primera palabra, y el diseñador decidió que debería estar en negrita.
+
+Cuando sea necesario resaltar una frase en particular, utilice los elementos `<strong>` o `<em>`. Estos te indicarán a un lector de pantalla que esos elementos son importantes.
+
+### Usa el HTML correcto
+
+Con CSS y JavaScript es posible que muchos elementos se parezcan a cualquier tipo de control. `<span>` podría usarse para crear un `<button>`, y `<b>` podría convertirse en un enlace. Si bien esto podría considerarse más fácil de diseñar, es desconcertante para un lector de pantalla. Utiliza el HTML apropiado al crear controles en una página. Si deseas un enlace, usa `<a>`. Usar el HTML correcto para el control correcto se llama hacer uso de **HTML semántico**.
+
+✅ Vaya a cualquier sitio web y vea si los diseñadores y desarrolladores están usando HTML correctamente. ¿Puedes encontrar un botón que debería ser un enlace? Sugerencia: haga clic derecho y elige 'View Page Source' en tu navegador para ver el código subyacente.
+
+### Usa buenas pistas visuales
+
+CSS ofrece un control completo sobre el aspecto de cualquier elemento de una página. Puedes crear cuadros de texto sin contorno o hipervínculos sin subrayado. Desafortunadamente, eliminar esas pistas puede hacer que sea más difícil para alguien que depende de ellas poder reconocer el tipo de control.
+
+## La importancia del texto del enlace
+
+Los hipervínculos son fundamentales para navegar por la web. Como resultado, garantizar que un lector de pantalla pueda leer correctamente los enlaces permite a todos los usuarios navegar por su sitio.
+
+### Lectores de pantalla y enlaces
+
+Como era de esperar, los lectores de pantalla leen el texto del enlace de la misma forma que leerían cualquier otro texto de la página. Teniendo esto en cuenta, el texto que se muestra a continuación puede parecer perfectamente aceptable.
+
+> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. [Haga clic aquí](https://en.wikipedia.org/wiki/Little_penguin) para obtener más información.
+
+> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. Visita https://en.wikipedia.org/wiki/Little_penguin para obtener más información.
+
+> **NOTA** Mientras estás a punto de leer, **nunca** debes crear enlaces que se parezcan al anterior.
+
+Recuerda, los lectores de pantalla son una interfaz diferente de los navegadores con diferentes características.
+
+### El problema con el uso de URLs
+
+Los lectores de pantalla leen el texto. Si aparece un URL en el texto, el lector de pantalla leerá el URL. En términos generales, un URL no transmite información significativa y puede sonar molesto. Es posible que hayas experimentado esto si tu teléfono alguna vez leyó de manera audible un mensaje de texto con un URL.
+
+### El problema con "haga clic aquí"
+
+Los lectores de pantalla también tienen la capacidad de leer solo los enlaces en una página, de la misma manera que una persona con visión escanea una página en busca de enlaces. Si el texto del vínculo es siempre "haga clic aquí", todo lo que el usuario oirá es "haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, ..." Todos los enlaces ahora son indistinguibles entre sí.
+
+### Buen texto de enlace
+
+Un buen texto de enlace describe brevemente lo que está al otro lado del enlace. En el ejemplo anterior, hablando de pequeños pingüinos, el enlace es a la página de Wikipedia sobre la especie. La frase *pequeños pingüinos* sería un texto de enlace perfecto, ya que deja en claro lo que alguien aprenderá si hace clic en el enlace: pequeños pingüinos.
+
+> El [pingüino pequeño](https://en.wikipedia.org/wiki/Little_penguin), a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo.
+
+✅ Navega la web unos minutos hasta encontrar páginas que utilicen estrategias de enlace poco conocidas. Compáralos con otros sitios que demuestren mejores enlaces. ¿Qué aprendiste?
+
+#### Notas sobre motores de búsqueda (search engines)
+
+Además de la ventaja de que ahora tu sitio sea accesible para todos, también ayudas a los motores de búsqueda a navegar mejor tu sitio. Los motores de búsqueda utilizan el texto del enlace para conocer los temas de las páginas. ¡Así que usar un buen texto de enlace ayuda a todos!
+
+### ARIA
+
+Imagina la siguiente página:
+
+| Producto     | Descripción        | Orden        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Descripción]('#') | [Orden]('#') |
+| Super widget | [Descripción]('#') | [Orden]('#') |
+
+En este ejemplo, duplicar el texto de descripción y orden tiene sentido para alguien que usa un navegador. Sin embargo, alguien que use un lector de pantalla solo escuchará las palabras *descripción* y *orden* repetidas sin contexto.
+
+Para apoyar este tipo de escenarios, HTML apoya un conjunto de atributos conocidos como [Aplicaciones de Internet enriquecidas accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos te permiten proporcionar información adicional a los lectores de pantalla.
+
+> **NOTA**: Al igual que muchos aspectos de HTML, la compatibilidad con el navegador y el lector de pantalla pueden variar. Sin embargo, la mayoría de los clientes de la línea principal apoyan atributos ARIA.
+
+Puedes usar `aria-label` para describir el enlace cuando el formato de la página no te lo permite. La descripción del widget podría establecerse como
+
+``` html
+<a href="#" aria-label="Widget description">descripción</a>
+```
+
+✅ En general, el uso de HTML semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `<div>` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene más información útil.
+
+```html
+<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+</div>
+```
+
+## Imágenes
+
+No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo `alt`. Todas las imágenes deben tener un `alt` para describir lo que son.
+
+✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender que hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
+
+## El teclado
+
+Algunos usuarios no pueden usar un mouse o trackpad, sino que dependen de las interacciones del teclado para pasar de un elemento al siguiente. Es importante que tu sitio web presente tu contenido en un orden lógico para que un teclado pueda acceder a cada elemento a medida que el usuario avanza por un documento. Si construyes tus páginas web con HTML semántico y usas CSS para diseñar tu diseño visual, tu sitio debe ser navegable por teclado, pero es importante comprobar este aspecto manualmente. Obtén más información sobre las [estrategias de navegación por teclado](https://webaim.org/techniques/keyboard/).
+
+✅ Ve a cualquier sitio web e intenta navegar por él, utilizando solo la tecla de tabulación. ¿Qué funciona, qué no funciona? ¿Por qué?
+
+## Resumen
+
+Una web accesible para algunos no es una verdadera "red mundial". La mejor manera de garantizar que los sitios que creas sean accesibles, es incorporar las mejores prácticas de accesibilidad desde el principio. Si bien hay pasos adicionales involucrados, incorporar estas habilidades en tu flujo de trabajo ahora significará que todas las páginas que creas sean accesibles.
+
+🚀 Desafío: toma este HTML y vuelve a escribirlo para que sea lo más accesible posible, dados los temas que aprendiste.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Ejemplo
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Tortuga Ipsum</p>
+      <p class="site-subtitle">El club de fans de tortugas más importante del mundo</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Recursos</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"Me gustan las tortugas"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Tortuga">Info básico de tortugas</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Tortugas_(chocolate)">Tortugas de chocolate</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Bienvenida a la Tortuga Ipsum. 
+            <a href="">Haz clic aquí</a> para aprender más.
+        </p>
+        <p class="article-text">
+          Tortuga ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Regístrese para recibir 'Noticias Tortuga'</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Índice</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Ejemplo Semántico</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; Instrument 2016</span>
+    </div>
+  </body>
+</html>
+```
+
+## [Post-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Revisión y auto-estudio
+
+Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lee sobre las leyes de accesibilidad de tu país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web de gobierno](https://accessibility.blog.gov.uk/).
+
+** Tarea **: [Analizar un sitio web no accesible](assignment.es.md)
+
+Créditos: [Tortuga Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
+
+> Autor: Christopher Harrison

1-getting-started-lessons/3-accessibility/translations/README.fr.md

@@ -0,0 +1,230 @@
+# Création de Pages Web Accessibles
+
+! [Tout sur l'accessibilité](/sketchnotes/webdev101-a11y.png)
+> SketchNote par[Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz préalable
+[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=fr)
+
+> La puissance du Web est dans son universalité. L'accès par tout le monde indépendamment d'invalidité est un aspect essentiel.
+>
+> \- Sir Timothy Berners-Lee, directeur du W3C et inventeur du World Wide Web
+
+Cette citation met parfaitement l'accent sur l'importance de créer des sites Web accessibles. Une application qui ne peut pas être accessible par tous est par définition exclusionnaire. En tant que développeurs Web, nous devrions toujours avoir l'accessibilité à l'esprit. En ayant cet objectif dès le début, vous serez déjà bien lancé sur la façon de vous assurer que tout le monde peut accéder aux pages que vous créez. Dans cette leçon, vous découvrirez les outils pouvant vous aider à vous assurer que vos éléments Web sont accessibles et comment développer avec l'accessibilité à l'esprit. 
+
+> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
+
+## Outils à utiliser
+
+### Lecteurs d'écran (Screen readers)
+
+L'un des outils d'accessibilité les plus connus sont les lecteurs d'écran.
+
+[Les lecteurs d'écran](https://en.wikipedia.org/wiki/Screen_reader) sont des clients couramment utilisés pour ceux qui ont des déficiences visuelles. De la même manière que nous passons du temps à nous assurer qu'un navigateur transmette correctement les informations que nous souhaitons partager, nous devons également le faire pour un lecteur d'écran.
+
+À la base, un lecteur d'écran lira une page de haut en bas de manière audible. Si votre page ne contient que du texte, le lecteur transmettra les informations de la même manière qu'un navigateur. Bien sûr, les pages Web sont rarement purement textuelles ; elles contiendront des liens, des graphiques, des couleurs et d'autres composants visuels. Il faut veiller à ce que ces informations soient lues correctement par un lecteur d'écran.
+
+Chaque développeur Web doit se familiariser avec un lecteur d'écran. Comme souligné ci-dessus, c'est le client que vos utilisateurs utiliseront. De la même manière que vous connaissez le fonctionnement d'un navigateur, vous devez apprendre comment fonctionne un lecteur d'écran. Heureusement, les lecteurs d'écran sont intégrés à la plupart des systèmes d'exploitation.
+
+Certains navigateurs disposent également d'outils et d'extensions intégrés qui peuvent lire le texte à voix haute ou même fournir des fonctionnalités de navigation de base, telles que [ces outils de navigateur Edge axés sur l'accessibilité](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ce sont également des outils d'accessibilité importants, mais ils fonctionnent très différemment des lecteurs d'écran et ils ne doivent pas être confondus avec des outils de test de lecteurs d'écran.
+
+✅ Essayez un lecteur d'écran et un lecteur de texte de navigateur. Sous Windows, [Narrateur](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) est inclus par défaut, et [JAWS](https:// webaim.org/articles/jaws/) et [NVDA](https://www.nvaccess.org/about-nvda/) peuvent également être installés. Sur macOS et iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) est installé par défaut.
+
+### Zoom
+
+Un autre outil couramment utilisé par les personnes malvoyantes est le zoom. Le type de zoom le plus basique est le zoom statique, contrôlé par `Ctrl + signe plus (+)` ou en diminuant la résolution de l'écran. Ce type de zoom entraîne le redimensionnement de la page entière, il est donc important d'utiliser un [design responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) pour offrir une bonne expérience utilisateur à des niveaux de zoom accrus .
+
+Un autre type de zoom repose sur un logiciel spécialisé pour agrandir une zone de l'écran et effectuer un panoramique, un peu comme avec une vraie loupe. Sous Windows, [Loupe](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198 ) est intégré, et [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) est un logiciel de grossissement tiers avec plus de fonctionnalités et une plus grande base d'utilisateurs. MacOS et iOS ont tous deux un logiciel de grossissement intégré appelé [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Contrôleurs de contraste
+
+Les couleurs sur les sites Web doivent être soigneusement choisies pour répondre aux besoins des utilisateurs daltoniens ou des personnes qui ont des difficultés à voir les couleurs à faible contraste.
+
+✅ Testez un site Web que vous aimez utiliser pour l'utilisation des couleurs avec une extension de navigateur telle que [le vérificateur de couleurs de WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Qu'apprenez-vous?
+
+### Lighthouse
+
+Dans la zone des outils de développement de votre navigateur, vous trouverez l'outil Lighthouse. Cet outil est important pour obtenir une première vue de l'accessibilité (ainsi que d'autres analyses) d'un site Web. Bien qu'il soit important de ne pas se fier exclusivement à Lighthouse, un score de 100 % est très utile comme référence.
+
+✅ Trouvez Lighthouse dans le panneau des outils de développement de votre navigateur et lancez une analyse sur n'importe quel site. Que découvrez vous ?
+
+## Concevoir pour l'accessibilité
+
+L'accessibilité est un sujet relativement vaste. Pour vous aider, de nombreuses ressources sont disponibles.
+
+- [Accessible U - Université du Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Bien que nous ne puissions pas couvrir tous les aspects de la création de sites accessibles, vous trouverez ci-dessous quelques-uns des principes fondamentaux que vous voudrez mettre en œuvre. Concevoir une page accessible dès le départ est **toujours** plus facile que de revenir à une page existante pour la rendre accessible.
+
+## Bons principes d'affichage
+
+### Palettes de couleurs sûres
+
+Les gens voient le monde de différentes manières, et cela inclut les couleurs. Lorsque vous sélectionnez un schéma de couleurs pour votre site, vous devez vous assurer qu'il est accessible à tous. Un excellent [outil pour générer des palettes de couleurs est Color Safe](http://colorsafe.co/).
+
+✅ Identifiez un site Web qui est très problématique dans son utilisation de la couleur. Pourquoi?
+
+### Utilisez le bon code HTML
+
+Avec CSS et JavaScript, il est possible de faire ressembler n'importe quel élément à n'importe quel type de contrôle. `<span>` pourrait être utilisé pour créer un `<button>`, et `<b>` pourrait devenir un hyperlien. Bien que cela puisse être considéré comme plus facile à styliser, cela ne transmet rien à un lecteur d'écran. Utilisez le code HTML approprié lors de la création de contrôles sur une page. Si vous voulez un lien hypertexte, utilisez `<a>`. Utiliser le bon code HTML pour le bon contrôle s'appelle utiliser le HTML sémantique.
+
+✅ Allez sur n'importe quel site Web et voyez si les concepteurs et les développeurs utilisent correctement le HTML. Pouvez-vous trouver un bouton qui devrait être un lien ? Astuce : faites un clic droit et choisissez « Afficher la source de la page » dans votre navigateur pour consulter le code sous-jacent.
+
+### Créer une hiérarchie d'en-têtes descriptive
+
+Les utilisateurs de lecteurs d'écran [se fient fortement aux titres](https://webaim.org/projects/screenreadersurvey8/#finding) pour trouver des informations et parcourir une page. La rédaction d'un contenu de titre descriptif et l'utilisation de balises de titre sémantique sont importantes pour créer un site facilement navigable pour les utilisateurs de lecteurs d'écran.
+
+### Utilisez de bons indices visuels
+
+CSS offre un contrôle complet sur l'apparence de n'importe quel élément d'une page. Vous pouvez créer des zones de texte sans contour ou des liens hypertexte sans soulignement. Malheureusement, la suppression de ces indices peut rendre plus difficile, pour quelqu'un qui en dépend, la capacité de reconnaître le type de contrôle.
+
+## L'importance du texte de lien
+
+Les hyperliens sont essentiels à la navigation sur le Web. Par conséquent, s'assurer qu'un lecteur d'écran peut lire correctement les liens permet à tous les utilisateurs de naviguer sur votre site.
+
+### Lecteurs d'écran et liens
+
+Comme on peut s'y attendre, les lecteurs d'écran lisent le texte de lien de la même manière qu'ils liraient n'importe quel autre texte de la page. Dans cet esprit, le texte présenté ci-dessous peut sembler parfaitement acceptable.
+
+> Le petit pingouin, parfois appelé pingouin fée, est le plus petit pingouin du monde. [Cliquez ici](https://en.wikipedia.org/wiki/Little_penguin) pour plus d'informations.
+
+> Le petit pingouin, parfois appelé pingouin fée, est le plus petit pingouin du monde. Visitez https://en.wikipedia.org/wiki/Little_penguin pour plus d'informations.
+
+> **REMARQUE** Au moment où vous êtes sur le point de lire, vous ne devez **jamais** créer des liens qui ressemblent à ceux ci-dessus.
+
+N'oubliez pas que les lecteurs d'écran sont une interface différente des navigateurs avec un ensemble de fonctionnalités différent.
+
+### Le problème avec l'utilisation de l'URL
+
+Les lecteurs d'écran lisent le texte. Si une URL apparaît dans le texte, le lecteur d'écran lira l'URL. De manière générale, l'URL ne transmet pas d'informations significatives et peut sembler ennuyeuse. Vous avez peut-être vécu cela si votre téléphone a déjà lu de manière audible un message texte avec une URL.
+
+### Le problème avec "cliquez ici"
+
+Les lecteurs d'écran ont également la possibilité de lire uniquement les hyperliens sur une page, de la même manière qu'une personne voyante numériserait une page à la recherche de liens. Si le texte du lien est toujours « cliquez ici », tout ce que l'utilisateur entendra est « cliquez ici, cliquez ici, cliquez ici, cliquez ici, cliquez ici, ... ». Tous les liens sont désormais indiscernables les uns des autres.
+
+### Bon texte de lien
+
+Un bon texte de lien décrit brièvement ce qui se trouve de l'autre côté du lien. Dans l'exemple ci-dessus parlant de petits pingouins, le lien renvoie à la page Wikipedia sur l'espèce. L'expression *petits pingouins* constituerait un texte de lien parfait car elle indique clairement ce que quelqu'un apprendra s'il clique sur le lien - petits pingouins.
+
+> Le [petit pingouin](https://en.wikipedia.org/wiki/Little_penguin), parfois appelé pingouin féerique, est le plus petit pingouin du monde.
+
+✅ Surfez sur le Web pendant quelques minutes pour trouver des pages qui utilisent des stratégies de liens obscures. Comparez-les avec d'autres sites mieux liés. Qu'apprenez-vous?
+
+#### Notes du moteur de recherche
+
+En plus de garantir que votre site est accessible à tous, vous aiderez également les moteurs de recherche à naviguer sur votre site. Les moteurs de recherche utilisent le texte du lien pour apprendre les sujets des pages. Donc, utiliser un bon texte de lien aide tout le monde !
+
+### ARIA
+
+Imaginez la page suivante :
+
+| Produit      | Description        | Commande        |
+| ------------ | ------------------ | --------------- |
+| Widget       | [Description]('#') | [Commande]('#') |
+| Super widget | [Description]('#') | [Commande]('#') |
+
+Dans cet exemple, la duplication du texte de la description et de l'ordre a du sens pour une personne utilisant un navigateur. Cependant, une personne utilisant un lecteur d'écran n'entendrait que les mots *description* et *ordre* répétés sans contexte.
+
+Pour prendre en charge ces types de scénarios, HTML prend en charge un ensemble d'attributs appelés [Applications Internet riches accessibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ces attributs vous permettent de fournir des informations supplémentaires aux lecteurs d'écran.
+
+> **REMARQUE** : Comme de nombreux aspects du code HTML, la prise en charge du navigateur et du lecteur d'écran peut varier. Cependant, la plupart des clients principaux prennent en charge les attributs ARIA.
+
+Vous pouvez utiliser `aria-label` pour décrire le lien lorsque le format de la page ne vous le permet pas. La description du widget peut être définie comme: 
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ En général, l'utilisation du balisage sémantique comme décrit ci-dessus remplace l'utilisation d'ARIA, mais parfois il n'y a pas d'équivalent sémantique pour divers widgets HTML. Un bon exemple est un arbre. Il n'y a pas d'équivalent HTML pour un arbre, vous identifiez donc le `<div>` générique pour cet élément avec un rôle et des valeurs aria appropriés. La [documentation MDN sur ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contient des informations plus utiles.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Images
+
+Il va sans dire que les lecteurs d'écran ne sont pas en mesure de lire automatiquement le contenu d'une image. S'assurer que les images sont accessibles ne demande pas beaucoup de travail - c'est l'objet de l'attribut `alt`. Toutes les images significatives devraient avoir un "alt" pour décrire ce qu'elles sont. Les images purement décoratives doivent avoir leur attribut `alt` défini sur une chaîne vide : `alt=""`. Cela empêche les lecteurs d'écran d'annoncer inutilement l'image décorative.
+
+✅ Comme vous pouvez vous y attendre, les moteurs de recherche sont également incapables de comprendre ce qu'il y a dans une image. Ils utilisent également du texte alternatif. Encore une fois, s'assurer que votre page est accessible offre des bonus supplémentaires !
+
+## Le clavier
+
+Certains utilisateurs sont incapables d'utiliser une souris ou un trackpad, se fiant plutôt aux interactions du clavier pour passer d'un élément à l'autre. Il est important que votre site Web présente votre contenu dans un ordre logique afin qu'un utilisateur du clavier puisse accéder à chaque élément interactif lorsqu'il se déplace vers le bas d'un document. Si vous créez vos pages Web avec un balisage sémantique et utilisez CSS pour styliser leur mise en page visuelle, votre site doit être navigable au clavier, mais il est important de tester cet aspect manuellement. En savoir plus sur [les stratégies de navigation au clavier](https://webaim.org/techniques/keyboard/).
+
+✅ Allez sur n'importe quel site Web et essayez de le parcourir en utilisant uniquement votre clavier. Qu'est-ce qui marche, qu'est-ce qui ne marche pas ? Pourquoi?
+
+## Résumé
+
+Un web accessible à certains n'est pas vraiment un « world-wide web ». Le meilleur moyen de garantir l'accessibilité des sites que vous créez est d'intégrer les meilleures pratiques d'accessibilité dès le départ. Bien qu'il y ait des étapes supplémentaires, l'intégration de ces compétences dans votre flux de travail signifie maintenant que toutes les pages que vous créez seront accessibles.
+
+---
+
+## 🚀 Challenge
+
+Prenez ce code HTML et réécrivez-le pour qu'il soit aussi accessible que possible, compte tenu des stratégies que vous avez apprises.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Quiz de validation des connaissances
+[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=fr)
+
+## Révision et auto-apprentissage
+
+De nombreux gouvernements ont des lois concernant les exigences d'accessibilité. Renseignez-vous sur les lois d'accessibilité de votre pays d'origine. Qu'est-ce qui est couvert et qu'est-ce qui ne l'est pas ? Un exemple est [ce site Web du gouvernement](https://accessibility.blog.gov.uk/).
+
+## Mission
+ 
+[Analyser un site Web non accessible](assignment.fr.md)
+
+Crédits : [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) par Instrument

1-getting-started-lessons/3-accessibility/translations/README.hi.md

@@ -0,0 +1,227 @@
+# सुलभ वेबपृष्ठ बनाना
+
+![पहुँच के बारे में सब कुछ](/sketchnotes/webdev101-a11y.png)
+> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
+
+## पूर्व व्याख्यान प्रश्नोत्तरी
+[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=hi)
+
+> वेब की शक्ति अपनी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी तक पहुंच एक आवश्यक पहलू है।
+>
+> \- सर टिमोथी बर्नर्स-ली, W3C निदेशक और वर्ल्ड वाइड वेब के आविष्कारक
+
+यह उद्धरण सुलभ वेबसाइट बनाने के महत्व पर पूरी तरह से प्रकाश डालता है। एक एप्लिकेशन जिसे सभी द्वारा एक्सेस नहीं किया जा सकता है वह परिभाषा बहिष्करण द्वारा है। वेब डेवलपर्स के रूप में हमें हमेशा ध्यान में रखना चाहिए। शुरू से इस पर ध्यान केंद्रित करने से आप अपने तरीके से अच्छी तरह से सुनिश्चित कर पाएंगे कि हर कोई आपके द्वारा बनाए गए पृष्ठों तक पहुंच बना सके। इस पाठ में, आप उन टूल्स के बारे में जानेंगे जो यह सुनिश्चित करने में आपकी मदद कर सकते हैं कि आपकी वेब एसेट्स सुलभ हैं और एक्सेसिबिलिटी को ध्यान में रखते हुए कैसे बनाया जाए। 
+
+## उपयोग करने के उपकरण
+
+### स्क्रीन रीडर
+
+सबसे प्रसिद्ध पहुँच उपकरणों में से एक स्क्रीन रीडर हैं।
+
+[स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) आमतौर पर दृष्टि हानि वाले लोगों के लिए उपयोग किए जाते हैं। जैसा कि हम एक ब्राउज़र सुनिश्चित करने में समय बिताते हैं, हम जो जानकारी साझा करना चाहते हैं, उसे ठीक से बता देते हैं, हमें यह भी सुनिश्चित करना चाहिए कि स्क्रीन रीडर भी ऐसा ही करे।
+
+इसके सबसे मूल में, एक स्क्रीन रीडर ऊपर से नीचे तक एक पृष्ठ को श्रव्य रूप से पढ़ेगा। यदि आपका पृष्ठ सभी पाठ है, तो पाठक एक ब्राउज़र में इसी तरह से जानकारी को बताएगा। बेशक, वेब पेज शायद ही कभी विशुद्ध रूप से टेक्स्ट होते हैं; वे लिंक, ग्राफिक्स, रंग, और अन्य दृश्य घटक शामिल होंगे। यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि यह जानकारी स्क्रीन रीडर द्वारा सही ढंग से पढ़ी जाए।
+
+प्रत्येक वेब डेवलपर को स्क्रीन रीडर के साथ खुद को परिचित करना चाहिए। जैसा कि ऊपर प्रकाश डाला गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। बहुत कुछ उसी तरह से जिससे आप परिचित हैं कि ब्राउज़र कैसे संचालित होता है, आपको यह सीखना चाहिए कि स्क्रीन रीडर कैसे संचालित होता है। सौभाग्य से, स्क्रीन रीडर अधिकांश ऑपरेटिंग सिस्टम में निर्मित होते हैं।
+
+कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए।
+
+✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है।
+
+### ज़ूम
+
+आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर।
+
+एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है।
+### कंट्रास्ट चेकर्स 
+
+कलर-ब्लाइंड यूजर्स या ऐसे लोग जिन्हें कम कंट्रास्ट कलर देखने में दिक्कत होती है, उनकी जरूरतों का जवाब देने के लिए वेब साइट्स पर रंगों को सावधानी से चुना जाना चाहिए।
+
+✅ ब्राउज़र एक्सटेंशन के साथ रंग उपयोग के लिए उपयोग की जाने वाली वेब साइट का परीक्षण करें, जैसे कि [WCAG का कलर चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US)। आप क्या सीखते हैं?
+
+### लाइटहाउस
+
+अपने ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको लाइटहाउस टूल मिलेगा। वेब साइट की पहुंच (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए यह उपकरण महत्वपूर्ण है। हालांकि यह विशेष रूप से लाइटहाउस पर भरोसा नहीं करना महत्वपूर्ण है, एक आधार रेखा के रूप में 100% स्कोर बहुत मददगार है।
+
+✅ अपने ब्राउज़र के डेवलपर टूल पैनल में लाइटहाउस ढूंढें और किसी भी साइट पर विश्लेषण चलाएं। आपको क्या मिला ?
+
+## पहुंच के लिए डिजाइनिंग
+
+पहुँच एक अपेक्षाकृत बड़ा विषय है। आपकी सहायता करने के लिए, कई संसाधन उपलब्ध हैं।
+
+- [सुलभ यू - मिनेसोटा विश्वविद्यालय](https://accessibility.umn.edu/your-role/web-wevelopmentation)
+
+हालांकि हम सुलभ साइटों को बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत हैं जिन्हें आप लागू करना चाहते हैं। प्रारंभ से एक सुलभ पृष्ठ डिजाइन करना **हमेशा** सुलभ है और इसे सुलभ बनाने के लिए मौजूदा पृष्ठ पर वापस जाना आसान है।
+
+## अच्छे प्रदर्शन के सिद्धांत
+
+### रंग सुरक्षित पट्टियाँ
+
+लोग दुनिया को विभिन्न तरीकों से देखते हैं, और इसमें रंग शामिल हैं। अपनी साइट के लिए एक रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। रंग पट्टियाँ बनाने के लिए एक महान [टूल कलर सेफ है](http://colorsafe.co/)।
+
+✅ एक वेब साइट की पहचान करें जो रंग के उपयोग में बहुत समस्याग्रस्त है। क्यों?
+
+### सही HTML का उपयोग करें
+
+सीएसएस और जावास्क्रिप्ट के साथ किसी भी तत्व को किसी भी प्रकार के नियंत्रण की तरह बनाना संभव है। `<span>` का उपयोग एक `<button>` बनाने के लिए किया जा सकता है, और `<b>` हाइपरलिंक बन सकता है। हालांकि यह शैली के लिए आसान माना जा सकता है, यह एक स्क्रीन रीडर के लिए कुछ भी नहीं बताता है। पृष्ठ पर नियंत्रण बनाते समय उपयुक्त HTML का उपयोग करें। यदि आप हाइपरलिंक चाहते हैं, तो `<a>` का उपयोग करें। सही नियंत्रण के लिए सही HTML का उपयोग करना शब्दार्थ HTML का उपयोग करना कहलाता है।
+
+✅ किसी भी वेब साइट पर जाएं और देखें कि डिजाइनर और डेवलपर HTML का सही उपयोग कर रहे हैं या नहीं। क्या आपको एक बटन मिल सकता है जो एक लिंक होना चाहिए? संकेत: अंतर्निहित कोड देखने के लिए अपने ब्राउज़र में राइट क्लिक करें और 'व्यू पेज सोर्स' चुनें।
+
+### एक वर्णनात्मक शीर्षक पदानुक्रम बनाएँ
+
+स्क्रीन रीडर उपयोगकर्ता [शीर्षकों पर बहुत भरोसा करते हैं](https://webaim.org/projects/screenreadersurvey8/#finding) जानकारी खोजने और एक पृष्ठ के माध्यम से नेविगेट करने के लिए। वर्णनात्मक शीर्षक सामग्री लिखना और अर्थ हेडिंग टैग का उपयोग करना स्क्रीन रीडर उपयोगकर्ताओं के लिए आसानी से नेविगेट करने योग्य साइट बनाने के लिए महत्वपूर्ण है।
+
+### अच्छे दृश्य सुराग का उपयोग करें
+
+सीएसएस एक पृष्ठ पर किसी भी तत्व के देखो पर पूर्ण नियंत्रण प्रदान करता है। आप बिना किसी आउटलाइन या बिना हाइपरलिंक के टेक्स्ट बॉक्स बना सकते हैं। दुर्भाग्यवश उन सुरागों को हटाना किसी ऐसे व्यक्ति के लिए अधिक चुनौतीपूर्ण हो सकता है जो उन पर निर्भर करता है जो नियंत्रण के प्रकार को पहचानने में सक्षम हो।
+
+## लिंक टेक्स्ट का महत्व
+
+हाइपरलिंक्स वेब नेविगेट करने के लिए मुख्य हैं। नतीजतन, स्क्रीन रीडर सुनिश्चित करना लिंक को ठीक से पढ़ सकता है, जिससे सभी उपयोगकर्ता आपकी साइट को नेविगेट कर सकते हैं।
+
+### स्क्रीन रीडर और लिंक
+
+जैसा कि आप उम्मीद करेंगे, स्क्रीन रीडर्स लिंक टेक्स्ट को उसी तरह से पढ़ेंगे जैसे वे पृष्ठ पर किसी अन्य टेक्स्ट को पढ़ते हैं। इसे ध्यान में रखते हुए, नीचे प्रदर्शित टेक्स्ट पूरी तरह स्वीकार्य लग सकता है।
+
+> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए [यहां क्लिक करें](https://en.wikipedia.org/wiki/Little_penguin)।
+
+> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए https://en.wikipedia.org/wiki/Little_penguin पर जाएं।
+> ** नोट ** जैसा कि आप पढ़ने वाले हैं, आपको ** कभी भी ** लिंक नहीं बनाना चाहिए जो ऊपर की तरह दिखते हों।
+
+याद रखें, स्क्रीन रीडर एक अलग सेट के साथ ब्राउज़रों से अलग इंटरफ़ेस हैं।
+
+### URL का उपयोग करने में समस्या
+
+स्क्रीन रीडर पाठ पढ़ते हैं। यदि टेक्स्ट में URL दिखाई देता है, तो स्क्रीन रीडर URL को पढ़ेगा। सामान्यतया, URL सार्थक जानकारी नहीं देता है, और कष्टप्रद ध्वनि कर सकता है। यदि आपका फ़ोन कभी श्रव्य रूप से URL के साथ टेक्स्ट संदेश पढ़ता है, तो आपको इसका अनुभव हो सकता है।
+
+### "यहाँ क्लिक करें" के साथ समस्या
+
+स्क्रीन पाठकों के पास एक पृष्ठ पर केवल हाइपरलिंक पढ़ने की क्षमता होती है, उसी तरह एक दृष्टिहीन व्यक्ति लिंक के लिए एक पेज स्कैन करेगा। यदि लिंक टेक्स्ट हमेशा "यहां क्लिक करें" है, तो सभी उपयोगकर्ता सुनेंगे "यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें ..." सभी लिंक अब एक दूसरे से अप्रभेद्य हैं।
+
+### अच्छा लिंक टेक्स्ट
+
+अच्छा लिंक टेक्स्ट संक्षेप में बताता है कि लिंक के दूसरी तरफ क्या है। उपरोक्त उदाहरणों में छोटे पेंगुइन के बारे में बात करते हुए, लिंक प्रजाति के बारे में विकिपीडिया पृष्ठ पर है। वाक्यांश *थोड़ा पेंगुइन* सही लिंक टेक्स्ट के लिए बना देगा क्योंकि यह स्पष्ट करता है कि कोई व्यक्ति इस बारे में सीखेगा कि क्या वे लिंक पर क्लिक करते हैं - छोटे पेंगुइन।
+
+> [छोटा पेंगुइन](https://en.wikipedia.org/wiki/Little_penguin), जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है।
+
+✅ उन पृष्ठों को खोजने के लिए कुछ मिनटों के लिए वेब सर्फ करें जो अस्पष्ट लिंकिंग रणनीतियों का उपयोग करते हैं। अन्य, बेहतर-लिंक्ड साइटों के साथ उनकी तुलना करें। आप क्या सीखते हैं?
+
+#### खोज इंजन नोट्स 
+
+अपनी साइट को सुनिश्चित करने के लिए एक अतिरिक्त बोनस के रूप में सभी के लिए सुलभ है, आप खोज इंजन को आपकी साइट पर भी नेविगेट करने में मदद करेंगे। खोज इंजन पृष्ठों के विषयों को जानने के लिए लिंक पाठ का उपयोग करते हैं। इसलिए अच्छे लिंक टेक्स्ट का उपयोग करना सभी की मदद करता है!
+
+### ARIA
+
+निम्नलिखित पृष्ठ की कल्पना करें:
+
+| Product      | Description        | Order        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Description]('#') | [Order]('#') |
+| Super widget | [Description]('#') | [Order]('#') |
+
+इस उदाहरण में, वर्णन और आदेश के पाठ की नकल करना किसी ब्राउज़र का उपयोग करने वाले व्यक्ति के लिए समझ में आता है। हालाँकि, स्क्रीन रीडर का उपयोग करने वाला कोई व्यक्ति केवल संदर्भ के बिना *विवरण* और *आदेश* दोहराता है।
+
+इस प्रकार के परिदृश्यों का समर्थन करने के लिए, HTML [एक्सेसिबल रिच इंटरनेट एप्लिकेशन (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नामक विशेषताओं का एक सेट का समर्थन करता है। ये विशेषताएँ आपको स्क्रीन पाठकों को अतिरिक्त जानकारी प्रदान करने की अनुमति देती हैं।
+
+> ** नोट **: HTML के कई पहलुओं की तरह, ब्राउज़र और स्क्रीन रीडर समर्थन भिन्न हो सकते हैं। हालांकि, अधिकांश मेनलाइन क्लाइंट ARIA विशेषताओं का समर्थन करते हैं।
+
+जब पृष्ठ का प्रारूप आपको अनुमति नहीं देता है, तो लिंक का वर्णन करने के लिए आप `aria-label` का उपयोग कर सकते हैं। विजेट के लिए विवरण के रूप में सेट किया जा सकता है
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## इमेजिस
+
+यह बिना कहे चला जाता है कि स्क्रीन रीडर स्वचालित रूप से पढ़ने में असमर्थ हैं कि एक छवि में क्या है। यह सुनिश्चित करना कि छवियां सुलभ हैं, बहुत काम नहीं करता है - यह वही है जो `alt` गुणकी विशेषता है। सभी सार्थक चित्रों में यह बताने के लिए कि वे क्या हैं, एक `alt` गुण होना चाहिए।
+छवियां जो विशुद्ध रूप से सजावटी हैं, उनके पास एक खाली स्ट्रिंग के लिए उनके `alt` विशेषता होनी चाहिए:`alt=""`। यह स्क्रीन पाठकों को अनावश्यक रूप से सजावटी छवि की घोषणा करने से रोकता है।
+
+✅ जैसा कि आप उम्मीद कर सकते हैं, खोज इंजन भी यह समझने में असमर्थ हैं कि एक छवि में क्या है। वे ऑल्ट टेक्स्ट का भी इस्तेमाल करते हैं। तो एक बार फिर, सुनिश्चित करना कि आपका पृष्ठ सुलभ है, अतिरिक्त बोनस प्रदान करता है!
+
+## थे कीबोर्ड
+
+कुछ उपयोगकर्ता माउस या ट्रैकपैड का उपयोग करने में असमर्थ हैं, इसके बजाय एक तत्व से दूसरे तक टैब के लिए कीबोर्ड इंटरैक्शन पर निर्भर हैं। आपकी वेब साइट के लिए यह महत्वपूर्ण है कि आप अपनी सामग्री को तार्किक क्रम में प्रस्तुत करें ताकि एक कीबोर्ड उपयोगकर्ता प्रत्येक इंटरैक्टिव तत्व तक पहुँच सके क्योंकि वे एक दस्तावेज़ को स्थानांतरित करते हैं।यदि आप अपने वेब पेजों को सिमेंटिक मार्कअप के साथ बनाते हैं और उनके विज़ुअल लेआउट को स्टाइल करने के लिए CSS का उपयोग करते हैं, तो आपकी साइट कीबोर्ड-नेवीगेबल होनी चाहिए, लेकिन इस पहलू को मैन्युअल रूप से जांचना महत्वपूर्ण है। [कीबोर्ड नेविगेशन रणनीतियों](https://webaim.org/techniques/keyboard/) के बारे में अधिक जानें।
+
+✅ किसी भी वेब साइट पर जाएं और केवल अपने कीबोर्ड का उपयोग करके इसके माध्यम से नेविगेट करने का प्रयास करें। क्या काम करता है, क्या काम नहीं करता है? क्यों?
+
+## सारांश
+
+कुछ के लिए सुलभ वेब वास्तव में 'विश्वव्यापी वेब' नहीं है। आपके द्वारा बनाई जा सकने वाली साइटों को सुनिश्चित करने का सबसे अच्छा तरीका शुरू से ही सुलभता सर्वोत्तम प्रथाओं को शामिल करना है। जबकि अतिरिक्त चरण शामिल हैं, इन कौशल को अपने वर्कफ़्लो में शामिल करने का मतलब होगा कि आपके द्वारा बनाए गए सभी पृष्ठ सुलभ होंगे।
+
+---
+
+## 🚀 चुनौती
+
+इस HTML को ले लो और इसे फिर से संभव के रूप में सुलभ होने के लिए फिर से लिखना, आपके द्वारा सीखी गई रणनीतियों को देखते हुए।
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## व्याख्यान उपरांत प्रश्नोत्तरी
+[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=hi)
+
+## समीक्षा और स्व अध्ययन
+
+कई सरकारों के पास सुलभता आवश्यकताओं के संबंध में कानून हैं। अपने देश की पहुंच कानूनों पर पढ़ें। क्या शामिल है, और क्या नहीं है? एक उदाहरण है [यह सरकारी वेब साइट](https://accessibility.blog.gov.uk/).
+
+## असाइनमेंट
+ 
+[एक गैर-सुलभ वेब साइट का विश्लेषण करें](assignment.hi.md)
+
+क्रेडिट:  [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) साधन द्वारा

1-getting-started-lessons/3-accessibility/translations/README.id.md

@@ -0,0 +1,223 @@
+# Membuat Halaman Web yang Dapat Diakses (oleh Semua Orang)
+
+![Semua Tentang Aksesibilitas](/sketchnotes/webdev101-a11y.png)
+> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuis Pra-Kuliah
+
+[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=id)
+
+> Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting.
+>
+> \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web
+
+Kutipan ini dengan sempurna menyoroti pentingnya membuat situs web yang dapat diakses. Sebuah aplikasi yang tidak dapat diakses oleh semua adalah menurut definisi pengecualian. Sebagai pengembang web, kami harus selalu memikirkan aksesibilitas. Dengan memiliki fokus ini sejak awal Anda akan berada di jalur yang benar untuk memastikan semua orang dapat mengakses halaman yang Anda buat. Dalam pelajaran ini, Anda akan mempelajari tentang alat yang dapat membantu Anda memastikan bahwa aset web Anda dapat diakses dan cara membangun dengan mempertimbangkan aksesibilitas.
+
+## Alat yang digunakan
+
+### Pembaca layar (Screen readers)
+
+Salah satu alat aksesibilitas paling terkenal adalah pembaca layar.
+
+[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah klien yang biasa digunakan untuk mereka yang memiliki gangguan penglihatan. Saat kami menghabiskan waktu untuk memastikan browser menyampaikan informasi yang ingin kami bagikan dengan benar, kami juga harus memastikan pembaca layar melakukan hal yang sama.
+
+Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suara. Jika halaman Anda semuanya teks, pembaca akan menyampaikan informasi dengan cara yang mirip dengan browser. Tentu saja, halaman web jarang hanya berupa teks; mereka akan berisi tautan, grafik, warna, dan komponen visual lainnya. Perhatian harus diberikan untuk memastikan bahwa informasi ini dibaca dengan benar oleh pembaca layar.
+
+Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar.
+
+✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
+
+### Pemeriksa kontras
+
+Warna di situs web perlu dipilih dengan cermat untuk menjawab kebutuhan pengguna buta warna atau orang yang kesulitan melihat warna kontras rendah.
+
+✅ Uji situs web yang Anda sukai untuk penggunaan warna dengan ekstensi browser seperti [pemeriksa warna WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apa yang Anda pelajari?
+
+### Lighthouse
+
+Di area alat pengembang di browser Anda, Anda akan menemukan alat Lighthouse. Alat ini penting untuk mendapatkan tampilan pertama aksesibilitas (serta analisis lain) dari situs web. Meskipun penting untuk tidak mengandalkan Lighthouse secara eksklusif, skor 100% sangat membantu sebagai dasar.
+
+✅ Temukan Lighthouse di panel alat pengembang browser Anda dan jalankan analisis di situs mana pun. apa yang kamu temukan?
+
+## Mendesain untuk aksesibilitas
+
+Aksesibilitas adalah topik yang relatif besar. Untuk membantu Anda, ada banyak sumber daya yang tersedia.
+
+- [Accessible U - Universitas Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Meskipun kami tidak dapat mencakup setiap aspek dalam membuat situs yang dapat diakses, berikut adalah beberapa prinsip inti yang ingin Anda terapkan. Mendesain halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk membuatnya dapat diakses.
+
+## Prinsip tampilan yang bagus
+
+### Palet warna yang aman
+
+Orang melihat dunia dengan cara yang berbeda, dan ini termasuk warna. Saat memilih skema warna untuk situs Anda, Anda harus memastikannya dapat diakses oleh semua orang. Salah satu [alat hebat untuk menghasilkan palet warna adalah Color Safe](http://colorsafe.co/).
+
+✅ Identifikasi situs web yang sangat bermasalah dalam penggunaan warna. Mengapa?
+Properly highlight text
+
+### Sorot teks dengan benar
+
+Highlighting text by color, [font weight (berat font)](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [dekorasi teks lainnya](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak secara langsung memberi tahu pembaca layar tentang kepentingannya. Sebuah kata dapat dicetak tebal karena merupakan kata kunci, atau karena kata pertama dan perancang memutuskan kata tersebut harus dicetak tebal.
+
+Saat frasa tertentu perlu disorot, gunakan elemen `<strong>` atau `<em>`. Ini akan menunjukkan kepada pembaca layar bahwa item tersebut penting.
+
+### Gunakan HTML yang benar
+
+Dengan CSS dan JavaScript, memungkinkan banyak elemen terlihat seperti jenis kontrol apa pun. `<span>` bisa digunakan untuk membuat sebuah `<button>`, dan `<b>` bisa menjadi hyperlink. Meskipun ini mungkin dianggap lebih mudah untuk diatur, ini membingungkan pembaca layar. Gunakan HTML yang sesuai saat membuat kontrol di halaman. Jika Anda menginginkan hyperlink, gunakan `<a>`. Menggunakan HTML yang tepat untuk kontrol yang tepat disebut dengan menggunakan HTML Semantik.
+
+✅ Kunjungi situs web mana saja dan lihat apakah perancang dan pengembang menggunakan HTML dengan benar. Dapatkah Anda menemukan tombol yang seharusnya menjadi tautan? Petunjuk: klik kanan dan pilih 'View Page Source' di browser Anda untuk melihat kode yang mendasarinya.
+
+### Gunakan petunjuk visual yang baik
+
+CSS menawarkan kontrol penuh atas tampilan elemen apa pun di halaman. Anda dapat membuat kotak teks tanpa kerangka atau hyperlink tanpa garis bawah. Sayangnya, menghapus petunjuk tersebut dapat membuat seseorang yang bergantung padanya lebih sulit untuk mengenali jenis kontrol tersebut.
+
+## Pentingnya teks tautan
+
+Hyperlink adalah inti untuk menavigasi web. Hasilnya, memastikan pembaca layar dapat membaca tautan dengan benar memungkinkan semua pengguna menavigasi situs Anda.
+
+### Pembaca layar dan tautan
+
+Seperti yang Anda harapkan, pembaca layar membaca teks link dengan cara yang sama seperti membaca teks lain di halaman. Dengan pemikiran ini, teks yang ditunjukkan di bawah ini mungkin terasa sangat dapat diterima.
+
+> Penguin kecil, terkadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. [Klik disini](https://en.wikipedia.org/wiki/Little_penguin) untuk informasi lebih lanjut.
+
+> Penguin kecil, terkadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. Kunjungi https://en.wikipedia.org/wiki/Little_penguin untuk informasi lebih lanjut.
+
+> **CATATAN** Saat akan membaca, Anda **jangan pernah** membuat tautan seperti di atas.
+
+Ingat, pembaca layar adalah antarmuka yang berbeda dari browser dengan sekumpulan fitur yang berbeda.
+
+### Masalah dengan menggunakan URL
+
+Pembaca layar membaca teks. Jika URL muncul di teks, pembaca layar akan membaca URL tersebut. Secara umum, URL tidak menyampaikan informasi yang berarti, dan dapat terdengar mengganggu. Anda mungkin pernah mengalami ini jika ponsel Anda pernah membaca pesan teks dengan URL.
+
+### Masalah dengan "klik di sini"
+
+Pembaca layar juga memiliki kemampuan untuk membaca hanya hyperlink pada halaman, sama seperti orang awam yang memindai halaman untuk mencari link. Jika teks tautan selalu "klik di sini", yang akan didengar pengguna hanyalah "klik di sini, klik di sini, klik di sini, klik di sini, klik di sini, ..." Semua tautan sekarang tidak dapat dibedakan satu sama lain.
+
+### Teks tautan yang bagus
+
+Teks tautan yang bagus menjelaskan secara singkat apa yang ada di sisi lain tautan. Dalam contoh di atas yang berbicara tentang penguin kecil, tautannya menuju ke halaman Wikipedia tentang spesies tersebut. Frasa *penguin kecil* akan menjadi teks tautan yang sempurna karena menjelaskan apa yang akan dipelajari seseorang jika mereka mengeklik tautan - penguin kecil.
+
+> [Penguin kecil](https://en.wikipedia.org/wiki/Little_penguin), kadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia.
+
+✅ Jelajahi web selama beberapa menit untuk menemukan halaman yang menggunakan strategi penautan yang tidak jelas. Bandingkan mereka dengan situs lain yang ditautkan lebih baik. Apa yang kamu pelajari?
+
+#### Catatan mesin pencari
+
+Sebagai bonus tambahan untuk memastikan situs Anda dapat diakses oleh semua, Anda juga akan membantu mesin pencari menavigasi situs Anda. Mesin pencari menggunakan teks link untuk mempelajari topik halaman. Jadi, menggunakan teks tautan yang bagus membantu semua orang!
+
+### ARIA
+
+Bayangkan halaman berikut:
+
+| Produk       | Deskripsi        | Pesan        |
+| ------------ | ---------------- | ------------ |
+| Widget       | [Deskripsi]('#') | [Pesan]('#') |
+| Widget super | [Deskripsi]('#') | [Pesan]('#') |
+
+Dalam contoh ini, menduplikasi teks deskripsi dan urutan masuk akal bagi seseorang yang menggunakan browser. Namun, seseorang yang menggunakan pembaca layar hanya akan mendengar kata *deskripsi* dan *pesan* diulang tanpa konteks.
+
+Untuk mendukung jenis skenario ini, HTML mendukung sekumpulan atribut yang dikenal sebagai [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) (Aplikasi Internet Kaya yang Dapat Diakses). Atribut ini memungkinkan Anda memberikan informasi tambahan kepada pembaca layar.
+
+> **CATATAN**: Seperti banyak aspek HTML, dukungan browser dan pembaca layar mungkin berbeda. Namun, sebagian besar klien pasaran mendukung atribut ARIA.
+
+Anda dapat menggunakan `aria-label` untuk mendeskripsikan link jika format halaman tidak mengizinkan Anda. Deskripsi untuk widget dapat disetel sebagai
+
+``` html
+<a href="#" aria-label="Deskripsi widget">deskripsi</a>
+```
+
+✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `<div>` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna.
+
+```html
+<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+</div>
+```
+
+## Gambar-gambar
+
+Tak perlu dikatakan pembaca layar tidak dapat secara otomatis membaca apa yang ada dalam gambar. Memastikan gambar dapat diakses tidak membutuhkan banyak pekerjaan - itulah yang dimaksud dengan atribut `alt`. Semua gambar harus memiliki `alt` untuk mendeskripsikan gambar tersebut.
+
+✅ Seperti yang Anda duga, mesin telusur juga tidak dapat memahami apa yang ada di gambar. Mereka juga menggunakan teks alt. Jadi sekali lagi, memastikan halaman Anda dapat diakses memberikan bonus tambahan!
+
+## Keyboard
+
+Beberapa pengguna tidak dapat menggunakan mouse atau trackpad, sebagai gantinya mengandalkan interaksi keyboard untuk tab dari satu elemen ke elemen berikutnya. Situs web Anda harus menyajikan konten Anda dalam urutan logis sehingga keyboard dapat mengakses setiap elemen saat pengguna bergerak ke bawah dokumen. Jika Anda membangun halaman web Anda dengan markup semantik dan menggunakan CSS untuk mengatur tata letak visualnya, situs Anda harus dapat dinavigasi dengan keyboard, tetapi penting untuk menguji aspek ini secara manual. Pelajari lebih lanjut tentang [strategi navigasi keyboard](https://webaim.org/techniques/keyboard/).
+
+✅ Buka situs web mana pun dan coba menavigasi hanya dengan menggunakan tombol tab Anda. Apa yang berhasil, apa yang tidak berhasil? Mengapa?
+
+## Ringkasan
+
+Web yang dapat diakses oleh beberapa orang bukanlah benar-benar 'web di seluruh dunia'. Cara terbaik untuk memastikan situs yang Anda buat dapat diakses adalah dengan menerapkan praktik terbaik aksesibilitas sejak awal. Meskipun ada langkah tambahan yang terlibat, menggabungkan keterampilan ini ke dalam alur kerja Anda sekarang berarti semua halaman yang Anda buat dapat diakses.
+
+---
+
+## 🚀 Tantangan
+
+Ambil HTML ini dan tulis ulang agar dapat diakses semaksimal mungkin, dengan strategi yang Anda pelajari.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Kuis Pasca Kuliah
+
+[Kuis pasca kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=id)
+
+## Review & Belajar Mandiri
+
+Banyak pemerintah memiliki undang-undang tentang persyaratan aksesibilitas. Baca tentang undang-undang aksesibilitas negara asal Anda. Apa yang tercakup, dan apa yang tidak? Contohnya adalah [situs web pemerintah ini](https://accessibility.blog.gov.uk/).
+
+## Tugas
+
+[Analisis situs web yang tidak dapat diakses](assignment.id.md)
+
+Kredit: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) oleh Instrumen

1-getting-started-lessons/3-accessibility/translations/README.it.md

@@ -0,0 +1,228 @@
+# Creare Pagine Web Accessibili
+
+![Tutto quanto riguarda l'Accessibilità](/sketchnotes/webdev101-a11y.png)
+> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Pre-Lezione
+[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=it)
+
+> La forza del Web è nella usa universalità. L'accesso garantito a tutti a prescindere dalla disabilità è us aspetto essenziale.
+>
+> \- Sir Timothy Berners-Lee, Direttore W3C e Inventore del World Wide Web
+
+Questa frase evidenzia perfettamente l'importanza di crerare siti web accessibili. Una applicazione che non può essere acceduta da tutti diventa per definizione esclusivista. Come sviluppatori web si dovrebbe sempre tenere a mente l'accessibilità. Focalizzandosi su questo fin dal principio si sarà sulla buona strada per garantire a chiunque l'accesso alle pagine che si sono create. In questa lezione, si apprenderanno gli strumenti che possono aiutare a rendere le proprie risorse web accessibili e che siano costruite con in mente l'accessibilità.
+
+## Strumenti da usare
+
+### Lettori di schermo
+
+Uno dei più noti strumenti di accessibilità sono i lettori di schermo (screen reader)
+
+I [lettori di schermo](https://www.wikiwand.com/it/Screen_reader) sono strumenti client comunemente usati per persone con menomazioni visive. Poiché dedichiamo tempo a garantire che un browser trasmetta correttamente le informazioni che desideriamo condividere, dobbiamo anche assicurarci che uno screen reader faccia lo stesso.
+
+Nella sua forma più elementare, uno screen reader leggerà una pagina dall'alto verso il basso in modo udibile. Se una pagina è tutta testo, il lettore trasmetterà le informazioni in modo simile a un browser. Naturalmente, le pagine web sono raramente puramente testuali; contengono collegamenti, grafica, colore e altri componenti visivi. È necessario prestare attenzione per garantire che queste informazioni vengano lette correttamente da uno screen reader.
+
+Ogni sviluppatore web dovrebbe acquisire familiarità con uno screen reader. Come evidenziato sopra, è il client che gli utenti dello sviluppatore  utilizzeranno. Allo stesso modo in cui si ha familiarità con il funzionamento di un browser, si dovrebbe imparare come funziona uno screen reader. Fortunatamente, gli screen reader sono integrati nella maggior parte dei sistemi operativi.
+
+Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader.
+
+✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita.
+
+### Zoom
+
+Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati.
+
+Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e   [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Verificatori di contrasto
+
+I colori sui siti web devono essere scelti con cura per rispondere alle esigenze degli utenti daltonici o delle persone che hanno difficoltà a vedere i colori a basso contrasto.
+
+✅ Provare un sito web che  piace usare per l'utilizzo del colore con un'estensione del browser come [il controllo del colore WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Cosa si è appreso?
+
+### Lo strumento Faro (Lighthouse)
+
+Nell'area degli strumenti per sviluppatori del browser, si troverà lo strumento Lighthouse. Questo strumento è importante per ottenere una prima visione dell'accessibilità (così come altre analisi) di un sito web. Sebbene sia importante non fare affidamento esclusivamente su Lighthouse, un punteggio del 100% è molto utile come riferimento.
+
+✅ Trovare Lighthouse nel pannello degli strumenti per sviluppatori del proprio browser ed eseguire un'analisi su qualsiasi sito. Cosa si è scoperto?
+
+## Progettare per l'accessibilità
+
+L'accessibilità è un argomento relativamente ampio. A supporto, sono disponibili numerose risorse.
+
+- [Accessibile U - Università del Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Sebbene non si sarà in grado di coprire ogni aspetto della creazione di siti accessibili, di seguito sono riportati alcuni dei principi fondamentali che si vorranno 	implementare. Progettare una pagina accessibile dall'inizio è **sempre** più facile che tornare a una pagina esistente per renderla accessibile.
+
+## Buoni principi di visualizzazione
+
+### Tavolozze di colori sicuri
+
+Le persone vedono il mondo in modi diversi, e questo include i colori. Quando si seleziona una combinazione di colori per il proprio sito, ci si dovrebbe assicurare che sia accessibile a tutti. Un ottimo [strumento per generare tavolozze di colori è Color Safe](http://colorsafe.co/).
+
+✅ Identificare un sito web che è molto problematico nel suo uso del colore. Perché?
+
+### Usa l'HTML corretto
+
+Con CSS e JavaScript è possibile far sembrare qualunque elemento come un qualsiasi tipo di controllo. `<span>` potrebbe essere usato per creare un  `<button>`, e `<b>` potrebbe diventare un collegamento ipertestuale. Sebbene questo possa essere considerato più facile da definire, non trasmette nulla a uno screen reader. Occorre usare l'HTML appropriato quando si creano i controlli su una pagina. Se si vuole un collegamento ipertestuale usare `<a>`. L'utilizzo dell'HTML corretto per il controllo corretto è chiamato fare uso dell'HTML semantico.
+
+✅ Portarsi su qualsiasi sito web e controllare se i progettisti e gli sviluppatori stanno usando l'HTML correttamente. Si riesce a trovare un pulsante che dovrebbe essere un collegamento? Suggerimento: fare clic con il tasto destro e scegliere "Visualizza sorgente pagina" nel browser per esaminare il codice relativo.
+
+### Creare una gerarchia descrittiva delle intestazioni
+
+Gli utenti di screen reader [fanno molto affidamento sui titoli](https://webaim.org/projects/screenreadersurvey8/#finding) per trovare informazioni e navigare in una pagina. La scrittura di contenuto di intestazione descrittiva e l'utilizzo di tag di intestazione semantici sono importanti per creare un sito facilmente navigabile per gli utenti di lettori di schermo.
+
+### Usare buoni indizi visivi
+
+CSS offre il controllo completo sull'aspetto di qualsiasi elemento in una pagina. È possibile creare caselle di testo senza un contorno o collegamenti ipertestuali senza una sottolineatura. Sfortunatamente rimuovere questi indizi può rendere più difficile per qualcuno che dipende da loro essere in grado di riconoscere il tipo di controllo.
+
+## L'importanza del testo del collegamento
+
+I collegamenti ipertestuali sono fondamentali per la navigazione sul Web. Di conseguenza, assicurarsi che uno screen reader possa leggere correttamente i collegamenti consente a tutti gli utenti di navigare nel proprio sito.
+
+### Lettori di schermo e collegamenti
+
+Come ci si potrebbe aspettare, gli screen reader leggono il testo del collegamento nello stesso modo in cui leggono qualsiasi altro testo nella pagina. Tenedo presente questo, il testo mostrato di seguito potrebbe sembrare perfettamente accettabile.
+
+> Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. [Fare clic qui](https://en.wikipedia.org/wiki/Little_penguin) per ulteriori informazioni.
+
+> Il Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. Visitare https://en.wikipedia.org/wiki/Little_penguin per ulteriori informazioni.
+
+> **NOTA** Come si leggerà di seguito, non si dovrebbero **mai** creare collegamenti che assomigliano all'esempio precedente
+
+Si ricordi che gli screen reader sono un'interfaccia diversa dai browser con un diverso insieme di funzionalità.
+
+### Il problema con l'utilizzo dell'URL
+
+I lettori di schermo leggono il testo. Se nel testo viene visualizzato un URL, lo screen reader leggerà l'URL. In generale, l'URL non trasmette informazioni significative e può sembrare al suono fastidioso. Si potrebbe averlo riscontrato se il proprio telefono ha mai letto in modo udibile un messaggio di testo con un URL.
+
+### Il problema con "clicca qui"
+
+I lettori di schermo hanno anche la capacità di leggere solo i collegamenti ipertestuali su una pagina, molto nello stesso modo in cui una persona vedente scorrerebbe una pagina per cercare collegamenti. Se il testo del link è sempre "clicca qui", tutto ciò che l'utente sentirà sarà "clicca qui, clicca qui, clicca qui, clicca qui, clicca qui, ..." Tutti i collegamenti sono ora indistinguibili l'uno dall'altro.
+
+### Buon testo del collegamento
+
+Un buon testo del collegamento descrive brevemente cosa c'è dall'altra parte del collegamento. Nell'esempio sopra che parla di piccoli pinguini, il collegamento è alla pagina di Wikipedia sulla specie. La frase *piccoli pinguini* renderebbe il testo del collegamento perfetto in quanto chiarisce ciò che qualcuno imparerà se fa clic sul collegamento: piccoli pinguini.
+
+> Il [pinguino minore](https://www.wikiwand.com/it/Eudyptula_minor), a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo.
+
+✅ Navigare sul Web per alcuni minuti per trovare pagine che utilizzano oscure strategie di collegamento. Confrontarle con altri siti con collegamenti migliori. Cosa si è appreso?
+
+#### Note sui motori di ricerca
+
+Come bonus aggiuntivo per garantire che il proprio sito sia accessibile a tutti, si dovranno aiutare anche i motori di ricerca a navigare nel sito. I motori di ricerca utilizzano il testo del collegamento per apprendere gli argomenti delle pagine. Quindi usare un buon testo per i link aiuta tutti!
+
+### ARIA
+
+Si Immagini la pagina seguente:
+
+| Prodotto         | Descrizione        | Ordine        |
+| ---------------- | ------------------ | ------------- |
+| Widget           | [Descrizione]('#') | [Ordine]('#') |
+| DMX Super Widget | [Descrizione]('#') | [Ordine]('#') |
+
+In questo esempio, la duplicazione del testo della descrizione e dell'ordine ha senso per qualcuno che utilizza un browser. Tuttavia, qualcuno che utilizza uno screen reader ascolterebbe solo le parole *descrizione* e *ordine* ripetute senza contesto.
+
+Per supportare questi tipi di scenari, HTML supporta una serie di attributi noti come [ARIA (Accessible Rich Internet Applications)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Questi attributi consentono di fornire informazioni aggiuntive agli screen reader.
+
+> **NOTA**: come molti aspetti dell'HTML, il supporto del browser e dello screen reader può variare. Tuttavia, la maggior parte dei client principali supporta gli attributi ARIA.
+
+E' possibile utilizzare `aria-label` per descrivere il collegamento quando il formato della pagina non lo consente. La descrizione del widget potrebbe essere impostata come
+
+```html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico  `<div>` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Immagini
+
+Inutile dire che gli screen reader non sono in grado di leggere automaticamente il contenuto di un'immagine. Assicurarsi che le immagini siano accessibili non richiede molto lavoro: è ciò di cui tratta l'attributo `alt` . Tutte le immagini significative dovrebbero avere un `alt` per descrivere cosa sono. Le immagini che sono puramente decorative dovrebbero avere il loro attributo `alt` impostato su una stringa vuota: `alt = ""`. Ciò impedisce ai lettori di schermo di annunciare inutilmente l'immagine decorativa.
+
+✅ Come ci si potrebbe aspettare, anche i motori di ricerca non sono in grado di capire cosa c'è in un'immagine. Anch'essi usano il testo alternativo. Quindi, ancora una volta, assicurandosi che la propria pagina sia accessibile fornisce bonus aggiuntivi!
+
+## La tastiera
+
+Alcuni utenti non sono in grado di utilizzare un mouse o un trackpad, affidandosi invece alle interazioni della tastiera per passare da un elemento all'altro. È importante che il proprio sito web presenti i contenuti in ordine logico in modo che un utente usando la tastiera possa accedere a ogni elemento interattivo mentre si sposta nel flusso di un documento. Se si creano le proprie pagine web con markup semantico e si utilizza CSS per definire lo stile del layout visivo, il proprio sito dovrebbe essere navigabile da tastiera, ma è importante testare manualmente questo aspetto. Per saperne di più su ulteriori informazioni sulle [strategie di navigazione da tastiera](https://webaim.org/techniques/keyboard/).
+
+✅ Andare su qualsiasi sito web e provare a navigarlo utilizzando solo la tastiera. Cos'è che funziona e cos'è che non funziona? Perché?
+
+## Riepilogo
+
+Un Web accessibile ad alcuni non è un vero "world-wide web". Il modo migliore per garantire che i siti che si creano siano accessibili è incorporare le migliori pratiche di accessibilità sin dall'inizio. Sebbene siano necessari passaggi aggiuntivi, incorporare queste abilità nel flusso di lavoro ora significa che tutte le pagine che si creeranno  saranno accessibili.
+
+---
+
+## 🚀 Sfida
+
+Prendere questo HTML e riscriverlo per essere il più accessibile possibile, date le strategie che sono state apprese.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum.
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Quiz post-lezione
+[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=it)
+
+## Revisione e auto apprendimento
+
+Molti governi hanno leggi riguardanti i requisiti di accessibilità. Consultare le leggi sull'accessibilità del proprio paese d'origine. Cosa è coperto e cosa no? Un esempio è [questo sito web del governo inglese](https://accessibility.blog.gov.uk/).
+
+## Assegnazione
+
+[Analizzare un sito web non accessibile](assignment.it.md)
+
+Crediti: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) da Instrument

1-getting-started-lessons/3-accessibility/translations/README.ja.md

@@ -0,0 +1,229 @@
+# アクセシブルな Web ページの作成
+
+![All About Accessibility](/sketchnotes/webdev101-a11y.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## レッスン前の小テスト
+[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=ja)
+
+> Web の力は、その普遍性にあります。障害の有無に関わらず、誰もがアクセスできることが重要です。
+>
+> \- Sir Timothy Berners-Lee, W3C 理事、World Wide Web の発明者
+
+この引用は、アクセシブルな Web サイトを作成することの重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上、排除的なものです。Web 開発者として、私たちは常にアクセシビリティを念頭に置くべきです。最初からこのことに焦点を当てることで、あなたが作成したページに誰もがアクセスできるようにすることができるようになります。このレッスンでは、Web 資産がアクセシブルであることを確実にするのに役立つツールと、アクセシビリティを念頭に置いて構築する方法について学びます。
+
+## 使用するツール
+
+### スクリーンリーダー
+
+よく知られているアクセシビリティツールの一つにスクリーンリーダーがあります。
+
+[スクリーンリーダー](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC)は、視覚障害のある方のために一般的に使用されているクライアントです。ブラウザが共有したい情報を適切に伝えることに時間を費やしているので、スクリーンリーダーも同じように情報を伝えるようにしなければなりません。
+
+スクリーンリーダーは、最も基本的には、ページを上から下まで音声で読み上げます。あなたのページがすべてテキストである場合、リーダーはブラウザと同様の方法で情報を伝えます。もちろん、ウェブページが純粋なテキストであることはほとんどなく、リンク、グラフィック、カラー、その他の視覚的な要素が含まれます。これらの情報がスクリーンリーダーに正しく読まれるように注意を払わなければなりません。
+
+すべてのウェブ開発者は、スクリーンリーダーに慣れる必要があります。上で強調したように、ユーザーが利用するのはクライアントです。ブラウザの操作方法を熟知しているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、スクリーンリーダーはほとんどのオペレーティングシステムに組み込まれています。
+
+ブラウザの中には、テキストを音読したり、基本的なナビゲーション機能を提供したりするツールや拡張機能を内蔵しているものもありますが、[これらはアクセシビリティに焦点を当てたEdgeブラウザツール](https://support.microsoft.com/ja-jp/microsoft-edge/microsoft-edge-%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E6%A9%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)のようなものです。これらも重要なアクセシビリティツールですが、スクリーンリーダーとは機能が大きく異なるため、スクリーンリーダーのテストツールと勘違いしてはいけません。
+
+✅ スクリーンリーダーやブラウザのテキストリーダーを試してみましょう。Windows ではデフォルトで [Narrator](https://support.microsoft.com/ja-jp/windows/%E3%83%8A%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%81%AA%E3%82%AC%E3%82%A4%E3%83%89-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) が搭載されており、[JAWS](https://webaim.org/articles/jaws/) や [NVDA](https://www.nvaccess.org/about-nvda/) もインストールできます。macOS と iOS では、[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) がデフォルトでインストールされています。
+
+### ズーム
+
+視覚障害のある人がよく使うもう一つのツールは、ズームです。ズームの最も基本的なタイプは静的ズームで、`コントロール + プラス記号 (+)` で制御するか、画面の解像度を下げることで制御します。このタイプのズームではページ全体のサイズが変更されるため、[レスポンシブデザイン](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用することは、ズームレベルを上げても良いユーザー体験を提供するために重要です。
+
+もう一つのタイプのズームは、特殊なソフトウェアを使用して、実際の虫眼鏡を使用するのと同じように、画面のある領域を拡大してパンすることを目的としています。Windows では、[Magnifier](https://support.microsoft.com/ja-jp/windows/%E7%94%BB%E9%9D%A2%E4%B8%8A%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E8%A6%8B%E3%82%84%E3%81%99%E3%81%8F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB-%E6%8B%A1%E5%A4%A7%E9%8F%A1%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B-414948ba-8b1c-d3bd-8615-0e5e32204198) が内蔵されており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) は、より多くの機能を持ち、より多くのユーザーベースを持つサードパーティ製の拡大表示ソフトウェアです。macOS と iOS の両方には、[Zoom](https://www.apple.com/accessibility/mac/vision/) と呼ばれる拡大鏡ソフトが内蔵されています。
+
+### コントラストチェッカー
+
+Webサイトの色は、色覚障害者やコントラストの低い色が見えにくい人のニーズに応えるために、慎重に選ぶ必要があります。
+
+✅ [WCAG のカラーチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=ja-JP)などのブラウザ拡張機能を使って、色使いを楽しむ Web サイトをテストしてみましょう。何がわかりますか？
+
+### Lighthouse
+
+ブラウザの開発者ツールエリアには、Lighthouse ツールがあります。このツールは、Web サイトのアクセシビリティ (他の分析と同様に) を最初に見るために重要です。Lighthouse だけに頼らないことが重要ですが、100% のスコアはベースラインとして非常に役立ちます。
+
+✅ ブラウザの開発者ツールパネルで Lighthouse を見つけて、任意のサイトで分析を実行してください。何を発見しましたか？
+
+## アクセシビリティを考慮した設計
+
+アクセシビリティは比較的大きなテーマです。あなたを助けるために、多くのリソースが用意されています。
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+アクセシブルなサイトを作成するためのすべての側面をカバーすることはできませんが、以下は、あなたが実装したいと思う中核的な原則のいくつかです。アクセシブルなページを最初からデザインすることは、既存のページに戻ってアクセシブルにするよりも**常に**簡単です。
+
+## 良い表示の原則
+
+### カラーセーフパレット
+
+人はさまざまな方法で世界を見ていますが、これには色も含まれます。サイトの配色を選択する際には、誰もがアクセスできるようにする必要があります。[カラーパレットを生成するための素晴らしいツールの1つが Color Safe ](http://colorsafe.co/)です。
+
+✅ 色の使用に非常に問題のある Web サイトを特定してください。なぜですか？
+
+### 正しい HTML を使用する
+
+CSS と JavaScript を使えば、あらゆる要素をあらゆるタイプのコントロールのように見せることができます。`<span>` を使って `<button>` を作成したり、`<b>` をハイパーリンクにしたりすることができます。この方がスタイルを整えるのは簡単だと思われるかもしれませんが、スクリーンリーダーには何も伝わりません。ページ上でコントロールを作成する際には、適切な HTML を使用してください。ハイパーリンクが必要な場合は、`<a>` を使用します。適切なコントロールに適切なHTML を使うことをセマンティック HTML の利用といいます。
+
+✅ 任意の Web サイトに行って、デザイナーや開発者が HTML を適切に使用しているかどうかを確認してください。リンクであるはずのボタンを見つけることができますか？ヒント: 右クリックして、ブラウザで「View Page Source」を選択して、基礎となるコードを見てみましょう。
+
+### 記述的な見出しの階層を作成する
+
+スクリーンリーダーのユーザーは、情報を見つけたり、ページをナビゲートしたりするために、[見出しに大きく依存しています](https://webaim.org/projects/screenreadersurvey8/#finding)。記述的な見出しコンテンツを書き、意味的な見出しタグを使用することは、スクリーンリーダーのユーザーがナビゲートしやすいサイトを作成するために重要です。
+
+### 視覚的な手がかりを上手に使う
+
+CSS は、ページ上のあらゆる要素の外観を完全に制御することができます。アウトラインのないテキストボックスやアンダーラインのないハイパーリンクを作成することができます。残念ながら、これらの手がかりを削除すると、それらに依存している人がコントロールの種類を認識することが難しくなる可能性があります。
+
+## リンクテキストの重要性
+
+ハイパーリンクは、ウェブをナビゲートするための核となるものです。その結果、スクリーンリーダーがリンクを適切に読めるようにすることで、すべてのユーザーがサイトをナビゲートできるようになります。
+
+### スクリーンリーダーとリンク
+
+ご想像の通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読みます。このことを念頭に置いて、以下に示すテキストは完全に許容できると感じるかもしれません。
+
+> 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3) をご覧ください。
+
+> 妖精ペンギンと呼ばれることもあるリトルペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。
+
+> **注** 今から読むように、上記のようなリンクは絶対に作っては**いけません**。
+
+スクリーンリーダーは、ブラウザとは異なる機能のセットを持つ別のインターフェイスであることを覚えておいてください。
+
+### URL を使用する場合の問題点
+
+スクリーンリーダーはテキストを読みます。本文中に URL が表示されている場合、スクリーンリーダーはその URL を読みます。一般的に、URL は意味のある情報を伝えず、迷惑に聞こえることがあります。あなたの携帯電話が URL 付きのテキストメッセージを音声で読んだことがある場合は、このような経験をしたことがあるかもしれません。
+
+### "こちらをクリック" の問題点
+
+スクリーンリーダーは、目の不自由な人がページをスキャンしてリンクを探すのと同じように、ページ上のハイパーリンクだけを読む機能も持っています。リンクテキストが常に「ここをクリックしてください」となっている場合、ユーザーは「ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、...」としか聞こえません。すべてのリンクは互いに区別がつかなくなりました。
+
+### 良いリンクテキスト
+
+良いリンクの文章は、リンクの向こう側に何があるのかを簡潔に説明します。上記の例では、コガタペンギンについて話していますが、リンク先はその種についての Wikipedia のページになっています。*コガタペンギン* というフレーズは、リンクをクリックした場合に何を学ぶのかが明確になるので、完璧なリンクテキストになります。
+
+> 妖精ペンギンとして知られることもある[コガタペンギン](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3)は、世界で最も小さいペンギンです。
+
+✅ 数分間 Web サーフィンをして、不明瞭なリンク戦略を使用しているページを見つけましょう。他の、より良いリンクを貼られているサイトと比較してみてください。あなたは何を学びますか？
+
+#### 検索エンジンの注意事項
+
+あなたのサイトが誰でもアクセスできるようにすることで、検索エンジンがあなたのサイトをナビゲートするのにも役立ちます。検索エンジンは、ページのトピックを学習するためにリンクテキストを使用します。ですから、良いリンクテキストを使用することは誰にでも役立ちます。
+
+### ARIA
+
+次のページを想像してみてください。
+
+| Product      | Description        | Order        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Description]('#') | [Order]('#') |
+| Super widget | [Description]('#') | [Order]('#') |
+
+この例では、description と order のテキストを複製しても、ブラウザを使っている人にとっては意味があります。しかし、スクリーン・リーダーを使っている人には、文脈なしに繰り返される *description* と *order* という単語しか聞こえません。
+
+これらのタイプのシナリオをサポートするために、HTML は[アクセシブル・リッチ・インターネット・アプリケーション (ARIA)](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA)として知られている一連の属性をサポートしています。これらの属性により、スクリーンリーダーに追加の情報を提供することができます。
+
+> **NOTE**: HTML の多くの側面と同様に、ブラウザやスクリーンリーダーのサポートは異なるかもしれません。しかし、ほとんどのメインラインのクライアントは ARIA 属性をサポートしています。
+
+ページのフォーマットでリンクを記述できない場合、`aria-label` を使ってリンクを記述することができます。ウィジェットの説明は
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ 一般的には、上記のようにセマンティックマークアップを使用することで ARIA の使用が優先されますが、様々な HTML ウィジェットにはセマンティックに相当するものが存在しないことがあります。良い例がツリーです。ツリーには HTML と同等のものがないので、適切なロールとアリアの値でこの要素の一般的な `<div>` を識別します。[ARIA に関する MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA)には、より有用な情報が含まれています。
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## 画像
+
+言うまでもなく、スクリーンリーダーは画像の中にあるものを自動的に読み取ることができません。画像を確実にアクセスできるようにするには、それほどの労力は必要ありません - それが `alt` 属性のすべてです。意味のある画像はすべて、その画像が何であるかを説明するための `alt` を持つべきです。
+純粋に装飾的な画像は `alt` 属性に空の文字列を設定しなければなりません。`alt=""`です。これにより、スクリーンリーダが装飾的な画像を不必要に知らせることを防ぐことができます。
+
+✅ さすがに検索エンジンも画像の中身を理解することができません。彼らもまた、alt　テキストを使用しています。ですから、もう一度言いますが、あなたのページがアクセス可能であることを確認することは、追加のボーナスを提供します。
+
+## キーボード
+
+マウスやトラックパッドを使用できないユーザーの中には、1つの要素から次の要素へとタブを移動するためにキーボードのインタラクションに頼っている人もいます。キーボードを使用するユーザーがドキュメントの下に移動しながら各インタラクティブ要素にアクセスできるように、Web サイトのコンテンツを論理的な順序で表示することが重要です。Web ページをセマンティック マークアップで構築し、CSS を使用して視覚的なレイアウトをスタイル化している場合、サイトはキーボード ナビゲーションが可能なはずですが、この点を手動でテストすることが重要です。[キーボードナビゲーション戦略](https://webaim.org/techniques/keyboard/)の詳細については、こちらをご覧ください。
+
+✅ 任意のウェブサイトにアクセスして、キーボードだけを使ってナビゲートしてみてください。何がうまくいき、何がうまくいかないのでしょうか？なぜでしょうか？
+
+## まとめ
+
+ある人にとってアクセシブルな Web は、真の意味での「ワールドワイドな Web」ではありません。作成するサイトがアクセシブルであることを保証する最善の方法は、アクセシビリティのベストプラクティスを最初から取り入れることです。余分なステップがありますが、これらのスキルをワークフローに組み込むことで、作成するすべてのページがアクセシブルになることを意味します。
+
+---
+
+## 🚀 チャレンジ
+
+この HTML を手に取り、学んだ戦略を踏まえて、できるだけアクセスしやすいように書き換えてください。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## レッスン後の小テスト
+[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=ja)
+
+## 復習と自己学習
+
+多くの政府には、アクセシビリティの要件に関する法律があります。あなたの国のアクセシビリティに関する法律をお読みください。何が適用され、何が適用されないのか？例としては、[この政府の Web サイト](https://accessibility.blog.gov.uk/)があります。
+
+## 課題
+ 
+[アクセスできない Web サイトを分析する](assignment.ja.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument

1-getting-started-lessons/3-accessibility/translations/README.ko.md

@@ -0,0 +1,220 @@
+# 접근 가능한 웹 페이지 생성하기
+
+![All About Accessibility](/sketchnotes/webdev101-a11y.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 강의 전 퀴즈
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=ko)
+
+> 웹의 힘은 보편성에 있습니다. 장애에 관계없이 모든 사람이 접근하는 것은 필수 요소입니다.
+>
+> \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
+
+이 인용문은 접근 가능한 웹 사이트를 만든다는 것의 중요성을 완벽하게 강조합니다. 모든 사람이 접근할 수 없는 애플리케이션은 정의에 따라 제외됩니다. 웹 개발자로서 우리는 항상 접근성을 염두에 두어야합니다. 처음부터 이 곳에 초점을 두면 모든 사람이 자신이 만든 페이지에 접근할 수 있도록 하는 데 도움이 됩니다. 이 강의에서는 웹 어셋에 접근할 수 있는지 확인하는 데 도움이 되는 도구와 접근성을 염두에 두고 빌드하는 방법에 대해 알아 봅니다.
+
+## 사용 도구
+
+### 스크린 리더
+
+가장 잘 알려진 접근성 도구 중 하나는 스크린 리더입니다.
+
+[스크린 리더](https://en.wikipedia.org/wiki/Screen_reader)는 시각 장애가 있는 사람들을 위해 일반적으로 사용되는 클라이언트입니다. 브라우저에서 공유하려는 정보를 올바르게 전달하는지 확인하는 데 시간을 할애 할 때 스크린 리더도 동일한 작업을 수행하도록 해야합니다.
+
+가장 기본적인 스크린 리더는 페이지를 위에서 아래로 소리내며 읽습니다. 페이지가 모두 텍스트인 경우 리더는 브라우저와 유사한 방식으로 정보를 전달합니다. 물론 웹 페이지는 문자 그대로가 아닌 텍스트가 있습니다. 여기에는 링크, 그래픽, 색상 및 기타 시각적 구성 요소가 포함됩니다. 스크린 리더가 정보를 올바르게 읽을 수 있도록 주의를 기울여야 합니다.
+
+모든 웹 개발자는 스크린 리더에 익숙해야합니다. 위에서 강조한 것처럼 사용자가 활용할 클라이언트입니다. 브라우저가 작동하는 방식에 익숙한 것과 마찬가지로 스크린 리더가 작동하는 방식을 배워야합니다. 다행히 스크린 리더는 대부분의 운영체제에 내장되어 있으며, 많은 브라우저에는 스크린 리더를 모방하는 확장이 포함되어 있습니다.
+
+✅ 스크린 리더 브라우저 확장이나 도구를 시도해보세요.[JAWS](https://webaim.org/articles/jaws/)는 윈도우에서만 작동합니다. 브라우저에는 이러한 목적으로 사용할 수 있는 내장 도구도 있습니다; [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) 확인합니다.
+
+### Contrast checkers
+
+웹 사이트의 색상은 색맹 혹은 저대비 색상을 보기 어려운 사람들의 요구에 맞게 신중하게 선택해야 합니다.
+
+✅ [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US)와 같은 브라우저 확장 프로그램을 사용하여 어떤 색상을 쓰는 지 웹 사이트를 테스트합니다. 무엇을 배울 수 있나요?
+
+### Lighthouse
+
+브라우저의 개발자 도구에서 Lighthouse 도구를 찾을 수 있습니다. 이 도구는 웹 사이트의 접근성(기타 분석)을 처음으로 파악하는 데 중요합니다. Lighthouse에만 의존하지 않는 것은 중요하지만, 100점을 기준으로 보면 매우 유용합니다.
+
+✅ 브라우저의 개발자 도구 패널에서 Lighthouse를 찾아 모든 사이트에서 분석을 실행하세요. 무엇을 발견했나요?
+
+## 접근성을 위한 디자인
+
+접근성은 비교적 큰 주제입니다. 도움을 주기 위한 다양한 리소스들이 있습니다.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+접근 가능한 사이트를 만드는 모든 사항을 다룰 수 없지만, 이는 구현하려는 핵심 원칙 중 일부입니다. 처음부터 접근 가능한 페이지를 기획하는 것은 접근할 수 있도록 기존 페이지로 돌아가는 것보다 **항상** 쉽습니다.
+
+## 좋은 디스플레이 원칙
+
+### 색상 안전 팔레트
+
+사람들은 세상을 다른 방식으로 봅니다. 여기에는 색상도 포함됩니다. 사이트에 대한 색상 스키마를 선택할 때 모든 사람이 접근할 수 있는지 확인해야 합니다. [색상 팔레트를 생성하는 한 가지 훌륭한 도구는 Color Safe](http://colorsafe.co/)입니다.
+
+✅ 색상을 사용할 때 매우 문제가 있는 웹 사이트를 식별하십시오. 왜 해야될까요?
+
+### 텍스트를 적절하게 강조하기
+
+색상, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight) 또는 기타 [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration)으로 텍스트를 강조하는 것은 본질적으로 스크린 리더에 중요하다고 알리지 않습니다. 단어는 키워드이기 때문에 굵게 표시되었거나 첫 번째 단어 혹은 디자이너가 굵게 표시해야한다고 결정했기 때문입니다.
+
+특정 구문을 강조 표시해야 하는 경우에는, `<strong>` 또는 `<em>` 요소를 사용하세요. 이는 스크린 리더에 해당 항목이 중요함을 나타냅니다.
+
+### 올바른 HTML 사용하기
+
+CSS와 JavaScript를 사용하면 많은 요소가 모든 유형를 제어할 수 있는 것처럼 보일 수 있습니다. `<span>` 은`<button>` 을 만드는 데 사용할 수 있으며, `<b>` 는 하이퍼 링크가 될 수 있습니다. 스타일링이 더 쉽다고 생각될 수 있지만, 스크린 리더에게는 당황스럽습니다. 페이지에 컨트롤을 만들 때는 적절한 HTML을 사용하십시오. 하이퍼 링크를 원하면 `<a>` 를 사용하세요. 올바른 제어를 위해 올바른 HTML을 사용하는 것은 Semantic HTML이라고 의미합니다.
+
+✅ 웹 사이트로 이동하여 디자이너와 개발자가 HTML을 올바르게 사용하고 있는지 확인하십시오. 링크의 역할을 하는 버튼을 찾을 수 있나요? Hint: 기반 코드를 보려면 브라우저에서 마우스 우측 버튼을 클릭하고 'View Page Source'를 선택하십시오.
+
+### 좋은 시각적 단서를 사용하기
+
+CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니다. 윤곽선없이 텍스트 상자를 만들거나 밑줄없이 하이퍼 링크를 만들 수 있습니다. 불행히도 이러한 단서를 제거하면 그 단서를 의존하는 사람이 제어 유형을 인식하는 것이 더 어려워질 수 있습니다.
+
+## 링크 텍스트의 중요성
+
+하이퍼 링크는 웹 탐색의 핵심 기능입니다. 결과적으로 스크린 리더가 링크를 제대로 읽을 수 있도록 한다면 모든 사용자가 사이트를 탐색할 수 있습니다.
+
+### 스크린 리더 및 링크
+
+예상대로 스크린 리더는 페이지 내부의 다른 텍스트를 읽는 것과 같은 방식으로 링크 텍스트를 읽습니다. 이를 염두하고 아래 설명된 텍스트는 완벽하게 수용 가능하다고 느낄 수 있습니다.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. [Click here](https://en.wikipedia.org/wiki/Little_penguin) for more information.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. Visit https://en.wikipedia.org/wiki/Little_penguin for more information.
+
+> **NOTE** 읽으려고 한다면, 위와 같은 링크는 **절대** 만들지 않아야 합니다.
+
+다시 말하지만, 스크린 리더는 브라우저마다 기능이 다른 인터페이스입니다.
+
+### URL 사용 문제점
+
+스크린 리더는 텍스트를 읽습니다. 텍스트에 URL이 표시되면, 스크린 리더가 URL을 읽습니다. 일반적으로 URL은 의미있는 정보를 전달하지 않으며, 불편하게 들릴 수 있습니다. 스마트폰에서 URL이 포함된 문자 메시지를 음성으로 읽은 적이 있다면 이 문제를 경험했을 수 있습니다.
+
+### "click here"의 문제점
+
+스크린 리더는 또한 시력이 있는 사람이 페이지에서 링크를 찾는 것과 동일한 방식으로 페이지의 하이퍼 링크만 읽을 수 있습니다. 링크 텍스트가 항상 "click here"인 경우 사용자는 "click here, click here, click here, click here, click here, ..." 라는 소리를 들을 수 있습니다. 이는 모든 링크를 서로 구별할 수 없습니다.
+
+### 좋은 링크 텍스트
+
+좋은 링크 텍스트는 링크의 다른 측면에 있는 내용을 간략하게 설명합니다. 작은 펭귄에 대해 이야기하는 예시에서 링크는 종에 대한 Wikipedia 페이지로 연결됩니다. *little penguins* 라는 문구는 누군가가 링크를 클릭하면 무엇을 배울 수 있는지를 명확하게 해주기 때문에 완벽한 링크 텍스트가 됩니다.-little penguins.
+
+> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
+
+✅ 모호한 연결 전략을 사용하는 페이지를 찾으려면 몇 분 동안 웹을 검색하십시오. 연결이 더 좋은 다른 사이트와 비교하십시오. 무엇을 배울 수 있나요?
+
+#### 검색 엔진 노트
+
+모든 사람이 사이트에 접근할 수 있도록 하면 추가 보너스로 검색 엔진이 사이트를 탐색하는데도 도움이 됩니다. 검색 엔진은 링크 텍스트를 사용하여 페이지 주제를 학습합니다. 따라서 좋은 링크 텍스트를 사용하면 모두에게 도움이 됩니다!
+
+### ARIA
+
+다음 페이지를 상상해보시기 바랍니다:
+
+| Product      | Description        | Order        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Description]('#') | [Order]('#') |
+| Super widget | [Description]('#') | [Order]('#') |
+
+이 예시에서는 설명 텍스트와 순서를 복사하는 것이 브라우저를 사용하는 사람에게 의미가 있습니다. 그러나 스크린 리더를 사용하는 사람은 문맥없이 반복되는 *설명* 및 *순서* 라는 단어만 듣게됩니다.
+
+이러한 유형의 시나리오를 지원하기 위해 HTML은 [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)라는 속성 집합을 지원합니다. 이러한 속성을 사용하면 스크린 리더에 추가 정보를 제공할 수 있습니다.
+
+> **NOTE**: HTML의 여러 측면과 마찬가지로, 브라우저 및 스크린 리더 지원은 다를 수 있습니다. 그러나 대부분의 주요 클라이언트는 ARIA 속성을 지원합니다.
+
+페이지 형식이 허용하지 않는 경우에는 `aria-label`을 사용하여 링크에 설명할 수 있습니다. 위젯에 대한 설명은 다음과 같이 설정할 수 있습니다
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ 일반적으로, 위에서 설명한 시맨틱 마크업을 사용하는 것은 ARIA의 사용을 대체하지만, 때때로 다양한 HTML 위젯에 해당하는 시맨틱이 없습니다. 좋은 예는 Progressbar입니다. 진행률 표시줄에 해당하는 HTML이 없으므로 적절한 역할 및 aria 값을 사용하여 일반 `<div>`를 식별합니다. [AMDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)에 더 유용한 정보가 포함되어 있습니다.
+
+```html
+<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+</div>
+```
+
+## 이미지
+
+스크린 리더는 이미지에 있는 내용을 자동으로 읽을 수 없습니다. 이미지에 접근할 수 있는지 확인하는 데 많은 작업이 필요하지 않습니다. 바로 `alt` 속성이 끝입니다. 모든 이미지에는 이미지를 설명하는 `alt`가 있어야합니다.
+
+✅ 예상대로, 검색 엔진은 이미지의 내용을 이해할 수 없습니다. 그래서 대체 텍스트를 사용합니다. 다시 한 번, 페이지에 접근할 수 있는지 확인하면 추가 보너스가 제공됩니다!
+
+## 키보드
+
+일부 사용자는 마우스 또는 트랙패드를 사용할 수 없으며, 대신 키보드로 의존하여 한 요소에서 다음 요소로 이동합니다. 사용자가 문서를 아래로 이동할 때 키보드가 각 요소에 접근할 수 있도록 웹 사이트에서 콘텐츠를 논리적 순서로 표시하는 것이 중요합니다. 시맨틱 마크업으로 웹 페이지를 만들고 CSS를 사용하여 시각적 레이아웃 스타일을 지정하는 경우, 사이트에서 키보드로 탐색할 수 있어야 하지만, 이 사항은 수동으로 테스트하는 것이 중요합니다. [keyboard navigation strategies](https://webaim.org/techniques/keyboard/)에 대해 자세히 알아보세요.
+
+✅ 웹 사이트로 이동하여 탭 키만 사용하여 탐색해보십시오. 작동하는 것과 작동하지 않는 것은 무엇입니까? 왜 그럴까요?
+
+## 요약
+
+일부가 접근할 수 있는 웹은 진정한 'world-wide web'이 아닙니다. 만든 사이트에 접근할 수 있도록 하는 가장 좋은 방법은 처음부터 접근성 모범 사례를 통합하는 것입니다. 추가 단계가 포함되어 있지만 이러한 기술을 워크 플로우에 통합하면 만드는 모든 페이지에 접근할 수 있습니다.
+
+---
+
+## 🚀 도전
+
+이 HTML을 가져와서 학습한 내용에 따라 가능한 하나의 접근을 할 수 있도록 다시 작성하십시오.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## 강의 후 퀴즈
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=ko)
+
+## 리뷰 & 자기주도 학습
+
+많은 정부 기관에는 접근성 요구사항에 관한 법률이 있습니다. 자신의 나라에 해당하는 접근성 법률을 읽어보십시오. 보장되거나 안되는 항목은 무엇입니까? [this government web site](https://accessibility.blog.gov.uk/) 예시 입니다.
+
+## 과제
+ 
+[Analyze a non-accessible web site](../assignment.md)
+
+크레딧: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument

1-getting-started-lessons/3-accessibility/translations/README.ms.md

@@ -0,0 +1,220 @@
+# Membuat Halaman Web yang Boleh Diakses
+
+![Semua Tentang Kebolehcapaian](/sketchnotes/webdev101-a11y.png)
+> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuiz Pra Kuliah
+[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> Kekuatan Web berada dalam kesejagatannya. Akses oleh semua orang tanpa mengira kecacatan adalah aspek penting.
+>
+> \- Sir Timothy Berners-Lee, Pengarah W3C dan penemu World Wide Web
+
+Petikan ini dengan jelas menunjukkan pentingnya membuat laman web yang boleh diakses. Aplikasi yang tidak dapat diakses oleh semua orang adalah definisi pengecualian. Sebagai pembangun laman web, kita harus sentiasa mempunyai fikiran aksesibiliti. Dengan fokus ini dari awal, anda akan dapat memastikan semua orang dapat mengakses halaman yang anda buat. Dalam pelajaran ini, anda akan mengetahui tentang alat yang dapat membantu anda memastikan bahawa aset web anda dapat diakses dan bagaimana membina dengan mempertimbangkan kebolehcapaian.
+
+## Alat untuk digunakan
+
+### Pembaca skrin
+
+Salah satu alat kebolehcapaian yang terkenal ialah pembaca skrin.
+
+[Pembaca Skrin](https://en.wikipedia.org/wiki/Screen_reader) adalah pelanggan yang biasa digunakan untuk mereka yang mengalami masalah penglihatan Semasa kita menghabiskan masa untuk memastikan penyemak imbas menyampaikan maklumat yang ingin kita kongsi dengan betul, kita juga harus memastikan pembaca skrin melakukan perkara yang sama.
+
+Pada asasnya, pembaca skrin akan membaca halaman dari atas ke bawah dengan didengar. Sekiranya halaman anda semua teks, pembaca akan menyampaikan maklumat dengan cara yang serupa dengan penyemak imbas. Sudah tentu, laman web jarang hanya teks; mereka akan mengandungi pautan, grafik, warna, dan komponen visual lain. Perhatian mesti diambil untuk memastikan bahawa maklumat ini dibaca dengan betul oleh pembaca skrin.
+
+Setiap pembangun web harus membiasakan diri dengan pembaca skrin. Seperti yang dinyatakan di atas, ini adalah pelanggan yang akan digunakan pengguna anda Sama seperti anda mengetahui bagaimana penyemak imbas beroperasi, anda harus mengetahui cara pembaca skrin beroperasi. Nasib baik pembaca skrin dimasukkan ke dalam kebanyakan sistem operasi, dan banyak penyemak imbas mengandungi sambungan untuk meniru pembaca skrin.
+
+✅ Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
+
+### Pemeriksa Kontras
+
+Warna di laman web perlu dipilih dengan teliti untuk menjawab keperluan pengguna buta warna atau orang yang mengalami kesukaran untuk melihat warna kontras rendah.
+
+✅ Uji laman web yang anda gemari untuk penggunaan warna dengan pelanjutan penyemak imbas seperti [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apakah anda telah belajar?
+
+### Lighthouse
+
+Di kawasan alat pembangun penyemak imbas (developer tool area) anda, anda akan menemui alat Lighthouse. Alat ini penting untuk mendapatkan pandangan pertama mengenai kebolehaksesan (serta analisis lain) dari laman web. Walaupun penting untuk tidak bergantung sepenuhnya pada Lighthouse, skor 100% sangat membantu sebagai asas.
+
+✅ Cari Lighthouse pada panel alat pembangun penyemak imbas anda dan jalankan analisis di mana-mana laman web. Apakah yang anda telah cari?
+
+## Reka bentuk untuk kebolehcapaian
+
+Kebolehcapaian adalah topik yang agak besar. Untuk membantu anda, terdapat banyak sumber yang ada.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Walaupun kami tidak dapat merangkumi setiap aspek dalam membuat laman web yang dapat diakses, berikut adalah beberapa prinsip utama yang ingin anda laksanakan. Merancang halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk menjadikannya mudah diakses.
+
+## Prinsip paparan yang baik
+
+### Palet warna selamat
+
+Orang melihat dunia dengan cara yang berbeza, dan ini termasuk warna. Semasa memilih skema warna untuk laman web anda, anda harus memastikannya dapat diakses oleh semua orang. Salah satu alat yang hebat [untuk menghasilkan palet warna ialah Warna Selamat](http://colorsafe.co/).
+
+✅ Kenalpasti laman web yang sangat bermasalah dalam penggunaan warnanya. Kenapa?
+
+### Sorot teks dengan betul
+
+Menonjolkan teks mengikut warna, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak memberitahu pembaca skrin mengenai kepentingannya. Sesuatu perkataan boleh dicetak tebal kerana itu adalah kata kunci, atau kerana kata pertama dan pereka memutuskan bahawa perkataan itu harus tebal.
+
+Apabila frasa tertentu perlu diserlahkan, gunakan elemen `<strong>` atau `<em>`. Ini akan menunjukkan kepada pembaca skrin bahawa item tersebut penting.
+
+### Guna HTML dengan betul
+
+Dengan CSS dan JavaScript, elemen boleh kelihatan seperti jenis kawalan. `<span>` dapat digunakan untuk membuat `<button>`, dan `<b>` dapat menjadi hyperlink. Walaupun ini mungkin dianggap lebih mudah untuk digayakan, membingungkan pembaca skrin. Gunakan HTML yang sesuai semasa membuat kawalan pada halaman. Sekiranya anda mahukan hyperlink, gunakan `<a>`. Menggunakan HTML yang betul untuk kawalan yang tepat disebut menggunakan HTML Semantik.
+
+✅ Pergi ke mana-mana laman web dan lihat apakah pereka dan pembangun menggunakan HTML dengan betul. Bolehkah anda mencari butang yang seharusnya menjadi pautan? Petunjuk: klik kanan dan pilih 'Lihat Sumber Halaman' di penyemak imbas anda untuk melihat kod yang mendasari.
+
+### Gunakan petunjuk visual yang baik
+
+CSS menawarkan kawalan penuh terhadap penampilan elemen apa pun pada halaman Anda boleh membuat kotak teks tanpa garis besar atau pautan hiper tanpa garis bawah. Malangnya, menghapus petunjuk itu boleh menjadikannya lebih mencabar bagi seseorang yang bergantung kepada mereka untuk dapat mengenali jenis kawalan.
+
+## Kepentingan teks pautan
+
+Hyperlink adalah teras untuk menavigasi web. Hasilnya, memastikan pembaca skrin dapat membaca pautan dengan betul membolehkan semua pengguna menavigasi laman web anda.
+
+### Pembaca skrin dan pautan
+
+Seperti yang anda harapkan, pembaca skrin membaca teks pautan dengan cara yang sama seperti mereka membaca teks lain di halaman. Dengan ini, teks yang ditunjukkan di bawah mungkin dapat diterima dengan baik.
+
+> Penguin kecil, kadang-kadang dikenali sebagai penguin peri, adalah penguin terkecil di dunia. [Tekan sini](https://en.wikipedia.org/wiki/Little_penguin) untuk maklumat lanjut.
+
+> Penguin kecil, kadang-kadang dikenali sebagai penguin peri, adalah penguin terkecil di dunia. Layari https://en.wikipedia.org/wiki/Little_penguin untuk maklumat lanjut.
+
+> **CATATAN** Semasa hendak membaca, anda seharusnya **tidak pernah** membuat pautan yang kelihatan seperti di atas.
+
+Ingat, pembaca skrin adalah antara muka yang berbeza dari penyemak imbas dengan set ciri yang berbeza.
+
+### Masalah dengan menggunakan URL
+
+Pembaca skrin membaca teks. Sekiranya URL muncul dalam teks, pembaca skrin akan membaca URL tersebut. Secara umum, URL tidak menyampaikan maklumat yang bermakna, dan boleh menyakitkan hati. Anda mungkin pernah mengalami ini jika telefon anda pernah membaca pesanan teks dengan URL.
+
+### Masalah dengan "klik di sini"
+
+Pembaca skrin juga mempunyai kemampuan untuk membaca hanya pautan hiper pada halaman, dengan cara yang sama orang yang melihat akan mengimbas halaman untuk mendapatkan pautan. Sekiranya teks pautan selalu "klik di sini", semua pengguna akan mendengar adalah "klik di sini, klik di sini, klik di sini, klik di sini, klik di sini, ..." Semua pautan kini tidak dapat dibezakan antara satu sama lain.
+
+### Teks pautan yang baik
+
+Teks pautan yang baik menerangkan secara ringkas apa yang terdapat di seberang pautan. Dalam contoh di atas yang membicarakan penguin kecil, pautan adalah ke halaman Wikipedia mengenai spesies tersebut. Frasa *penguin kecil* akan menghasilkan teks pautan yang sempurna kerana ia menjelaskan apa yang akan dipelajari oleh seseorang jika mereka mengklik pautan itu - penguin kecil.
+
+> [penguin kecil](https://en.wikipedia.org/wiki/Little_penguin), kadang-kadang dikenali sebagai penguin peri, adalah penguin terkecil di dunia.
+
+✅ Melayari laman web selama beberapa minit untuk mencari halaman yang menggunakan strategi penghubung yang tidak jelas. Bandingkan dengan laman web lain yang mempunyai hubungan lebih baik. Apa yang anda pelajari?
+
+#### Nota enjin carian
+
+Sebagai bonus tambahan untuk memastikan laman web anda dapat diakses oleh semua orang, anda juga akan membantu enjin carian menavigasi laman web anda. Enjin carian menggunakan teks pautan untuk mempelajari topik halaman. Oleh itu, menggunakan teks pautan yang baik membantu semua orang!
+
+### ARIA
+
+Bayangkan halaman berikut:
+
+| Produk       | Penerangan        | Pesanan        |
+| ------------ | ----------------- | -------------- |
+| Widget       | [Penerangan]('#') | [Pesanan]('#') |
+| Super widget | [Penerangan]('#') | [Pesanan]('#') |
+
+Dalam contoh ini, mendua teks keterangan dan urutan masuk akal bagi seseorang yang menggunakan penyemak imbas. Walau bagaimanapun, seseorang yang menggunakan pembaca skrin hanya akan mendengar kata-kata *Penerangan* dan *Pesanan* diulang tanpa konteks.
+
+Untuk menyokong jenis senario ini, HTML menyokong sekumpulan atribut yang dikenali sebagai [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Atribut ini membolehkan anda memberikan maklumat tambahan kepada pembaca skrin.
+
+> **CATATAN**: Seperti banyak aspek HTML, sokongan penyemak imbas dan pembaca skrin mungkin berbeza. Walau bagaimanapun, kebanyakan pelanggan utama menyokong atribut ARIA.
+
+Anda boleh menggunakan `aria-label` untuk menerangkan pautan apabila format halaman tidak membenarkan anda. Keterangan untuk widget dapat ditetapkan sebagai
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi kadang-kadang tidak ada yang setara dengan semantik untuk pelbagai widget HTML. Contoh yang baik ialah Progressbar. Tidak ada setara HTML untuk bar kemajuan, jadi anda mengenal pasti generik `<div>` untuk elemen ini dengan peranan dan nilai aria yang betul. [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) mengandungi maklumat yang lebih berguna.
+
+```html
+<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+</div>
+```
+
+## Gambar
+
+Sudah tentu, pembaca skrin tidak dapat membaca secara automatik apa yang terdapat dalam gambar. Memastikan gambar dapat diakses tidak memerlukan banyak kerja - itulah atribut `alt`. Semua gambar harus mempunyai `alt` untuk menggambarkan apa itu.
+
+✅ Seperti yang anda jangkakan, enjin carian juga tidak dapat memahami apa yang ada dalam gambar. Mereka juga menggunakan teks alt. Oleh itu, sekali lagi, memastikan halaman anda dapat diakses memberikan bonus tambahan!
+
+## Papan Kekunci
+
+Sebilangan pengguna tidak dapat menggunakan tetikus atau pad jejak, sebaliknya bergantung pada interaksi papan kekunci ke tab dari satu elemen ke elemen yang lain. Penting bagi laman web anda untuk menyajikan kandungan anda mengikut urutan logik agar papan kekunci dapat mengakses setiap elemen ketika pengguna menurunkan dokumen. Sekiranya anda membina laman web anda dengan penanda semantik dan menggunakan CSS untuk menggayakan susun atur visual mereka, laman web anda harus dilayari papan kekunci, tetapi penting untuk menguji aspek ini secara manual. Ketahui lebih lanjut mengenai [Strategi Papan Kekunci](https://webaim.org/techniques/keyboard/).
+
+✅ Pergi ke mana-mana laman web dan cuba menavigasinya melalui hanya menggunakan kunci tab anda. Apa yang berfungsi, apa yang tidak berfungsi? Kenapa?
+
+## Rumusan
+
+Web yang boleh diakses oleh sesetengah orang bukan benar-benar 'web seluruh dunia'. Kaedah terbaik untuk memastikan laman web yang anda buat dapat diakses adalah dengan menggabungkan amalan terbaik kebolehcapaian sejak awal. Walaupun ada langkah tambahan yang diperlukan, memasukkan kemahiran ini ke dalam aliran kerja anda sekarang akan bermakna semua halaman yang anda buat akan dapat diakses.
+
+---
+
+## 🚀 Cabaran
+
+Ambil HTML ini dan tulis semula agar dapat diakses semaksimum mungkin, mengingat strategi yang anda pelajari.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Kuiz Pasca Kuliah
+[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Mengkaji dan belajar sendiri
+
+Banyak kerajaan mempunyai undang-undang mengenai syarat aksesibilitas. Baca undang-undang kebolehcapaian negara asal anda. Apa yang dilindungi, dan apa yang tidak? Contohnya ialah [laman kerajaan](https://accessibility.blog.gov.uk/).
+
+## Tugasan
+
+[Menganalisis laman web yang tidak dapat diakses](../assignment.md)
+
+Kredit: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) karya Instrument

1-getting-started-lessons/3-accessibility/translations/README.nl.md

@@ -0,0 +1,229 @@
+# Toegankelijke webpagina's maken
+
+![Alles over toegankelijkheid](/sketchnotes/webdev101-a11y.png)
+> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz voorafgaand aan de lezing
+[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> De kracht van het web zit in zijn universaliteit. Toegang voor iedereen, ongeacht hun handicap, is een essentieel aspect.
+>
+> \- Sir Timothy Berners-Lee, W3C-directeur en uitvinder van het World Wide Web
+
+Deze quote benadrukt perfect het belang van het creëren van toegankelijke websites. Een applicatie die niet voor iedereen toegankelijk is, is per definitie uitsluiting. Als webontwikkelaars moeten we altijd rekening houden met toegankelijkheid. Door deze focus vanaf het begin te hebben, bent u goed op weg om ervoor te zorgen dat iedereen toegang heeft tot de pagina's die u maakt. In deze les leert u over de tools die u kunnen helpen ervoor te zorgen dat uw webitems toegankelijk zijn en hoe u kunt bouwen met toegankelijkheid in gedachten. 
+
+## Tools om te gebruiken
+
+### Schermlezers
+
+Een van de bekendste toegankelijkheidstools zijn schermlezers.
+
+[Schermlezers](https://nl.wikipedia.org/wiki/Schermlezer) zijn veelgebruikte clients voor mensen met een visuele beperking. Omdat we er tijd voor besteden om ervoor te zorgen dat een browser de informatie die we willen delen correct overbrengt, moeten we er ook voor zorgen dat een schermlezer hetzelfde doet.
+
+In de basis leest een schermlezer een pagina hoorbaar van boven naar beneden. Als uw pagina alleen uit tekst bestaat, zal de lezer de informatie op dezelfde manier overbrengen naar een browser. Webpagina's zijn natuurlijk zelden louter tekst; ze bevatten links, afbeeldingen, kleur en andere visuele componenten. Er moet voor worden gezorgd dat deze informatie correct wordt gelezen door een schermlezer.
+
+Elke webontwikkelaar moet vertrouwd raken met een schermlezer. Zoals hierboven aangegeven, is het de client die uw gebruikers zullen gebruiken. Net zoals u bekend bent met hoe een browser werkt, moet u leren hoe een schermlezer werkt. Gelukkig zijn schermlezers in de meeste besturingssystemen ingebouwd.
+
+Sommige browsers hebben ook ingebouwde tools en extensies die tekst hardop kunnen voorlezen of zelfs enkele basisnavigatiefuncties bieden, zoals [deze op toegankelijkheid gerichte Edge-browserhulpmiddelen](https://support.microsoft.com/nl-nl/microsoft-edge/toegankelijkheidsfuncties-in-microsoft-edge-4c696192-338e-9465-b2cd-bd9b698ad19a). Dit zijn ook belangrijke toegankelijkheidstools, maar ze werken heel anders dan schermlezers en ze mogen niet worden aangezien voor testtools voor schermlezers.
+
+✅ Probeer een schermlezer en browsertekstlezer. Op Windows is [Narrator](https://support.microsoft.com/nl-nl/windows/volledige-handleiding-voor-verteller-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) standaard inbegrepen, en [JAWS](https://webaim.org/articles/jaws/) en [NVDA](https://www.nvaccess.org/about-nvda/) kunnen ook worden geïnstalleerd. Op macOS en iOS is [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standaard geïnstalleerd.
+
+### Zoom
+
+Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus.
+
+Een ander type zoom is afhankelijk van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, net zoals bij het gebruik van een echt vergrootglas. Op Windows is [Magnifier](https://support.microsoft.com/nl-nl/windows/vergrootglas-gebruiken-voor-een-betere-zichtbaarheid-op-het-scherm-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is vergrotingssoftware van derden met meer functies en een groter gebruikersbestand. Zowel macOS als iOS hebben ingebouwde vergrotingssoftware genaamd [Zoom](https://www.apple.com/nl/accessibility/vision/).
+
+### Contrast checkers
+
+Kleuren op websites moeten zorgvuldig worden gekozen om tegemoet te komen aan de behoeften van kleurenblinde gebruikers of mensen die moeite hebben met het zien van kleuren met een laag contrast.
+
+✅ Test een website die u graag gebruikt voor kleurgebruik met een browserextensie zoals [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Wat leer je?
+
+### Lighthouse
+
+In het ontwikkelaarstoolgedeelte van uw browser vindt u de Lighthouse-tool. Deze tool is belangrijk om een eerste beeld te krijgen van de toegankelijkheid (en ook andere analyses) van een website. Hoewel het belangrijk is om niet uitsluitend op Lighthouse te vertrouwen, is een score van 100% erg nuttig als uitgangspunt.
+
+✅ Zoek Lighthouse in het ontwikkelaarstoolpaneel van uw browser en voer een analyse uit op elke site. wat ontdek je?
+
+## Ontwerpen voor toegankelijkheid
+
+Toegankelijkheid is een relatief groot onderwerp. Om u te helpen, zijn er tal van bronnen beschikbaar.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Hoewel we niet elk aspect van het maken van toegankelijke sites kunnen behandelen, staan hieronder enkele van de kernprincipes die u wilt implementeren. Het ontwerpen van een toegankelijke pagina vanaf het begin is **altijd** gemakkelijker dan teruggaan naar een bestaande pagina om deze toegankelijk te maken.
+
+## Goede weergaveprincipes
+
+### Kleur veilige paletten
+
+Mensen zien de wereld op verschillende manieren, inclusief kleuren. Wanneer u een kleurenschema voor uw site selecteert, moet u ervoor zorgen dat het voor iedereen toegankelijk is. Een geweldig [hulpmiddel voor het genereren van kleurenpaletten is Color Safe](http://colorsafe.co/).
+
+✅ Identificeer een website die erg problematisch is in het gebruik van kleur. Waarom?
+
+### Gebruik de juiste HTML
+
+Met CSS en JavaScript is het mogelijk om elk element eruit te laten zien als elk type besturingselement. `<span>` kan worden gebruikt om een `<button>` te maken en `<b>` kan een hyperlink worden. Hoewel dit misschien als gemakkelijker te stylen wordt beschouwd, brengt het niets over op een schermlezer. Gebruik de juiste HTML bij het maken van besturingselementen op een pagina. Als u een hyperlink wilt, gebruik dan `<a>`. Het gebruik van de juiste HTML voor de juiste besturing wordt het gebruik van Semantische HTML genoemd.
+
+✅ Ga naar een website en kijk of de ontwerpers en ontwikkelaars HTML correct gebruiken. Kunt u een button vinden die een link zou moeten zijn? Tip: klik met de rechtermuisknop en kies 'View Page Source' in uw browser om de onderliggende code te bekijken.
+
+### Maak een beschrijvende kophiërarchie
+
+Gebruikers van schermlezers [zijn sterk afhankelijk van koppen](https://webaim.org/projects/screenreadersurvey8/#finding) om informatie te vinden en door een pagina te navigeren. Het schrijven van beschrijvende koptekst en het gebruik van semantische koptags zijn belangrijk voor het maken van een gemakkelijk navigeerbare site voor gebruikers van schermlezers.
+
+### Gebruik goede visuele aanwijzingen
+
+CSS biedt volledige controle over het uiterlijk van elk element op een pagina. U kunt tekstvakken zonder omtreklijn of hyperlinks zonder onderstreping maken. Helaas kan het verwijderen van die aanwijzingen het voor iemand die van hen afhankelijk is, uitdagender maken om het type controle te herkennen.
+
+## Het belang van linktekst
+
+Hyperlinks zijn essentieel voor het navigeren op internet. Als gevolg hiervan kunnen alle gebruikers door uw site navigeren door ervoor te zorgen dat een schermlezer links correct kan lezen.
+
+### Schermlezers en links
+
+Zoals u zou verwachten, lezen schermlezers linktekst op dezelfde manier als andere tekst op de pagina. Met dit in gedachten kan de onderstaande tekst volkomen acceptabel aanvoelen.
+
+> De Dwergpinguïn, ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld. [Klik hier](https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn) voor meer informatie.
+
+> De Dwergpinguïn, ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld. Bezoek https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn voor meer informatie.
+
+> **OPMERKING** Zoals u gaat lezen, moet u **nooit** links maken die er als hierboven uitzien.
+
+Onthoud dat schermlezers een andere interface zijn dan browsers met een andere set functies.
+
+### Het probleem met het gebruik van de URL
+
+Schermlezers lezen de tekst. Als er een URL in de tekst voorkomt, leest de schermlezer de URL. Over het algemeen geeft de URL geen zinvolle informatie over en kan deze vervelend klinken. Mogelijk heeft u dit ondervonden als uw telefoon ooit een sms-bericht met een URL hoorbaar heeft gelezen.
+
+### Het probleem met "klik hier"
+
+Schermlezers hebben ook de mogelijkheid om alleen de hyperlinks op een pagina te lezen, net zoals een ziende een pagina zou scannen op links. Als de linktekst altijd "klik hier" is, hoort de gebruiker alleen "klik hier, klik hier, klik hier, klik hier, klik hier, ..." Alle links zijn nu niet meer van elkaar te onderscheiden.
+
+### Goede linktekst
+
+Een goede linktekst beschrijft in het kort wat er aan de andere kant van de link staat. In het bovenstaande voorbeeld over Dwergpinguïns, is de link naar de Wikipedia-pagina over de soort. De zin *Dwergpinguïns* zou zorgen voor perfecte linktekst, omdat het duidelijk maakt wat iemand zal leren als ze op de link klikken - Dwergpinguïns.
+
+> De [Dwergpinguïn](https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn), ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld.
+
+✅ Surf een paar minuten op internet om pagina's te vinden die obscure koppelingsstrategieën gebruiken. Vergelijk ze met andere, beter gekoppelde sites. Wat leer je?
+
+#### Aantekeningen bij zoekmachines
+
+Als extra bonus om ervoor te zorgen dat uw site voor iedereen toegankelijk is, helpt u zoekmachines ook bij het navigeren op uw site. Zoekmachines gebruiken linktekst om de onderwerpen van pagina's te leren. Het gebruik van goede linkteksten helpt dus iedereen!
+
+### ARIA
+
+Stelt u de volgende pagina voor:
+
+| Product      | beschrijving        | Volgorde        |
+| ------------ | ------------------- | --------------- |
+| Widget       | [beschrijving]('#') | [Volgorde]('#') |
+| Super widget | [beschrijving]('#') | [Volgorde]('#') |
+
+In dit voorbeeld is het zinvol om de tekst van de beschrijving en volgorde te dupliceren voor iemand die een browser gebruikt. Iemand die een schermlezer gebruikt, hoort echter alleen de woorden *beschrijving* en *volgorde* herhaald zonder context.
+
+Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers.
+
+> **OPMERKING**: Zoals veel aspecten van HTML, kan de ondersteuning van browser en schermlezer variëren. De meeste mainline-clients ondersteunen echter ARIA-attributen.
+
+U kunt `aria-label` gebruiken om de link te beschrijven als het formaat van de pagina dat niet toestaat. De beschrijving voor widget kan worden ingesteld als
+
+``` html
+<a href="#" aria-label="Widget description">beschrijving</a>
+```
+
+✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `<div>` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie.
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Afbeeldingen
+
+Het spreekt voor zich dat schermlezers niet automatisch kunnen lezen wat er in een afbeelding staat. Ervoor zorgen dat afbeeldingen toegankelijk zijn, kost niet veel werk - daar gaat het bij het `alt`-attribuut om. Alle betekenisvolle afbeeldingen moeten een `alt` hebben om te beschrijven wat ze zijn.
+Voor afbeeldingen die puur decoratief zijn, moet het `alt`-attribuut worden ingesteld op een lege tekenreeks: `alt=""`. Hiermee wordt voorkomen dat schermlezers de decoratieve afbeelding onnodig aankondigen.
+
+✅ Zoals u zou verwachten, kunnen zoekmachines ook niet begrijpen wat er in een afbeelding staat. Ze gebruiken ook alt-tekst. Dus nogmaals, ervoor zorgen dat uw pagina toegankelijk is, levert extra bonussen op!
+
+## Het toetsenbord
+
+Sommige gebruikers kunnen geen muis of trackpad gebruiken, maar vertrouwen op toetsenbordinteracties om van het ene element naar het andere te gaan. Het is belangrijk dat uw website uw inhoud in een logische volgorde presenteert, zodat een toetsenbordgebruiker toegang heeft tot elk interactief element terwijl ze door een document bladeren. Als u uw webpagina's bouwt met semantische opmaak en CSS gebruikt om hun visuele lay-out op te maken, moet uw site toetsenbord-navigeerbaar zijn, maar het is belangrijk om dit aspect handmatig te testen. Meer informatie over [strategieën voor toetsenbordnavigatie](https://webaim.org/techniques/keyboard/).
+
+✅ Ga naar een website en probeer er doorheen te navigeren met alleen uw toetsenbord. Wat werkt, wat werkt niet? Waarom?
+
+## Overzicht
+
+Een web dat voor sommigen toegankelijk is, is niet echt een 'world-wide web'. De beste manier om ervoor te zorgen dat de sites die u maakt, toegankelijk zijn, is door vanaf het begin de best practices voor toegankelijkheid op te nemen. Hoewel er extra stappen bij betrokken zijn, betekent het opnemen van deze vaardigheden in uw workflow dat alle pagina's die u maakt, toegankelijk zijn.
+
+---
+
+## 🚀 Uitdaging
+
+Neem deze HTML en herschrijf deze zodat deze zo toegankelijk mogelijk is, gezien de strategieën die u hebt geleerd.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Quiz na de lezing
+[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Beoordeling en zelfstudie
+
+Veel regeringen hebben wetten met betrekking tot toegankelijkheidseisen. Lees de toegankelijkheidswetten van uw thuisland. Wat wordt er gedekt en wat niet? Een voorbeeld is [deze overheidswebsite](https://accessibility.blog.gov.uk/).
+
+## Toewijzing
+ 
+[Analyseer een niet-toegankelijke website](assignment.nl.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) door instrument

1-getting-started-lessons/3-accessibility/translations/README.pt.md

@@ -0,0 +1,228 @@
+# Criando  Webpages Acessíveis
+
+![Tudo sobre acessibilidade](/sketchnotes/webdev101-a11y.png)
+> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Quiz Pré-Aula 
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
+
+> O poder da Web está em sua universalidade. O acesso de todos, independentemente de deficiências, é um aspecto essencial. 
+>
+> \- Senhor Timothy Berners-Lee, Diretor da W3C e inventor da World Wide Web
+
+Esta citação destaca perfeitamente a importância de criar sites acessíveis. Um aplicativo que não pode ser acessado por todos é, por definição, excludente. Como pessoas desenvolvedoras da web, devemos sempre ter a acessibilidade em mente. Tendo esse foco desde o início, você estará no caminho certo para garantir que todos possam acessar as páginas que você cria. Nesta lição, você aprenderá sobre as ferramentas que podem te ajudar a garantir que seus programas da web sejam acessíveis e como construir tendo a acessibilidade em mente.
+
+## Ferramentas para uso
+
+### Leitores de Tela
+
+Uma das ferramentas de acessibilidade mais conhecidas são os leitores de tela.
+
+[Leitores de Tela](https://pt.wikipedia.org/wiki/Leitor_de_tela) são clientes comumente usados por pessoas com deficiência visual. Como gastamos tempo garantindo que um navegador transmita adequadamente as informações que desejamos compartilhar, também devemos garantir que um leitor de tela faça o mesmo.
+
+Basicamente, um leitor de tela lê uma página de cima para baixo de forma audível. Se sua página for totalmente de texto, o leitor transmitirá as informações de maneira semelhante a um navegador. Claro, as páginas da web raramente são puramente texto; elas conterão links, gráficos, cores e outros componentes visuais. Deve-se ter cuidado para garantir que essas informações sejam lidas corretamente por um leitor de tela.
+
+Toda pessoa desenvolvedora da web deve se familiarizar com um leitor de tela. Conforme destacado acima, é o cliente que seus usuários utilizarão. Da mesma forma que você está se familiarizando com o funcionamento de um navegador, deve aprender como funciona um leitor de tela. Felizmente, os leitores de tela são integrados à maioria dos sistemas operacionais.
+
+Alguns navegadores também possuem ferramentas e extensões integradas que podem ler texto em voz alta ou até mesmo fornecer alguns recursos básicos de navegação, como [essas ferramentas do navegador Edge com foco em acessibilidade](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Essas também são ferramentas de acessibilidade importantes, mas funcionam de maneira muito diferente dos leitores de tela e não devem ser confundidas com ferramentas de teste de leitores de tela.
+
+✅ Experimente um leitor de tela e um leitor de texto do navegador. No Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) é includso por padrão. [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) também podem ser instalados. No macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) vem instalado por padrão.
+
+### Zoom
+
+Outra ferramenta normalmente usada por pessoas com deficiência visual é o zoom. O tipo mais básico de zoom é o zoom estático, controlado por `Ctrl + sinal de mais (+)` ou diminuindo a resolução da tela. Este tipo de zoom faz com que a página inteira seja redimensionada, portanto, usar [design responsivo](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) é importante para fornecer uma boa experiência do usuário em níveis de zoom aumentados.
+
+Outro tipo de zoom depende de um software especializado para ampliar uma área da tela e panoramizar, de maneira muito parecida com o uso de uma lente de aumento real. No Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) vem de fábrica, e o [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) é um software de ampliação de terceiros com mais recursos e uma base de usuários maior. Tanto o macOS quanto o iOS têm um software de ampliação integrado chamado [Zoom](https://www.apple.com/accessibility/mac/vision/).
+
+### Verificadores de contraste
+
+As cores nos sites precisam ser cuidadosamente escolhidas para atender às necessidades de usuários daltônicos ou pessoas que têm dificuldade em ver cores de baixo contraste.
+
+✅ Teste um site que você goste de usar com uma extensão de navegador para verificar o contraste das cores, como por exemplo o [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). O que você aprendeu?
+
+### Lighthouse
+
+Na área de ferramenta do desenvolvedor do seu navegador, você encontrará a ferramenta Lighthouse. Esta ferramenta é importante para obter uma primeira visão da acessibilidade (bem como outras análises) de um site. Embora seja importante não depender exclusivamente do Lighthouse, uma pontuação de 100% é muito útil como base.
+
+✅ Encontre o Lighthouse no painel Dev Tools do seu navegador e execute uma análise em qualquer site. o que você descobriu?
+
+## Criando Designs para acessibilidade
+
+Acessibilidade é um tópico relativamente amplo. Para te ajudar, existem vários recursos disponíveis.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Embora não possamos cobrir todos os aspectos da criação de sites acessíveis, a seguir estão alguns dos princípios básicos que você deseja implementar. Projetar uma página acessível desde o início é **sempre** mais fácil do que voltar a uma página existente para torná-la acessível.
+
+## Boas práticas de display
+
+### Paletas de cores seguras
+
+As pessoas veem o mundo de maneiras diferentes, e isso inclui cores. Ao selecionar um esquema de cores para o seu site, você deve garantir que ele seja acessível a todos. Uma ótima [ferramenta para gerar paletas de cores é Color Safe](http://colorsafe.co/).
+
+✅ Identifique um site que seja muito problemático no uso de cores. Porque esse site é problemático?
+
+### Use o HTML correto
+
+Com CSS e JavaScript é possível fazer com que qualquer elemento se pareça com qualquer tipo de controle. `<span>` poderia ser usado para criar um `<button>`, e `<b>` poderia se tornar um hiperlink. Embora isso possa ser considerado mais fácil de estilizar, não transmite nada para um leitor de tela. Use o HTML apropriado ao criar controles em uma página. Se você quiser um hiperlink, use `<a>`. Usar o HTML certo para o controle certo é chamado de usar HTML semântico.
+
+✅ Vá a qualquer site e veja se os designers e desenvolvedores estão usando HTML corretamente. Você consegue encontrar um botão que deveria ser um link? Dica: clique com o botão direito e escolha 'Exibir código-fonte da página' em seu navegador para ver o código subjacente.
+
+### Crie uma hierarquia descritiva de títulos
+
+Pessoas usuárias de leitores de tela [dependem muito de títulos](https://webaim.org/projects/screenreadersurvey8/#finding) para encontrar informações e navegar por uma página. Escrever conteúdo de título descritivo e usar tags de título semântico são importantes para criar um site facilmente navegável para usuários de leitores de tela.
+
+### Use boas dicas visuais
+
+CSS oferece controle completo sobre a aparência de qualquer elemento em uma página. Você pode criar caixas de texto sem contorno ou hiperlinks sem sublinhado. Infelizmente, remover esses sinais pode tornar mais difícil para alguém que depende deles ser capaz de reconhecer o tipo de controle.
+
+## A importância do texto do link
+
+Os hiperlinks são essenciais para navegar na web. Como resultado, garantir que um leitor de tela possa ler os links corretamente permite que todos os usuários naveguem em seu site sem problemas.
+
+### Leitores de tela e links
+
+Como seria de se esperar, os leitores de tela lêem o texto do link da mesma forma que leriam qualquer outro texto na página. Com isso em mente, o texto demonstrado abaixo pode parecer perfeitamente aceitável.
+
+> O pequeno pinguim, também conhecido como pinguim fada, é o menor pinguim do mundo. [Clique aqui](https://en.wikipedia.org/wiki/Little_penguin)  para mais informações.
+
+> O pequeno pinguim, também conhecido como pinguim fada, é o menor pinguim do mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para mais informações.
+
+> **NOTA** Como você está prestes a ler, **nunca** deve-se criar links que se pareçam com o acima.
+
+Lembre-se de que os leitores de tela são uma interface diferente de navegadores com um conjunto diferente de recursos.
+
+### O problema de usar o URL
+
+Leitores de tela leem o texto. Se um URL aparecer no texto, o leitor de tela lerá o URL. De modo geral, a URL não transmite informações significativas e pode parecer irritante. Você pode ter experimentado isso se o seu telefone já leu de forma audível uma mensagem de texto com um URL.
+
+### O problema com "clique aqui"
+
+Os leitores de tela também têm a capacidade de ler apenas os hiperlinks em uma página, da mesma forma que uma pessoa com visão examinaria uma página em busca de links. Se o texto do link for sempre "clique aqui", tudo o que o usuário ouvirá é "clique aqui, clique aqui, clique aqui, clique aqui, clique aqui, ..." Todos os links agora são indistinguíveis uns dos outros.
+
+### Bom texto de link 
+
+Um bom texto de link descreve resumidamente o que está do outro lado do link. No exemplo acima, falando sobre pequenos pinguins, o link é para a página da Wikipedia sobre a espécie. A frase *pequenos pinguins* seria um texto de link perfeito, pois deixa claro o que alguém encontrará se clicar no link - pequenos pinguins.
+
+> O [pequeno pinguim](https://en.wikipedia.org/wiki/Little_penguin), às vezes conhecido como pinguim fada, é o menor pinguim do mundo.
+
+✅ Navegue na web por alguns minutos para encontrar páginas que usam estratégias de links obscuras. Compare-os com outros sites com links melhores. O que voce aprende?
+
+#### Notas sobre Mecanismos de Pesquisa
+
+Como um bônus adicional por garantir que seu site seja acessível a todes, você também ajudará os mecanismos de pesquisa a navegar em seu site. Os mecanismos de pesquisa usam o texto do link para aprender quais são os tópicos das páginas. Portanto, usar um bom texto de link ajuda a todos!
+
+### ARIA
+
+Imagine a seguinte página:
+
+| Produto      | Descrição        | Pedido        |
+| ------------ | ---------------- | ------------- |
+| Widget       | [Descrição]('#') | [Pedido]('#') |
+| Super widget | [Descrição]('#') | [Pedido]('#') |
+
+Neste exemplo, duplicar o texto de descrição e ordem faz sentido para alguém que usa um navegador. No entanto, alguém usando um leitor de tela ouviria apenas as palavras *descrição* e *pedido* repetidas sem contexto.
+
+Para oferecer suporte a esses tipos de cenários, o HTML oferece suporte a um conjunto de atributos conhecido como [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Esses atributos permitem fornecer informações adicionais aos leitores de tela.
+
+> **NOTA**:  Como muitos aspectos do HTML, o suporte ao navegador e ao leitor de tela pode variar. No entanto, a maioria dos clientes principais oferece suporte a atributos ARIA.
+
+Você pode usar `aria-label` para descrever o link quando o formato da página não permitir. A descrição do widget pode ser definida como
+
+``` html
+<a href="#" aria-label="descrição do widget">descrição</a>
+```
+
+✅ Em geral, o uso da marcação semântica conforme descrito acima substitui o uso de ARIA, mas às vezes não há equivalente semântico para vários widgets HTML. Um bom exemplo é uma Tree. Não há HTML equivalente para uma Tree, então você identifica o `<div>` genérica para este elemento com um papel apropriado e valores de aria. A [documentação MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contém mais informações úteis.
+
+```html
+<h2 id="tree-label">Visualizador de arquivos</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## Imagens
+
+Nem é preciso dizer que os leitores de tela não conseguem ler automaticamente o que há em uma imagem. Garantir que as imagens sejam acessíveis não dá muito trabalho - é disso que se trata o atributo `alt`. Todas as imagens significativas devem ter um `alt` para descrever o que são.
+Imagens que são puramente decorativas devem ter seu atributo `alt` definido como uma string vazia:` alt = "" `. Isso evita que os leitores de tela anunciem desnecessariamente a imagem decorativa.
+
+✅ Como você pode esperar, os mecanismos de pesquisa também não conseguem entender o que está em uma imagem. Eles também usam texto alternativo. Portanto, mais uma vez, garantir que sua página esteja acessível fornece bônus adicionais!
+
+## O teclado
+
+Alguns usuários não conseguem usar um mouse ou trackpad, em vez disso, contam com as interações do teclado para passar de um elemento para o próximo. É importante que o seu site apresente o seu conteúdo em ordem lógica para que um usuário do teclado possa acessar cada elemento interativo à medida que avança em um documento. Se você construir suas páginas da web com marcação semântica e usar CSS para estilizar seu layout visual, seu site deve ser navegável pelo teclado, mas é importante testar esse aspecto manualmente. Aprenda mais sobre [ v](https://webaim.org/techniques/keyboard/).
+
+✅ Vá a qualquer site da web e tente navegar por ele usando apenas o teclado. O que funciona, o que não funciona? Porque?
+
+## Resumo
+
+Uma web acessível a alguns não é uma verdadeira 'rede mundial'. A melhor maneira de garantir que os sites que você cria sejam acessíveis é incorporar as práticas recomendadas de acessibilidade desde o início. Embora haja etapas extras envolvidas, incorporar essas habilidades em seu fluxo de trabalho agora significará que todas as páginas que você criar estarão acessíveis.
+---
+
+## 🚀 Desafio
+
+Pegue este HTML e reescreva-o para ser o mais acessível possível, de acordo com as estratégias que você aprendeu.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Examplo
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Tartaruga Ipsum</p>
+      <p class="site-subtitle">O Fan Club Premier Mundial de tartarugas</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Recursos</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"Eu gosto de tartarugas"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Informações básicas sobre tartarugas</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Tartarugas Chocolate</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## Quiz Pós-Aula
+[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
+
+## Revisão e autoestudo
+
+Muitos governos têm leis relacionadas aos requisitos de acessibilidade. Leia sobre as leis de acessibilidade do seu país. O que é coberto e o que não é? Um exemplo é [esse site de govermo](https://accessibility.blog.gov.uk/).
+
+## Lição de casa
+ 
+[Analise um site não acessível](assignment.pt.md)
+
+Créditos: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument

1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md

@@ -0,0 +1,228 @@
+# 创造无障碍网页
+
+![All About Accessibility](/sketchnotes/webdev101-a11y.png)
+> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 课前小测
+[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=zh_cn)
+
+> 互联网的力量存在于其普适性中，让包括残障人士在内的每个人都能访问互联网，是其中不可或缺的一方面。
+>
+> —— Timothy Berners-Lee， W3C（万维网联盟）主席、万维网发明者
+
+这段引言恰当地强调了创造无障碍网页的重要性。一个无法被所有人顺畅访问的应用按照定义来说是排他的，作为 Web 开发者我们应该始终将无障碍性牢记在心中。从一开始就关注到这一点，可以让你在确保每个人都能顺利访问你创造的页面这一方面做得很优秀。这节课中，你会了解到一些能帮助你确保你的网站资源无障碍的工具，也会学到该怎样将无障碍性牢记在心中。
+
+## 相关工具
+
+### 屏幕阅读器（Screen readers）
+
+屏幕阅读器可以说是最知名的无障碍工具之一。
+
+[屏幕阅读器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)在视力障碍者中被广泛使用。就像我们会花时间来确保浏览器正确地传达了我们想要分享的信息， 我们也必须要确保屏幕阅读器也可以达到同样的效果。
+
+一般来说，屏幕阅读器会从上到下用语音阅读一个页面。如果你的页面全是文字，阅读器传达信息的方式和浏览器会是基本相似的。当然，网页几乎不会只有文字，还会包含链接、图像、颜色以及其他视觉组件。我们也必须得确保这些信息可以被屏幕阅读器正确阅读。
+
+每一位 Web 开发者都需要去熟悉屏幕阅读器。正如上面强调的一样，这是你的用户会用到的一种客户端。就像你很熟悉浏览器的操作一样，你也应该去学习如何操作屏幕阅读器。幸运的是，多数操作系统都内置了屏幕阅读器。
+
+一些浏览器也有内置的工具和扩展程序，可以读出文字甚至提供一些基本的导航功能，比如[这些以无障碍为目的的 Edge 浏览器工具](https://support.microsoft.com/zh-cn/microsoft-edge/microsoft-edge-%E4%B8%AD%E7%9A%84%E8%BE%85%E5%8A%A9%E5%8A%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)。这些也是重要的无障碍工具，但是工作方式和屏幕阅读器非常不同，所以不该被错误地用来作为屏幕阅读器的测试工具。
+
+✅ 试用一下屏幕阅读器和浏览器文本阅读器。在 Windows 系统中默认带有[讲述人](https://support.microsoft.com/zh-cn/windows/%E8%AE%B2%E8%BF%B0%E4%BA%BA%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)，也可以安装 [JAWS](https://webaim.org/articles/jaws/) 和 [NVDA](https://www.nvaccess.org/about-nvda/)。在 macOS 和 iOS 中默认装有[旁白](https://support.apple.com/zh-cn/guide/voiceover/welcome/10)。
+
+### 缩放（Zoom）
+
+另一个视力障碍者常用的工具是缩放。最基本的缩放功能是静态缩放，通过 `Control + 加号（+）` 或者降低屏幕分辨率达成。这样的缩放会导致整个页面尺寸被调整，所以使用[响应式设计（responsive design）](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)对于提高了缩放级别的情况下的用户体验非常重要。
+
+另一类缩放需要借助特定的软件来放大屏幕上的部分区域，就像一个真正的放大镜一样。在 Windows 上内置了[放大镜](https://support.microsoft.com/zh-cn/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%95%9C%E5%8F%AF%E4%BD%BF%E5%B1%8F%E5%B9%95%E4%B8%8A%E7%9A%84%E5%86%85%E5%AE%B9%E6%9B%B4%E6%98%93%E4%BA%8E%E6%9F%A5%E7%9C%8B-414948ba-8b1c-d3bd-8615-0e5e32204198)，也可以使用 [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) 这样有更多特性和更大用户群体的第三方软件。在 macOS 和 iOS 上则内置了[放大器](https://www.apple.com.cn/accessibility/vision/)
+
+### 对比度检查器（Contrast checkers）
+
+我们要谨慎地挑选网页上的配色，以照顾到色盲人群和难以区分低对比度颜色的用户的需要。
+
+✅ 用类似 [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=zh-CN) 这样的浏览器插件来检测一下你喜爱的网站的颜色使用情况。你学到了什么？
+
+### Lighthouse
+
+在浏览器开发者工具中，你可以找到 Lighthouse 工具。这个工具可以让你一睹一个网站的无障碍性（以及其他性能分析）。尽管并不建议完全依赖 Lighthouse，但将 100% 满分作为一个基础将会很有用。
+
+✅ 在你的浏览器开发者工具中找到 Lighthouse 栏，然后用它分析任何一个网站。你发现了什么？
+
+## Designing for accessibility
+
+无障碍性（accessibility）是一个相对比较大的主题，为了帮助你更深入地了解，这里许多你可以参考的资源。
+
+- [Accessible U - 明尼苏达大学](https://accessibility.umn.edu/your-role/web-developers)
+
+尽管我们没法在这里涵盖创建一个无障碍网站的方方面面，但下面还是提供了一些你会想要去实践的核心信条。从一开始就设计一个无障碍页面**总是**比回过头来让一个已经存在的页面变得无障碍会更容易。
+
+## 不错的展示原则
+
+### 使用安全色色板
+
+每个人看待世界的方式都不尽相同，当然也包括颜色。当你为你的站点选择一套配色时，应该确保其对所有人都是无障碍的。这里有一个非常棒的[生成安全色色板的工具](http://colorsafe.co/)。
+
+✅ 举出一个配色非常糟糕的网站的例子。你认为它糟糕在哪？
+
+### 正确使用 HTML
+
+使用 CSS 和 JavaScript 有能力让任何元素看起来在控制效果上是任何一种类型的元素。比如 `<span>` 可以被用来创建出一个 `<button>`，而 `<b>` 则可能会被弄成一个超链接。尽管有人可能认为这样会更加容易调整样式，但是它不会传达任何有效信息给屏幕阅读器。请使用合适的 HTML 来建立对于页面的控制效果，比如你想要一个超链接，请使用 `<a>` 标签。用正确的 HTML 来实现正确的控制效果，这就叫做实践了“语义化 HTML”（Semantic HTML）。
+
+✅ 去任意一个网站看看设计师和开发者是否合理使用了 HTML。你能不能找出一个本该是链接的按钮？提示：在浏览器中右键点击并且选择“查看网页源代码”来查看底层代码（译注：此处使用“检查”/“审查元素”来观察或许会更加合适）。
+
+### 建立描述性的标题层级
+
+屏幕阅读器使用者为了寻找信息和在页面中导航，会[非常依赖页面中的标题](https://webaim.org/projects/screenreadersurvey8/#finding)。使用描述性的标题内容和语义化的标题标签，对于创建一个对屏幕阅读器使用者友好的网站是非常重要的。
+
+### 使用良好的视觉线索
+
+CSS 让你可以完全随意地控制页面中任何元素的外观。你可以创建一个没有轮廓的文本框或者一个没有下划线的超链接。但不幸的是，移除这些视觉线索会让一些习惯依靠这些线索的使用者难以认出它们的控制功能。
+
+## 链接文本的重要性
+
+对于网页导航来说，超链接非常关键。因此，确保屏幕阅读器可以准确阅读链接才能保证所有用户都可以顺利地在你的网站导航。
+
+### 屏幕阅读器与链接
+
+可想而知，屏幕阅读器会像阅读页面中其他文本一样阅读链接的文本。将这点牢记在心后，可以看看下面两种看起来似乎还能接受的写法。
+
+> 小蓝企鹅，有时也被称作仙企鹅，是世界上最小的企鹅。[点击这里](https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)来查看更多信息。
+
+> 小蓝企鹅，有时也被称作仙企鹅，是世界上最小的企鹅。访问 https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D 来查看更多信息。
+
+> **注意** 下文即将提到，你应该 **避免** 使用上面这两种写法。
+
+记住，屏幕阅读器和浏览器功能上有一些差异，是不同的交互媒介。
+
+### 使用 URL 的问题
+
+屏幕阅读器会阅读文本，如果 URL 出现在了文本里，屏幕阅读器就会直接读出这段 URL。一般来说，URL 直接传递的信息都意义不大，而且听起来会很吵。如果你曾经在手机中将一段包含 URL 的文字用语音播放出来，就可能有类似体会。
+
+### 使用“点击这里”的问题
+
+屏幕阅读器也有只阅读页面中超链接的功能，就仿佛一个有视力的人扫视页面来找到所有链接一样。如果所有的链接文本都是“点击这里”，用户听到的就会一直是“点击这里，点击这里，点击这里，点击这里，点击这里……”，完全无法区分各个链接。
+
+### 优秀的链接文本
+
+优秀的链接文本会简要地描述链接另一侧是什么。在上面谈论小蓝企鹅的例子中，链接到的是关于这个物种的维基百科页面。使用*小蓝企鹅*作为链接文本将会非常合适，因为它能清楚地告诉人们如果他们点击了这个链接会了解到什么 —— 小蓝企鹅。
+
+> [小蓝企鹅](https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)，有时也被称作仙企鹅，是世界上最小的企鹅。
+
+✅ 上网随便逛几分钟，找一找使用了难以理解的链接策略的网页。对比一下其他有更好的链接的网站，你有何体会？
+
+#### 关于搜索引擎
+
+保证你的网站对所有人都无障碍还能带来一个额外的好处：可以帮助搜索引擎导航你的网站。搜索引擎会使用链接文本来了解页面的主题，所以使用好的链接文本其实利人利己！
+
+### ARIA
+
+想象一个下面这样的网页：
+
+| 产品         | 详情        | 预订        |
+| ------------ | ----------- | ----------- |
+| 小玩意       | [详情]('#') | [预订]('#') |
+| 超棒的小玩意 | [详情]('#') | [预订]('#') |
+
+在这个例子中，复制“详情”和“预订”这两个文本对于使用浏览器的用户来说是没有理解障碍的。然而，使用屏幕阅读器的用户则只会听到对 *详情* 和 *预订* 这两个词的两次毫无上下文的复读。
+
+为了处理这类情况，HTML 支持一些被称为 [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA) 的属性。这些属性让你可以为屏幕阅读提供一些额外的信息。
+
+> **注意**：正如 HTML 的其他方面一样，浏览器和屏幕阅读器对 ARIA 的支持情况可能会不同，但是多数主流客户端都是支持 ARIA 属性的。
+
+当页面格式不允许你直接用文本描述链接时，你可以使用 `aria-label` 属性来对链接进行描述。对于一个小玩意的详情描述可以被设置为：
+
+``` html
+<a href="#" aria-label="小玩意的详情">详情</a>
+```
+
+✅ 一般来说，使用此前提到的语义化标签会比使用 ARIA 更好，但是有时确实存在没法找到合适的语义标签来描述一些 HTML 元素。比如“树”，没有和“树”语义等价的 HTML 标签，所以你可以给这个元素选用一般的 `<div>` 标签，然后加上合理的 role 和 aria 属性值。[MDN ARIA 文档](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA)有更多有用的相关信息。
+
+```html
+<h2 id="tree-label">文件查看器</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">上传</div>
+</div>
+```
+
+## 图像
+
+毫无疑问，屏幕阅读器是没法自动阅读图像内容的，但是让图像变得无障碍并不会很麻烦 —— 这正是 `alt` 属性所做的事。所有有意义的图像都应该有一个 `alt` 属性来描述它们的内容是什么。纯装饰性的图像应该有一个被设为空字符串的 `alt` 属性：`alt=""`，这样可以防止屏幕阅读器画蛇添足地描述这些装饰性图像。
+
+✅ 没错，搜索引擎也无法理解图片的内容，它们也会使用 alt 属性中的文本。这又一次证明，确保你的页面无障碍可以带来额外的好处！
+
+## 键盘
+
+一些用户没法使用鼠标或者触控板，而是只能依赖键盘交互来从一个元素切换到下一个元素。在你的网站上以有逻辑的顺序来展示内容是很重要的，这样一来键盘用户可以在往下浏览页面时访问到每一个可交互元素。如果你用你语义化标签来构建页面并且用 CSS 来控制它们的视觉外观，你的页面就应该会是可用键盘导航的，但是最好还是手动测试一遍。可在[键盘导航策略](https://webaim.org/techniques/keyboard/)了解更多关于这方面的内容。
+
+✅ 前往任意一个网站然后尝试只使用你的键盘来导航。哪些可以正常使用？哪些不可以？为什么？
+
+## 总结
+
+只有部分人才能顺利访问的网页算不上真正的万维网（world-wide web）。确保你创造的网站无障碍地最好方式就是从一开始就贯彻无障碍的最佳实践。尽管这可能会引入额外的步骤，但现在就将这些技术包含在你的工作流程中将意味着你创造的所有页面都会是无障碍的。
+
+---
+
+## 🚀 挑战
+
+利用你学到的策略，尽可能将下方的 HTML 代码重写为无障碍的。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## 课后小测
+[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=zh_cn)
+
+## 复习 & 自学
+
+许多政府有关于无障碍要求的法律，阅读一下你的国家与无障碍相关的法律。它涉及了哪些方面，又有哪些方面没有涉及？[这个政府网站](https://accessibility.blog.gov.uk/)是一个例子。
+
+## 作业
+ 
+[分析一个非无障碍网站](assignment.zh-cn.md)
+
+参考：[Turtle Ipsum](https://github.com/Instrument/semantic-html-sample)，作者：Instrument

1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md

@@ -0,0 +1,231 @@
+# 建立無障礙網頁
+
+![關於網頁親和力](/sketchnotes/webdev101-a11y.png)
+> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
+
+## 課前測驗
+[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=zh_tw)
+
+> 網路的強大在於它的普遍性。無論用戶是否有殘疾，讓大家無差別地使用網路是必要的。
+>
+> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
+>
+> \- Tim Berners-Lee 爵士 ── 全球資訊網協會總監暨網際網路創立者
+
+這段話完美地詮釋建立無障礙網頁的重要性。應用程式若無法服務所有人是建立在排他性設計。身為一位網頁開發員，我們需要時刻警惕著網頁親和力。從此時開始，你接下來創建的網頁要能服務給任何人。在這堂課中，你會學習開發無障礙網頁相關的工具與觀念。
+
+## 相關工具
+
+### 螢幕報讀器 (Screen readers)
+
+螢幕報讀器可說是最知名的無障礙工具之一。
+
+[螢幕報讀器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)已被廣泛地幫助視覺障礙者。就像我們花了不少時間確保瀏覽器能呈現網頁內容，我們也要確保螢幕報讀器能完整地實現相同的工作。
+
+基本上，螢幕報讀器會一行一行地報讀網頁的內容。若網頁都是以文字建構而成，那螢幕報讀器就能達到與瀏覽器相同的功效。當然，網頁不可能只有文字：裡面可能會有連結、圖像、顏色或是其他視覺物件。我們必須確保螢幕報讀器也能呈現出上述物件。
+
+任何一位網頁開發者需要熟悉螢幕報讀器。它們是用戶的好幫手，就像你的瀏覽器一樣，你需要學習螢幕報讀器是如何運作的。幸運的是，它們都內建在大部分的作業系統當中。
+
+有些瀏覽器內建相關工具與擴充插件，報讀出文字甚至是可互動物件：例如[這些以網頁親和力為目標的 Edge 瀏覽器工具](https://support.microsoft.com/zh-tw/microsoft-edge/microsoft-edge-%E7%9A%84%E5%8D%94%E5%8A%A9%E5%B7%A5%E5%85%B7%E5%8A%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)。 它們是重要的輔助工具，或許與螢幕報讀器有所差異，但基本上能測試螢幕報讀器的基本功能。
+
+✅ 嘗試使用螢幕報讀器或瀏覽器朗讀工具。 在 Windows 中，[Narrator](https://support.microsoft.com/zh-tw/windows/%E5%AE%8C%E6%95%B4%E7%9A%84%E6%9C%97%E8%AE%80%E7%A8%8B%E5%BC%8F%E6%8C%87%E5%8D%97-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)內建在系統中，使用者也可以選擇[JAWS](https://webaim.org/articles/jaws/)與[NVDA](https://www.nvaccess.org/about-nvda/)等額外安裝程式。 macOS 與 iOS 平台上則內建[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10)。
+
+### 放大器
+
+另一項為視覺障礙者提供的輔助程式為放大器。最常見的定點放大功能，可以藉由 `Control + 加號(+)` 或降低螢幕解析度來完成。這個步驟會重新縮放整個網頁，確保網頁的[互動式設計](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)是縮放頁面重要的一環。
+
+其他放大功能會專注在小部分的區域上，這些額外軟體提供類似於實體放大器的功能。 Windows 內建[放大器](https://support.microsoft.com/zh-tw/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%8F%A1%E4%BB%A5%E8%AE%93%E8%9E%A2%E5%B9%95%E4%B8%8A%E7%9A%84%E5%85%A7%E5%AE%B9%E6%9B%B4%E5%AE%B9%E6%98%93%E7%9C%8B%E5%88%B0-414948ba-8b1c-d3bd-8615-0e5e32204198)功能；第三方程式[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)則受到廣泛用戶的使用。 macOS 與 iOS 內建[Zoom](https://www.apple.com/accessibility/mac/vision/)軟體。
+
+### 對比度檢查器
+
+我們必須謹慎地挑選網頁的顏色對比度，讓色盲人士或低視能障礙者有辦法閱讀文章。
+
+✅ 利用相關的瀏覽器擴充插件來測試看看你所喜愛的網頁，例如[WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=zh-tw)。 你學到了什麼?
+
+### Lighthouse
+
+在瀏覽器的開發者工具中，你能找到一款工具名為 Lighthouse。這項工具可以有效的確認網頁親和力。這邊不強制網頁都要經過 Lighthouse 審核，但 100% 的分數是網頁完美的基礎。
+
+✅ 在你的瀏覽器開發工具中找尋 Lighthouse ，對任何網頁做分析。 你發現了什麼?
+
+## 提升網頁親和力
+
+網頁親和力是項相對龐大的主體。要尋求幫助，網路上有許多資源可以參考。
+
+- [Accessible U - 明尼蘇達大學](https://accessibility.umn.edu/your-role/web-developers)
+
+我們無法在此說明建立無障礙網頁的所有重點，但下列是開發時重要的核心觀念。從零開始就留意網頁親和力**一定會比**從完成的網頁來增進網頁親和力來的容易。
+
+## 良好的呈現方式
+
+### 安全的配色
+
+每個人的觀點都有所不同，包含觀看顏色。如何選擇配色也是網頁親和力的課題之一。下列是一款實用的[安全配色生產工具](http://colorsafe.co/).
+
+✅ 舉出在配色上有問題的一個網頁，告訴大家為什麼?
+
+### 使用合理的 HTML 語法
+
+在 CSS 與 JavaScript 的支援下，我們無法判斷網頁物件的控制目的。 好比 `<span>` 也可以建立 `<button>`， `<b>` 可以代表超連結。 在造型變化上或許較為容易，但可能會對螢幕報讀器產生混淆。我們必須確保對應的控制有相同的標籤，例如超連結只使用 `<a>`。這才能完整的表現 HTML 的語義化。
+
+✅ 去任何一個網頁分析開發員與設計員是否使用正確的 HTML 語法。 你能找到語法將連結取代成按鈕嗎? 小提示：在瀏覽器中點擊「右鍵」 > 「檢視網頁原始碼」來確認程式碼。
+
+### 建立分級的描述性標題的
+
+螢幕報讀器使用者[非常仰賴文字標題](https://webaim.org/projects/screenreadersurvey8/#finding)，確認並查詢網頁資訊。使用描述性標題並有層次的標籤分別得以創建出較易閱讀的網頁。
+
+### 使用合理的視覺指引
+
+CSS 提供完整的網頁造型控制，你可以讓文字框框線隱藏或是讓超連結去除底線。然而去除這些視覺指引會造成視覺障礙者閱讀上的困擾，難以辨別它們原本的功能性。
+
+## 連結文字的重要性
+
+超連結是網頁中重點物件。請確保螢幕報讀器能正確的辨識網頁中的超連結。
+
+### 螢幕報讀器處理連結
+
+可想而知，螢幕報讀器對於連結與文字的朗讀方式是相同的。因此，判斷下列文章例子，哪個對於網頁親和力上較為合理?
+
+> 小藍企鵝，又稱做仙企鵝，是世界上最小的企鵝。[點擊這裡](https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)了解更多資訊。
+
+> 小藍企鵝，又稱做仙企鵝，是世界上最小的企鵝。造訪 https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D 了解更多資訊。
+
+> **注意** 讀完之後，請盡量**避免**上方的連結例子。
+
+記得，螢幕報讀器處理物件的方式會與瀏覽器有所不同。
+
+### 使用 URL 的問題
+
+螢幕報讀器會朗讀文字。如果 URL 出現在文章中，它也會被裝置朗讀。綜觀來說，朗讀 URL 不含有任何意義，而且聽來不悅耳。你可能曾在手機上聽過含有網址的文章朗讀。
+
+### 使用「點擊這裡」的問題
+
+螢幕報讀器有能力去處理超連結文字，就像我們尋找網頁中的連結一樣。想像所有的超連結文字都表示成「點擊這裡」，用戶就會重複聽到「點擊這裡！點擊這裡！點擊這裡！點擊這裡......」，會造成別人的困擾。
+
+### 合理的連結文字
+
+合理的連結文字為連結與文字找到了平衡。像上方例子中的小藍企鵝，連結是導向維基百科的物種頁面。文字*小藍企鵝*就會是完美的連結文字，讓用戶了解點擊後會取得關於小藍企鵝的相關資訊。
+
+> [小藍企鵝](https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)，又稱做仙企鵝，是世界上最小的企鵝。
+
+✅ 花點時間逛逛網頁，觀察它們如何設定連結的導向。比較較合適的連結文字，你學到了什麼?
+
+#### 關於搜尋引擎
+
+網頁中的搜尋引擎對網頁親和力有加分的效果，搜尋引擎也能從連結找到你的網頁，了解網頁的主題。所以連結文字對大家都有幫助！
+
+### ARIA
+
+想像下方的網頁：
+
+| 產品     | 描述        | 數量        |
+| -------- | ----------- | ----------- |
+| 物品     | [描述]('#') | [數量]('#') |
+| 超優物品 | [描述]('#') | [數量]('#') |
+
+在這項舉例中，瀏覽器用戶可以清楚地辨別重複性的「描述」與「數量」；但對於螢幕報讀器用戶而言，他們只能重複地聽取*「描述」與「數量」*這兩個單詞。
+
+為了處理這種情況，HTML 提供一套屬性名為[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)。它能為螢幕報讀器附加額外的朗讀資訊。
+
+> **注意**： 就如 HTML 的各式物件，瀏覽器與螢幕報讀器能支援的項目也不盡相同。然而，客群主體基本上都支援 ARIA 屬性。
+
+若網頁不支援部分格式語法，你可以使用 `aria-label` 來描述連結。就如下方物件被標註上 "Widget description" 的標籤。
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ 總體而言，使用語義化標籤得以取代 ARIA 功能，但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹，所以你可以在 `<div>` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)說明許多有用的資訊。
+
+```html
+<h2 id="tree-label">File Viewer</h2>
+<div role="tree" aria-labelledby="tree-label">
+  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
+</div>
+```
+
+## 圖片
+
+螢幕報讀器用戶無法直接的了解圖片內容。為了確保圖片也能服務給視覺障礙者，這就是 `alt` 屬性存在的目的。所有重要的圖片都需要有 `alt` 描述圖片的內容。
+裝飾性圖片的 `alt` 欄位就需要留空字串：`alt=""`。 這樣能避免螢幕報讀器朗讀不必要的裝飾性圖片敘述。
+
+✅ 你可能會猜到，搜尋引擎也有可能無法辨別圖片。它們也是使用 alt 敘述。因此，無障礙網頁有許多加分要素！
+
+## 鍵盤輸入
+
+有些用戶無法使用滑鼠或觸控板，他們需要使用鍵盤中的 "tab" 鍵來切換網頁元素，讓網頁物件能順序性地排列與互動就很重要。如果網頁有語義化標籤並以CSS造型化視覺畫面，網頁基本上就能以鍵盤來切換，當然手動測試還是必要的。了解更多關於[鍵盤調查的策略](https://webaim.org/techniques/keyboard/)。
+
+✅ 前往任何一個網頁，試著只以鍵盤瀏覽網頁。哪些能成功運作，你又遭遇了哪些困難? 你有辦法解釋嗎?
+
+## 結論
+
+能連上網頁並不是網際網路的真諦。從現在起確保網頁能以無障礙的方式呈現。雖然還有很多未被提及的開發資訊，熟習你知道的無障礙開發知識一定會對網頁有所幫助。
+
+---
+
+## 🚀 挑戰
+
+看看下列的 HTML 程式碼。利用你所學到的知識，試著增進它的網頁親和力。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## 課後測驗
+[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=zh_tw)
+
+## 複習與自學
+
+許多政府機關立法要求無障礙需求。查詢你的國家是否有這些法規。它們涉及了那些，那些又沒包含在其中? 看看[英國政府機關網頁](https://accessibility.blog.gov.uk/)的例子。
+
+## 作業
+ 
+[分析一個非無障礙網頁](assignment.zh-tw.md)
+
+參考出處： [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample)

1-getting-started-lessons/3-accessibility/translations/assignment.es.md

@@ -0,0 +1,12 @@
+# Analizar un sitio web no accesible
+
+## Instrucciones
+
+Identifica un sitio web que creas que NO es accesible y crea un plan de acción para mejorar su accesibilidad. Tu primer tarea será identificar este sitio, detallar las formas en que crees que es inaccesible sin usar herramientas analíticas y luego someterlo a un análisis Lighthouse. Toma los resultados de este análisis y describe un plan detallado con un mínimo de diez puntos que muestre cómo se podría mejorar el sitio.
+
+## Rúbrica
+
+| Criterios       | Ejemplar                                                                                                                                                      | Adecuado                    | Necesita mejorar           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| informe del estudiante | incluye párrafos sobre cómo el sitio es inadecuado, el informe Lighthouse capturado como un pdf, una lista de diez puntos para mejorar, con detalles sobre cómo mejorarlo | falta el 20% de lo requerido | falta el 50% de lo requerido
+ |

1-getting-started-lessons/3-accessibility/translations/assignment.fr.md

@@ -0,0 +1,15 @@
+# Analyser un site inaccessible
+
+## Instructions
+
+Identifiez un site Web qui, selon vous, n'est PAS accessible et créez un plan d'action pour améliorer son accessibilité.
+Votre première tâche serait d'identifier ce site, de détailler les façons dont vous pensez qu'il est inaccessible sans utiliser d'outils d'analyse, puis de le soumettre à une analyse Lighthouse. Capturez un pdf des résultats de cette analyse et décrivez un plan détaillé avec un minimum de dix points montrant comment le site pourrait être amélioré.
+
+## Tableau pour tester l'accessibilité du site
+
+| Critère | Exemplaire | Adéquat | Besoin d'amélioration |
+|----------|-----------|----------|----------------|
+|          | manque de <10% de ce qui est requis | manque de 20% de ce qui est requis | manque de 50% de ce qui est requis |
+
+----
+Rapport de l'étudiant : comprend des paragraphes sur l'accessibilité du site, le rapport Lighthouse capturé en pdf, une liste de dix points à améliorer, avec des détails sur la façon de l'améliorer.

1-getting-started-lessons/3-accessibility/translations/assignment.hi.md

@@ -0,0 +1,11 @@
+# एक गैर-सुलभ वेब साइट का विश्लेषण करें
+
+## अनुदेश
+
+एक ऐसी वेब साइट की पहचान करें जिसे आप मानते हैं कि वह सुलभ नहीं है, और उसकी पहुँच में सुधार के लिए एक कार्य योजना बनाएँ. आपका पहला काम इस साइट की पहचान करना होगा, उन तरीकों को विस्तार से बताएं जो आपको लगता है कि यह विश्लेषणात्मक उपकरणों का उपयोग किए बिना दुर्गम है, और फिर इसे लाइटहाउस विश्लेषण के माध्यम से डालें. इस विश्लेषण के परिणामों को लें और कम से कम दस बिंदुओं के साथ एक विस्तृत योजना की रूपरेखा दिखाएं कि साइट को कैसे बेहतर बनाया जा सकता है.
+
+## सरनामा
+
+|मानदंड|उदाहरणात्मक|पर्याप्त|सुधार की जरूरत|
+|--------------|------|---------------------------|---------------------------|
+| छात्र की रिपोर्ट | साइट कैसे अपर्याप्त है, इस पर पैराग्राफ शामिल हैं, पीडीएफ के रूप में कैप्चर की गई लाइटहाउस रिपोर्ट, सुधार करने के लिए दस बिंदुओं की एक सूची, इसे कैसे सुधारें, इस पर विवरण के साथ। | आवश्यक का 20% गायब है | आवश्यक का 50% गायब है |

1-getting-started-lessons/3-accessibility/translations/assignment.id.md

@@ -0,0 +1,11 @@
+# Analisis situs web yang tidak dapat diakses
+
+## Instruksi
+
+Identifikasi situs web yang Anda yakini TIDAK dapat diakses, dan buat rencana tindakan untuk meningkatkan aksesibilitasnya. Tugas pertama Anda adalah mengidentifikasi situs ini, merinci cara yang menurut Anda tidak dapat diakses tanpa menggunakan alat analitik, dan kemudian memasukkannya melalui analisis Lighthouse. Ambil hasil analisis ini dan uraikan rencana rinci dengan minimal sepuluh poin yang menunjukkan bagaimana situs dapat ditingkatkan.
+
+## Rubrik
+
+| Kriteria      | Teladan                                                                                                                                                                                    | Memenuhi Syarat                 | Perlu Perbaikan                 |
+|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|---------------------------------|
+| laporan siswa | termasuk paragraf tentang bagaimana situs tersebut tidak memadai, laporan Lighthouse diambil sebagai pdf, daftar sepuluh poin untuk diperbaiki, dengan rincian tentang cara memperbaikinya | kurang 20% dari yang dibutuhkan | kurang 50% dari yang dibutuhkan |

1-getting-started-lessons/3-accessibility/translations/assignment.it.md

@@ -0,0 +1,11 @@
+# Analizzare un sito web non accessibile
+
+## Istruzioni
+
+Identificare un sito web che si ritiene NON accessibile e creare un piano d'azione per migliorarne l'accessibilità. Il primo compito sarà identificare questo sito, dettagliare i modi in cui si ritiene che sia inaccessibile senza utilizzare strumenti analitici e quindi sottoporlo a un'analisi Lighthouse. Prendere i risultati di questa analisi e delineare un piano dettagliato con un minimo di dieci punti che mostrano come il sito potrebbe essere migliorato.
+
+## Rubrica
+
+| Criteri | Ottimo | Adeguato | Necessita miglioramento |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| rapporto dello studente | include paragrafi su come il sito è inadeguato, il report Lighthouse catturato come pdf, un elenco di dieci punti da migliorare, con dettagli su come migliorarlo | manca il 20% del richiesto | manca il 50% del richiesto |

1-getting-started-lessons/3-accessibility/translations/assignment.ja.md

@@ -0,0 +1,11 @@
+# アクセスできない Web サイトを分析する
+
+## 説明書
+
+あなたがアクセシブルではないと思う Web サイトを特定し、そのアクセシビリティを改善するためのアクションプランを作成してください。あなたの最初のタスクは、このサイトを特定し、分析ツールを使用せずにアクセスできないと思う方法を詳細に説明し、Lighthouse 分析にかけることです。この分析結果をもとに、サイトがどのように改善されるかを示す最低10点の詳細な計画を作成してください。
+
+## ルーブリック
+
+| 基準       | 模範的な例                                                                                                                                                      | 適切な                    | 改善が必要           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| student report | サイトがどのように不十分であるかについての段落、PDFとしてキャプチャ灯台のレポート、それを改善する方法の詳細と、改善すべき10のポイントのリストが含まれています。 | 必要な 20% が欠落している | 必要な 50% が欠落している |

1-getting-started-lessons/3-accessibility/translations/assignment.ko.md

@@ -0,0 +1,11 @@
+# 접근성이 좋지 않은 웹 사이트 분석하기
+
+## 설명
+
+여러분이 접근할 수 없다고 생각하는 사이트를 식별해보고, 접근성을 개선할 수 있는 실행 계획을 만들어봅니다. 여러분의 첫 과제는 사이트를 식별하고 분석 도구를 사용하지 않고 사이트에 접근할 수 없는 방법을 자세히 설명한 다음, Lighthouse 분석을 통해 그 사이트를 확인하는 것입니다. 분석의 결과를 가지고 사이트를 개선할 수 있는 10가지 포인트를 가진 세부 계획을 개략적으로 설명해봅니다.
+
+## 평가 기준
+
+기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
+--- | --- | --- | ---
+학생 보고서 | 보고서에 Lighthouse의 진단 결과 캡쳐본이 pdf파일로 첨부되었고, 10가지의 개선점과 함께 개선방안을 포함한 단락들이 포함된 경우 | 필수조건이 20%정도 부족한 경우 | 필수조건이 50%정도 부족한 경우

1-getting-started-lessons/3-accessibility/translations/assignment.ms.md

@@ -0,0 +1,11 @@
+# Menganalisis laman web yang tidak dapat diakses
+
+## Arahan 
+
+Kenal pasti laman web yang anda percaya TIDAK dapat diakses, dan buat rancangan tindakan untuk meningkatkan aksesibilitasnya. Tugas pertama anda adalah mengenal pasti laman web ini, memperincikan cara-cara yang anda fikir tidak dapat diakses tanpa menggunakan alat analitik, dan kemudian memasukkannya melalui analisis Lighthouse. Ikuti hasil analisis ini dan gariskan rancangan terperinci dengan minimum sepuluh mata yang menunjukkan bagaimana laman web ini dapat diperbaiki.
+
+## Rubrik
+
+| Kriteria       | Exemplary                                                                                                                                                      | Mencukupi                    | Usaha Lagi           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| laporan pelajar | merangkumi perenggan tentang bagaimana laman web ini tidak mencukupi, laporan Lighthouse diambil sebagai pdf, senarai sepuluh markah untuk diperbaiki, dengan perincian mengenai cara memperbaikinya | hilang 20% ​​dari yang diperlukan | hilang 50% dari yang diperlukan |

1-getting-started-lessons/3-accessibility/translations/assignment.nl.md

@@ -0,0 +1,11 @@
+# Analyseer een niet-toegankelijke website
+
+## Instructies
+
+Identificeer een website waarvan u denkt dat deze NIET toegankelijk is, en maak een actieplan om de toegankelijkheid ervan te verbeteren. Uw eerste taak zou zijn om deze site te identificeren, de manieren te beschrijven waarop u denkt dat deze ontoegankelijk is zonder analytische tools te gebruiken, en deze vervolgens door een Lighthouse-analyse te laten gaan. Neem de resultaten van deze analyse en maak een gedetailleerd plan met minimaal tien punten waaruit blijkt hoe de site kan worden verbeterd.
+
+## Rubriek
+
+| Criteria       | Voorbeeldig                                                                                                                                                      | Voldoende                    | Moet worden verbeterd           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| studentenrapport | bevat paragrafen over hoe de site ontoereikend is, het Lighthouse-rapport vastgelegd als pdf, een lijst met tien punten die verbeterd kunnen worden, met details over hoe deze te verbeteren | ontbreekt 20% van de vereiste | ontbreekt 50% van de vereiste |

1-getting-started-lessons/3-accessibility/translations/assignment.pt.md

@@ -0,0 +1,13 @@
+# Analise um site não acessível
+
+## Instruções
+
+Identifique um site que você acredita que NÃO está acessível e crie um plano de ação para melhorar sua acessibilidade. 
+Sua primeira tarefa seria identificar este site, detalhar as maneiras pelas quais você acha que ele é inacessível sem o uso de ferramentas analíticas e, em seguida, submetê-lo a uma análise Lighthouse. P
+egue os resultados desta análise e esboce um plano detalhado com um mínimo de dez pontos mostrando como o site poderia ser melhorado.
+
+## Rubrica
+
+| Critérios | Exemplar | Adequado | Precisa Melhorar |
+| -------------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------- | --------------------------- | --------------------------- |
+| relatório | inclui parágrafos sobre como o site é inadequado, o relatório Lighthouse capturado em pdf, uma lista de dez pontos a melhorar, com detalhes sobre como melhorá-lo | faltando 20% do exigido | faltando 50% do exigido |

1-getting-started-lessons/3-accessibility/translations/assignment.ru.md

@@ -0,0 +1,16 @@
+# Проанализировать сайт не оптимизированный для людей с ограниченными возможностями
+
+## Инструкции
+
+Определите веб-сайт, который, по вашему мнению, НЕ оптимизирован для людей с ограниченными возможностями, и составьте план действий по его оптимизации.
+Ваша задача - идентифицировать такой сайт, подробно описать способы, которыми, по вашему мнению, он недоступен без использования аналитических инструментов, а затем отправить его на анализ Lighthouse. Сделайте PDF-файл с результатами этого анализа и наметьте подробный план с минимум десятью пунктами, показывающими, как можно улучшить сайт.
+
+## Таблица для проверки доступности сайта (accessibility)
+
+| Критерии | Образцовый                           | Адекватный                         | Нуждается в улучшении              |
+| -------- | ------------------------------------ | ---------------------------------- | ---------------------------------- |
+|          | отсутствует <10% того, что требуется | не хватает 20% того, что требуется | не хватает 50% того, что требуется |
+
+---
+
+Ваш отчет должен содержать следующее: включает параграфы о том, насколько недоступен сайт, отчет Lighthouse, записанный в формате PDF, список из десяти пунктов, которые следует улучшить, с подробностями о том, как его улучшить.

1-getting-started-lessons/3-accessibility/translations/assignment.zh-cn.md

@@ -0,0 +1,11 @@
+# 分析一个非无障碍网站
+
+## 说明
+
+找到一个你认为无障碍性做得不好的网站，制定一个提升其无障碍性的计划表。你的第一个任务是找到这样一个网站，并在不借助分析工具的前提下详细指出你认为它无障碍做得不好的方面，然后再使用 Lighthouse 分析工具来分析它。借助分析的结果，制定一个包含至少十点的改进该网站的详细计划。
+
+## 评价表
+
+| 指标 | 优秀 | 良好 | 尚可进步 |
+| --- | --- | --- | --- |
+| 书面报告 | 解释了这个网站做得不好的地方，将 Lighthouse 报告打印为 PDF 文件，至少十点可改进之处，每点详细说明了改进策略 | 缺少上述 20% 内容 | 缺少上述 50% 内容 |

1-getting-started-lessons/3-accessibility/translations/assignment.zh-tw.md

@@ -0,0 +1,11 @@
+# 分析一個非無障礙網頁
+
+## 說明
+
+辨別一個你認為對視覺障礙者不友善的網頁，列出網頁改進的策略。你需要先發掘各個網頁，不使用分析工具的情況下判斷網頁的親和力，再套用到 Lighthouse 審核工具。將網頁的審核結果轉化成至少十點的改進計畫。
+
+## 學習評量
+
+| 作業內容 | 優良                                                                                | 普通            | 待改進          |
+| -------- | ----------------------------------------------------------------------------------- | --------------- | --------------- |
+| 書面報告 | 文章解釋為何網頁需要被改進，將 Lighthouse 結果轉成 pdf 檔，列出十點詳細的改進計畫。 | 缺少 20% 的內容 | 缺少 50% 的內容 |

1-getting-started-lessons/README.md

@@ -0,0 +1,17 @@
+# Getting Started with Web Development
+
+In this section of the curriculum, you will be introduced to non project-based concepts important to becoming a professional developer.
+
+### Topics
+
+1. [Introduction to Programming Languages and Tools of the Trade](1-intro-to-programming-languages/README.md)
+2. [Introduction to GitHub](2-github-basics/README.md)
+3. [Basics of Accessibility](3-accessibility/README.md)
+
+### Credits
+
+Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
+
+Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
+
+Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)

1-getting-started-lessons/translations/README.es.md

@@ -0,0 +1,17 @@
+# Primeros pasos con el Desarrollo Web
+
+En esta sección del plan de estudios, se te presentarán conceptos importantes para convertirte en un desarrollador profesional.
+
+### Temas
+
+1. [Introducción a los lenguajes de programación y herramientas del oficio](../1-intro-to-programming-languages/translations/README.es.md)
+2. [Introducción a GitHub](../2-github-basics/translations/README.es.md)
+3. [Conceptos básicos de Accesibilidad](../3-accessibility/translations/README.es.md)
+
+### Créditos
+
+Introducción a lenguajes de programación y herramientas del oficio fue escrito con ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)
+
+Introducción a GitHub fue escrito con ♥️ por [Floor Drees](https://twitter.com/floordrees)
+
+Conceptos básicos de Accesibilidad fue escrito con ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)

1-getting-started-lessons/translations/README.fr.md

@@ -0,0 +1,17 @@
+# Premiers pas avec le développement Web
+
+Dans cette section du programme, vous serez initié à des concepts importants pour devenir un développeur professionnel non basés sur des projets.
+
+### Thèmes
+
+1. [Introduction aux langages de programmation et aux outils du métier](../1-intro-to-programming-languages/translations/README.fr.md)
+2. [Bases de GitHub](../2-github-basics/translations/README.fr.md)
+3. [Bases de l'accessibilité](../3-accessibility/translations/README.fr.md)
+
+### Crédits
+
+Les bases de l'accessibilité ont été écrites avec ♥ ️ par [Christopher Harrison](https://twitter.com/geektrainer)
+
+L'introduction à GitHub a été écrite avec ♥ ️ par [Floor Drees](https://twitter.com/floordrees)
+
+L'introduction aux langages de programmation et aux outils du métier a été écrite avec ♥ ️ par [Jasmine Greenaway](https://twitter.com/paladique)

1-getting-started-lessons/translations/README.hi.md

@@ -0,0 +1,17 @@
+# वेब डेवलपमेंट के साथ शुरुआत करना
+
+पाठ्यक्रम के इस खंड में, आपको पेशेवर डेवलपर बनने के लिए महत्वपूर्ण गैर-परियोजना आधारित अवधारणाओं से परिचित कराया जाएगा।
+
+### विषय
+
+1. [प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय](../1-intro-to-programming-languages/translations/README.hi.md)
+2. [गिटहब की मूल बातें](../2-github-basics/translations/README.hi.md)
+3. [पहुँच की मूल बातें](../3-accessibility/translations/README.hi.md)
+
+### क्रेडिट
+
+एक्सेसिबिलिटी की मूल बातें [क्रिस्टोफर हैरिसन](https://twitter.com/geektrainer) द्वारा ♥️ से लिखा गया था।
+
+GitHub का परिचय [फ्लोर ड्रेस](https://twitter.com/floordrees) द्वारा ♥️ से लिखा गया था।
+
+प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय  [जस्मिने ग्रीनवे](https://twitter.com/paladique) द्वारा ♥️ से लिखा गया था।

1-getting-started-lessons/translations/README.id.md

@@ -0,0 +1,17 @@
+# Memulai Pengembangan Web
+
+Di bagian kurikulum ini, Anda akan diperkenalkan dengan konsep berbasis non-proyek yang penting untuk menjadi pengembang profesional.
+
+### Topik
+
+1. [Pengantar Bahasa Pemrograman dan Alat Keterampilan](../1-intro-to-programming-languages/translations/README.id.md)
+2. [Dasar-dasar GitHub](../2-github-basics/translations/README.id.md)
+3. [Dasar-dasar Aksesibilitas](../3-accessibility/translations/README.id.md)
+
+### Kredit
+
+Dasar-dasar Aksesibilitas ditulis dengan ♥ ️oleh [Christopher Harrison](https://twitter.com/geektrainer)
+
+Pengantar GitHub ditulis dengan ♥ ️oleh [Floor Drees](https://twitter.com/floordrees)
+
+Pengantar Bahasa Pemrograman dan Alat Keterampilan ditulis dengan ♥ ️oleh [Jasmine Greenaway](https://twitter.com/paladique)

1-getting-started-lessons/translations/README.it.md

@@ -0,0 +1,17 @@
+# Iniziare con lo Sviluppo Web
+
+In questa sezione del curriculum, vi saranno introdotti concetti non relativi al progetto importanti per diventare uno sviluppatore professionista.
+
+### Argomenti
+
+1. [Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari](../1-intro-to-programming-languages/translations/README.it.md)
+2. [Concetti base di GitHub](../2-github-basics/translations/README.it.md)
+3. [Concetti base di Accessibilità](../3-accessibility/translations/README.it.md)
+
+### Riconoscimenti
+
+Concetti Base di Accessibilità è stato scritto con il ♥️ da [Christopher Harrison](https://twitter.com/geektrainer)
+
+Introduzione a GitHub è stato scritto con il ♥️ da [Floor Drees](https://twitter.com/floordrees)
+
+Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari sono stati scritti con il  ♥️ da [Jasmine Greenaway](https://twitter.com/paladique)

1-getting-started-lessons/translations/README.ja.md

@@ -0,0 +1,17 @@
+# Web 開発を始めるにあたって
+
+このセクションでは、プロの開発者になるために重要なプロジェクトベースではない概念を紹介します。
+
+### トピック
+
+1. [プログラミング言語と開発ツール入門](../1-intro-to-programming-languages/translations/README.ja.md)
+2. [GitHub の基本](../2-github-basics/translatiions/README.ja.md)
+3. [アクセシビリティの基本](../3-accessibility/translations/README.ja.md)
+
+### Credits
+
+Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
+
+Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
+
+Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)

1-getting-started-lessons/translations/README.ko.md

@@ -0,0 +1,17 @@
+# 웹 개발 시작하기
+
+커리큘럼의 해당 세션에서는 프로젝트 기반이 아닌 전문 개발자가 되는 데 중요한 개념을 소개합니다.
+
+### 토픽
+
+1. [프로그래밍 언어 및 도구 소개](../1-intro-to-programming-languages/translations/README.ko.md)
+2. [GitHub의 기초](../2-github-basics/translations/README.ko.md)
+3. [접근성의 기초](../3-accessibility/translations/README.ko.md)
+
+### 크레딧
+
+Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
+
+Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
+
+Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)

1-getting-started-lessons/translations/README.ms.md

@@ -0,0 +1,17 @@
+# Mulai dengan Pembangunan Web
+
+Dalam bahagian kurikulum ini, anda akan diperkenalkan kepada konsep bukan projek yang penting untuk menjadi pembangun profesional.
+
+### Topik
+
+1. [Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan](../1-intro-to-programming-languages/translations/README.ms.md)
+2. [Pengetahuan Asas tentang GitHub](../2-github-basics/translations/README.ms.md)
+3. [Asas Kebolehcapaian](../3-accessibility/translations/README.ms.md)
+
+### Kredit
+
+Asas Kebolehcapaian ditulis dengan ♥️ karya [Christopher Harrison](https://twitter.com/geektrainer)
+
+Pengetahuan Asas tentang GitHub ditulis dengan ♥️ karya [Floor Drees](https://twitter.com/floordrees)
+
+Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan ditulis dengan ♥️ karya [Jasmine Greenaway](https://twitter.com/paladique)

1-getting-started-lessons/translations/README.nl.md

@@ -0,0 +1,17 @@
+# Aan de slag met webontwikkeling
+
+In dit deel van het curriculum maakt u kennis met niet-projectgebaseerde concepten die belangrijk zijn om een professionele ontwikkelaar te worden.
+
+### Onderwerpen
+
+1. [Inleiding tot programmeertalen en tools van het vak](../1-intro-to-programming-languages/translations/README.nl.md)
+2. [Basisprincipes van GitHub](../2-github-basics/translations/README.nl.md)
+3. [Basisprincipes van toegankelijkheid](../3-accessibility/translations/README.nl.md)
+
+### Credits
+
+Basisprincipes van toegankelijkheid is geschreven met ♥ door [Christopher Harrison](https://twitter.com/geektrainer)
+
+Inleiding tot GitHub is geschreven met ♥ ️door [Floor Drees](https://twitter.com/floordrees)
+
+Inleiding tot programmeertalen en tools van het vak is geschreven met ♥ ️door [Jasmine Greenaway](https://twitter.com/paladique)