Francisco Imanol Suarez 4 years ago committed by GitHub
commit cf8607cc28

@ -0,0 +1,70 @@
---
name: Translations Checklist
about: These are all the files that need to be translated
title: "[TRANSLATIONS]"
labels: translations
assignees: ''
---
- [ ] Base README.md
- [ ] for-teachers.md
- [ ] Quizzes
- [ ] 1-getting-started-lessons base README
- [ ] intro-to-programming-languages README
- [ ] intro-to-programming-languages assignment
- [ ] github-basics README
- [ ] accessibility README
- [ ] accessibility assignment
- [ ] 2-js-basics base README
- [ ] data-types README
- [ ] data-types assignment
- [ ] functions-methods README
- [ ] functions-methods assignment
- [ ] making-decisions README
- [ ] making-decisions assignment
- [ ] arrays-loops README
- [ ] arrays-loops assignment
- [ ] 3-terrarium base README
- [ ] intro-to-html README
- [ ] intro-to-html assignment
- [ ] intro-to-css README
- [ ] intro-to-css assignment
- [ ] intro-to-DOM-and-closures README
- [ ] intro-to-DOM-and-closures assignment
- [ ] solution base README
- [ ] 4-typing-game base README
- [ ] typing-game README
- [ ] typing-game assignment
- [ ] 5-browser-extension base README
- [ ] about-browsers README
- [ ] about-browsers assignment
- [ ] forms-browsers-local-storage README
- [ ] forms-browsers-local-storage assignment
- [ ] background-tasks-and-performance README
- [ ] background-tasks-and-performance assignment
- [ ] solution base README
- [ ] start base README
- [ ] 6-space-game base README
- [ ] introduction README
- [ ] introduction assignment
- [ ] drawing-to-canvas README
- [ ] drawing-to-canvas assignment
- [ ] moving-elements-around README
- [ ] moving-elements-around assignment
- [ ] collision-detection README
- [ ] collision-detection assignment
- [ ] keeping-score README
- [ ] keeping-score assignment
- [ ] end-condition README
- [ ] end-condition assignment
- [ ] 7-bank-project base README
- [ ] template-route README
- [ ] template-route assignment
- [ ] forms README
- [ ] forms assignment
- [ ] data README
- [ ] data assignment
- [ ] state-management README
- [ ] state-management assignment
- [ ] solution base README

@ -7,6 +7,7 @@ Each lesson includes a translation of the README.md and the Assignment.md file,
- [ ] 1-2
- [ ] 1-3
- [ ] 2
- [ ] 2
- [ ] 2-1
- [ ] 2-2
- [ ] 2-3

@ -0,0 +1,38 @@
## Track translation progress by opening a draft PR using this template and checking off the translations completed
Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please.
- [ x ] 1
- [ x ] 1-1
- [ x ] 1-2
- [ x ] 1-3
- [ ] 2
- [ ] 2
- [ ] 2-1
- [ ] 2-2
- [ ] 2-3
- [ ] 2-4
- [ ] 3
- [ ] 3-1
- [ ] 3-2
- [ ] 3-3
- [ ] 4
- [ ] 4-1
- [ ] 5
- [ ] 5-1
- [ ] 5-2
- [ ] 5-3
- [ ] 6
- [ ] 6-1
- [ ] 6-2
- [ ] 6-3
- [ ] 6-4
- [ ] 6-5
- [ ] 6-6
- [ ] 7
- [ ] 7-1
- [ ] 7-2
- [ ] 7-3
- [ ] 7-4
- [ ] Quiz (add a file in the quiz-app with all localizations)

@ -4,10 +4,10 @@ on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
# pull_request:
# types: [opened, synchronize, reopened, closed]
# branches:
# - main
jobs:
build_and_deploy_job:

358
.gitignore vendored

@ -1 +1,357 @@
/.DS_Store
## 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

