- Useful software and tooling for the professional developer
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon)!
## What is Programming?
@ -111,10 +111,10 @@ Developers rely on editors for a few additional reasons:
#### Popular Editors and Web Development Extensions
- [Visual Studio Code](https://code.visualstudio.com/)
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
@ -176,7 +176,7 @@ When a developer wants to learn something new, they'll most likely turn to docum
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, the publishers of the [Firefox](https://www.mozilla.org/firefox/) browser
- [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)
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers?WT.mc_id=academic-77807-sagibbon), for [Microsoft Edge](https://www.microsoft.com/edge/?WT.mc_id=academic-77807-sagibbon)
✅ 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.
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
@ -17,7 +17,7 @@ Sa araling ito, tatalakayin natin:
- Mga pangunahing elemento ng isang programa
- Kapaki-pakinabang na software at tooling para sa propesyonal na developer
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon)!
## Ano ang Programming?
@ -128,7 +128,7 @@ Maraming browser ang kasama ng *developer tools* (DevTools) na naglalaman ng isa
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
@ -123,7 +123,7 @@ Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le
De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations.
#### Navigateurs et outils de développement populaires
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (ook bekend als CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (ook bekend als CMD) 💻
- व्यावसायिक विकासकर्ताको लागि उपयोगी सफ्टवेयर र उपकरण
> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) मा यो पाठ लिन सक्नुहुन्छ!
> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon) मा यो पाठ लिन सक्नुहुन्छ!
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- Полезный софт и инструментарий для профессионального разработчика
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon)!
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (также известный как CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (также известный как CMD) 💻
- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) பற்றி எடுத்துக் கொள்ளலாம்!
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon) பற்றி எடுத்துக் கொள்ளலாம்!
@ -182,8 +182,8 @@ In your repository, navigate to `Insights > Community` to see how your project c
Here are some things that can improve your GitHub repo:
- **Description**. Did you add a description for your project?
- **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/).
- **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
- **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
- **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon),
- **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
- **License**. Perhaps most importantly, a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-77807-sagibbon)!
## Tools to use
@ -28,7 +28,7 @@ Every web developer should familiarize themselves with a screen reader. As highl
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
### Zoom
@ -40,7 +40,7 @@ Another type of zoom relies on specialized software to magnify one area of the s
Colors on web sites need to be carefully chosen to answer the needs of color-blind users or people who have difficulty seeing low-contrast colors.
✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). What do you learn?
✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). What do you learn?
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)!
> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-77807-sagibbon)!
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/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
Cette leçon couvre les bases de JavaScript, le language qui permet l'interactivité sur le web.
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
@ -12,7 +12,7 @@ When we think about writing code, we always want to ensure our code is readable.
> 🎥 Click the image above for a video about methods and functions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
@ -12,7 +12,7 @@ Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que
> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les méthodes et les fonctions.
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
@ -12,7 +12,7 @@ Making decisions and controlling the order in which your code runs makes your co
> 🎥 Click the image above for a video about making decisions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
## 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.
@ -12,7 +12,7 @@ Prendre des décisions et contrôler l'ordre dans lequel votre code s'exécute r
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur la prise de décisions.
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
## Un bref récapitulatif sur les booléens
Les booléens ne peuvent avoir que deux valeurs : `true` ou `false`. Les booléens aident à prendre des décisions sur les lignes de code à exécuter lorsque certaines conditions sont remplies.
@ -11,7 +11,7 @@ Tomar decisões e controlar a ordem do que é executado no seu código o torna r
> 🎥 Clique na imagem acima para ver um video sobre tomada de decisões
> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/pt-br/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/pt-br/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
@ -14,7 +14,7 @@ This lesson covers the basics of JavaScript, the language that provides interact
> 🎥 Click the images above for videos about arrays and loops.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles.
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
## Les tableaux
Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau.
@ -14,7 +14,7 @@ Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporci
> 🎥 Clique na imagem acima para um vídeo sobre arrays e loops.
> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
## Arrays
Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz.
@ -229,7 +229,7 @@ There are some wild 'older' tags in HTML that are still fun to play with, though
HTML is the 'tried and true' building block system that has helped build the web into what it is today. Learn a little about its history by studying some old and new tags. Can you figure out why some tags were deprecated and some added? What tags might be introduced in the future?
Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
@ -225,7 +225,7 @@ Il existe quelques "vieilles" balises sauvages en HTML avec lesquelles il est en
Le HTML est le système de blocs de construction qui a contribué à faire du Web ce qu'il est aujourd'hui. Apprenez-en un peu plus sur son histoire en étudiant certaines balises anciennes et nouvelles. Pouvez-vous comprendre pourquoi certaines balises ont été supprimées et d'autres ajoutées ? Quelles balises pourraient être introduites à l'avenir ?
Pour en savoir plus sur la création de sites pour le web et les appareils mobiles, consultez le site [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
Pour en savoir plus sur la création de sites pour le web et les appareils mobiles, consultez le site [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
@ -224,7 +224,7 @@ Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocar
L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro?
Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
@ -223,7 +223,7 @@ HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에
HTML은 웹을 오늘 날의 웹으로 구축하는 데 도움이 준 'tried and true' 빌딩 블록 시스템입니다. 오래된 태그와 새로운 태그를 연구하여 그 역사에 대해 조금 배우십시오. 일부는 더 이상 안 쓰고 일부는 새로 만들어진 이유를 알 수 있습니까? 앞으로 어떤 태그가 도입될까요?
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요.
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요.
@ -223,7 +223,7 @@ Existem algumas tags 'mais antigas' selvagens em HTML que ainda são divertidas
HTML é o sistema de blocos de construção 'testado e comprovado' que ajudou a construir a web no que ela é hoje. Aprenda um pouco sobre sua história estudando algumas tags antigas e novas. Você consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Quais tags podem ser introduzidas no futuro?
Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
@ -248,7 +248,7 @@ Aggiungere una lucentezza a forma di bolla nell'area inferiore sinistra del bara
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
@ -26,7 +26,7 @@ You can deploy, or publish your terrarium to the web using Azure Static Web Apps
2. Press this button
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
@ -20,7 +20,7 @@ You can deploy, or publish your terrarium to the web using Azure Static Web Apps
2. Press this button
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
@ -24,4 +24,4 @@ Encuentre más información sobre eventos de punteros en los [documentos del W3C
Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/).
Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
@ -26,7 +26,7 @@ Vous pouvez déployer ou publier votre terrarium sur le Web à l'aide d'Azure St
2. Appuyez sur ce bouton
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Parcourez l'assistant de création de votre application. Assurez-vous de définir la racine de l'application sur `/solution` ou sur la racine de votre base de code. Il n'y a pas d'API dans cette application, alors ne vous inquiétez pas pour en ajouter. Un dossier .github sera créé dans votre référentiel forké qui aidera le service de création d'Azure Static Web Apps à créer et à publier votre application sur une nouvelle URL.
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. अपना ऐप बनाने वाले विज़ार्ड के माध्यम से चलें। सुनिश्चित करें कि आपने ऐप रूट को या तो `../solution` या अपने कोडबेस की जड़ के रूप में सेट किया है. इस ऐप में कोई API नहीं है, इसलिए इसे जोड़ने की चिंता न करें. एक .github फोल्डर आपके फोर्क्ड रेपो में बनाया जाएगा जो Azure Static Web Apps की बिल्ड सर्विस बनाने और आपके ऐप को एक नए URL पर प्रकाशित करने में मदद करेगा।
@ -26,7 +26,7 @@ La grafica è stata disegnata a mano da [Jen Looper](http://jenlooper.com) usand
2. Premere questo pulsante
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Seguire la procedura guidata per creare l'app. Assicurarsi di impostare la radice dell'app su `/solution` o la radice della propria base di codice. Non ci sono API in questa app, quindi non ci si deve preoccupare di aggiungerla. Verrà creata una cartella .github nel repository oggetto di fork del punto 1 che aiuterà il servizio di compilazione di Azure Static Web Apps a creare e pubblicare l'app in un nuovo URL.
@ -26,7 +26,7 @@ Azure Static Web Apps を使ってテラリウムをデプロイしたり、ウ
2. このボタンを押します
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。
@ -26,6 +26,6 @@ Azure Static Web Apps를 사용하여 terrarium을 웹에 배포하거나 게시
2. 버튼을 누릅니다
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. 앱을 만드는 마법사로 안내합니다. 앱 상위를 `/solution` 또는 코드베이스의 상위로 설정했는지 확인하십시오. 이 앱에는 API가 없으므로 추가할 필요가 없습니다. Azure Static Web Apps의 빌드 서비스로 빌드하고 새 URL에 앱을 게시하는 데 도움이 되는 포크 리포지토리에 .github 폴더가 생성됩니다.
@ -26,7 +26,7 @@ U kunt uw terrarium op internet zetten of publiceren met Azure Static Web Apps.
2. druk op deze knop
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Loop door de wizard om uw app te maken. Zorg ervoor dat u de app-root instelt op `/solution` of de root van uw codebase. Er zit geen API in deze app, dus maakt u geen zorgen om die toe te voegen. Er wordt een .github-map gemaakt in uw geforkte repo die Azure Static Web Apps helpt bij het bouwen van services en het publiceren van uw app naar een nieuwe URL.
@ -26,6 +26,6 @@ Você pode implantar ou publicar seu terrario na web usando o Azure Static Web A
2. Pressione este botão
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo ou a raiz de sua base de código como `/ solution`. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório "forkado" que ajudará o serviço de construção de aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.
@ -27,6 +27,6 @@ Você pode fazer o deploy, ou publicar seu terrário na web usando o Azure Stati
2. Pressione esse botão
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo para ser `/solution` ou a raiz(root) de sua base de código. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório bifurcado que ajudará os aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. உங்கள் பயன்பாட்டை உருவாக்கும் வழிகாட்டி வழியாக நடக்கவும். பயன்பாட்டு வேர் `/solution` அல்லது உங்கள் கோட்பேஸின் வேர் என்று நீங்கள் அமைக்கிறீர்கள் என்பதை உறுதிப்படுத்தவும்.இந்த பயன்பாட்டில் ஏபிஐ இல்லை, எனவே அதை சேர்ப்பது பற்றி கவலைப்பட வேண்டாம்.உங்கள் ஃபோர்க் செய்யப்பட்ட ரெப்போவில் ஒரு கீட்ஹப் கோப்புறை உருவாக்கப்படும், இது அஸூர் ஸ்டேடிக் வெப் ஆப்ஸின் சேவையை உருவாக்கவும் உங்கள் பயன்பாட்டை ஒரு புதிய யுஆர்எல் க்கு வெளியிடவும் உதவும்.
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
@ -98,9 +98,9 @@ Create a new file named **index.html**. Add the following HTML:
### Launch the application
It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) which will both host your application locally and refresh the browser each time you save.
It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) which will both host your application locally and refresh the browser each time you save.
- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install**
- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) by following the link and clicking **Install**
- You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation
- Restart Visual Studio Code if prompted
- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command palette
- the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
- el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta.
- [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
- le [code de démarrage](../../start). Téléchargez le dossier `start`; vous allez compléter le code dans ce dossier.
- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web.
✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
- [स्टार्टर कोड](../start)। `start` फ़ोल्डर डाउनलोड करें; आप इस फ़ोल्डर में कोड पूरा कर लेंगे।
- [एनपीएम](https://www.npmjs.com) -एनपीएम एक पैकेज प्रबंधन उपकरण है; इसे स्थानीय रूप से स्थापित करें और आपके वेब एसेट द्वारा उपयोग के लिए `package.json` फ़ाइल में सूचीबद्ध पैकेज इंस्टॉल किए जाएंगे
✅ इस [उत्कृष्ट लर्न मॉड्यूल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) में पैकेज प्रबंधन के बारे में अधिक जानें
✅ इस [उत्कृष्ट लर्न मॉड्यूल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) में पैकेज प्रबंधन के बारे में अधिक जानें
- [starter code](../start). `start` 폴더를 다운로드하세요; 이 폴더에서 코드를 완성하게됩니다.
- [NPM](https://www.npmjs.com) - NPM은 패키지 관리 도구입니다. 로컬에 설치하고 `package.json` 파일에 나열된 패키지를 웹 어셋에서 사용하도록 설치합니다.
✅ 이 [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)에서 패키지 관리에 대해 자세히 알아보세요
✅ 이 [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)에서 패키지 관리에 대해 자세히 알아보세요
@ -68,7 +68,7 @@ Você vai construir uma extensão de navegador que exibe a pegada de carbono da
- o [código de inicio](../../start). Faça o download da pasta `start`; você irá completar o código desta pasta.
- [NPM](https://www.npmjs.com) - NPM é uma ferramenta de gerenciamento de pacotes; instale-o localmente e os pacotes listados em seu arquivo package.json serão instalados para uso por seu app da web.
✅ Saiba mais sobre gerenciamento de pacotes neste [excelente módulo de aprendizagem](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
✅ Saiba mais sobre gerenciamento de pacotes neste [excelente módulo de aprendizagem](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
@ -18,11 +18,11 @@ The topic of how to make your web sites blazingly fast on all kinds of devices,
The first thing you need to do to ensure that your site is running efficiently is to gather data about its performance. The first place to do this is in the developer tools of your web browser. In Edge, you can select the "Settings and more" button (the three dots icon on the top right of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows, or `Option` + `Command` + `I` on Mac to open developer tools.
The Performance tab contains a Profiling tool. Open a web site (try, for example, https://www.microsoft.com) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
The Performance tab contains a Profiling tool. Open a web site (try, for example, [https://www.microsoft.com](https://www.microsoft.com?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) on the Performance panel in Edge
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge
> Tip: to get a true reading of your web site's startup time, clear your browser's cache
@ -20,7 +20,7 @@ La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) en el panel Rendimiento en Edge
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-77807-sagibbon) en el panel Rendimiento en Edge
> Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador
@ -22,7 +22,7 @@ L'onglet Performance contient un outil de profilage. Ouvrez un site Web (essayez
✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) à propos du panneau Performances dans Edge
✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-77807-sagibbon) à propos du panneau Performances dans Edge
> Astuce : pour avoir une vraie lecture de l'heure de démarrage de votre site web, videz le cache de votre navigateur
@ -217,7 +217,7 @@ Think about how the pub-sub pattern can enhance a game. Which parts should emit
## Review & Self Study
Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa).
Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon).
@ -211,6 +211,6 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec
## Revisión y autoestudio
Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa).
Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon).
@ -217,7 +217,7 @@ Pensez à la façon dont le modèle pub-sub peut améliorer un jeu. Quelles part
## Révision et étude personnelle
En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa).
En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon).
@ -217,7 +217,7 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세
## 리뷰 & 자기주도 학습
[reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)으로 Pub/Sub에 대해 조금 더 배워봅시다.
[reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon)으로 Pub/Sub에 대해 조금 더 배워봅시다.
@ -301,7 +301,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/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) handles routing. Can you explain why some of the decisions described on that document are necessary?
@ -302,7 +302,7 @@ Ajoutez un nouveau modèle et une route pour une troisième page qui affiche les
## Révision et étude personnelle
Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか？
ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか？
라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요?
라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요?
@ -299,7 +299,7 @@ Tambahkan templat dan laluan baru untuk halaman ketiga yang menunjukkan kredit u
## Mengkaji & Belajar Sendiri
Perutean adalah salah satu bahagian pengembangan web yang sangat mengejutkan, terutama ketika web beralih dari tingkah laku penyegaran halaman ke penyegaran halaman Aplikasi Halaman Tunggal. Baca sedikit mengenai [bagaimana perkhidmatan Aplikasi Web Statik Azure](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) menangani penghalaan . Bolehkah anda menjelaskan mengapa beberapa keputusan yang dijelaskan pada dokumen itu diperlukan?
Perutean adalah salah satu bahagian pengembangan web yang sangat mengejutkan, terutama ketika web beralih dari tingkah laku penyegaran halaman ke penyegaran halaman Aplikasi Halaman Tunggal. Baca sedikit mengenai [bagaimana perkhidmatan Aplikasi Web Statik Azure](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) menangani penghalaan . Bolehkah anda menjelaskan mengapa beberapa keputusan yang dijelaskan pada dokumen itu diperlukan?
First, as `getAccount` is an asynchronous function we need to match it with the `await` keyword to wait for the server result. As with any server request, we also have to deal with error cases. For now we'll only add a log message to display the error, and come back to it later.
Then we have to store the data somewhere so we can later use it to display the dashboard informations. Since the `account` variable does not exist yet, we'll create a global variable for it at the top of our file:
Then we have to store the data somewhere so we can later use it to display the dashboard information. Since the `account` variable does not exist yet, we'll create a global variable for it at the top of our file:
```js
let account = null;
@ -111,7 +111,7 @@ navigate('/dashboard');
✅ Did you know that by default, you can only call server APIs from the *same domain and port* than the web page you are viewing? This is security mechanism enforced by browsers. But wait, our web app is running on `localhost:3000` whereas the server API is running on ` localhost:5000`, why does it work? By using a technique called [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), it is possible to perform cross-origin HTTP requests if the server adds special headers to the response, allowing exceptions for specific domains.
> Learn more about APIs by taking this [lesson](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa)
> Learn more about APIs by taking this [lesson](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-77807-sagibbon)
✅ Saviez-vous que par défaut, vous ne pouvez appeler les API du serveur qu’à partir du *même domaine et port* que la page Web que vous consultez? Il s’agit d’un mécanisme de sécurité appliqué par les navigateurs. Mais attendez, notre application web s’exécute sur 'localhost:3000' alors que l’API du serveur s’exécute sur `localhost:3000`, pourquoi cela fonctionne-t-il? En utilisant une technique appelée [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), il est possible d’effectuer des requêtes HTTP inter-origines si le serveur ajoute des en-têtes spéciaux à la réponse, ce qui permet des exceptions pour des domaines spécifiques.
> En savoir plus sur les API en suivant cette [leçon](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa)
> En savoir plus sur les API en suivant cette [leçon](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-77807-sagibbon)
## Mettre à jour le code HTML pour afficher les données
✅ क्या आप जानते हैं कि डिफ़ॉल्ट रूप से, आप सर्वर API को केवल उसी वेब पेज से *उसी डोमेन और पोर्ट* से कॉल कर सकते हैं जो आप देख रहे हैं? यह सुरक्षा तंत्र है जो ब्राउज़र द्वारा लागू किया जाता है। लेकिन रुकिए, हमारा वेब ऐप `localhost:3000` पर चल रहा है जबकि सर्वर एपीआई `localhost:5000` पर चल रहा है, यह काम क्यों नहीं करता है? [क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) नामक तकनीक का उपयोग करके, क्रॉस-ऑरिजनल HTTP रिक्वेस्ट करना संभव है अगर सर्वर प्रतिक्रिया के लिए विशेष हेडर जोड़ता है, विशिष्ट डोमेन के लिए अपवाद की अनुमति देता है।
> इसे [पाठ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa) ले कर एपीआई के बारे में और जानें
> इसे [पाठ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-77807-sagibbon) ले कर एपीआई के बारे में और जानें
✅ Tahukah anda bahawa secara lalai, anda hanya dapat memanggil API pelayan dari *domain dan port yang sama* daripada halaman web yang anda lihat? Ini adalah mekanisme keselamatan yang dikuatkuasakan oleh penyemak imbas. Tetapi tunggu, aplikasi web kami berjalan di `localhost: 3000` sedangkan API pelayan berjalan di `localhost: 5000`, mengapa ia berfungsi? Dengan menggunakan teknik yang disebut [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), adalah mungkin untuk melakukan permintaan HTTP bersilang asal jika pelayan menambah tajuk khas untuk respons, yang memungkinkan pengecualian untuk domain tertentu.
> Ketahui lebih lanjut mengenai API dengan mengambil [pelajaran](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa)
> Ketahui lebih lanjut mengenai API dengan mengambil [pelajaran](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-77807-sagibbon)
@ -16,6 +16,6 @@ In this project, you'll learn how to build a fictional bank. These lessons inclu
These lessons were written with :hearts: by [Yohan Lasorsa](https://twitter.com/sinedied).
If you're interested to learn how to build the [server API](/7-bank-project/api/README.md) used in these lessons, you can follow [this series of videos](https://aka.ms/NodeBeginner) (in particular videos 17 through 21).
If you're interested to learn how to build the [server API](/7-bank-project/api/README.md) used in these lessons, you can follow [this series of videos](https://aka.ms/NodeBeginner?WT.mc_id=academic-77807-sagibbon) (in particular videos 17 through 21).
You can also take a look at [this interactive Learn tutorial](https://aka.ms/learn/express-api).
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
Resources:
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
When you submit a pull request, a CLA-bot will automatically determine whether you need
to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the
instructions provided by the bot. You will only need to do this once across all repositories using our CLA. Please also try to tell us why you made that change so that we better understand your request.
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
@ -20,15 +20,15 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson cur
Get started with the following resources:
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) In this page, you will find beginner resources, Student packs and even ways to get a free cert voucher. This is one page you want to bookmark and check from time to time as we switch out content at least monthly.
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) Join a global community of student ambassadors, this could be your way into Microsoft
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-77807-sagibbon) In this page, you will find beginner resources, Student packs and even ways to get a free cert voucher. This is one page you want to bookmark and check from time to time as we switch out content at least monthly.
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-77807-sagibbon) Join a global community of student ambassadors, this could be your way into Microsoft
# 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](https://aka.ms/student-page)**, 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.
> **[Students](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 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-77807-sagibbon) and by watching the videos mentioned below.
@ -40,13 +40,13 @@ Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer.
> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12 week cycle.
While we have purposefully avoided introducing JavaScript frameworks so as to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
While we have purposefully avoided introducing JavaScript frameworks so as to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-77807-sagibbon)".
> Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback!
@ -106,7 +106,7 @@ A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-
Our team produces other curricula! Check out:
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [Machine Learning for Beginners](https://aka.ms/ml-beginners/?WT.mc_id=academic-77807-sagibbon)
- [IoT for Beginners](https://aka.ms/iot-beginners/?WT.mc_id=academic-77807-sagibbon)
- [Data Science for Beginners](https://aka.ms/datascience-beginners/?WT.mc_id=academic-77807-sagibbon)
- [AI for Beginners](https://aka.ms/ai-beginners/?WT.mc_id=academic-77807-sagibbon)
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon), please report it to us as described below.
## Reporting Security Issues
**Please do not report security vulnerabilities through public GitHub issues.**
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon).
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon).
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
@ -28,7 +28,7 @@ Please include the requested information listed below (as much as you can provid
This information will help us triage your report more quickly.
If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) page for more details about our active programs.
## Preferred Languages
@ -36,6 +36,6 @@ We prefer all communications to be in English.
## Policy
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd).
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon).
@ -30,4 +30,4 @@ There are many ways to make this work in an online classroom format. Please let
## Please give us your thoughts!
We want to make this curriculum work for you and your students. Please give us [feedback](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
We want to make this curriculum work for you and your students. Please give us [feedback](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u&WT.mc_id=academic-77807-sagibbon).
> **শিক্ষকরা**, এই পাঠ্যক্রমটি কীভাবে ব্যবহার করা যায় সে সম্পর্কে আমরা [কিছু পরামর্শ অন্তর্ভুক্ত করেছি](for-teachers.md)। আমরা আপনার প্রতিক্রিয়া পছন্দ করব [আমাদের আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **ছাত্ররা**, এই পাঠ্যক্রমটি নিজে ব্যবহার করার জন্য, পুরো রেপোকে কাঁটাচামচ করুন এবং নিজে থেকেই অনুশীলনগুলি সম্পূর্ণ করুন, একটি প্রি-লেকচার কুইজ দিয়ে শুরু করুন, তারপর লেকচারটি পড়ুন এবং বাকি কার্যক্রমগুলি সম্পূর্ণ করুন। সমাধান কোড অনুলিপি করার পরিবর্তে পাঠগুলি বোঝার মাধ্যমে প্রকল্পগুলি তৈরি করার চেষ্টা করুন; তবে কোডটি প্রতিটি প্রকল্প-ভিত্তিক পাঠের /সমাধান ফোল্ডারে উপলব্ধ। আরেকটি ধারণা হবে বন্ধুদের সাথে একটি স্টাডি গ্রুপ গঠন করা এবং একসাথে বিষয়বস্তুর মধ্য দিয়ে যাওয়া। আরও অধ্যয়নের জন্য, আমরা [মাইক্রোসফট শিক্ষা](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) এবং নীচে উল্লিখিত ভিডিওগুলি দেখার পরামর্শ দিই৷
> **ছাত্ররা**, এই পাঠ্যক্রমটি নিজে ব্যবহার করার জন্য, পুরো রেপোকে কাঁটাচামচ করুন এবং নিজে থেকেই অনুশীলনগুলি সম্পূর্ণ করুন, একটি প্রি-লেকচার কুইজ দিয়ে শুরু করুন, তারপর লেকচারটি পড়ুন এবং বাকি কার্যক্রমগুলি সম্পূর্ণ করুন। সমাধান কোড অনুলিপি করার পরিবর্তে পাঠগুলি বোঝার মাধ্যমে প্রকল্পগুলি তৈরি করার চেষ্টা করুন; তবে কোডটি প্রতিটি প্রকল্প-ভিত্তিক পাঠের /সমাধান ফোল্ডারে উপলব্ধ। আরেকটি ধারণা হবে বন্ধুদের সাথে একটি স্টাডি গ্রুপ গঠন করা এবং একসাথে বিষয়বস্তুর মধ্য দিয়ে যাওয়া। আরও অধ্যয়নের জন্য, আমরা [মাইক্রোসফট শিক্ষা](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-77807-sagibbon) এবং নীচে উল্লিখিত ভিডিওগুলি দেখার পরামর্শ দিই৷
এই পাঠ্যক্রমটি তৈরি করার সময় আমরা দুটি শিক্ষাগত নীতি বেছে নিয়েছি: এটি নিশ্চিত করা যে এটি প্রকল্প-ভিত্তিক এবং এতে ঘন ঘন কুইজ অন্তর্ভুক্ত রয়েছে। এই সিরিজের শেষ নাগাদ, শিক্ষার্থীরা একটি টাইপিং গেম, একটি ভার্চুয়াল টেরারিয়াম, একটি 'গ্রিন' ব্রাউজার এক্সটেনশন, একটি 'স্পেস ইনভেডার' টাইপ গেম এবং একটি ব্যবসায়িক-টাইপ ব্যাঙ্কিং অ্যাপ তৈরি করবে এবং জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি শিখবে। , এইছটিএমেল, এবং সিএসেস সহ আজকের ওয়েব ডেভেলপারের আধুনিক টুলচেন।
> 🎓 আপনি মাইক্রোসফট শিক্ষা এ [শিক্ষা পথ](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) হিসেবে এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ নিতে পারেন!
> 🎓 আপনি মাইক্রোসফট শিক্ষা এ [শিক্ষা পথ](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-77807-sagibbon) হিসেবে এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ নিতে পারেন!
বিষয়বস্তুটি প্রকল্পের সাথে সারিবদ্ধ হয়েছে তা নিশ্চিত করার মাধ্যমে, প্রক্রিয়াটিকে শিক্ষার্থীদের জন্য আরও আকর্ষক করে তোলা হয় এবং ধারণার ধারণকে বর্ধিত করা হবে। আমরা ধারণাগুলি প্রবর্তন করার জন্য জাভাস্ক্রিপ্ট বেসিকগুলিতে বেশ কয়েকটি স্টার্টার পাঠও লিখেছি, যা "[বিগিনার্স সিরিজ থেকে: জাভাস্ক্রিপ্ট](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id) থেকে ভিডিওর সাথে যুক্ত করেছি ভিডিও টিউটোরিয়ালের সংগ্রহ, যার কিছু লেখক এই পাঠ্যক্রমটিতে অবদান রেখেছেন।
উপরন্তু, একটি ক্লাসের আগে একটি লো-স্টেক কুইজ একটি বিষয় শেখার প্রতি শিক্ষার্থীর অভিপ্রায় নির্ধারণ করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণ নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হওয়ার জন্য ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট শুরু হয় এবং 12 সপ্তাহের চক্রের শেষে ক্রমবর্ধমান জটিল হয়ে ওঠে।
যদিও আমরা উদ্দেশ্যপ্রণোদিতভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক প্রবর্তন করা এড়িয়ে গেছি যাতে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে ওয়েব ডেভেলপার হিসাবে প্রয়োজনীয় মৌলিক দক্ষতাগুলিতে মনোনিবেশ করা যায়, এই পাঠ্যক্রমটি সম্পূর্ণ করার একটি ভাল পরবর্তী পদক্ষেপটি ভিডিওগুলির আরেকটি সংগ্রহের মাধ্যমে নোড যেএস সম্পর্কে শেখা হবে: "[শিককারী এর জন্য সিরিজ: নোড যেএস](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)"।
যদিও আমরা উদ্দেশ্যপ্রণোদিতভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক প্রবর্তন করা এড়িয়ে গেছি যাতে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে ওয়েব ডেভেলপার হিসাবে প্রয়োজনীয় মৌলিক দক্ষতাগুলিতে মনোনিবেশ করা যায়, এই পাঠ্যক্রমটি সম্পূর্ণ করার একটি ভাল পরবর্তী পদক্ষেপটি ভিডিওগুলির আরেকটি সংগ্রহের মাধ্যমে নোড যেএস সম্পর্কে শেখা হবে: "[শিককারী এর জন্য সিরিজ: নোড যেএস](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-77807-sagibbon)"।
> আমাদের [আচরণবিধি](CODE_OF_CONDUCT.md), [অবদান করা](CONTRIBUTING.md), এবং [অনুবাদ](TRANSLATIONS.md) নির্দেশিকা খুঁজুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়া স্বাগত জানাই!
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.el.md) για το πως να χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών. Θα χαρούμε πολύ τα σχόλια σας στο [φόρουμ συζήτησης](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Μαθητές**, γιανα χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών, κάντε fork ολόκληρο το repo και ολοκληρώστε τις ασκήσεις μόνοι σας, ξεκινώντας με ένα κουίζ πρίν το μάθημα, μετά διαβάζοντας το μάθημα και ολοκληρώνοντας τις υπόλοιπες δραστηριότητες. Προσπαθήστε να κάνετε τις εργασίες κατανώντας τα μαθήματα παρά να αντιγράφετε απλά τον έτοιμο κώδικα με τη λύση. Ωστόσο, ο κώδικας με τη λύση είναι διαθέσιμος στους φακέλους /solutions στο κάθε μάθημα. Μια άλλη ιδέα θα ήταν να δημιουργήσετε μια ομάδα μελέτης με φίλους, και να δείτε το περιεχόμενο των μαθημάτων από κοινού. Για παραιτέρω μελέτη, προτείνουμε το [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) και παρακολουθώντας τα βίντεο που αναφέρονται παρακάτω.
> **Μαθητές**, γιανα χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών, κάντε fork ολόκληρο το repo και ολοκληρώστε τις ασκήσεις μόνοι σας, ξεκινώντας με ένα κουίζ πρίν το μάθημα, μετά διαβάζοντας το μάθημα και ολοκληρώνοντας τις υπόλοιπες δραστηριότητες. Προσπαθήστε να κάνετε τις εργασίες κατανώντας τα μαθήματα παρά να αντιγράφετε απλά τον έτοιμο κώδικα με τη λύση. Ωστόσο, ο κώδικας με τη λύση είναι διαθέσιμος στους φακέλους /solutions στο κάθε μάθημα. Μια άλλη ιδέα θα ήταν να δημιουργήσετε μια ομάδα μελέτης με φίλους, και να δείτε το περιεχόμενο των μαθημάτων από κοινού. Για παραιτέρω μελέτη, προτείνουμε το [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-77807-sagibbon) και παρακολουθώντας τα βίντεο που αναφέρονται παρακάτω.
Επιλέξαμε δύο παιδαγωγικές αρχές κατά τη δημιουργία αυτού του προγράμματος μαθημάτων: διασφαλίσαμε ότι βασίζεται σε εργασίες και ότι περιλαμβάνει συχνά κουίζ. Μέχρι το τέλος των μαθημάτων, οι μαθητές θα έχουν δημιουργήσει ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια «πράσινη» επέκταση προγράμματος περιήγησης, ένα παιχνίδι τύπου «space invaders» και μια τραπεζική εφαρμογή επιχειρηματικού τύπου και θα έχουν μάθει τα βασικά της JavaScript , HTML και CSS μαζί με τα σύγχρονα εργαλεία του σημερινού προγραμματιστή ιστού.
> 🎓 Μπορείτε να κάνετε τα πρώτα μαθήματα αυτού του προγραμμάτος ως [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) στο Microsoft Learn!
> 🎓 Μπορείτε να κάνετε τα πρώτα μαθήματα αυτού του προγραμμάτος ως [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
Διασφαλίζοντας ότι το περιεχόμενο συνδυάζεται με εργασίες, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών αυξάνετε. Γράψαμε επίσης, πολλά αρχικά μαθήματα JavaScript γιανα εισαγάγουμε τις βασικές έννοιες, συνδυαζόμενο με βίντεο από τη "[Σειρά για αρχάριους: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" συλλογή των βιντεο tutorial, μερικοί από τους συγγραφείς των οποίων συνέβαλαν σε αυτό το πρόγραμμα μαθημάτων.
Διασφαλίζοντας ότι το περιεχόμενο συνδυάζεται με εργασίες, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών αυξάνετε. Γράψαμε επίσης, πολλά αρχικά μαθήματα JavaScript γιανα εισαγάγουμε τις βασικές έννοιες, συνδυαζόμενο με βίντεο από τη "[Σειρά για αρχάριους: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-77807-sagibbon)" συλλογή των βιντεο tutorial, μερικοί από τους συγγραφείς των οποίων συνέβαλαν σε αυτό το πρόγραμμα μαθημάτων.
Επιπλέον, ένα κουίζ χαμηλής συμμετοχής πριν από κάθε μάθημα, θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει τη περαιτέρω διατήρηση του. Αυτό το πρόγραμμα μαθημάτων σχεδιάστηκε γιανα είναι ευέλικτο και διασκεδαστικό και μπορεί να γίνει ολόκληρο ή εν μέρει. Οι εργασίες ξεκινούν μικρές και γίνονται όλο και πιο περίπλοκες μέχρι το τέλος του κύκλου των 12 εβδομάδων.
Ενώ έχουμε αποφύγει σκόπιμα την εισαγωγή των JavaScript frameworks, ώστε να επικεντρωθούμε στις βασικές δεξιότητες που απαιτούνται ως προγραμματιστής Ιστού πριν υιοθετήσουμε ένα framework, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος μαθημάτων θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Σειρά για αρχάριους: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
Ενώ έχουμε αποφύγει σκόπιμα την εισαγωγή των JavaScript frameworks, ώστε να επικεντρωθούμε στις βασικές δεξιότητες που απαιτούνται ως προγραμματιστής Ιστού πριν υιοθετήσουμε ένα framework, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος μαθημάτων θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Σειρά για αρχάριους: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-77807-sagibbon)".
> Βρείτε τα [Code of Conduct](../CODE_OF_CONDUCT.md), [Contributing](../CONTRIBUTING.md), και [Translation](../TRANSLATIONS.md) για οδηγίες. Ευπρόσδεκτα όλα τα εποικοδομητικά σχόλιά σας!
Some files were not shown because too many files have changed in this diff
Show More
Sara Gibbons
2 years ago