@ -92,6 +92,8 @@ There's a chance that some statements will not be executed by a device. This is
[![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 might find very useful as you start your professional development journey.
A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them.
@ -156,7 +158,7 @@ Options for the command line will differ based on the operating system you use.
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### Popular Command Line Tools
@ -171,8 +173,10 @@ When a developer wants to learn something new, they'll most likely turn to docum
#### Popular Documentation on Web Development
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
- [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)
✅ 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.

@ -156,7 +156,7 @@ Las opciones para la línea de comando varian según el sistema operativo que ut
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### Línea de comandos (CLI) Populares
@ -171,8 +171,10 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu
#### Documentación popular sobre desarrollo de web
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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.

@ -5,8 +5,8 @@ Cette leçon couvre les bases des langages de programmation. Les sujets abordés
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)
## Quiz préalable
[Quiz préalable](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=fr)
## introduction
@ -19,7 +19,7 @@ Dans cette leçon, nous aborderons:
## Qu'est-ce que la programmation?
Pla 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.
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.
@ -72,9 +72,9 @@ back add r0,r1
end
```
Croyez-le ou non, *they're both doing the same thing*: impression d'une séquence de Fibonacci jusqu'à 10.
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 [defined](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.
✅ 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
@ -140,8 +140,8 @@ Les options de la ligne de commande varient en fonction du système d'exploitati
#### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (appellé également CMD) 💻
- [Terminal Windows](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/)
#### MacOS
@ -153,12 +153,12 @@ Les options de la ligne de commande varient en fonction du système d'exploitati
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### Popular Command Line Tools
- [Git](https://git-scm.com/) (💻 on most operating sytems)
- [Git](https://git-scm.com/) (💻 sur la plupart des SE)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
@ -168,8 +168,10 @@ Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tourne
#### Documentation populaire sur le développement Web
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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 et comparez-le à l'environnement d'un concepteur Web.
@ -179,13 +181,13 @@ Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tourne
Comparez quelques langages de programmation. Quelles sont certaines des caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go?
## Quiz post-conférence
[Quiz post-conférence](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2)
## Quiz de validation des connaissances
[Quiz de validation des connaissances](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=fr)
## Révision et auto-étude
## 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?
## Affectation
## Consigne
[Lire la documentation](assignment.fr.md)

@ -154,7 +154,7 @@ back add r0,r1
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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)
#### Δημοφιλή εργαλεία γραμμής εντολών
@ -169,8 +169,10 @@ back add r0,r1
#### Δημοφιλή documentation για την ανάπτυξη Ιστού(Web Development)
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
- [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).

@ -154,7 +154,7 @@ back add r0,r1
#### लिनक्स
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### लोकप्रिय कमांड लाइन टूल्स
@ -169,10 +169,12 @@ back add r0,r1
#### वेब विकास पर लोकप्रिय प्रलेखन
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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)
✅ कुछ शोध करें: अब जब आप एक वेब डेवलपर के वातावरण की मूल बातें जानते हैं, तो इसकी तुलना करें और वेब डिजाइनर के वातावरण के साथ इसके विपरीत करें।
✅ कुछ शोध करें: अब जब आप वेब डेवलपर के परिवेश की मूल बातें जानते हैं, तो इसकी तुलना वेब डिज़ाइनर के परिवेश से करें।
---

@ -155,7 +155,7 @@ Pilihan untuk command line akan berbeda berdasarkan sistem operasi yang Anda gun
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### Alat Command Line Populer
@ -170,8 +170,11 @@ Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar
#### Dokumentasi Populer tentang Pengembangan Web
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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.
---

@ -154,7 +154,7 @@ Le alternative per la riga di comando differiriscono in base al sistema operativ
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### Popolari Strumenti da Riga di Comando
@ -169,8 +169,10 @@ Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte d
#### Popolari Documentazioni sullo Sviluppo Web
- [Mozilla sviluppatore Network](https://sviluppatore.mozilla.org/docs/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.

@ -204,7 +204,7 @@ Web開発者は、自分のコードがWeb上でどのように実行される
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### 有名なコマンドラインツール
@ -220,8 +220,10 @@ Web開発者は、自分のコードがWeb上でどのように実行される
#### Web開発者向けの有名なドキュメント
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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デザイナーの開発環境との違いを見てみましょう。

@ -154,7 +154,7 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다.
#### 리눅스
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### 인기있는 Command Line 도구
@ -169,8 +169,10 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다.
#### 웹 개발의 인기있는 문서
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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) 용
✅ 약간의 조사를 해보세요: 이제 웹 개발자 환경의 기본 사항을 알았으므로, 웹 디자이너 환경과 비교하고 대조하십시오.

@ -152,7 +152,7 @@ Pilihan untuk ('command line') akan berbeza berdasarkan sistem operasi yang anda
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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
@ -167,8 +167,10 @@ Apabila pembangun ingin mempelajari sesuatu yang baru, kemungkinan besar mereka
#### Dokumentasi Popular untuk Pembangunan Web
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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.

@ -155,7 +155,7 @@ Beschikbaarheid van command lines verschilt op basis van het besturingssysteem w
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### Populaire Command Line Applicaties
@ -170,8 +170,10 @@ Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de b
#### Populaire Documentatie over Web Ontwikkeling
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
- [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.

@ -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 linguages de prorgamação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que que ajudarão como uma pessoa desenvolvedora.
![Introdução a Programação](/sketchnotes/webdev101-programming.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pré-Lição
[Quiz Pré-Lição](https://nice-beach-0fe9e9d0f.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/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "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-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools)
### Ferramentas da Linah 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-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [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-13441-cxa)
#### 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-13441-cxa)
#### 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://nice-beach-0fe9e9d0f.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)

@ -154,7 +154,7 @@ back add r0,r1
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### 常用命令行工具
@ -169,8 +169,10 @@ back add r0,r1
#### Web 开发常用文档
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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 设计师的环境的差异?

@ -154,7 +154,7 @@ back add r0,r1
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/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-13441-cxa)
#### 其他常用指令
@ -169,8 +169,10 @@ back add r0,r1
#### 常用的網頁開發文件
- [Mozilla Developer Network](https://developer.mozilla.org/docs/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)
✅ 研究項目: 現在你已經了解基本的網頁開發環境了。請比較「網頁開發環境」與「網頁設計環境」之間的差異。

@ -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](https://developer.mozilla.org/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 |

@ -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/en-US/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 |

@ -0,0 +1,318 @@
# Introduction à GitHub
Cette leçon couvre les principes de base de GitHub, une plateforme permettant dhé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://nice-beach-0fe9e9d0f.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 dautres 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 nest 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 dun compte GitHub, dun é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 lavez pas déjà fait, ou connectez-vous et remplissez votre profil.
✅ GitHub nest pas le seul référentiel de code au monde; il y en a dautres, mais GitHub est le plus connu
### Préparation
Vous aurez besoin à la fois dun dossier avec un projet de code sur votre ordinateur local (ordinateur portable ou PC) et dun référentiel public sur GitHub, qui servira dexemple pour contribuer aux projets dautres personnes.
---
## Gestion du code
Supposons que vous ayez un dossier localement avec un projet de code et que vous souhaitiez commencer à suivre votre progression à laide de git - le système de contrôle de version. Certaines personnes comparent lutilisation de git à lécriture dune lettre damour à 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 - cest-à-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 longlet 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 sappelle aussi fichiers intermédiaires/ ajout de fichiers à la zone de transit.
```bash
git add .
```
Largument `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 denregistrement dans lhistorique 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 dautres personnes à travailler avec vous sur votre dépôt. GitHub est un excellent endroit pour le faire. Noubliez 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 lURL du référentiel. Vous lutiliserez 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 dautres modifications**. Si vous souhaitez continuer à apporter des modifications et à les pousser vers GitHub, il vous suffit dutiliser 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 dapparaître sur GitHub - comme ce fichier de notes que vous stockez dans le même dossier mais na 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 dobjet de commit Git complète la phrase suivante:
Sil est appliqué, ce commit le sera
Pour le sujet, utilisez limpératif, présent: "changement" pas "changé" ni "changements".
Comme dans le sujet, dans le corps (facultatif) utilisez également limpé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 dengagement? 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 dautres développeurs.
## Travailler sur des projets avec dautres
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 dun [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 à linté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 quils passent leur temps.
✅ fichiers README, bien quils 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 dun 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 quils é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 à lexpédition dun bon code. À quels cas dutilisation 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 sagit.
Passons en revue un flux de travail de contributeur. Supposons que le contributeur a déjà _forked_ et _cloné_ le référentiel afin quil 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 quils 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 checkout`:
```bash
git checkout [nom_branche]
```
1. **Travailler**. À ce stade, vous souhaitez ajouter vos modifications. Noubliez pas den 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 checkout 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 checkout [branch_name]
git merge main
```
Cela apportera tous les changements de `main` dans votre branche et jespè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**. Lenvoi 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_ quil 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 daccéder à la page GitHub pour le référentiel duppliqué suivant et supprimez la branche distante que vous venez dy 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 lendroit 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 quun 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 à laide dun `#` 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 à lopen source
Tout dabord, 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 linterface 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 lensemble du projet à laide 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 " nimporte quel référentiel public sur GitHub. Vous pouvez trouver vos référentiels étoilés dans le menu déroulant en haut à droite. Cest comme le bookmarking, mais pour le code.
Les projets ont un suivi des problèmes, principalement sur GitHub dans longlet " Problèmes ", sauf indication contraire, où les gens discutent des problèmes liés au projet. Et longlet Pull Requests est lendroit 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, lajout dinformations à votre référentiel et la création dun 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 lautre. 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://nice-beach-0fe9e9d0f.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 dexcellents chemins dapprentissage 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)

@ -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://nice-beach-0fe9e9d0f.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 checkout`:
```bash
git checkout [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 checkout 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 checkout [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 para desse repo parasua 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 com zíper.
### Mais algumas coisas interessantes sobre o GitHub
Você pode dar uma strela, 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://nice-beach-0fe9e9d0f.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,11 +1,15 @@
# Analyze a non-accessible web site
# Analyze an inaccessible site
## Instructions
Identify a web site 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 that you think it is inaccessible without using analytic tools, and then put it through a Lighthouse analysis. Take the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved.
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.
## Rubric
## Table to test site accessibility
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
| student report | includes paragraphs on how the site is inadequate, the Lighthouse report captured as a pdf, a list of ten points to improve, with details on how to improve it | missing 20% of the required | missing 50% of the required |
| 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

@ -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://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5)
> 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-13441-cxa)!
## 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://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
## 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.md)
Crédits : [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) par Instrument

@ -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://nice-beach-0fe9e9d0f.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://nice-beach-0fe9e9d0f.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

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

@ -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,16 +1,16 @@
# Premiers pas avec le développement Web
Dans cette section du programme, vous serez initié à des concepts non basés sur des projets importants pour devenir un développeur professionnel.
Dans cette section du programme, vous serez initié à des concepts importants pour devenir un développeur professionnel non basés sur des projets.
### theme
### Thèmes
1. [Introduction aux langages de programmation et aux outils du métier](1-intro-to-programming-languages/README.md)
2. [Bases de GitHub](2-github-basics/README.md)
3. [Bases de l'accessibilité](3-accessibility/README.md)
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
Bases de l'accessibilité a été écrit avec ♥ par [Christopher Harrison](https://twitter.com/geektrainer)
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)

@ -0,0 +1,17 @@
# Getting Started with Web Development
Nesta seção do currículo, você será introduzida a conceitos não baseados em projetos mas que são importantes para se tornar um desenvolvedor profissional.
### Tópicos
1. [Introdução a Linguagens de Programação e Ferramentas](1-intro-to-programming-languages/README..pt.md)
2. [GitHub Básico](2-github-basics/README.pt.md)
3. [Acesibilidade Básica](3-accessibility/README.pt.md)
### Créditos
Básico em Acessibilidade foi escrito com ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)
Introdução ao GitHub foi escrito com ♥️ por [Floor Drees](https://twitter.com/floordrees)
Introdução a Linguagens de Programação e Ferramentas foi escrito com ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)

@ -8,11 +8,13 @@
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
> 🎥 Click the image above for a video about data types
Let's start with variables and the data types that populate them!
## Variables
Variables store values that can be used and changed throughout your code.
@ -111,7 +113,7 @@ In the previous section, the value of `myVariable` was a number data type.
`let myVariable = 123;`
Variables can store all types of numbers, including decimals or negative numbers. Numbers also can be used with arithmetic operators, covered in the [next section](#operators).
Variables can store all types of numbers, including decimals or negative numbers. Numbers also can be used with arithmetic operators, covered in the [next section](#arithmetic-operators).
### Arithmetic Operators
@ -171,7 +173,7 @@ You can achieve your formatting goals with either method, but template literals
### Booleans
Booleans can be only two values: `true` or `false`. Booleans can help make decisions on which lines of code should run when certain conditions are met. In many cases, [operators](#operators) assist with setting the value of a Boolean and you will often notice and write variables being initialized or their values being updated with an operator.
Booleans can be only two values: `true` or `false`. Booleans can help make decisions on which lines of code should run when certain conditions are met. In many cases, [operators](#arithmetic-operators) assist with setting the value of a Boolean and you will often notice and write variables being initialized or their values being updated with an operator.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -112,7 +112,7 @@ Im vorherigen Abschnitt war der Wert von `myVariable` ein Datentyp für Zahlen.
`let myVariable = 123;`
Variablen können alle Arten von Zahlen speichern, einschließlich Dezimalstellen oder negativer Zahlen. Zahlen können auch mit arithmetischen Operatoren verwendet werden, die im [nächsten Abschnitt](#operators) behandelt werden.
Variablen können alle Arten von Zahlen speichern, einschließlich Dezimalstellen oder negativer Zahlen. Zahlen können auch mit arithmetischen Operatoren verwendet werden, die im [nächsten Abschnitt](#rechenzeichen) behandelt werden.
### Rechenzeichen
@ -173,7 +173,7 @@ Sie können Ihre Formatierungsziele mit beiden Methoden erreichen, aber Vorlagen
### Boolesche Werte
Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Werte können dabei helfen, Entscheidungen darüber zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind. In vielen Fällen helfen [Operatoren](#operators) beim Festlegen des Werts eines Booleschen Werts, und Sie werden häufig feststellen und schreiben, dass Variablen initialisiert oder ihre Werte mit einem Operator aktualisiert werden.
Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Werte können dabei helfen, Entscheidungen darüber zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind. In vielen Fällen helfen [Operatoren](#rechenzeichen) beim Festlegen des Werts eines Booleschen Werts, und Sie werden häufig feststellen und schreiben, dass Variablen initialisiert oder ihre Werte mit einem Operator aktualisiert werden.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -111,7 +111,7 @@ En la sección anterior, el valor de "myVariable" era un tipo de datos numérico
`let myVariable = 123;`
Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también se pueden usar con operadores aritméticos, que se tratan en la [siguiente sección](#operadores).
Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también se pueden usar con operadores aritméticos, que se tratan en la [siguiente sección](#operadores-aritméticos).
### Operadores aritméticos
@ -172,7 +172,7 @@ Puede lograr sus objetivos de formato con cualquier método, pero los literales
### Booleanos
Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores booleanos pueden ayudar a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones. En muchos casos, [operadores](#operadores) ayudan a establecer el valor de un booleano y, a menudo, notará y escribirá variables que se inicializan o que sus valores se actualizan con un operador.
Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores booleanos pueden ayudar a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones. En muchos casos, [operadores](#operadores-aritméticos) ayudan a establecer el valor de un booleano y, a menudo, notará y escribirá variables que se inicializan o que sus valores se actualizan con un operador.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -111,7 +111,7 @@ const MY_VARIABLE = 123;
`let myVariable = 123;`
चर सभी प्रकार की संख्याओं को संग्रहीत कर सकते हैं, जिसमें दशमलव या नकारात्मक संख्याएं शामिल हैं। संख्याओं का उपयोग अंकगणितीय संचालकों के साथ भी किया जा सकता है, जिन्हें [अगले भाग](#operators) में शामिल किया गया है।
चर सभी प्रकार की संख्याओं को संग्रहीत कर सकते हैं, जिसमें दशमलव या नकारात्मक संख्याएं शामिल हैं। संख्याओं का उपयोग अंकगणितीय संचालकों के साथ भी किया जा सकता है, जिन्हें [अगले भाग](#अंकगणितीय-आपरेटर) में शामिल किया गया है।
### अंकगणितीय आपरेटर
@ -171,7 +171,7 @@ let myString2 = "World";
### बुलैंस
बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद कर सकते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए। कई मामलों में, [ऑपरेटर](#operators) एक बूलियन का मूल्य निर्धारित करने में सहायता करते हैं और आप अक्सर वैरिएबल या उनके मूल्यों को एक ऑपरेटर के साथ अपडेट किए जाने पर ध्यान देंगे और लिखेंगे।
बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद कर सकते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए। कई मामलों में, [ऑपरेटर](#अंकगणितीय-आपरेटर) एक बूलियन का मूल्य निर्धारित करने में सहायता करते हैं और आप अक्सर वैरिएबल या उनके मूल्यों को एक ऑपरेटर के साथ अपडेट किए जाने पर ध्यान देंगे और लिखेंगे।
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -173,7 +173,7 @@ Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi tem
### Boolean
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#Operator-Aritmatika) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -110,7 +110,7 @@ Nella sezione precedente, il valore di `myVariable` era un tipo di dato number (
`let myVariable = 123;`
Le variabili possono memorizzare tutti i tipi di numero, inclusi decimali o numeri negativi. I numeri possono anche essere usati con operatori aritmetici, trattati nella [prossima sezione](#operators).
Le variabili possono memorizzare tutti i tipi di numero, inclusi decimali o numeri negativi. I numeri possono anche essere usati con operatori aritmetici, trattati nella [prossima sezione](#Operatori-aritmetici).
### Operatori aritmetici
@ -170,7 +170,7 @@ Si possono raggiungere i propri obiettivi di formattazione con entrambi i metodi
### Booleani
I booleani possono avere solo due valori: vero (`true`) o falso (`false`). I booleani possono aiutare a prendere decisioni su quali righe di codice devono essere eseguite quando vengono soddisfatte determinate condizioni. In molti casi, [gli operatori](#operators) assistono nell'impostazione del valore di un Booleano e spesso si noteranno e scriveranno variabili inizializzate o i loro valori aggiornati con un operatore.
I booleani possono avere solo due valori: vero (`true`) o falso (`false`). I booleani possono aiutare a prendere decisioni su quali righe di codice devono essere eseguite quando vengono soddisfatte determinate condizioni. In molti casi, [gli operatori](#Operatori-aritmetici) assistono nell'impostazione del valore di un Booleano e spesso si noteranno e scriveranno variabili inizializzate o i loro valori aggiornati con un operatore.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -111,7 +111,7 @@ const MY_VARIABLE = 123;
`let myVariable = 123;`
변수는 소수 또는 음수를 포함하여 모든 유형의 숫자를 저장할 수 있습니다. 숫자는 [next section](#operators)에서 다룰 산술 연산자와 함께 사용할 수도 있습니다.
변수는 소수 또는 음수를 포함하여 모든 유형의 숫자를 저장할 수 있습니다. 숫자는 [next section](#산술-연산자)에서 다룰 산술 연산자와 함께 사용할 수도 있습니다.
### 산술 연산자
@ -171,7 +171,7 @@ let myString2 = "World";
### 논리 자료형
논리 자료형은 `true` 또는 `false` 두 가지 값만 가능합니다. 논리 자료형은 특정 조건이 충족되며 실행할 코드 라인을 결정하는 순간 도움이 될 수 있습니다. 대부분의 경우, [operators](#operators)는 논리 연산자 값을 설정하는 데 도움이 되며, 변수 초기화되거나 해당 값이 연산자로 업데이트되는 것을 알고 쓰는 경우가 많습니다.
논리 자료형은 `true` 또는 `false` 두 가지 값만 가능합니다. 논리 자료형은 특정 조건이 충족되며 실행할 코드 라인을 결정하는 순간 도움이 될 수 있습니다. 대부분의 경우, [operators](#산술-연산자)는 논리 연산자 값을 설정하는 데 도움이 되며, 변수 초기화되거나 해당 값이 연산자로 업데이트되는 것을 알고 쓰는 경우가 많습니다.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -111,7 +111,7 @@ Pada bahagian sebelumnya, nilai `myVariable` adalah jenis data nombor.
`let myVariable = 123;`
Pemboleh ubah boleh menyimpan semua jenis nombor, termasuk nombor perpuluhan atau nombor negatif. Nombor juga boleh digunakan dengan pengendali aritmetik, yang terdapat dalam [bahagian seterusnya](#pengendali).
Pemboleh ubah boleh menyimpan semua jenis nombor, termasuk nombor perpuluhan atau nombor negatif. Nombor juga boleh digunakan dengan pengendali aritmetik, yang terdapat dalam [bahagian seterusnya](#Pengendali-Aritmetik).
### Pengendali Aritmetik
@ -171,7 +171,7 @@ Anda boleh mencapai matlamat pemformatan anda dengan mana-mana kaedah, tetapi te
### Booleans
Booleans boleh hanya dua nilai: `benar` atau `salah`. Booleans dapat membantu membuat keputusan mengenai garis kod mana yang harus dijalankan apabila syarat tertentu dipenuhi. Dalam banyak kes, [pengendali](#pengendali) membantu menetapkan nilai Boolean dan anda sering akan melihat dan menulis pemboleh ubah yang dimulakan atau nilainya dikemas kini dengan operator.
Booleans boleh hanya dua nilai: `benar` atau `salah`. Booleans dapat membantu membuat keputusan mengenai garis kod mana yang harus dijalankan apabila syarat tertentu dipenuhi. Dalam banyak kes, [pengendali](#Pengendali-Aritmetik) membantu menetapkan nilai Boolean dan anda sering akan melihat dan menulis pemboleh ubah yang dimulakan atau nilainya dikemas kini dengan operator.
- `let myTrueBool = betul`
- `let myFalseBool = salah`

@ -111,7 +111,7 @@ In de vorige sectie was de waarde van `myVariable` een gegevenstype met een geta
`let myVariable = 123;`
Variabelen kunnen alle soorten getallen opslaan, inclusief decimalen of negatieve getallen. Getallen kunnen ook worden gebruikt met rekenkundige operatoren, behandeld in de [volgende sectie](#operators).
Variabelen kunnen alle soorten getallen opslaan, inclusief decimalen of negatieve getallen. Getallen kunnen ook worden gebruikt met rekenkundige operatoren, behandeld in de [volgende sectie](#Rekenkundige-operatoren).
### Rekenkundige operatoren
@ -171,7 +171,7 @@ U kunt uw opmaakdoelen met beide methoden bereiken, maar template literals respe
### Booleans
Booleans kunnen slechts twee waarden zijn: `true` of `false`. Booleans kunnen helpen bij het nemen van beslissingen over welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden is voldaan. In veel gevallen helpen [operatoren](# operators) bij het instellen van de waarde van een Boolean waarde en u zult vaak merken en variabelen schrijven die geïnitialiseerd worden of dat hun waarden worden bijgewerkt met een operator.
Booleans kunnen slechts twee waarden zijn: `true` of `false`. Booleans kunnen helpen bij het nemen van beslissingen over welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden is voldaan. In veel gevallen helpen [operatoren](#Rekenkundige-operatoren) bij het instellen van de waarde van een Boolean waarde en u zult vaak merken en variabelen schrijven die geïnitialiseerd worden of dat hun waarden worden bijgewerkt met een operator.
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -0,0 +1,195 @@
# Noções básicas de JavaScript: Tipos de dados
![Noções básicas de JavaScript: Tipos de dados](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pré-Aula
[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
Esta lição cobre o básico do JavaScript, a linguagem que fornece interatividade na web.
[![Tipos de dados em JavaScriptt](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Tipos de dados em JavaScript")
Vamos começar com variáveis e os tipos de dados que as preenchem!
## Variáveis
Variáveis armazenam valores que podem ser usados e alterados em todo o código.
A criação e **declaração** de uma variável tem a seguinte sintaxe **[palavra-chave] [nome]**. É composto de duas partes:
- **Palavra-chave**. Palavras-chave podem ser `let` ou` var`.
> Nota, a palavra-chave `let` foi introduzida no ES6 e dá a sua variável o chamado _block scope_ ou escopos do bloco. É recomendado que você use `let` sobre `var`. Abordaremos os escopos do bloco mais detalhadamente em partes futuras.
- **O nome da variável**, este é um nome que você escolhe.
### Tarefa - trabalhando com variáveis
1. **Declare uma variável**. Vamos declarar uma variável usando a palavra-chave `let`:
```javascript
let minhaVariável;
```
`minhaVariável` agora foi declarada usando a palavra-chave`let`. Atualmente não tem um valor.
1. **Atribua um valor**. Armazene um valor em uma variável com o operador `=`, seguido pelo valor esperado.
```javascript
minhaVariável = 123;
```
> Nota: o uso de `=` nesta lição significa que fazemos uso de um "operador de atribuição", usado para definir um valor para uma variável. Não denota igualdade.
`minhaVariável` agora foi *inicializada* com o valor 123.
1. **Refatorar**. Substitua seu código pela seguinte instrução.
```javascript
let minhaVariável = 123;
```
O acima é chamado de _inicialização explícita_ quando uma variável é declarada e recebe um valor ao mesmo tempo.
1. **Altere o valor da variável**. Altere o valor da variável da seguinte maneira:
```javascript
minhaVariável = 321;
```
Uma vez que uma variável é declarada, você pode alterar seu valor em qualquer ponto do seu código com o operador `=` e o novo valor.
✅ Tente isso! Você pode escrever JavaScript diretamente no seu navegador. Abra uma janela do navegador e navegue até Ferramentas do desenvolvedor. No console, você encontrará um prompt; digite `let myVariable = 123`, pressione return e, em seguida, digite` myVariable`. O que acontece? Observe que você aprenderá mais sobre esses conceitos nas lições subsequentes.
## Constantes
A declaração e a inicialização de uma constante seguem os mesmos conceitos de uma variável, com exceção da palavra-chave `const`. Normalmente, as constantes são declaradas com todas as letras maiúsculas.
```javascript
const MY_VARIABLE = 123;
```
As constantes são semelhantes às variáveis, com duas exceções:
- **Deve ter um valor**. As constantes devem ser inicializadas ou ocorrerá um erro ao executar o código.
- **A referência não pode ser alterada**. A referência de uma constante não pode ser alterada depois de inicializada, ou ocorrerá um erro ao executar o código. Vejamos dois exemplos:
- **Valor simples**. O seguinte NÃO é permitido:
```javascript
const PI = 3;
PI = 4; // NÃO é permitido
```
- **A referência do objeto está protegida**. O seguinte NÃO é permitido.
```javascript
const obj = { a: 3 };
obj = { b: 5 } // NÃO é permitido
```
- **O valor do objeto não está protegido**. O seguinte é permitido:
```javascript
const obj = { a: 3 };
obj.a = 5; // permitido
```
Acima você está alterando o valor do objeto, mas não a referência em si, o que o torna permitido.
> Nota, um `const` significa que a referência está protegida contra reatribuição. O valor não é _imutável_ e pode mudar, especialmente se for uma construção complexa como um objeto.
## Tipos de Dados
As variáveis podem armazenar muitos tipos diferentes de valores, como números e texto. Esses vários tipos de valores são conhecidos como **tipo de dados**. Os tipos de dados são uma parte importante do desenvolvimento de software porque ajudam as pessoas desenvolvedoras a tomar decisões sobre como o código deve ser escrito e como o software deve ser executado. Além disso, alguns tipos de dados têm recursos exclusivos que ajudam a transformar ou extrair informações adicionais em um valor.
✅ Os tipos de dados também são chamados de primitivos de dados JavaScript, pois são os tipos de dados de nível mais baixo fornecidos pela linguagem. Existem 6 tipos de dados primitivos: string, number, bigint, boolean, undefined, e symbol. Reserve um minuto para visualizar o que cada uma dessas primitivas pode representar. O que é uma `zebra`? Que tal `0`? `true`?
### Números (Numbers)
Na seção anterior, o valor de `myVariable` era um tipo de dado numérico.
`let myVariable = 123;`
As variáveis podem armazenar todos os tipos de números, incluindo decimais ou números negativos. Os números também podem ser usados com operadores aritméticos, abordados na [próxima seção](#Operadores-aritméticos).
### Operadores aritméticos
Existem vários tipos de operadores para usar ao executar funções aritméticas, e alguns estão listados aqui:
| Símbolo | Descrição | Examplo |
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
| `+` | **Adição**: Calcula a soma de dois números | `1 + 2 //a resposta esperada é 3` |
| `-` | **Subitração**: Calcula a diferença de dois números | `1 - 2 //a resposta esperada é -1` |
| `*` | **Multiplicação**: Calcula o produto de dois números | `1 * 2 //a resposta esperada é 2` |
| `/` | **Divisão**: Calcula o quociente de dois números | `1 / 2 //a resposta esperada é 0.5` |
| `%` | **Restante**: Calcula o resto da divisão de dois números | `1 % 2 //a resposta esperada é 1` |
✅ Tente isso! Tente uma operação aritmética no console do seu navegador. Os resultados surpreendem você?
### Strings
Strings são conjuntos de caracteres que residem entre aspas simples ou duplas.
- `'Isso é uma string'`
- `"Isso também é uma string"`
- `let myString = 'Este é um valor de string armazenado em uma variável';`
Lembre-se de usar aspas ao escrever uma string, caso contrário, o JavaScript assumirá que é um nome de variável.
### Formatando Strings
Strings são textuais e requerem formatação de vez em quando.
Para **concatenar** duas ou mais strings, ou juntá-las, use o operador `+`.
```javascript
let myString1 = "Olá";
let myString2 = "Mundo";
myString1 + myString2 + "!"; //OláMundo!
myString1 + " " + myString2 + "!"; //Olá Mundo!
myString1 + ", " + myString2 + "!"; //Olá, Mundo!
```
✅ Por que `1 + 1 = 2` em JavaScript, mas` '1' + '1' = 11? `Pense nisso. Que tal `'1' + 1`?
**Template literals (Literais de modelo)** são outra maneira de formatar strings, exceto em vez de aspas, o crase é usado. Qualquer coisa que não seja texto simples deve ser colocado dentro dos espaços reservados `$ {}`. Isso inclui todas as variáveis que podem ser strings.
```javascript
let myString1 = "Olá";
let myString2 = "Mundo";
`${myString1} ${myString2}!` //Olá Mundo!
`${myString1}, ${myString2}!` //Olá, Mundo!
```
Você pode atingir seus objetivos de formatação com qualquer um dos métodos, mas os Template literals respeitarão todos os espaços e quebras de linha.
✅ Quando você usaria um literal de modelo em vez de uma string simples?
### Booleanos
Os booleanos podem ter apenas dois valores: `true` ou` false`. Os booleanos podem ajudar a tomar decisões sobre quais linhas de código devem ser executadas quando certas condições são atendidas. Em muitos casos, [operadores](#Operadores-aritméticos) auxiliam na configuração do valor de um booleano e você freqüentemente notará e escreverá variáveis sendo inicializadas ou seus valores sendo atualizados com um operador.
- `let myTrueBool = true`
- `let myFalseBool = false`
✅ Uma variável pode ser considerada 'true' se for avaliada como um booleano `true`. Curiosamente, em JavaScript, [todos os valores são verdadeiros, a menos que definidos como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
---
## 🚀 Desafio
JavaScript é notório por suas maneiras surpreendentes de lidar com tipos de dados ocasionalmente. Pesquise sobre essas 'pegadinhas'. Por exemplo: a diferenciação de maiúsculas e minúsculas pode afetar! Tente isto em seu console: `let age = 1; deixe Idade = 2; age == Age` (resolve `false` - por quê?). Que outras dicas você pode encontrar?
## Quiz Pós-Aula
[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
## Revisão e autoestudo
Dê uma olhada [nessa lista de exercícios de JavaScript](https://css-tricks.com/snippets/javascript/) e tente um. O que você aprendeu?
## Tarefa
[Prática de Tipos de Dados](assignment.pt.md)

@ -110,7 +110,7 @@ const MY_VARIABLE = 123;
`let myVariable = 123;`
变量可以存储所有类型的数值,包括小数或者负数。数值也可以搭配算术运算符使用,将在[下一部分](#operators)介绍。
变量可以存储所有类型的数值,包括小数或者负数。数值也可以搭配算术运算符使用,将在[下一部分](#算术运算符(Arithmetic-Operators))介绍。
### 算术运算符Arithmetic Operators
@ -170,7 +170,7 @@ let myString2 = "World";
### 布尔值Booleans
布尔值只可能是这两个值:`true` 或 `false`。布尔值可以用于决定特定条件被满足时该运行哪些代码。多数情况下,[运算符](#operators)都可以设置布尔值,你会常常看到或者自己写出一些被通过运算符初始化或更新为布尔值。
布尔值只可能是这两个值:`true` 或 `false`。布尔值可以用于决定特定条件被满足时该运行哪些代码。多数情况下,[运算符](#算术运算符(Arithmetic-Operators))都可以设置布尔值,你会常常看到或者自己写出一些被通过运算符初始化或更新为布尔值。
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -111,7 +111,7 @@ const MY_VARIABLE = 123;
`let myVariable = 123;`
變數能儲存所有類型的數字,包含小數點與負數。數字也可以被套用在四則運算上,這被放在[下一個段落](#operators)中。
變數能儲存所有類型的數字,包含小數點與負數。數字也可以被套用在四則運算上,這被放在[下一個段落](#算術運算子-(Arithmetic-Operators))中。
### 算術運算子 (Arithmetic Operators)
@ -172,7 +172,7 @@ let myString2 = "World";
### 布林 (Booleans)
布林有兩種數值:`true` 或 `false`,使用在程式碼做條件決定的時候。在多數情況下,[運算子](#operators)可以套用在布林上,你會在初始化或更新數值時使用。
布林有兩種數值:`true` 或 `false`,使用在程式碼做條件決定的時候。在多數情況下,[運算子](#算術運算子-(Arithmetic-Operators))可以套用在布林上,你會在初始化或更新數值時使用。
- `let myTrueBool = true`
- `let myFalseBool = false`

@ -0,0 +1,11 @@
# Types de données Pratique
## Instructions
Imaginez que vous construisez un panier d'achat. Écrivez une documentation sur les types de données dont vous auriez besoin pour compléter votre expérience d'achat. Comment êtes vous arrivé à vos choix?
## Rubrique
Critères |Exemplaire |Adéquat | Besoin d'amélioration
--- |--- |--- |- |
|| Les six types de données sont listés et explorés en détail, documentant leur utilisation | Quatre types de données sont explorés | Deux types de données sont explorés |

@ -0,0 +1,11 @@
# Prática de Tipos de Dados
## Instruções
Imagine que você está construindo um carrinho de compras. Escreva alguma documentação sobre os tipos de dados de que você precisa para completar sua experiência de compra. Como você fez suas escolhas?
## Rubrica
Critérios | Exemplar | Adequado | Precisa de melhorias
--- | --- | --- | - |
|| Os seis tipos de dados são listados e explorados em detalhes, documentando seu uso | Quatro tipos de dados são explorados | Dois tipos de dados são explorados |

@ -10,8 +10,9 @@ When we think about writing code, we always want to ensure our code is readable.
[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
> Click the image above for a video about methods and functions.
> 🎥 Click the image above for a video about methods and functions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
## Functions
@ -192,4 +193,4 @@ It's worth [reading up a little more on arrow functions](https://developer.mozil
## Assignment
[Fun with Functions](assignment.md)
[Fun with Functions](assignment.md)

@ -0,0 +1,194 @@
# Noções básicas de JavaScript: métodos e funções
![Noções básicas de JavaScript - Funções](/sketchnotes/webdev101-js-functions.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pré-Aula
[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
Quando pensamos em escrever código, sempre queremos garantir que nosso código seja legível. Embora isso pareça contra-intuitivo, o código é lido muito mais vezes do que escrito. Uma ferramenta central na caixa de ferramentas de uma pessoa desenvolvedora para garantir código sustentável é a **função**.
[![Métodos e Funções](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos e Funções")
> Clique na imagem acima para ver um vídeo sobre métodos e funções.
## Funções
Em sua essência, uma função é um bloco de código que podemos executar sob demanda. Isso é perfeito para cenários em que precisamos realizar a mesma tarefa várias vezes; em vez de duplicar a lógica em vários locais (o que tornaria difícil atualizá-la quando chegar a hora), podemos centralizá-la em um local e chamá-la sempre que precisarmos que a operação seja realizada - você pode até chamar funções de outras funções !.
Também importante é a capacidade de nomear uma função. Embora isso possa parecer trivial, o nome fornece uma maneira rápida de documentar uma seção de código. Você pode pensar nisso como um rótulo em um botão. Se eu clicar em um botão que diz "Cancelar cronômetro", sei que o relógio vai parar de funcionar.
## Criar e chamar uma Função
A sintaxe de uma função é semelhante a esta:
```javascript
function nameOfFunction() { // definição de função
// definição de função/corpo
}
```
Se eu quisesse criar uma função para exibir uma saudação, poderia ser assim:
```javascript
function displayGreeting() {
console.log('Olá, mundo!');
}
```
Sempre que quisermos chamar (ou invocar) nossa função, usamos o nome da função seguido por `()`. É importante notar o fato de que nossa função pode ser definida antes ou depois de decidirmos chamá-la; o compilador JavaScript encontrará ela para você.
```javascript
// calling our function
displayGreeting();
```
> **NOTA:** Existe um tipo especial de função conhecido como **método**, que você já está usando! Na verdade, vimos isso em nossa demonstração acima, quando usamos `console.log`. O que torna um método diferente de uma função é que um método é anexado a um objeto (`console` em nosso exemplo), enquanto uma função está flutuando livremente. Você ouvirá muitas pessoas desenvolvedoras usarem esses termos alternadamente.
### Práticas recomendadas de função
Existem várias práticas recomendadas para se ter em mente ao criar funções
- Como sempre, use nomes descritivos para sabermos o que a função fará
- Use **camelCasing** para combinar palavras
- Mantenha suas funções focadas em uma tarefa específica
## Passando informações para uma função
Para tornar uma função mais reutilizável, você frequentemente desejará passar informações para ela. Se considerarmos nosso exemplo `displayGreeting` acima, ele exibirá apenas **Olá, mundo!**. Não é a função mais útil que se poderia criar. Se quisermos torná-lo um pouco mais flexível, como permitir que alguém especifique o nome da pessoa a ser cumprimentada, podemos adicionar um **parâmetro**. Um parâmetro (às vezes também chamado de **argumento**), é uma informação adicional enviada para uma função.
Os parâmetros são listados na parte de definição entre parênteses e são separados por vírgulas, assim:
```javascript
function name(param, param2, param3) {
}
```
Podemos atualizar nosso `displayGreeting` para aceitar um nome e exibi-lo.
```javascript
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
```
Quando queremos chamar nossa função e passar o parâmetro, especificamos entre parênteses.
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
```
## Valores padrão
Podemos tornar nossa função ainda mais flexível adicionando mais parâmetros. Mas e se não quisermos que todos os valores sejam especificados? Seguindo nosso exemplo de saudação, poderíamos deixar o nome conforme necessário (precisamos saber quem estamos saudando), mas queremos permitir que a própria saudação seja personalizada conforme desejado. Se alguém não quiser personalizá-lo, fornecemos um valor padrão. Para fornecer um valor padrão a um parâmetro, nós o definimos da mesma forma que definimos um valor para uma variável - `parameterName = 'defaultValue'`. Para ver um exemplo completo:
```javascript
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
```
Quando chamamos a função, podemos decidir se queremos definir um valor para `salutation`.
```javascript
displayGreeting('Christopher');
// displays "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
```
## Valores de retorno
Até agora, a função que construímos sempre será enviada para o [console](https://developer.mozilla.org/docs/Web/API/console). Às vezes, isso pode ser exatamente o que estamos procurando, especialmente quando criamos funções que chamarão outros serviços. Mas e se eu quiser criar uma função auxiliar para realizar um cálculo e fornecer o valor de volta para que eu possa usá-lo em outro lugar?
Podemos fazer isso usando um **valor de retorno**. Um valor de retorno é retornado pela função e pode ser armazenado em uma variável da mesma forma que podemos armazenar um valor literal, como uma string ou número.
Se uma função retornar algo, então a palavra-chave `return` é usada. A palavra-chave `return` espera um valor ou referência do que está sendo retornado assim:
```javascript
return myVariable;
```
Poderíamos criar uma função para criar uma mensagem de saudação e retornar o mensagem para a pessoa usuária.
```javascript
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
```
Ao chamar esta função, armazenaremos o valor em uma variável. É quase da mesma forma que definiríamos uma variável com um valor estático (como `const name = 'Christopher'`).
```javascript
const greetingMessage = createGreetingMessage('Christopher');
```
## Funções como parâmetros para funções
Conforme você progride em sua carreira de programação, encontrará funções que aceitam funções como parâmetros. Esse truque interessante é normalmente usado quando não sabemos quando algo vai ocorrer ou se completar, mas sabemos que precisamos realizar uma operação em resposta.
Como exemplo, considere [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), que inicia um cronômetro e executará o código quando ele for concluído. Precisamos dizer a ele qual código queremos executar. Parece um trabalho perfeito para uma função!
Se você executar o código abaixo, após 3 segundos verá a mensagem **3 segundos decorreram**.
```javascript
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);
```
### Funções Anônimas
Vamos dar outra olhada no que construímos. Estamos criando uma função com um nome que será usado uma vez. Conforme nossa aplicação fica mais complexa, podemos nos ver criando uma série de funções que serão chamadas apenas uma vez. Isso não é o ideal. Acontece que nem sempre precisamos fornecer um nome!
Quando passamos uma função como parâmetro, podemos pular a criação de uma com antecedência e, em vez disso, construir uma como parte do parâmetro. Usamos a mesma palavra-chave `function`, mas em vez disso, a construímos como um parâmetro.
Vamos reescrever o código acima para usar uma função anônima:
```javascript
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
```
Se você executar nosso novo código, notará que obtemos os mesmos resultados. Criamos uma função, mas não precisamos dar um nome a ela!
### Arrow Functions
Um atalho comum em muitas linguagens de programação (incluindo JavaScript) é a capacidade de usar o que é chamado de função **arrow** ou **arrow function**. Ela usa um indicador especial de `=>`, que se parece com uma flecha (arrow, em inglês) - daí o nome! Usando `=>`, podemos pular a palavra-chave `function`.
Vamos reescrever nosso código mais uma vez para usar arrow function:
```javascript
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
```
### Quando usar cada estratégia
Agora você viu que temos três maneiras de passar uma função como parâmetro e você pode estar se perguntando quando usar cada uma delas. Se você sabe que usará a função mais de uma vez, crie-a normalmente. Se você for usá-lo apenas para um local, geralmente é melhor usar uma função anônima. Sobre usar Arrow Functions ou a sintaxe mais tradicional de `function` é com você, mas você notará que a maioria das pessoas desenvolvedoras modernas prefere` => `.
---
## 🚀 Desafio
Você pode articular em uma frase a diferença entre funções e métodos? Tente!
## Quiz Pós-Aula
[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
## Revisão e autoestudo
Vale a pena [ler um pouco mais sobre arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), como elas são cada vez mais usados em bases de código. Pratique escrever uma função e, em seguida, reescrevê-la com esta sintaxe.
## Tarefa
[Diversão com funções](assignment.pt.md)

@ -0,0 +1,12 @@
# Diversão com funções
## Instruções
Crie funções diferentes, ambas funções que retornam algo e funções que não retornam nada.
Veja se você pode criar uma função que possui uma combinação de parâmetros e parâmetros com valores padrão.
## Rubrica
| Critério | Exemplar | Adequada | Precisa de melhorias |
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
| | A solução é oferecida com duas ou mais funções de bom desempenho com diversos parâmetros | A solução é oferecida com uma função e alguns parâmetros | A solução tem bugs |

@ -10,7 +10,9 @@ Making decisions and controlling the order in which your code runs makes your co
[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
> Click the image above for a video about making decisions.
> 🎥 Click the image above for a video about making decisions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
## A Brief Recap on Booleans
Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
@ -72,7 +74,7 @@ if (currentMoney >= laptopPrice){
console.log("Getting a new laptop!");
}
else{
//Condition was true. Code in this block will run.
//Condition was false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
```

@ -8,9 +8,11 @@
This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
> 🎥 Click the image above for a video about arrays and loops.
> Click the image above for a video about arrays and loops.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
## Arrays
Working with data is a common task for any language, and it's a much easier task when data is organized in a structural format, such as arrays. With arrays, data is stored in a structure similar to a list. One major benefit of arrays is that you can store different types of data in one array.

@ -1,6 +1,9 @@
# JavaScript-Grundlagen: Arrays und Loops
[![Arrays und Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
## [Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)

@ -3,7 +3,9 @@
![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
[![Matrices y bucles](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Matrices y bucles")
[![Matrices](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Matrices")
[![Bucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Bucles")
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)

@ -8,7 +8,8 @@
इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है। इस पाठ में, आप ऐरे और लूप्स के बारे में जानेंगे, जिनका उपयोग डेटा में हेरफेर करने के लिए किया जाता है।
[![ऐरे और लूप्स](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "ऐरे और लूप्स")
[![ऐरे](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "ऐरे")
[![लूप्स](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "लूप्स")
> ऐरे और लूप्स के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
## एरेस

@ -10,7 +10,10 @@
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
[![Array dan Loop](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
[![Loop](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loop")
## Array

@ -8,7 +8,11 @@
Questa lezione tratta le basi di javascript, il linguaggio che fornisce interattività sul web. In questa lezione, si conosceranno gli array e i cicli, usati per manipolare i dati.
[![Array e loop](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg " Array e loop")
[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
## Array

@ -8,7 +8,10 @@
このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。
[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
[![Array](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
## 配列

@ -8,7 +8,10 @@
이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다.
[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
[![Array](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
## 배열

@ -8,7 +8,8 @@
Pelajaran ini merangkumi asas-asas JavaScript, bahasa yang menyediakan interaktiviti di web. Dalam pelajaran ini, anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
[![Array dan Loop](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
[![Array](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
[![Gelung](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Gelung")
> Klik gambar di atas untuk video mengenai tatasusunan dan gelung.
## Array

@ -8,7 +8,8 @@
这节课将会介绍 JavaScript 的基础知识,正是它为网页提供了可交互性。这节课中,你将学习数组和循环,它们会被用于操控数据。
[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "数组和循环")
[![数组](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "数组")
[![循环](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "循环")
> 点击上方图片来观看一个有关数组和循环的视频。

@ -8,7 +8,8 @@
這堂課會包含程式語言 JavaScript建立互動式網頁的基礎。課程中你會學到用來操作資料的矩陣與迴圈。
[![矩陣與迴圈](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "矩陣與迴圈")
[![矩陣](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "矩陣")
[![迴圈](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "迴圈")
> 點擊以上的圖片來觀賞關於矩陣與迴圈的影片。

@ -4,10 +4,10 @@
### विषय
1. [वेरिएबल्स और डेटा प्रकार](1-data-types/README.md)
2. [फंक्शंस और मेथड्स](2-functions-methods/README.md)
3. [जावास्क्रिप्ट के साथ निर्णय करना](3-making-decisions/README.md)
4. [अर्रेंज और लूप्स ](4-arrays-loops/README.md)
1. [वेरिएबल्स और डेटा प्रकार](../1-data-types/README.hi.md)
2. [फंक्शंस और मेथड्स](../2-functions-methods/README.hi.md)
3. [जावास्क्रिप्ट के साथ निर्णय करना](../3-making-decisions/README.hi.md)
4. [अर्रेंज और लूप्स ](../4-arrays-loops/README.hi.md)
### आभार सूची

@ -0,0 +1,231 @@
# 花艺瓶项目 Part 1 HTML 简介
![HTML 简介](/sketchnotes/webdev101-html.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制
## 课前测试
[课前测试](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15?loc=zh_cn)
### 介绍
HTML全称 HyperText Markup Language它是网页的骨架。如果说 CSS 在装扮你的 HTML并且 JavaScript 让它活起来HTML 则是你的网页应用程序的身体。而 HTML 的语法也正好能证明这种看法,它包含了名为 "head"(头部)、 "body"(身子) 和 "footer"(脚部) 的标签。
在这次课程中,我们将会使用 HTML 去布局我们的虚拟**花艺瓶**界面的骨架。它将包含一个标题和三列内容:左右两列放置的可以拖拽的植物,中间的区域放置的是一个玻璃造型的花艺瓶。完成这堂课的内容,你应该可以看到放置着植物的列,但界面可能看起来有点奇怪。但没必要担心,在后面的内容里你会使用 CSS 编写样式使得它变得好看起来。
### 任务
在你的电脑上,创建一个名为 'terrarium' 的文件夹,并且在其中创建 'index.html'。你可以在 Visual Studio Code 中打开一个新的 VS Code 窗口去创建你的 terrarium 文件夹,点击「打开文件夹」来查看你的文件目录。在侧边管理面板中点击微小的「文档」按钮來创建新的文件:
![VS Code 的侧边管理面板](../images/vs-code-index.png)
也可以这样
在 git bash 中执行以下命令:
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` 或是 `nano index.html`
> index.html 文件会被你的浏览器识别为文件夹中的默认要打开的文件。例如这个网址:`https://anysite.com/test` 所对应的项目,是以包含着名为 `test` 目录且该目录存在 `index.html` 文件的结构构建的。并且 `index.html` 不需要展示在网址的末尾。
---
## DocType文档类型声明 和 html 标签
HTML 文件的第一行就是文档类型声明。要将这一行内容放在文档的最顶端的位置实在会让人有点惊讶,但是它却能告诉旧版本浏览器,它应该使用当前指定的 HTML 规范以标准的模式来渲染页面。
> 提示:在 VS Code 中,你可以把鼠标悬浮在标签上,以此来获取 MDN 参考指南中关于其使用的信息。
文档的第二行就应该是 `<html>` 的起始标签,后面应该跟着的是 `</html>` 的结束标签。这对标签是我们编写的界面的根元素。
### 任务
把这几行内容写到你的 `index.html` 文档开头:
```HTML
<!DOCTYPE html>
<html></html>
```
✅ 通过设置带有查询字符串query string的 DocType 可以设定几种不同的模式:[怪异模式与标准模式](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。
---
## 文档的 'head'(脑袋)
HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息,它也被称作[元数据(metadata)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)。在我们的例子中,我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染,主要是四种:
- 网页的标题
- 网页的元数据,它包含:
- 字符集(Character Set),说明在页面中使用的字符编码。
- 浏览器信息,包括 `x-ua-compatible`表示支持IE=edge浏览器
- 关于视图在加载时应该如何表现的信息。将视口设置为初始比例为 1 可以控制页面首次加载时的缩放级别。
### 任务
在文档中,新增 'head' 部分在 `<html>` 的标签里。
```html
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
```
✅ 当你把视图信息标签的内容设置成这个样子 `<meta name="viewport" content="width=600">` 会发生什么事情? 请阅读更多关于[Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)的信息吧。
---
## 文件的 `body`(身子)
### HTML 标签
在 HTML 中,往你的 .html 文档中添加标签去创建元素到你的页面中。每个标签都通常都有一个开始标签和结束标签,像是:`<p>hello</p>` 就表明是一个段落。 使用一组 `<body>` 标签放在`<html>` 标签中以创建你界面的身体部分,现在你的文档应该变成下面这样:
### 任务
```html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
```
现在,你可以开始构建你的页面了。一般来说,你会使用 `<div>` 标签在页面中创建单独的元素。我们将创建一系列包含图片的 `<div>` 元素。
### 图片
有一个不需要结束标签的 html 标签就是 `<img>` 标签,因为它有一个 `src` 元素,它包含页面渲染该项所需的所有信息。
在你的项目目录中创建一个名为 `images` 的文件夹,把[源代码文件夹](../../solution/images)中所有的图片都放到新建的文件夹中。里面总共有14张植物的图片
### 任务
把这些植物图片分为两列放到 `<body></body>` 标签里:
```html
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
```
> 笔记: Spans 和 Divs。 Divs 是块元素,而 Spans 是行内元素。如果把它们替换了会发生什么?
更新完我们代码后,屏幕上植物图片都展示出来了。只是看起来十分糟糕,因为我们还没有用 CSS 样式来美化它们,我们会在下一节课里面去处理。
每个图像都有 alt 文本当你无法看到或者无法渲染图片的时候就会出现。这是可访问性的一个重要属性。你可以在在以后的课程中了解更多关于可访问性的内容现在只需要记住如果用户由于某种原因不能查看图像alt 属性为图像提供替代信息(造成的原因可能有 加载太慢、src 属性错误、或者用户可能使用的是屏幕阅读器等)。
✅ 你注意到每张图片都有相同的 alt 标签了吗?这是好的实现吗?为什么或为什么不?你能改进这个代码吗?
---
## 语义化的标签
一般来说,在编写 HTML 时,最好使用有意义的 “语义” 。这是什么意思?这意味着你使用 HTML 标签来表示它们所被设计的数据或交互的类型。举个例子,网页上的核心标题就应该使用 `<h1>` 标签。
在开头的 `<body>` 标签下面添加以下一行:
```html
<h1>My Terrarium</h1>
```
使用语义化的标签例如:标题使用 `<h1>` 、无序列表使用 `<ul>` ,这样能帮助屏幕阅读器理解页面的内容。一般来说,按钮需要写作 `<button>` 而列表被写作 `<li>`。并且我们当然 _可以_ 使用有特殊样式的包含点击处理的 `<span>` 元素来当作按钮使用,但如果元素以按钮的形式出现,残疾用户可以很方便的使用现有的技术来确定按钮在页面上的位置,并与之交互。因此,尽量使用语义化的标记。
✅ 看看屏幕阅读器是[如何去处理的一个网页的](https://www.youtube.com/watch?v=OUDV1gqs9GA)。你看到了非语义化标签对他们造成的障碍了吗?
## 花艺瓶
这个界面的最后一部分涉及创建标记,这些标记后面将被装饰成一个花艺瓶。
### 任务
把这段代码添加到最后一个 `</div>` 标签上面:
```html
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
```
✅ 即使在屏幕上添加了这些内容,你仍然看不到任何东西渲染出来。为什么?
---
## 🚀 挑战
HTML 中还有一些狂野的'旧'标签,玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用,但是,你还是可以试试,能否用 `<marquee>` 标签让 h1 标题文字变成纵向展示的吗?(如果你这么尝试了,不要忘了在后面移除它们)
## 课后测试
[课后测试](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16?loc=zh_ch)
## 复习 & 预习
HTML是 '久经考验的' 构建模块系统,它帮助构建了今天的 web 。通过研究一些旧的和新的标签来了解它的历史。你能找出为什么有些标签被弃用而有些被添加吗?未来可能引入哪些标签?
要了解更多关于为web和移动设备建立网站的信息请访问[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)。
## 作业
[练习你的 HTML建立一个博客模型](assignment.zh-tw.md)

@ -6,9 +6,9 @@
# पाठ
1. [एचटीएमएल का परिचय](../1-intro-to-html/README.md)
2. [सीएसएस का परिचय](../2-intro-to-css/README.md)
3. [डोम और जेएस क्लोजर का परिचय](../3-intro-to-DOM-and-closures/README.md)
1. [एचटीएमएल का परिचय](../1-intro-to-html/README.hi.md)
2. [सीएसएस का परिचय](../2-intro-to-css/README.hi.md)
3. [डोम और जेएस क्लोजर का परिचय](../3-intro-to-DOM-and-closures/README.hi.md)
## आभार सूची

@ -0,0 +1,34 @@
# 我的花艺瓶:一个用于学习 HTML、CSS 和使用 JS 操作 DOM 的项目 🌵🌱
思考构建一个的具有拖放交互的小程序,只需要很少的 HTML、CSS 和 JS 代码,你就可以构建一个被美化的,且具有交互功能的 Web 页面。
![我的花艺瓶](../images/screenshot_gray.png)
# 教程
1. [HTML 简介](../1-intro-to-html/translations/README.zh-tw.md)
2. [CSS 简介](../2-intro-to-css/translations/README.zh-tw.md)
3. [DOM 简介与 JS 闭包](../translations/3-intro-to-DOM-and-closures/README.zh-tw.md)
## 参与人员
由 [Jen Looper](https://www.twitter.com/jenlooper) 充满着 ♥️ 编写。
使用 CSS 来编写一个花艺瓶的灵感来自于 Jakub Mandra 的玻璃瓶 [CodePen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
上面的手绘插画由 [Jen Looper](http://jenlooper.com) 使用 Procreate 绘制。
## 部署你的花艺瓶
你可以使用 Azure Static Web Apps 部署并发布你的花艺瓶到网络上。
1. Fork 这个仓库
2. 点击下方的按钮
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. 按照指引创建你的应用。请确保你的程序根目录为 `/solution` 或者是你自己代码项目的根目录。这个应用不需要使用任何 API因此你不用担心需要去调用什么额外的内容。.github 目录会在你 fork 的仓库中创建,它将帮助 Azure Static Web Apps 的构建服务构建并发布你的应用到一个新的地址。

@ -23,7 +23,7 @@
## पाठ
[इवेंट संचालित प्रोग्रामिंग का उपयोग करके एक टाइपिंग गेम बनाना](../typing-game/README.md)
[इवेंट संचालित प्रोग्रामिंग का उपयोग करके एक टाइपिंग गेम बनाना](../typing-game/README.hi.md)
## आभार सूची

@ -0,0 +1,29 @@
# 事件驱动式编程 ── 建立一款打字游戏
## 介绍
打字是开发者最被低估的技能之一。将思想从你的头脑中迅速转移到你的编辑器中的能力使创造力得以自由流动。学习的最好方法之一是玩游戏!
> 因此,让我们来开发一款打字游戏吧!
你将会用到 JavaScript、HTML 和 CSS 来构建打字游戏。游戏将向玩家展示一个随机的引言 (我们用[夏洛克 · 福尔摩斯](https://zh.wikipedia.org/wiki/%E6%AD%87%E6%B4%9B%E5%85%8B%C2%B7%E7%A6%8F%E5%B0%94%E6%91%A9%E6%96%AF)的引言),并计时玩家需要多长时间才能准确地打出它。
![demo](../images/demo.gif)
## 前提条件
请确保你已经熟悉以下概念:
- 创建文本输入和按钮控件
- CSS 和使用类设置样式
- JavaScript 基础知识
- 创建一个数组
- 创建一个随机数
- 获取当前时间
## 课程
[通过使用事件驱动编程创建一个打字游戏](../typing-game/translations/README.zh-tw.md)
## 贡献者
由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用满满 ♥️ 来编写。

@ -191,7 +191,7 @@ Take a minute to watch a video on using `const`, `let` and `var`
[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
> Click the image above for a video about variables.
> 🎥 Click the image above for a video about variables.
### Add start logic

@ -12,7 +12,7 @@ In this lesson, you'll call an API by submitting your browser extension's form a
### Set up the elements to manipulate in the extension:
By this time you have built the HTML for the form and results `<div>` for your browser extension. From now on, you'll need to work in the `/src/index.js` file and building your extension bit by bit. Refer to the [previous lesson](../about-browsers/README.md) on getting your project set up and on the build process.
By this time you have built the HTML for the form and results `<div>` for your browser extension. From now on, you'll need to work in the `/src/index.js` file and building your extension bit by bit. Refer to the [previous lesson](../1-about-browsers/README.md) on getting your project set up and on the build process.
Working in your `index.js` file, start by creating some `const` variables to hold the values associated with various fields:
@ -151,7 +151,7 @@ Here's a quick video about `async`:
[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
> Click the image above for a video about async/await.
> 🎥 Click the image above for a video about async/await.
Create a new function to query the C02Signal API:

@ -10,7 +10,7 @@ En esta lección, llamará a una API enviando el formulario de la extensión de
### 1. Configure los elementos para manipular en la extensión:
En este momento, ha creado el HTML para el formulario y los resultados `<div>` para la extensión de su navegador. De ahora en adelante, necesitará trabajar en el archivo `/src/index.js` y construir su extensión poco a poco. Consulte la [lección anterior](../about-browsers/ README.md) sobre cómo configurar su proyecto y el proceso de compilación.
En este momento, ha creado el HTML para el formulario y los resultados `<div>` para la extensión de su navegador. De ahora en adelante, necesitará trabajar en el archivo `/src/index.js` y construir su extensión poco a poco. Consulte la [lección anterior](../../1-about-browsers/translations/README.es.md) sobre cómo configurar su proyecto y el proceso de compilación.
Trabajando en su archivo `index.js`, comience creando algunas variables `const` para contener los valores asociados con varios campos:

@ -12,7 +12,7 @@
### 拡張機能で操作する要素の設定:
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja.md) を参照してください。
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](../../1-about-browsers/translations/README.ja.md) を参照してください。
`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。

@ -12,7 +12,7 @@ Dalam pelajaran ini, anda akan memanggil API dengan menyerahkan borang pelanjuta
### Sediakan elemen untuk dimanipulasi dalam pelanjutan:
Pada masa ini anda telah membina HTML untuk bentuk dan hasilnya `<div>` untuk pelanjutan penyemak imbas anda. Mulai sekarang, anda perlu bekerja dalam fail `/src/index.js` dan membina pelanjutan anda sedikit demi sedikit. Rujuk [pelajaran sebelumnya](../../about-browser/README.md) untuk menyiapkan projek anda dan pada proses pembinaan.
Pada masa ini anda telah membina HTML untuk bentuk dan hasilnya `<div>` untuk pelanjutan penyemak imbas anda. Mulai sekarang, anda perlu bekerja dalam fail `/src/index.js` dan membina pelanjutan anda sedikit demi sedikit. Rujuk [pelajaran sebelumnya](../../1-about-browsers/translations/README.ms.md) untuk menyiapkan projek anda dan pada proses pembinaan.
Bekerja dalam fail `index.js` anda, mulakan dengan membuat beberapa pemboleh ubah `const` untuk menahan nilai yang berkaitan dengan pelbagai bidang:

@ -133,7 +133,7 @@ function drawIcon(value) {
```
In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run, to draw an icon of the proper color using the Canvas API.
✅ You'll learn more about the Canvas API in the [Space Game lessons](../6-space-game/2-drawing-to-canvas/README.md/drawing-to-canvas/README.md).
✅ You'll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
Now, rebuild your extension (`npm run build`), refresh and launch your extension, and watch the color change. Is it a good time to run an errand or wash the dishes? Now you know!

@ -133,7 +133,7 @@ function drawIcon(value) {
```
En este código, está agregando un oyente para cualquier mensaje que llegue al administrador de tareas de backend. Si se llama 'updateIcon', entonces se ejecuta el siguiente código para dibujar un icono del color adecuado usando la API de Canvas.
✅ Aprenderá más sobre la API Canvas en las [lecciones del juego espacial](../../space-game/drawing-to-canvas/README.md).
✅ Aprenderá más sobre la API Canvas en las [lecciones del juego espacial](../../../6-space-game/2-drawing-to-canvas/translations/README.es.md).
Ahora, reconstruya su extensión (`npm run build`), actualice y ejecute su extensión, y observe el cambio de color. ¿Es un buen momento para hacer un mandado o lavar los platos? ¡Ahora lo sabes!

@ -133,7 +133,7 @@ function drawIcon(value) {
```
Dalam kod ini, anda menambahkan pendengar untuk sebarang mesej yang datang ke pengurus tugas backend. Sekiranya disebut 'updateIcon', maka kod seterusnya dijalankan, untuk menggambar ikon warna yang tepat menggunakan Canvas API.
✅ Anda akan mengetahui lebih lanjut mengenai Canvas API dalam [pelajaran Space Game](../../space-game/drawing-to-canvas/README.md).
✅ Anda akan mengetahui lebih lanjut mengenai Canvas API dalam [pelajaran Space Game](../../../6-space-game/2-drawing-to-canvas/translations/README.ms.md).
Sekarang, buat semula pelanjutan anda (`npm run build`), muat semula dan lancarkan peluasan anda, dan perhatikan perubahan warnanya. Adakah masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!

@ -132,7 +132,7 @@ function drawIcon(value) {
```
在此程式中,你建立了事件監聽者給任何前到背景工作管理者的訊息。若 'updateIcon' 被呼叫,則接下來的程式會被執行,利用 Canvas API 繪製出對應顏色的圖示。
✅ 你會學習更多關於 Canvas API 在往後的[太空遊戲課程](../../6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md)。
✅ 你會學習更多關於 Canvas API 在往後的[太空遊戲課程](../../../6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md)。
現在,重新建制你的擴充功能(`npm run build`),刷新並運行你的套件,觀察圖示的顏色變化。現在是時候去跑腿或是洗碗嗎?現在你知道了!

@ -8,9 +8,9 @@
### विषय
1. [ब्राउज़र के बारे में](../1-about-browsers/README.md)
2. [फॉर्म्स और लोकल स्टोरेज](../2-forms-browsers-local-storage/README.md)
3. [पृष्ठभूमि के कार्य और प्रदर्शन](../3-background-tasks-and-performance/README.md)
1. [ब्राउज़र के बारे में](../1-about-browsers/README.hi.md)
2. [फॉर्म्स और लोकल स्टोरेज](../2-forms-browsers-local-storage/README.hi.md)
3. [पृष्ठभूमि के कार्य और प्रदर्शन](../3-background-tasks-and-performance/README.hi.md)
### क्रेडिट

@ -0,0 +1,27 @@
# 构建浏览器插件
构建浏览器插件是一种有趣的方式,可以在构建不同类型的网络资产的同时思考你的应用程序的性能。本模块包括关于浏览器如何工作和如何部署浏览器扩展的课程,如何建立一个表单、调用 API 和使用 local storage (本地存储),以及如何衡量网站的性能并加以改进。
你将建立一个能在 Edge、Chrome 和 Firefox 上运行的浏览器插件。这个插件就像一个为非常具体的任务量身定做的迷你网站:利用 [C02 Signal API](https://www.co2signal.com) 检查地区的电力使用情况和碳排放浓度,回传地区的碳足迹。
一旦 API 密钥和地区代码被输入到一个表格中,用户就可以临时调用这个扩展,以确定当地的用电情况,从而提供可以影响用户的用电决定的数据。例如,在你所在地区的高用电量期间,推迟运行干衣机(一种碳密集型活动)可能是更好的选择。
### 主题
1. [关于浏览器](../1-about-browsers/translations/README.zh-tw.md)
2. [表单和 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md)
3. [背景工作与效能](../3-background-tasks-and-performance/translations/README.zh-tw.md)
### 成就
![一个绿色浏览器插件](../extension-screenshot.png)
## 贡献者
网页碳排放追踪的想法由 Asim Hussain微软绿色云计算倡导团队的负责人和 [Green Principles](https://principles.green/) 的作者。这源自于一个[网页项目](https://github.com/jlooper/green)。
浏览器插件的结构受到 [Adebola Adeniran 的 COVID 插件](https://github.com/onedebos/covtension)的启发
「点」 图标系统背后的概念是由加州排放的 [Energy Lollipop](https://energylollipop.com/) 浏览器插件的图标结构提出的。
这些课程由 [Jen Looper](https://www.twitter.com/jenlooper) 用满满的 ♥️ 來编写。

@ -2,7 +2,7 @@
अधिक उन्नत जावास्क्रिप्ट बुनियादी बातों को सिखाने के लिए एक अंतरिक्ष खेल
इस पाठ में आप सीखेंगे कि कैसे अपना खुद का स्पेस गेम बनाएं। यदि आपने कभी "स्पेस इंवेडर्स" गेम खेला है, तो इस गेम का एक ही विचार है: एक अंतरिक्ष यान को चलाने और ऊपर से नीचे आने वाले राक्षसों पर आग लगाने के लिए। यहाँ समाप्त खेल कैसा दिखेगा
इस पाठ में, आप सीखेंगे कि अपना खुद का अंतरिक्ष खेल कैसे बनाया जाता है। यदि आपने कभी "अंतरिक्ष आक्रमणकारियों" खेल खेला है, तो खेल में केवल एक ही विचार है: एक अंतरिक्ष यान को चलाने के लिए और ऊपर से नीचे आने वाले राक्षसों को आग लगाना। यहाँ देखिए यह खेल समाप्त होने पे कैसा दिखेगा
![खत्म हुआ खेल](../images/pewpew.gif)
@ -19,11 +19,11 @@
- सिद्धांतजावास्क्रिप्ट के साथ खेल के निर्माण का परिचय
- [Introduction to building games with JavaScript](1-introduction/README.md)
- अभ्यास
- [कैनवास पर आरेखण](../2-drawing-to-canvas/README.md)
- [स्क्रीन के चारों ओर बढ़ते तत्व](../3-moving-elements-around/README.md)
- [टक्कर की पहचान](../4-collision-detection/README.md)
- [हिसाब रखना](../5-keeping-score/README.md)
- [खेल को समाप्त और पुनः आरंभ करना](../6-end-condition/README.md)
- [कैनवास पर आरेखण](../2-drawing-to-canvas/README.hi.md)
- [स्क्रीन के चारों ओर बढ़ते तत्व](../3-moving-elements-around/README.hi.md)
- [टक्कर की पहचान](../4-collision-detection/README.hi.md)
- [हिसाब रखना](../5-keeping-score/README.hi.md)
- [खेल को समाप्त और पुनः आरंभ करना](../6-end-condition/README.hi.md)
## आभार सूची

@ -0,0 +1,31 @@
# 构建一款太空游戏
一个空间游戏来教授更高级的 JavaScript 基础知识
在本课中,你将学习如何建立你自己的太空游戏。如果你曾经玩过 "太空侵略者 "这个游戏,这个游戏的想法是一样的:驾驶飞船,向从上面下来的怪物开火。下面是完成后的游戏的样子。
![游戏成品](../images/pewpew.gif)
在这六节课中,你将学习以下内容。
- **是用** Canvas 元素在屏幕上绘制东西
- **了解**笛卡尔坐标系
- **学习** Pub-Sub 模式,创建更容易维护和扩展的健全的游戏架构
- **利用** Async/Await 来加载游戏资源
- **处理**键盘事件
## 总览
- 理论
- [利用 JavaScript 设计游戏](../1-introduction/translations/README.zh-tw.md)
- 实践
- [在画布上绘制](../2-drawing-to-canvas/translations/README.zh-tw.md)
- [移移动画面上的物件](../3-moving-elements-around/translations/README.zh-tw.md)
- [碰撞侦测](../4-collision-detection/translations/README.zh-tw.md)
- [持续得分](../5-keeping-score/translations/README.zh-tw.md)
- [结束与重新游戏](../6-end-condition/translations/README.zh-tw.md)
## 贡献者
游戏资源来自于 https://www.kenney.nl/。
如果你喜欢建造游戏,这里有一些好东西,很多是免费的,也有些是付费的。

@ -41,7 +41,7 @@ If you want to create multiples screens for a web page, one solution would be to
- You have to reload the entire HTML when switching screen, which can be slow.
- It's difficult to share data between the different screens.
Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
### Task
@ -107,9 +107,9 @@ If you try your current HTML file in a browser, you'll see that it get stuck dis
Instantiating a template is usually done in 3 steps:
1. Retrieve the template element in the DOM, for example using [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
2. Clone the template element, using [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
3. Attach it to the DOM under a visible element, for example using [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
1. Retrieve the template element in the DOM, for example using [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
2. Clone the template element, using [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode).
3. Attach it to the DOM under a visible element, for example using [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild).
✅ Why do we need to clone the template before attaching it to the DOM? What do you think would happen if we skipped this step?
@ -174,7 +174,7 @@ const routes = {
};
```
Now let's modify a bit the `updateRoute` function. Instead of passing directly the `templateId` as an argument, we want to retrieve it by first looking at the current URL, and then use our map to get the corresponding template ID value. We can use [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) to get only the path section from the URL.
Now let's modify a bit the `updateRoute` function. Instead of passing directly the `templateId` as an argument, we want to retrieve it by first looking at the current URL, and then use our map to get the corresponding template ID value. We can use [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) to get only the path section from the URL.
```js
function updateRoute() {
@ -202,9 +202,9 @@ The next step for our app is to add the possibility to navigate between pages wi
We already took care of the second part with the `updateRoute` function, so we have to figure out how to update the current URL.
We'll have to use JavaScript and more specifically the [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) that allows to update the URL and create a new entry in the browsing history, without reloading the HTML.
We'll have to use JavaScript and more specifically the [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) that allows to update the URL and create a new entry in the browsing history, without reloading the HTML.
> Note: While the HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) can be used on its own to create hyperlinks to different URLs, it will make the browser reload the HTML by default. It is necessary to prevent this behavior when handling routing with custom javascript, using the preventDefault() function on the click event.
> Note: While the HTML anchor element [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) can be used on its own to create hyperlinks to different URLs, it will make the browser reload the HTML by default. It is necessary to prevent this behavior when handling routing with custom javascript, using the preventDefault() function on the click event.
### Task
@ -212,7 +212,7 @@ Let's create a new function we can use to navigate in our app:
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```
@ -252,7 +252,7 @@ Let's complete the navigation system by adding bindings to our *Login* and *Logo
<a href="/login" onclick="onLinkClick()">Logout</a>
```
Using the [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute bind the `click` event to JavaScript code, here the call to the `navigate()` function.
Using the [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) attribute bind the `click` event to JavaScript code, here the call to the `navigate()` function.
Try clicking on these links, you should be now able to navigate between the different screens of your app.
@ -266,7 +266,7 @@ Using the `history.pushState` creates new entries in the browser's navigation hi
If you try clicking on the back button a few times, you'll see that the current URL changes and the history is updated, but the same template keeps being displayed.
That's because don't know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
That's because the application does not know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
### Task
@ -277,13 +277,13 @@ window.onpopstate = () => updateRoute();
updateRoute();
```
> Note: we used an [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) here to declare our `popstate` event handler for conciseness, but a regular function would work the same.
> Note: we used an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) here to declare our `popstate` event handler for conciseness, but a regular function would work the same.
Here's a refresher video on arrow functions:
[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
> Click the image above for a video about arrow functions.
> 🎥 Click the image above for a video about arrow functions.
Now try to use the back and forward buttons of your browsers, and check that the displayed route is correctly updated this time.
@ -299,7 +299,7 @@ Add a new template and route for a third page that shows the credits for this ap
## Review & Self Study
Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) handles routing. Can you explain why some of the decisions described on that document are necessary?
Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) handles routing. Can you explain why some of the decisions described on that document are necessary?
## Assignment

@ -210,7 +210,7 @@ Creemos una nueva función que podamos usar para navegar en nuestra aplicación:
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```

@ -211,7 +211,7 @@ function updateRoute() {
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```
@ -245,9 +245,9 @@ function onLinkClick(event) {
HTML में हमारे *लॉगिन* और *लॉगआउट* लिंक से बाइंडिंग जोड़कर नेविगेशन सिस्टम को पूरा करें।
```html
<a href="/dashboard" onclick="onLinkClick()">Login</a>
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick()">Logout</a>
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
[`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) विशेषता का उपयोग करके जावास्क्रिप्ट कोड पर `click` ईवेंट को बांधें, यहाँ `navigate()` फ़ंक्शन पर कॉल करें।

@ -212,7 +212,7 @@ Si crea una nuova funzione da utilizzare per navigare nell'app:
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```
@ -247,9 +247,9 @@ function onLinkClick(event) {
Si completa il sistema di navigazione aggiungendo collegamenti ai link di accesso (*Login*) e di disconnessione (*Logout*) nell'HTML.
```html
<a href="/dashboard" onclick="onLinkClick()">Login</a>
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick()">Logout</a>
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
Utilizzando l 'attributo [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) associare l'evento `click` al codice JavaScript, in questo caso la chiamata alla funzione `navigate()` .

@ -212,7 +212,7 @@ JavaScript、特に [`history.pushState`](https://developer.mozilla.org/ja/docs/
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```
@ -247,9 +247,9 @@ function onLinkClick(event) {
HTML の *Login**Logout* リンクにバインディングを追加してナビゲーションシステムを完成させましょう。
```html
<a href="/dashboard" onclick="onLinkClick()">Login</a>
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick()">Logout</a>
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
[`onclick`](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick) 属性を使用して、`click` イベントを JavaScript コードにバインドし、ここでは `navigate()` 関数の呼び出しを行います。

@ -212,7 +212,7 @@ HTML 앵커 요소 [`<a>`](https://developer.mozilla.org/docs/Web/HTML/Element/a
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```

@ -212,7 +212,7 @@ Mari buat fungsi baru yang dapat kita gunakan untuk menavigasi di aplikasi kita:
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```
@ -247,9 +247,9 @@ function onLinkClick(event) {
Mari lengkapkan sistem navigasi dengan menambahkan pengikatan pada pautan *Login* dan *Logout* kami dalam HTML.
```html
<a href="/dashboard" onclick="onLinkClick()">Login</a>
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick()">Logout</a>
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
Menggunakan atribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) mengikat peristiwa`klik` ke kod JavaScript, di sini panggilan ke `navigasi() `fungsi.
@ -303,4 +303,4 @@ Perutean adalah salah satu bahagian pengembangan web yang sangat mengejutkan, te
## Tugasan
[Tingkatkan penghalaan](assignment.ms.md)
[Tingkatkan penghalaan](assignment.ms.md)

@ -213,7 +213,7 @@ function updateRoute() {
```js
function navigate(path) {
window.history.pushState({}, path, window.location.origin + path);
window.history.pushState({}, path, path);
updateRoute();
}
```
@ -248,9 +248,9 @@ function onLinkClick(event) {
現在我們完成應用程式的網頁訪問系統,在 HTML 檔的 *Login**Logout* 連結加入此函式。
```html
<a href="/dashboard" onclick="onLinkClick()">Login</a>
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick()">Logout</a>
<a href="/login" onclick="onLinkClick(event)">Logout</a>
```
使用 [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) 屬性會將 `click` 事件連接到 JavaScript 程式碼中,這邊會再呼叫函式 `navigate()`

@ -181,7 +181,7 @@ Here's a quick video about `async/await` usage:
[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
> Click the image above for a video about async/await.
> 🎥 Click the image above for a video about async/await.
We use the `fetch()` API to send JSON data to the server. This method takes 2 parameters:

@ -659,9 +659,9 @@
}
},
"glob-parent": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
@ -818,9 +818,9 @@
}
},
"lodash": {
"version": "4.17.19",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"media-typer": {

@ -0,0 +1,15 @@
# 은행 앱
> 은행 앱 프로젝트의 예시 답안입니다. 바닐라 HTML5, CSS 그리고 JavaScript를 이용해 구현하였습니다(어떠한 프레임워크나 라이브러리도 사용되지 않았습니다).
## 앱을 실행하기
먼저 [API server](../api/README.md)가 동작하고 있는지 확인해주세요.
Any web server can be used to run the app, but since you should have [Node.js](https://nodejs.org) installed anyway to run the API, you can:
어느 웹서버나 이 앱을 사용할 수 있으나, 아직까지는 이 API를 실행하기 위해서는 [Node.js](https://nodejs.org)를 설치해야 합니다. 아래의 방법으로 실행하세요:
1. 이 저장소를 Git clone 합니다.
2. 터미널을 열고, `npx lite-server solution`을 입력해 실행합니다. 이 명령은 `3000`번 포트에 개발 웹 서버를 시작하게 합니다.
3. 브라우저에서 `http://localhost:3000` 입력해 앱을 실행합니다.

@ -7,10 +7,10 @@
## पाठ
1. [HTML टेम्पलेट्स और वेब ऐप में रूट](../1-template-route/README.md)
2. [एक लॉगिन और पंजीकरण फॉर्म बनाएँ](../2-forms/README.md)
3. [डेटा लाने और उपयोग करने के तरीके](../3-data/README.md)
4. [राज्य प्रबंधन की अवधारणाएँ](../4-state-management/README.md)
1. [HTML टेम्पलेट्स और वेब ऐप में रूट](../1-template-route/README.hi.md)
2. [एक लॉगिन और पंजीकरण फॉर्म बनाएँ](../2-forms/README.hi.md)
3. [डेटा लाने और उपयोग करने के तरीके](../3-data/README.hi.md)
4. [राज्य प्रबंधन की अवधारणाएँ](../4-state-management/README.hi.md)
### आभार सूची

@ -0,0 +1,21 @@
# $: 建立銀行
在这个项目中,你将学习如何建立一个虚构的银行。这些课程包括指导如何布局网络应用和提供路由,构建表单,管理状态,以及从一个 API 中获取银行的数据。
| ![屏幕1](../images/screen1.png) | ![屏幕2](../images/screen2.png) |
| ------------------------------- | ------------------------------- |
## 课程
1. [HTML 模版与网页路由](../1-template-route/translations/README.md)
2. [建立登陆与注册表单](../2-forms/translations/README.md)
3. [取得并使用资料](../3-data/translations/README.md)
4. [状态管理的概念](../4-state-management/translations/README.md)
### 贡献者
这些课程是由 [Yohan Lasorsa](https://twitter.com/sinedied) 用满满的 ♥️ 來编写。
如果你有兴趣建立本课程使用的 [服务器 API](../api/translations/README.zh-tw.md),你可以遵循[这一系列的视频](https://aka.ms/NodeBeginner),特别是视频 17 到 21。
你也可以访问[这款互动式教学网站](https://aka.ms/learn/express-api)。

@ -0,0 +1,115 @@
[![License Github](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![Les contributeurs](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![Issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![PRs](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![Vous pouvez contribuer !](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![Forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![Stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
# Développement Web pour débutants - Programme
Azure Cloud Advocates de Microsoft sont heureux de vous offrir un cours de 24 leçons portant sur les bases du HTML, CSS et Javascript.
Chaque leçon comporte des instructions, des projets et des quizs.
Grâce à la pédagogie basée sur la pratique, vous pouvez apprendre tout en créant des interfaces.
Ce qui représente une méthode qui consiste à acquérir des compétances et s'en rappelant !.
**Un très grand merci à Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, et Tomomi Imura!**
# Pour commencer
> **Instituteurs**, on vous a préparé des [suggestions](for-teachers.md). On attend votre retour sur ce cours au [forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Elèves**, pour en bénéficier de ce cours le plus grand possible. Effectuer un Fork et compléter les exercices, réaliser les quizs!
N'oubliez pas de créer les projets posant sur ce que vous venez d'apprendre puis comparez-les avec les éléments de réponse.
Vous pouvez travailler en groupe, ce qui représente un bon moyen d'apprentissage.
Vous trouverez autres sujets complétants ce cours sur [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa).
[![Bande-annonce du cours](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Bande-annonce du cours")
> 🎥 Cliquez sur l'image pour visualiser une vidéo à propos des créateurs de ce cours !
## Pedagogie
On a choisi deux pédagogies pour créer ce cours.
En premier lieu, on a veillé à ce qu'il soit basé sur un projet et en réalité, vous auriez à la fin de ce cours codé un jeu de typing, une extension web, une application bancaire et d'autres intéressants projets.
En dernier lieu, on a mis à votre disposition des quizs pour vous évaluez vous-même.
Et à la fin, vous auriez appris beaucoup de choses à propos du HTML, CSS et Javascript. Et vous voilà, un développeur web 🎓 !
> En 12 semaines, vous pourrez réaliser cet exploit (de devenir un développeur web 🎓)
> 🎓 Vous pouvez découvrir les premières leçons en tant que [Learn Path Programme](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) de Microsoft Learn!
Pour s'assurer du bon contenu fourni, on a mis à votre disposition un pack de bases du Javascript contenant une introduction complète à ce langage de programmation [accessible ici](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa).
Il s'agit d'une collection de vidéos faites par les créateurs de ce cours.
En plus, les quizs disponibles sont des quizs qui évaluent les compétences acquises de la leçon précédente et d'autres qui évaluent les compétences acquises dans la leçon actuelle.
On rappelle que ce cours comporte le HTML, CSS et le Javascript. Donc, on n'a pas traité les Frameworks Javascript comme le React.
Mais voici une série de vidéos éducatives à suivre après avoir complété ce cours, elle traite le Node.js en tant qu'un Framework Javascript.
Accessible [ici](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)
> Lisez [le Code of Conduct](CODE_OF_CONDUCT.md), [le guide pour contribuer](CONTRIBUTING.md), et [le guide de la traduction du cours](TRANSLATIONS.md).
Vos retours sont vivement acceptés.
>
## Chaque leçon comporte :
- Un sketchnote
- Une vidéo supplémentaire
- Quiz des dernières compétences acquises
- Les traces écrites
- Un challenge
- Une explication **très détaillée** pour réussir le challenge
- Ressources
- Des exercices
- Quiz sur ce que l'élève a appris
> **Les quizs**: Les quizs sont disponibles [ici](https://nice-beach-0fe9e9d0f.azurestaticapps.net/), un total de 48 quizs avec 3 questions chacun.
Ils sont accessible via le dossier `quiz-app`.
## Lessons
| | Nom du projet | Compétences à acquérir | Objectifs | Leçon | Auteur |
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Pour commencer | Introduction à la programmation | Savoir les bases de quelques langages de programmation et leur utilité dans la création de solutions informatiques | [Introduction à la programmation](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pour commencer | Les bases de Github et le travail au groupe | Apprendre comment utiliser GitHub et contribuer à des projets | [Introduction aux bases de GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité au Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu de l'espace](/6-space-game/solution) | Développement avancé d'un jeu en Javascript | Savoir les bases de l'**Inheritance** avec les **Classes and Composition et les Pub/Sub pattern**, afin de créer un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu de l'espace](/6-space-game/solution) | Les Canvas | Savoir à propos du Canvas API, utilisé pour dessiner des éléments | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu de l'espace](/6-space-game/solution) | Déplacer les éléments | En utilisant les données cartésiennes et le Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu de l'espace](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu de l'espace](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu de l'espace](/6-space-game/solution) | Commencer et finir un jeu | Savoir manipuler les variables, démarrer un jeu et mettre fin. | [Fin Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](/7-bank-project/solution) | HTML Templates et Routes dans une application web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](/7-bank-project/solution) | Créer un formulaire de connexion | Apprendre le fonctionnement d'un formulaire et la vérification des données saisies | [Formulaires](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](/7-bank-project/solution) | Fetch et utilisation des données | Savoir comment une application manipule les données | [Données](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](/7-bank-project/solution) | Concepts de la gestion des states | En savoir comment une application gère les states | [Gestion des states](/7-bank-project/4-state-management/README.md) | Yohan |
## Accéder au cours hors connexion
Vous pouvez y accéder en utilisant [Docsify](https://docsify.js.org/#/). Effectuez un Fork, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine, et tapez `docsify serve` dans le dossier root. Le site web va apparaître dans votre navigateur au port 3000 du localhost `localhost:3000`.
## PDF
Ce cours est disponible en PDF. [Cliquez ici](pdf/readme.pdf)
## Autres Cours
Découvrez d'autres cours :
- [Machine Learning pour débutants](https://aka.ms/ml-beginners)
- [IoT pour débutants](https://aka.ms/iot-beginners)

@ -1,7 +1,7 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
@ -15,13 +15,15 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson cur
**Hearty thanks to our authors Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md). We'd love your feedback [via this form](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u)!
# Getting Started
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. We'd love your feedback [in our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
[![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
> Click the image above for a video about the project and the folks who created it!
> 🎥 Click the image above for a video about the project and the folks who created it!
## Pedagogy
@ -54,34 +56,44 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
## Lessons
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
## Offline access
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
## PDF
A PDF of all of the lessons can be found [here](pdf/readme.pdf)
## Other Curricula
Our team produces other curricula! Check out:
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)

@ -0,0 +1,37 @@
- Introduction
- [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
- [2](../1-getting-started-lessons/2-github-basics/README.md)
- [3](../1-getting-started-lessons/3-accessibility/README.md)
- JS Basics
- [4](../2-js-basics/1-data-types/README.md)
- [5](../2-js-basics/2-functions-methods/README.md)
- [6](../2-js-basics/3-making-decisions/README.md)
- [7](../2-js-basics/4-arrays-loops/README.md)
- HTML, CSS, JS
- [8](../3-terrarium/1-intro-to-html/README.md)
- [9](../3-terrarium/2-intro-to-css/README.md)
- [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
- Typing game
- [11](../4-typing-game/typing-game/README.md)
- Browser Extension
- [12](../5-browser-extension/1-about-browsers/README.md)
- [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
- [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
- Space Game
- [15](../6-space-game/1-introduction/README.md)
- [16](../6-space-game/2-drawing-to-canvas/README.md)
- [17](../6-space-game/3-moving-elements-around/README.md)
- [18](../6-space-game/4-collision-detection/README.md)
- [19](../6-space-game/5-keeping-score/README.md)
- [20](../6-space-game/6-end-condition/README.md)
- Bank Project
- [21](../7-bank-project/1-template-route/README.md)
- [22](../7-bank-project/2-forms/README.md)
- [23](../7-bank-project/3-data/README.md)
- [24](../7-bank-project/4-state-management/README.md)

@ -0,0 +1,9 @@
module.exports = {
contents: ['docs/_sidebar.md'], // array of "table of contents" files path
pathToPublic: 'pdf/readme.pdf', // path where pdf will stored
pdfOptions: {
margin: { top: '100px', bottom: '100px' }
}, // reference: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions
removeTemp: true, // remove generated .md and .html or not
emulateMedia: 'print', // mediaType, emulating by puppeteer for rendering pdf, 'print' by default (reference: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulatemediamediatype)
};

@ -12,6 +12,12 @@ These [full instructions](https://github.blog/2020-03-18-set-up-your-digital-cla
This curriculum works well in these Learning Management Systems! Use the [Moodle upload file](/teaching-files/webdev-moodle.mbz) for the full content, or try the [Common Cartridge file](/teaching-files/webdev-common-cartridge.imscc) which contains some of the content. Moodle Cloud does not support full Common Cartridge exports, so it is preferable to use the Moodle download file which can be uploaded into Canvas. Please let us know how we can improve this experience.
![Moodle](/teaching-files/moodle.png)
> The curriculum in a Moodle classroom
![Canvas](/teaching-files/canvas.png)
> The curriculum in Canvas
## Using the repo as is
If you would like to use this repo as it currently stands, without using GitHub Classroom, that can be done as well. You would need to communicate with your students which lesson to work through together.

2251
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,28 @@
{
"name": "ml-for-beginners",
"version": "1.0.0",
"description": "Web Dev for Beginners - A Curriculum",
"main": "index.js",
"scripts": {
"convert": "node_modules/.bin/docsify-to-pdf"
},
"repository": {
"type": "git",
"url": "git+https://github.com/microsoft/Web-Dev-For-Beginners.git"
},
"keywords": [
"web",
"dev",
"development",
"curriculum"
],
"author": "Jen Looper and team",
"license": "MIT",
"bugs": {
"url": "https://github.com/microsoft/Web-Dev-For-Beginners/issues"
},
"homepage": "https://github.com/microsoft/Web-Dev-For-Beginners#readme",
"devDependencies": {
"docsify-to-pdf": "0.0.5"
}
}

Binary file not shown.

@ -1087,16 +1087,6 @@
"postcss": "^7.0.0"
}
},
"@kazupon/vue-i18n-loader": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.5.0.tgz",
"integrity": "sha512-Tp2mXKemf9/RBhI9CW14JjR9oKjL2KH7tV6S0eKEjIBuQBAOFNuPJu3ouacmz9hgoXbNp+nusw3MVQmxZWFR9g==",
"dev": true,
"requires": {
"js-yaml": "^3.13.1",
"json5": "^2.1.1"
}
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -10954,9 +10944,9 @@
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"version": "npm:vue-loader@16.3.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.0.tgz",
"integrity": "sha512-UDgni/tUVSdwHuQo+vuBmEgamWx88SuSlEb5fgdvHrlJSPB9qMBRF6W7bfPWSqDns425Gt1wxAUif+f+h/rWjg==",
"dev": true,
"optional": true,
"requires": {
@ -10976,9 +10966,9 @@
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save