채팅창에 메시지를 입력해보세요. 응답이 표시될 것입니다 (Codespace에서 실행 중이거나 액세스 토큰을 설정한 경우).
채팅에 메시지를 입력해보세요, 응답을 볼 수 있을 것입니다 (Codespace에서 실행 중이거나 액세스 토큰을 설정한 경우).
## 액세스 토큰 설정 (Codespace에서 실행하지 않는 경우)
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)를 참조하세요.
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) 참조하세요
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역을 사용함으로써 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 양지해 주시기 바랍니다. 본래 문서의 원본 언어가 권위 있는 출처임을 참고하시기 바랍니다. 중요한 정보의 경우, 전문 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
Microsoft Cloud Advocates가 제공하는 12주간의 종합 코스를 통해 웹 개발의 기초를 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 탐구합니다. 퀴즈, 토론, 실습 과제를 통해 학습에 참여하고, 효과적인 프로젝트 기반 학습법으로 기술을 향상시키고 지식을 최적화하세요. 지금 코딩 여정을 시작하세요!
Microsoft Cloud Advocates가 준비한 12주간의 종합 과정으로 웹 개발의 기본을 배우세요. 총 24강의 각 강의에서는 테라리움, 브라우저 확장 기능, 우주 게임 등 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 다룹니다. 퀴즈, 토론 및 실용 과제를 통해 참여하세요. 효과적인 프로젝트 기반 교육법으로 실력을 향상하고 지식 습득을 최적화하세요. 오늘 바로 코딩 여정을 시작하세요!
Azure AI Foundry Discord 커뮤니티에 참여하세요
Azure AI Foundry Discord 커뮤니티에 참여하세요.
[](https://discord.com/invite/ByRwuEEgH4)
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> 이렇게 하면 훨씬 빠른 다운로드로 코스를 완료하는 데 필요한 모든 것이 제공됩니다.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**추가 번역 언어를 지원하고 싶다면 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에 나열된 언어를 확인하세요.**
**추가 번역 언어 지원을 원하시면 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)를 참고하세요**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _학생이신가요?_
[**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하세요. 초보자를 위한 리소스, 학생 팩, 무료 인증서 바우처를 받을 수 있는 방법 등을 찾을 수 있습니다. 이 페이지를 즐겨찾기에 추가하고 매달 새로운 콘텐츠를 확인하세요.
[**학생 허브 페이지**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문하여 초보자용 자료, 학생용 팩, 무료 인증서 바우처를 받을 수 있는 방법 등을 확인하세요. 콘텐츠가 매달 변경되므로 이 페이지를 즐겨찾기에 추가하고 수시로 확인하는 것을 추천합니다.
### 📣 공지 - _생성형 AI를 활용한 새로운 프로젝트_
### 📣 공지 - 새 GitHub Copilot Agent 모드 챌린지 완성하세요!
새로운 AI 어시스턴트 프로젝트가 추가되었습니다. [프로젝트](./09-chat-project/README.md)를 확인해보세요.
새 챌린지가 추가되었습니다. 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 확인하세요. GitHub Copilot과 Agent 모드를 활용하여 완성하는 새 챌린지입니다. Agent 모드를 처음 사용한다면, 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등도 가능하니 꼭 경험해보세요.
### 📣 공지 - _새로운 커리큘럼_ 생성형 AI를 활용한 JavaScript 학습
### 📣 공지 - _생성 AI를 활용한 새 프로젝트_
새로운 생성형 AI 커리큘럼을 놓치지 마세요!
신규 AI 어시스턴트 프로젝트가 추가되었습니다. 프로젝트를 확인하세요 [project](./9-chat-project/README.md)
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)를 방문하여 시작하세요!
### 📣 공지 - _Generative AI for JavaScript_ 새 커리큘럼 공개
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)를 방문하여 시작하세요!
## 🌱 시작하기
> **교사분들**, 이 커리큘럼을 활용하는 방법에 대한 [제안](for-teachers.md)을 포함했습니다. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 피드백을 공유해주세요!
> **교사분들께**, 이 커리큘럼 활용법에 대한 [제안](for-teachers.md)을 포함했습니다. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에서 의견을 들려주세요!
**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 각 레슨에서 사전 강의 퀴즈로 시작하고 강의 자료를 읽으며 다양한 활동을 완료한 후 사후 강의 퀴즈로 이해도를 확인하세요.
**[학습자 여러분](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, 각 강의는 강의 전 퀴즈로 시작해, 강의 자료 읽기, 다양한 활동 수행, 강의 후 퀴즈로 마무리하세요.
학습 경험을 향상시키기 위해 동료들과 함께 프로젝트를 진행하세요! [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 토론을 장려하며, 모더레이터 팀이 질문에 답변해드립니다.
학습 경험을 향상하기 위해 동료들과 소통하며 프로젝트를 함께 진행해보세요! [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서 토론을 권장하며, 모더레이터 팀이 질문에 답변할 준비가 되어 있습니다.
추가 학습을 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)을 탐색하여 추가 학습 자료를 확인하는 것을 강력히 추천합니다.
추가 학습 자료는 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)에서 확인하는 것을 강력히 추천합니다.
### 📋 환경 설정하기
### 📋 개발 환경 설정
이 커리큘럼은 개발 환경이 준비되어 있습니다! 시작할 때 [Codespace](https://github.com/features/codespaces/) (_브라우저 기반, 설치 필요 없음 환경_) 또는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)와 같은 텍스트 편집기를 사용하여 로컬에서 실행할 수 있습니다.
이 커리큘럼은 개발 환경이 이미 준비되어 있습니다! 시작할 때는 [Codespace](https://github.com/features/codespaces/) (브라우저 기반, 설치 불필요 환경)를 사용하거나, 로컬 컴퓨터에서 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 같은 텍스트 편집기를 사용할 수 있습니다.
#### 저장소 생성하기
작업을 쉽게 저장하려면 이 저장소의 복사본을 생성하는 것이 좋습니다. 페이지 상단의 **Use this template** 버튼을 클릭하면 GitHub 계정에 커리큘럼 복사본이 포함된 새 저장소가 생성됩니다.
#### 저장소 생성
다음 단계를 따르세요:
1. **저장소 포크하기**: 페이지 오른쪽 상단의 "Fork" 버튼을 클릭하세요.
작업을 쉽게 저장하려면, 자신의 GitHub 계정에 이 저장소의 복사본을 만드는 것이 좋습니다. 페이지 상단의 **Use this template** 버튼을 클릭하면 커리큘럼 복사본이 새로운 저장소로 생성됩니다.
로컬 컴퓨터에서 커리큘럼을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 레슨인 [프로그래밍 언어 및 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서 각 도구에 대한 다양한 옵션을 안내하며, 자신에게 가장 적합한 것을 선택할 수 있습니다.
로컬에서 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫번째 강의, [프로그래밍 언어 및 도구 소개](../../1-getting-started-lessons/1-intro-to-programming-languages)에서 각 도구의 다양한 옵션을 안내합니다.
추천하는 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)이며, 내장된 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 포함되어 있습니다. [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 Visual Studio Code를 다운로드할 수 있습니다.
권장 편집기는 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)이며, 내장된 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)도 제공합니다. Visual Studio Code는 [여기서](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 다운로드하세요.
1. 저장소를 컴퓨터에 클론하세요. **Code** 버튼을 클릭하고 URL을 복사한 후 다음 명령을 실행하세요:
1. 복사한 저장소를 컴퓨터에 클론하세요. **Code** 버튼을 클릭하고 URL을 복사하면 됩니다:
[CodeSpace](./images/createcodespace.png)
그런 다음 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내의 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고 복사한 URL을 `<your-repository-url>`로 대체하여 다음 명령을 실행하세요:
그런 다음, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내에서 [터미널](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고, 방금 복사한 URL을 `<your-repository-url>`에 대체하여 다음 명령어를 실행합니다:
2. Visual Studio Code에서 폴더를 엽니다. **파일** > **폴더 열기**를 클릭한 후 방금 클론한 폴더를 선택하면 됩니다.
> 추천 Visual Studio Code 확장 프로그램:
> 추천하는 Visual Studio Code 확장 기능:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지를 미리보기
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드를 더 빠르게 작성할 수 있도록 지원
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지 미리보기용
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 코드 작성 속도 향상을 도와줌
## 📂 각 레슨에는 다음이 포함됩니다:
## 📂 각 수업에 포함된 내용:
- 선택 가능한 스케치노트
- 선택 가능한 보충 영상
- 사전 레슨 준비 퀴즈
- 작성된 강의
- 프로젝트 기반 강의, 프로젝트를 구축하는 단계별 가이드
- 선택적 스케치노트
- 선택적 보충 비디오
- 수업 전 워밍업 퀴즈
- 서면 강의
- 프로젝트 기반 수업의 경우 프로젝트 빌드 단계별 가이드
- 지식 점검
- 도전 과제
- 보충 읽기 자료
- 챌린지
- 보충 독서 자료
- 과제
- [수업 후 퀴즈](https://ff-quizzes.netlify.app/web/)
> **퀴즈에 대한 참고 사항**: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 총 48개의 퀴즈가 각 3개의 질문으로 구성되어 있습니다. [여기](https://ff-quizzes.netlify.app/web/)에서 이용할 수 있으며, Quiz 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더의 지침을 따르세요.
> **퀴즈 관련 안내**: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며 총 48개의 퀴즈가 각각 3문항으로 구성되어 있습니다. 이들은 [여기](https://ff-quizzes.netlify.app/web/)에서 이용 가능하며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더 내 지침을 참고하세요.
| 01 | 시작하기 | 프로그래밍 소개 및 개발 도구 | 대부분의 프로그래밍 언어의 기본 원리와 전문 개발자가 사용하는 소프트웨어에 대해 배우기 | [프로그래밍 언어 및 개발 도구 소개](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 시작하기 | GitHub 기본, 팀 작업 포함 | 프로젝트에서 GitHub을 사용하는 방법, 코드 기반에서 다른 사람들과 협업하는 방법 | [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 시작하기 | 접근성 | 웹 접근성의 기본 사항 배우기 | [접근성 기본](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 기본 | JavaScript 데이터 유형 | JavaScript 데이터 유형의 기본 사항 | [데이터 유형](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 기본 | 함수와 메서드 | 애플리케이션의 논리 흐름을 관리하기 위한 함수와 메서드에 대해 배우기 | [함수와 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 기본 | JS로 결정 내리기 | 조건문을 사용하여 코드에서 조건을 생성하는 방법 배우기 | [결정 내리기](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기본 | 배열과 반복문 | JavaScript에서 배열과 반복문을 사용하여 데이터 작업하기 | [배열과 반복문](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [테라리움](./3-terrarium/solution/README.md) | HTML 실습 | 온라인 테라리움을 만들기 위한 HTML 작성, 레이아웃 구축에 중점 | [HTML 소개](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [테라리움](./3-terrarium/solution/README.md) | CSS 실습 | 온라인 테라리움을 스타일링하기 위한 CSS 작성, 반응형 페이지를 포함한 CSS 기본 사항에 중점 | [CSS 소개](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [테라리움](./3-terrarium/solution/README.md) | JavaScript 클로저, DOM 조작 | 테라리움을 드래그/드롭 인터페이스로 작동하게 만드는 JavaScript 작성, 클로저와 DOM 조작에 중점 | [JavaScript 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타이핑 게임](./4-typing-game/solution/README.md) | 타이핑 게임 만들기 | 키보드 이벤트를 사용하여 JavaScript 앱의 로직을 구동하는 방법 배우기 | [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [친환경 브라우저 확장 프로그램](./5-browser-extension/solution/README.md) | 브라우저 작업 | 브라우저가 작동하는 방식, 역사, 브라우저 확장 프로그램의 첫 번째 요소를 스캐폴딩하는 방법 배우기 | [브라우저에 대하여](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [친환경 브라우저 확장 프로그램](./5-browser-extension/solution/README.md) | 폼 작성, API 호출 및 로컬 스토리지에 변수 저장 | 로컬 스토리지에 저장된 변수를 사용하여 API를 호출하는 브라우저 확장 프로그램의 JavaScript 요소 작성 | [API, 폼, 로컬 스토리지](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [친환경 브라우저 확장 프로그램](./5-browser-extension/solution/README.md) | 브라우저의 백그라운드 프로세스, 웹 성능 | 브라우저의 백그라운드 프로세스를 사용하여 확장 프로그램의 아이콘 관리; 웹 성능 및 최적화에 대해 배우기 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [우주 게임](./6-space-game/solution/README.md) | JavaScript를 활용한 고급 게임 개발 | 클래스와 컴포지션 및 Pub/Sub 패턴을 사용한 상속에 대해 배우고 게임 개발 준비 | [고급 게임 개발 소개](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [우주 게임](./6-space-game/solution/README.md) | 캔버스에 그리기 | 화면에 요소를 그리기 위해 Canvas API에 대해 배우기 | [캔버스에 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [우주 게임](./6-space-game/solution/README.md) | 화면에서 요소 이동 | 데카르트 좌표와 Canvas API를 사용하여 요소에 움직임을 부여하는 방법 배우기 | [요소 이동](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [우주 게임](./6-space-game/solution/README.md) | 충돌 감지 | 키 입력을 사용하여 요소가 서로 충돌하고 반응하도록 만들기, 게임 성능을 보장하기 위한 쿨다운 기능 제공 | [충돌 감지](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [우주 게임](./6-space-game/solution/README.md) | 점수 계산 | 게임의 상태와 성능에 따라 수학적 계산 수행 | [점수 계산](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [우주 게임](./6-space-game/solution/README.md) | 게임 종료 및 재시작 | 자산 정리 및 변수 값 재설정을 포함하여 게임을 종료하고 재시작하는 방법 배우기 | [종료 조건](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [뱅킹 앱](./7-bank-project/solution/README.md) | 웹 앱에서 HTML 템플릿 및 라우트 | 라우팅 및 HTML 템플릿을 사용하여 다중 페이지 웹사이트 아키텍처의 스캐폴드 생성 방법 배우기 | [HTML 템플릿 및 라우트](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [뱅킹 앱](./7-bank-project/solution/README.md) | 로그인 및 등록 폼 작성 | 폼 작성 및 유효성 검사 루틴 처리 방법 배우기 | [폼](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [뱅킹 앱](./7-bank-project/solution/README.md) | 데이터 가져오기 및 사용 방법 | 앱에서 데이터가 어떻게 흐르고, 가져오고, 저장되고, 삭제되는지 배우기 | [데이터](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [뱅킹 앱](./7-bank-project/solution/README.md) | 상태 관리 개념 | 앱이 상태를 유지하는 방법과 이를 프로그래밍적으로 관리하는 방법 배우기 | [상태 관리](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [브라우저/VS코드 코드](../../8-code-editor) | VS코드 사용하기 | 코드 편집기 사용법 배우기 | [VS코드 코드 편집기 사용](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 어시스턴트](./9-chat-project/README.md) | AI 작업하기 | 나만의 AI 어시스턴트 만들기 배우기 | [AI 어시스턴트 프로젝트](./9-chat-project/README.md) | Chris |
## 🏫 교육학
우리의 커리큘럼은 두 가지 주요 교육 원칙을 기반으로 설계되었습니다:
| 01 | 시작하기 | 프로그래밍 소개 및 도구 기본 | 대부분 프로그래밍 언어의 기본 원리 및 전문 개발자들이 작업에 사용하는 소프트웨어 이해 | [프로그래밍 언어 및 도구 소개](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | 시작하기 | GitHub 기본, 팀 작업 포함 | 프로젝트에서 GitHub 사용법 및 코드베이스 협업 방법 | [GitHub 소개](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | 시작하기 | 접근성 | 웹 접근성 기본 개념 | [접근성 기본](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS 기본 | 자바스크립트 데이터 유형 | 자바스크립트 데이터 유형의 기본 | [데이터 유형](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS 기본 | 함수 및 메서드 | 애플리케이션 로직 흐름을 관리하는 함수 및 메서드 학습 | [함수 및 메서드](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS 기본 | 자바스크립트 조건문 만들기 | 조건문을 사용하여 코드 내 의사 결정을 만드는 방법 학습 | [조건문 만들기](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS 기본 | 배열 및 반복문 | 자바스크립트에서 배열과 반복문을 사용해 데이터 작업하기 | [배열 및 반복문](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [테라리움](./3-terrarium/solution/README.md) | HTML 실습 | 온라인 테라리움 생성을 위한 HTML 마크업 구성, 레이아웃 구축 중심 | [HTML 소개](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [테라리움](./3-terrarium/solution/README.md) | CSS 실습 | 온라인 테라리움 스타일링 CSS 작성, 기본 CSS와 반응형 웹페이지 만들기 중심 | [CSS 소개](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [테라리움](./3-terrarium/solution/README.md) | 자바스크립트 클로저, DOM 조작 | 드래그 앤 드롭 인터페이스 구현을 위한 자바스크립트 작성, 클로저 및 DOM 조작 중심 | [자바스크립트 클로저, DOM 조작](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [타이핑 게임](./4-typing-game/solution/README.md) | 타이핑 게임 만들기 | 키보드 이벤트를 사용해 자바스크립트 앱의 로직 제어 방법 학습 | [이벤트 기반 프로그래밍](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 작동 원리 | 브라우저 작동원리, 역사, 첫 브라우저 확장 요소 구조 방법 학습 | [브라우저 개요](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | API 호출, 폼 빌드, 로컬 저장소 변수 사용 | API 호출을 위한 브라우저 확장 자바스크립트 요소 작성, 로컬 저장소 변수 활용 | [API, 폼, 로컬 저장소](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [그린 브라우저 확장](./5-browser-extension/solution/README.md) | 브라우저 백그라운드 프로세스 및 웹 성능 | 확장 아이콘 관리를 위한 백그라운드 프로세스 사용법, 웹 성능 및 최적화 학습 | [백그라운드 작업 및 성능](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [우주 게임](./6-space-game/solution/README.md) | 고급 자바스크립트 게임 개발 | 클래스와 컴포지션, 퍼블리시/서브스크라이브(Pub/Sub) 패턴을 통한 상속 개념과 게임 제작 준비 과정 | [고급 게임 개발 소개](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [우주 게임](./6-space-game/solution/README.md) | 캔버스 그리기 | 화면 요소를 그리기 위한 Canvas API 학습 | [캔버스 그리기](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [우주 게임](./6-space-game/solution/README.md) | 화면 상의 요소 움직이기 | 데카르트 좌표계와 Canvas API를 이용하여 요소에 움직임 부여 | [요소 움직이기](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [우주 게임](./6-space-game/solution/README.md) | 충돌 감지 | 키 입력을 이용해 요소 간 충돌 및 반응, 쿨다운 함수로 게임 성능 유지하기 | [충돌 감지](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [우주 게임](./6-space-game/solution/README.md) | 점수 계산 | 게임 상태 및 성능에 기반한 수학 계산 수행 | [점수 계산](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [우주 게임](./6-space-game/solution/README.md) | 게임 종료 및 재시작 | 에셋 정리 및 변수 초기화를 포함한 게임 종료 및 재시작 과정 학습 | [종료 조건](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [뱅킹 앱](./7-bank-project/solution/README.md) | 웹 앱 내 HTML 템플릿 및 라우팅 | 멀티페이지 웹사이트 아키텍처 구조 생성하기 위한 라우팅과 HTML 템플릿 방법 | [HTML 템플릿 및 라우팅](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [뱅킹 앱](./7-bank-project/solution/README.md) | 로그인 및 회원가입 폼 빌드 | 폼 빌드와 검증 루틴 처리 방법 학습 | [폼](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [뱅킹 앱](./7-bank-project/solution/README.md) | 데이터 가져오기 및 사용 방법 | 앱 내 데이터 흐름, 가져오기, 저장, 폐기 방법 학습 | [데이터](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [뱅킹 앱](./7-bank-project/solution/README.md) | 상태 관리 개념 | 앱 상태 유지 및 프로그래밍 방식의 상태 관리 학습 | [상태 관리](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [브라우저/VScode 코드](../../8-code-editor) | VScode 사용법 | 코드 편집기 사용법 학습| [VScode 코드 편집기 사용](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI 어시스턴트](./9-chat-project/README.md) | AI 활용 | 나만의 AI 어시스턴트 만들기 학습 | [AI 어시스턴트 프로젝트](./9-chat-project/README.md) | Chris |
## 🏫 교육 방식
우리 커리큘럼은 두 가지 핵심 교육 원칙을 바탕으로 설계되었습니다:
* 프로젝트 기반 학습
* 빈번한 퀴즈
이 프로그램은 JavaScript, HTML, CSS의 기본 원리와 오늘날 웹 개발자가 사용하는 최신 도구 및 기술을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 프로그램, 우주 침략자 스타일의 게임, 비즈니스를 위한 뱅킹 앱을 구축하며 실습 경험을 쌓을 기회를 갖게 됩니다. 이 시리즈가 끝날 때쯤, 학생들은 웹 개발에 대한 탄탄한 이해를 얻게 될 것입니다.
본 프로그램은 자바스크립트, HTML, CSS의 기초뿐만 아니라 오늘날 웹 개발자들이 사용하는 최신 도구와 기술을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장, 스페이스 인베이더 스타일 게임, 비즈니스용 뱅킹 앱 제작을 통해 실습 경험을 쌓을 수 있습니다. 시리즈가 끝나면 웹 개발에 대한 탄탄한 이해를 갖추게 됩니다.
> 🎓 이 커리큘럼의 첫 몇 가지 강의를 Microsoft Learn에서 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로 수강할 수 있습니다!
> 🎓 이 커리큘럼의 첫 몇 과정을 Microsoft Learn의 [학습 경로](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)로도 수강할 수 있습니다!
콘텐츠가 프로젝트와 일치하도록 보장함으로써, 학생들에게 더 흥미로운 학습 과정을 제공하고 개념의 이해와 기억력을 강화할 수 있습니다. 또한, JavaScript 기본 사항을 소개하는 몇 가지 시작 강의를 작성했으며, "[JavaScript 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 비디오 튜토리얼 컬렉션에서 일부 저자들이 이 커리큘럼에 기여했습니다.
내용을 프로젝트와 연계하여 학생들의 몰입도와 개념 기억력을 높였습니다. 또한, 개념 소개를 위한 자바스크립트 기본 강의와 함께 "[초보자를 위한 자바스크립트 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 영상 튜토리얼 중 일부 저자들이 이 커리큘럼에 기여하였습니다.
또한, 수업 전에 부담 없는 퀴즈를 통해 학생들이 주제 학습에 대한 의도를 설정할 수 있으며, 수업 후 두 번째 퀴즈를 통해 개념을 더 잘 기억할 수 있습니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며, 전체 또는 일부를 수강할 수 있습니다. 프로젝트는 작게 시작하여 12주 과정이 끝날 때까지 점점 더 복잡해집니다.
수업 전 저위험 퀴즈는 학습 주제에 대한 학생 의도를 설정하며, 수업 후 두 번째 퀴즈는 이해도를 높입니다. 이 커리큘럼은 유연하고 재미있도록 설계되었으며 전체 또는 일부만 수강할 수 있습니다. 프로젝트는 작게 시작해 12주 과정 후 점점 복잡해집니다.
우리는 JavaScript 프레임워크를 도입하지 않고 웹 개발자로서 프레임워크를 채택하기 전에 필요한 기본 기술에 집중하도록 의도적으로 설계했으며, 이 커리큘럼을 완료한 후 다음 단계로 Node.js에 대해 배우는 것이 좋습니다. 관련 비디오 컬렉션: "[Node.js 초보자 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
웹 개발자로서 프레임워크 도입 전 필요한 기본기들에 집중하기 위해 자바스크립트 프레임워크 도입은 일부러 배제하였으며, 다음 단계로 "[초보자를 위한 Node.js 시리즈](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" 영상을 통해 Node.js를 학습하는 것을 추천합니다.
> 우리의 [행동 강령](CODE_OF_CONDUCT.md) 및 [기여](CONTRIBUTING.md) 지침을 방문하세요. 여러분의 건설적인 피드백을 환영합니다!
> 우리 [행동 강령](CODE_OF_CONDUCT.md) 및 [기여 지침](CONTRIBUTING.md)을 참조하세요. 건설적인 피드백을 환영합니다!
## 🧭 오프라인 접근
## 🧭 오프라인 액세스
[Docsify](https://docsify.js.org/#/)를 사용하여 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 컴퓨터에 [Docsify 설치](https://docsify.js.org/#/quickstart)를 한 후, 이 저장소의 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트는 로컬호스트 `localhost:3000`의 포트 3000에서 제공됩니다.
이 문서를 오프라인에서 실행하려면 [Docsify](https://docsify.js.org/#/)를 사용하세요. 이 저장소를 포크하고, 로컬 머신에 [Docsify를 설치](https://docsify.js.org/#/quickstart)한 뒤 저장소 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트는 로컬호스트 3000번 포트에서 서비스됩니다: `localhost:3000`.
## 📘 PDF
모든 강의의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 찾을 수 있습니다.
전체 수업 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 찾을 수 있습니다.
## 🎒 다른 강좌
우리 팀은 다른 강좌도 제공합니다! 확인해 보세요:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
## 🎒 다른 강의
---
### 생성 AI 시리즈
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
우리 팀은 다른 강의도 제작합니다! 확인해보세요:
---
### 핵심 학습
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
- [MCP for Beginners](https://aka.ms/mcp-for-beginners)
- [Edge AI for Beginners](https://aka.ms/edgeai-for-beginners)
- [AI Agents for Beginners](https://aka.ms/ai-agents-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [ML for Beginners](https://aka.ms/ml-beginners)
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [초보자를 위한 XR 개발](https://github.com/microsoft/xr-development-for-beginners)
- [GitHub Copilot의 효과적인 활용법 익히기](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [C#/.NET 개발자를 위한 GitHub Copilot 활용법 익히기](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
AI 앱 개발 중 막히거나 궁금한 점이 있으면 MCP에 대해 함께 배우는 동료 학습자와 경험 많은 개발자들과 토론에 참여하세요. 질문이 환영받고 지식이 자유롭게 공유되는 지원 커뮤니티입니다.
[](https://aka.ms/foundry/discord)
[](https://aka.ms/foundry/forum)
이 저장소는 MIT 라이선스에 따라 제공됩니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요.
이 저장소는 MIT 라이선스 하에 있습니다. 자세한 내용은 [LICENSE](../../LICENSE) 파일을 참조하세요.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 신뢰할 수 있는 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 유념해 주시기 바랍니다. 원본 문서는 해당 언어의 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문적인 사람 번역을 권장합니다. 본 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해서는 책임을 지지 않습니다.
आज, आपण आधुनिक वेब डेव्हलपमेंट शक्य होण्यासाठी आणि गंभीरपणे व्यसनाधीन होण्यासाठी अविश्वसनीय टूल्स एक्सप्लोर करणार आहोत. मी ज्या एडिटर्स, ब्राउझर्स आणि वर्कफ्लोजबद्दल बोलतोय, तेच टूल्स Netflix, Spotify आणि तुमच्या आवडत्या इंडी अॅप स्टुडिओचे डेव्हलपर्स दररोज वापरतात. आणि आता तुम्हाला आनंदाने नाचायला लावणारा भाग: या व्यावसायिक-ग्रेड, उद्योग-मानक टूल्सपैकी बहुतेक पूर्णपणे मोफत आहेत!
आपण एकत्रितपणे हा प्रवास करू, एक पाऊल एकावेळी. घाई नाही, दबाव नाही – फक्त तुम्ही, मी आणि काही खरोखर छान साधने जी तुमचे नवीन सर्वोत्तम मित्र बनणार आहेत!
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
# जावास्क्रिप्ट मूलभूत गोष्टी: पद्धती आणि फंक्शन्स
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. HTML ला वेब पृष्ठांचे सांगाडा म्हणून विचार करा – ते सामग्री कुठे जाते, ती कशी आयोजित केली जाते आणि प्रत्येक भाग काय दर्शवतो हे परिभाषित करते. CSS नंतर तुमच्या HTML ला रंग आणि लेआउटसह "सजवेल", आणि JavaScript त्याला परस्परसंवादी बनवेल, HTML ही मूलभूत रचना प्रदान करते ज्यामुळे बाकी सर्व शक्य होते.
@ -88,7 +88,7 @@ HTML कोडमध्ये जाण्यापूर्वी, तुमच
4. Explorer पॅनमध्ये, "New File" आयकॉनवर क्लिक करा
5. तुमच्या फाइलचे नाव `index.html` ठेवा
✅ **प्रयोग वेळ**: `<body>` वर `color`, `line-height`, किंवा `text-align` सारखी इतर वारसाहक्काने मिळणारी गुणधर्म सेट करण्याचा प्रयत्न करा. तुमच्या हेडिंग आणि इतर घटकांवर काय परिणाम होतो?
@ -535,7 +535,7 @@ Agent मोड वापरून खालील आव्हान पूर
तुम्ही काचेच्या पृष्ठभागांवर प्रकाश कसा प्रतिबिंबित होतो हे अनुकरण करणारे सूक्ष्म हायलाइट्स तयार कराल. ही पद्धत रेनासन्स चित्रकार जॅन व्हॅन आयक यांनी काचेच्या पेंटिंगला त्रिमितीय बनवण्यासाठी प्रकाश आणि प्रतिबिंब कसे वापरले यासारखी आहे. तुम्ही यासाठी प्रयत्न कराल:
वेब विकासातील सर्वात आकर्षक पैलूंच्या स्वागतासाठी तयार व्हा - गोष्टी परस्परसंवादी बनवणे! डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) हे तुमच्या HTML आणि जावास्क्रिप्टमधील एक पूल आहे, आणि आज आपण त्याचा उपयोग तुमच्या टेरारियमला जिवंत करण्यासाठी करू. जेव्हा टिम बर्नर्स-लीने पहिला वेब ब्राउझर तयार केला, तेव्हा त्यांनी एक वेब कल्पना केली होती जिथे दस्तऐवज गतिशील आणि परस्परसंवादी असू शकतात - DOM त्या दृष्टिकोनाला शक्य बनवते.
> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) कडून
@ -150,7 +150,7 @@ flowchart LR
> 💡 **क्लोजर्स समजून घेणे**: क्लोजर्स जावास्क्रिप्टमधील एक महत्त्वाचा विषय आहे, आणि अनेक विकसक त्याचा पूर्ण सैद्धांतिक पैलू समजण्याआधी अनेक वर्षे त्याचा वापर करतात. आज, आम्ही व्यावहारिक अनुप्रयोगावर लक्ष केंद्रित करत आहोत - तुम्ही पाहाल की ते परस्परसंवादी वैशिष्ट्ये तयार करताना नैसर्गिकरित्या कसे उद्भवतात. समजून घेणे विकसित होईल कारण तुम्ही पाहाल की ते वास्तविक समस्यांचे निराकरण कसे करतात.
> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) कडून
@ -540,7 +540,7 @@ function stopElementDrag() {
- **क्रॉस-डिव्हाइस सपोर्ट**: डेस्कटॉप आणि मोबाइलवर कार्य करते
- **परफॉर्मन्स कॉन्शस**: मेमरी लीक किंवा अनावश्यक गणना नाही
# माझं टेरॅरियम: HTML, CSS, आणि DOM मॅनिप्युलेशन शिकण्यासाठी JavaScript वापरून एक प्रकल्प 🌵🌱
## तुमचे टेरारियम डिप्लॉय करा
एक छोटासा ड्रॅग आणि ड्रॉप कोड-मेडिटेशन. थोडं HTML, JS आणि CSS वापरून तुम्ही एक वेब इंटरफेस तयार करू शकता, त्याला स्टाइल देऊ शकता, आणि तुमच्या पसंतीनुसार अनेक इंटरॅक्शनसुद्धा जोडू शकता.
तुम्ही **Azure Static Web Apps** वापरून तुमचे टेरारियम वेबवर डिप्लॉय किंवा प्रकाशित करू शकता.
CSS वापरून तयार केलेलं टेरॅरियम Jakub Mandra च्या ग्लास जार [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) वरून प्रेरित आहे.
कला [Jen Looper](http://jenlooper.com) यांनी Procreate च्या मदतीने हाताने काढलेली आहे.
## तुमचं टेरॅरियम प्रकाशित करा
तुमचं टेरॅरियम Azure Static Web Apps वापरून वेबवर प्रकाशित करू शकता.
1. या रेपॉजिटरीला फोर्क करा
2. हा बटण दाबा
[](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 वर बिल्ड आणि प्रकाशित करण्यात मदत करेल.
**अस्वीकरण**:
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
हा दस्तऐवज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून अनुवादित केला आहे. आम्ही अचूकतेसाठी प्रयत्न करतो, तरी कृपया लक्षात घ्या की स्वयंचलीत अनुवादांमध्ये चुका किंवा अचूकतेचा अभाव असू शकतो. मूळ दस्तऐवज त्याच्या स्थानिक भाषेत अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी अनुवादाची शिफारस केली जाते. या अनुवादाच्या वापरामुळे उद्भवलेल्या कोणत्याही गैरसमजुतींविषयी किंवा चुकीच्या अर्थ लावण्याबाबत आम्ही जबाबदार नाही.
एक छोटासा ड्रॅग आणि ड्रॉप कोड-मेडिटेशन. थोडं HTML, JS आणि CSS वापरून तुम्ही एक वेब इंटरफेस तयार करू शकता, त्याला स्टाइल देऊ शकता, आणि त्यात इंटरॅक्शन जोडू शकता.
> काही प्रारंभिक ब्राउझर, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) यांच्याकडून
### ब्राउझर वेब सामग्री कशी प्रक्रिया करतात
@ -198,7 +198,7 @@ quadrantChart
विस्तार स्थापना प्रक्रिया समजून घेणे तुम्हाला तुमचा विस्तार लोकांनी स्थापित करताना अनुभव कसा असेल याचा अंदाज घेण्यास मदत करते. स्थापना प्रक्रिया आधुनिक ब्राउझरमध्ये प्रमाणित आहे, इंटरफेस डिझाइनमध्ये लहान फरकांसह.
> **महत्त्वाचे**: तुमचे स्वतःचे विस्तार चाचणी करताना विकसक मोड चालू करा आणि इतर स्टोअरमधून विस्तारांना परवानगी द्या.
@ -313,10 +313,10 @@ project-root/
### विस्तार दृश्ये विहंगावलोकन
**सेटअप दृश्य** - प्रथमच वापरकर्ता कॉन्फिगरेशन:
**परिणाम दृश्य** - कार्बन फूटप्रिंट डेटा प्रदर्शन:
> ⚠️ **सुरक्षा विचार**: उत्पादन ऍप्लिकेशन्समध्ये, लोकल स्टोरेजमध्ये API की साठवणे सुरक्षा जोखीम निर्माण करते कारण जावास्क्रिप्टला हा डेटा प्रवेश करता येतो. शिकण्यासाठी, हा दृष्टिकोन ठीक आहे, परंतु वास्तविक ऍप्लिकेशन्स संवेदनशील क्रेडेन्शियल्ससाठी सुरक्षित सर्व्हर-साइड स्टोरेज वापरतात.
@ -126,7 +126,7 @@ Edge मध्ये Developer Tools उघडण्यासाठी, वर
चला हे करून पाहूया. एखादी वेबसाइट उघडा (Microsoft.com चांगली काम करते) आणि 'Record' बटणावर क्लिक करा. आता पृष्ठ रीफ्रेश करा आणि प्रोफाइलरने काय होते ते कॅप्चर करताना पहा. जेव्हा तुम्ही रेकॉर्डिंग थांबवाल, तेव्हा तुम्हाला ब्राउझर 'स्क्रिप्ट्स', 'रेंडर्स', आणि 'पेंट्स' साइट कशी करते याचे तपशीलवार विहंगावलोकन दिसेल. हे मला रॉकेट लॉन्च दरम्यान मिशन कंट्रोल प्रत्येक प्रणालीचे निरीक्षण कसे करते याची आठवण करून देते - तुम्हाला नेमके काय आणि कधी घडते याचे रिअल-टाइम डेटा मिळतो.
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मध्ये अधिक तपशील आहेत जर तुम्हाला अधिक खोलवर जाण्याची इच्छा असेल
@ -136,11 +136,11 @@ Edge मध्ये Developer Tools उघडण्यासाठी, वर
प्रोफाइल टाइमलाइनचा एक भाग निवडून आणि सारांश पॅन पाहून तुमच्या पृष्ठाच्या कार्यक्षमतेचा स्नॅपशॉट मिळवा:
✅ तुमच्या प्रोफाइलरला ओळखा! या साइटवर Developer Tools उघडा आणि कोणतेही अडथळे आहेत का ते पहा. सर्वात मंद लोड होणारा घटक कोणता आहे? सर्वात जलद कोणता आहे?
tmrow च्या C02 Signal API चा वापर करून वीज वापर ट्रॅक करण्यासाठी एक ब्राउझर एक्स्टेंशन तयार करा, जेणेकरून तुमच्या ब्राउझरमध्ये तुमच्या प्रदेशातील वीज वापर किती जड आहे याची आठवण मिळू शकेल. हे एक्स्टेंशन अडहॉक पद्धतीने वापरल्याने तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत होईल.
Edge वर इंस्टॉल करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन डॉट' मेनू वापरून एक्स्टेंशन्स पॅनेल शोधा. तिथून 'Load Unpacked' निवडा आणि नवीन एक्स्टेंशन लोड करा. प्रॉम्प्टवर 'dist' फोल्डर उघडा आणि एक्स्टेंशन लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal च्या API साठी API key ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावर बॉक्समध्ये तुमचा ईमेल टाका) आणि [Electricity Map](https://www.electricitymap.org/map) शी संबंधित तुमच्या प्रदेशाचा [कोड](http://api.electricitymap.org/v3/zones) आवश्यक आहे (उदाहरणार्थ, बोस्टनमध्ये, मी 'US-NEISO' वापरतो).
एकदा API key आणि प्रदेश एक्स्टेंशन इंटरफेसमध्ये इनपुट केल्यानंतर, ब्राउझर एक्स्टेंशन बारमधील रंगीत डॉट तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करण्यासाठी बदलला पाहिजे आणि तुम्हाला ऊर्जा-गंभीर क्रियाकलापांसाठी योग्य सल्ला मिळेल. या 'डॉट' प्रणालीमागील संकल्पना मला [Energy Lollipop extension](https://energylollipop.com/) कडून कॅलिफोर्निया उत्सर्जनासाठी मिळाली.
tmrow च्या C02 Signal API चा वापर करून वीज वापराचे निरीक्षण करा आणि तुमच्या ब्राउझरमध्ये थेट तुमच्या प्रदेशातील वीज वापराची आठवण देणारी एक ब्राउझर विस्तार तयार करा. या विस्ताराचा वापर तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांवर निर्णय घेण्यास मदत करेल.
Edge वर स्थापित करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन बिंदू' मेनू वापरून Extensions पॅनेल शोधा. तिथून, 'Unpacked Extension लोड करा' निवडा आणि नवीन विस्तार लोड करा. 'dist' फोल्डर उघडा आणि विस्तार लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal API साठी API की ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [तुमच्या प्रदेशाचा कोड](http://api.electricitymap.org/v3/zones) जो [Electricity Map](https://www.electricitymap.org/map) शी संबंधित आहे (उदाहरणार्थ, Boston मध्ये, मी 'US-NEISO' वापरतो).
API की आणि प्रदेश विस्ताराच्या इंटरफेसमध्ये टाकल्यानंतर, ब्राउझरच्या विस्तार बारमधील रंगीत बिंदू तुमच्या प्रदेशातील वीज वापर प्रतिबिंबित करण्यासाठी बदलला पाहिजे आणि तुम्हाला ऊर्जा-खर्चिक क्रियाकलापांबद्दल योग्य सल्ला देईल. या 'बिंदू' प्रणालीमागील संकल्पना मला [Energy Lollipop विस्तार](https://energylollipop.com/) कडून मिळाली, जी कॅलिफोर्नियाच्या उत्सर्जनासाठी आहे.
वीज वापर ट्रॅक करण्यासाठी tmrow च्या C02 सिग्नल API चा वापर करून, एक ब्राउझर एक्सटेंशन तयार करणे जे तुमच्या ब्राउझरमध्ये तुमच्या क्षेत्रातील वीज वापर किती जड आहे याबद्दल तुम्हाला स्मरण देईल. या एक्सटेंशनचा उपयोग तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत करेल.
एज ब्राउझरवर इंस्टॉल करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन डॉट' मेनू वापरून एक्सटेंशन पॅनेल शोधा. तिथून, नवीन एक्सटेंशन लोड करण्यासाठी 'लोड अनपॅक्ड' निवडा. प्रॉम्प्टवर 'dist' फोल्डर उघडा आणि एक्सटेंशन लोड होईल. याचा उपयोग करण्यासाठी, तुम्हाला CO2 सिग्नल API ([ईमेलद्वारे येथे मिळवा](https://www.co2signal.com/) साठी API की आवश्यक असेल - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [तुमच्या क्षेत्रासाठी कोड](http://api.electricitymap.org/v3/zones) [इलेक्ट्रिसिटी मॅप](https://www.electricitymap.org/map) वरून (उदाहरणार्थ, बोस्टनसाठी, मी 'US-NEISO' वापरतो).
एकदा API की आणि क्षेत्र एक्सटेंशन इंटरफेसमध्ये इनपुट केल्यानंतर, ब्राउझर एक्सटेंशन बारमधील रंगीत डॉट तुमच्या क्षेत्रातील ऊर्जा वापर प्रतिबिंबित करण्यासाठी बदलायला हवा आणि तुम्हाला एक संकेतक द्यायला हवा की ऊर्जा-गंभीर क्रियाकलाप तुमच्या कामगिरीसाठी योग्य असतील. या 'डॉट' प्रणालीची संकल्पना मला कॅलिफोर्नियाच्या उत्सर्जनासाठी [एनर्जी लॉलीपॉप एक्सटेंशन](https://energylollipop.com/) कडून मिळाली.
tmrow च्या Signal C02 API चा वापर करून वीज वापराचे निरीक्षण करण्यासाठी एक ब्राउझर विस्तार तयार केला जाईल, ज्यामुळे आपल्या प्रदेशातील वीज वापर किती जड आहे याबद्दल थेट ब्राउझरमध्ये स्मरणपत्र मिळेल. या विशेष विस्ताराचा वापर करून, या माहितीनुसार आपल्या क्रियाकलापांचे मूल्यांकन करण्यात मदत होईल.
Edge वर स्थापित करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील "तीन बिंदू" मेनूचा वापर करून विस्तार पॅनेल शोधा. जर आधीपासून सक्रिय नसेल, तर डेव्हलपर मोड (खाली डावीकडे) सक्रिय करा. नवीन विस्तार लोड करण्यासाठी "लोड अनझिप्ड" निवडा. प्रॉम्प्टवर "dist" फोल्डर उघडा आणि विस्तार लोड केला जाईल. वापरण्यासाठी, CO2 Signal API साठी API कीची आवश्यकता असेल (ती [येथे ई-मेलद्वारे मिळवता येते](https://www.co2signal.com/) - या पृष्ठावरील बॉक्समध्ये आपला ई-मेल प्रविष्ट करा) आणि [वीज नकाशा](https://www.electricitymap.org/map) शी संबंधित [आपल्या प्रदेशाचा कोड](http://api.electricitymap.org/v3/zones) (उदाहरणार्थ, बोस्टनसाठी "US-NEISO").
API की आणि प्रदेश विस्ताराच्या इंटरफेसमध्ये प्रविष्ट केल्यानंतर, ब्राउझरच्या विस्तार बारमधील रंगीत बिंदू प्रदेशाच्या ऊर्जा वापराचे प्रतिबिंब दाखवण्यासाठी बदलायला हवा आणि उच्च ऊर्जा वापराच्या क्रियाकलापांसाठी योग्य सूचना प्रदान करायला हवी. या "बिंदू" प्रणालीमागील संकल्पना [Energy Lollipop विस्तार](https://energylollipop.com/) कडून घेतली गेली आहे, जी कॅलिफोर्नियाच्या उत्सर्जनासाठी आहे.
tmrow च्या C02 सिग्नल API चा वापर करून, तुमच्या प्रदेशातील वीज वापर किती आहे हे ब्राउझरवर स्मरणपत्र म्हणून दाखवण्यासाठी ब्राउझर विस्तार तयार करा. या विस्ताराचा उपयोग करून, तुम्ही या माहितीच्या आधारे तुमच्या क्रियाकलापांचा निर्णय घेऊ शकता.
Edge मध्ये स्थापित करण्यासाठी, ब्राउझरच्या उजव्या कोपऱ्यातील "तीन डॉट्स" मेनूमधून "Extensions" पॅनेल शोधा. तिथून "Load Unpacked" निवडा आणि नवीन विस्तार लोड करा. प्रॉम्प्टमध्ये "dist" फोल्डर उघडा, ज्यामुळे विस्तार लोड होईल. वापरण्यासाठी, तुम्हाला CO2 सिग्नल API चा API की ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [Electricity Map](https://www.electricitymap.org/map) साठी तुमच्या प्रदेशाशी संबंधित [code for your region](http://api.electricitymap.org/v3/zones) आवश्यक आहे (उदाहरणार्थ, बोस्टनसाठी 'US-NEISO' वापरले जाते).
API की आणि प्रदेश विस्तार इंटरफेसमध्ये प्रविष्ट केल्यावर, ब्राउझरच्या विस्तार बारमध्ये दिसणारा रंगीत डॉट बदलतो आणि तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करतो. यामुळे तुम्हाला कोणत्या प्रकारच्या ऊर्जेची आवश्यकता असलेल्या क्रियाकलाप करणे योग्य आहे हे समजते. या "डॉट" प्रणालीची कल्पना मला कॅलिफोर्नियाच्या उत्सर्जनासाठी [Energy Lollipop extension](https://energylollipop.com/) कडून मिळाली.
C02 सिग्नल API चा वापर करून वीजेचा वापर ओळखण्यासाठी ब्राउझर विस्तार तयार करा, ज्यामुळे तुम्हाला तुमच्या प्रदेशातील वीजेच्या वापराबद्दल ब्राउझरमध्ये सूचना मिळतील. हा विस्तार विशेषतः वापरल्याने तुम्हाला तुमच्या क्रियाकलापांबद्दल माहितीच्या आधारे निर्णय घेण्यास मदत होईल.
Edge मध्ये स्थापित करण्यासाठी, ब्राउझरच्या उजव्या कोपऱ्यातील 'तीन बिंदू' मेनू वापरा आणि 'Extensions' पॅनेल शोधा. तिथून, 'Load Unpacked' निवडा आणि नवीन विस्तार लोड करा. 'dist' फोल्डर उघडा आणि विस्तार लोड होईल. वापरण्यासाठी, तुम्हाला CO2 सिग्नल API साठी API की ([येथून ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [तुमच्या प्रदेशासाठी कोड](http://api.electricitymap.org/v3/zones) आवश्यक आहे, जो [इलेक्ट्रिसिटी मॅप](https://www.electricitymap.org/map) शी संबंधित आहे (उदाहरणार्थ, बोस्टनमध्ये, मी 'US-NEISO' वापरतो).
API की आणि प्रदेश विस्ताराच्या इंटरफेसमध्ये टाकल्यानंतर, ब्राउझर विस्तार बारमधील रंगीत बिंदू तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करेल आणि तुम्हाला योग्य क्रियाकलापांसाठी सूचना देईल. या 'डॉट' प्रणालीमागील संकल्पना मला [एनर्जी लॉलिपॉप ब्राउझर विस्तार](https://energylollipop.com/) कडून मिळाली, जी कॅलिफोर्नियातील उत्सर्जनासाठी आहे.
tmrow च्या C02 Signal API चा वापर करून वीज वापर ट्रॅक करण्यासाठी ब्राउझर एक्स्टेंशन तयार करा, जेणेकरून तुमच्या ब्राउझरमध्ये तुमच्या प्रदेशातील वीज वापर किती जड आहे याची आठवण मिळेल. हे एक्स्टेंशन अड-हॉक वापरल्याने तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत होईल.
Edge वर इंस्टॉल करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन डॉट' मेनू वापरून एक्स्टेंशन्स पॅनेल शोधा. तिथून, 'Load Unpacked' निवडा आणि नवीन एक्स्टेंशन लोड करा. 'dist' फोल्डर उघडा आणि एक्स्टेंशन लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal च्या API साठी API key ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावर बॉक्समध्ये तुमचा ईमेल टाका) आणि [Electricity Map](https://www.electricitymap.org/map) शी संबंधित [तुमच्या प्रदेशाचा कोड](http://api.electricitymap.org/v3/zones) आवश्यक आहे (उदाहरणार्थ, बोस्टनमध्ये मी 'US-NEISO' वापरतो).
एकदा API key आणि प्रदेश एक्स्टेंशन इंटरफेसमध्ये इनपुट केल्यानंतर, ब्राउझर एक्स्टेंशन बारमधील रंगीत डॉट तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करण्यासाठी बदलला पाहिजे आणि तुम्हाला ऊर्जा-गंभीर क्रियाकलापांसाठी योग्य सल्ला मिळेल. या 'डॉट' प्रणालीची संकल्पना मला [Energy Lollipop extension](https://energylollipop.com/) कडून कॅलिफोर्निया उत्सर्जनासाठी मिळाली.
कॅनव्हास घटकावर काढण्यासाठी, तुम्ही कॅनव्हास ग्राफिक्सच्या सर्व मूलभूत गोष्टी तयार करणारी तीच तीन-चरण प्रक्रिया अनुसरण कराल. तुम्ही हे काही वेळा केल्यानंतर, ते सहज होईल:
- **स्कोअरिंग सिस्टम**: प्रत्येक नष्ट केलेल्या शत्रूच्या जहाजासाठी १०० गुण दिले जातात (गोल संख्या खेळाडूंना मानसिक गणना करणे सोपे करते). स्कोअर तळाच्या डाव्या कोपऱ्यात दिसेल.
- **जीवन काउंटर**: तुमचा हिरो तीन जीवनांसह सुरू होतो - सुरुवातीच्या आर्केड गेम्सने आव्हान आणि खेळण्यायोग्यता संतुलित करण्यासाठी स्थापित केलेला मानक. प्रत्येक शत्रूशी टक्कर झाल्यावर एक जीवन कमी होते. उर्वरित जीवन तळाच्या उजव्या कोपऱ्यात जहाजाच्या आयकॉनद्वारे दाखवले जातील .
- **जीवन काउंटर**: तुमचा हिरो तीन जीवनांसह सुरू होतो - सुरुवातीच्या आर्केड गेम्सने आव्हान आणि खेळण्यायोग्यता संतुलित करण्यासाठी स्थापित केलेला मानक. प्रत्येक शत्रूशी टक्कर झाल्यावर एक जीवन कमी होते. उर्वरित जीवन तळाच्या उजव्या कोपऱ्यात जहाजाच्या आयकॉनद्वारे दाखवले जातील .
`history.pushState` वापरून ब्राउझरच्या नेव्हिगेशन इतिहासात नवीन एंट्री तयार होते. तुम्ही ब्राउझरचा *बॅक बटन* धरून तपासू शकता, ते असे काहीतरी प्रदर्शित करेल:
- **ब्राउझर पुनर्निर्देशित करते** API एंडपॉइंट URL वर
@ -526,7 +526,7 @@ async function register() {
3. **"Create Account" वर क्लिक करा**
4. **कन्सोल संदेश आणि वापरकर्ता फीडबॅक निरीक्षण करा**
**तुम्हाला काय दिसेल:**
- **लोडिंग स्थिती** सबमिट बटणावर दिसते
@ -701,7 +701,7 @@ input:focus:invalid {
3. **युजरनेम फील्डमध्ये विशेष वर्ण वापरून पहा**
4. **नकारात्मक शिल्लक रक्कम प्रविष्ट करा**
**तुम्ही काय निरीक्षण कराल:**
- **ब्राउझर दर्शवतो** मूळ व्हॅलिडेशन संदेश
@ -821,7 +821,7 @@ timeline
थोड्या CSS शैली जोडल्यावर अंतिम लॉगिन पृष्ठ कसे दिसू शकते याचे उदाहरण येथे आहे:
आता जेव्हा तुम्ही अवैध खात्याने चाचणी कराल, तेव्हा तुम्हाला पृष्ठावरच एक उपयुक्त त्रुटी संदेश दिसेल!
#### चरण 4: अॅक्सेसिबिलिटीसह समावेशक असणे
@ -843,7 +843,7 @@ Agent मोड वापरून खालील आव्हान पूर
पॉलिश केलेला डॅशबोर्ड कसा दिसू शकतो याचे उदाहरण येथे आहे:
तुम्हाला हे अचूकपणे जुळवायचे आहे असे वाटत नाही - याचा प्रेरणास्रोत म्हणून वापर करा आणि ते तुमचे स्वतःचे बनवा!
आम्ही आमच्या शेपटीचा पाठलाग करण्याऐवजी, आम्ही एक **केंद्रीकृत स्टेट मॅनेजमेंट** सिस्टम तयार करणार आहोत. हे सर्व महत्त्वाच्या गोष्टींच्या व्यवस्थेसाठी एक अतिशय व्यवस्थित व्यक्ती असल्यासारखे विचार करा:
या प्रकल्पात, तुम्ही काल्पनिक बँक कशी तयार करायची ते शिकाल. या धड्यांमध्ये वेब अॅप कसे मांडायचे आणि रूट्स प्रदान करायचे, फॉर्म तयार करायचे, स्टेट व्यवस्थापित करायचे, आणि API मधून डेटा कसा आणायचा ज्यामधून तुम्ही बँकेचा डेटा मिळवू शकता याचे मार्गदर्शन दिले आहे.
@ -185,7 +185,7 @@ VSCode.dev या क्षमतांना तुमच्या ब्रा
सर्व काही लोड झाल्यावर, तुम्हाला एक सुंदर स्वच्छ कार्यक्षेत्र दिसेल जे तुम्हाला महत्त्वाच्या गोष्टींवर लक्ष केंद्रित ठेवण्यासाठी डिझाइन केले आहे – तुमचा कोड!
@ -78,7 +78,7 @@ VSCode.dev मध्ये रेपॉझिटरी उघडण्यास
4. एक कमिट संदेश लिहा: "Add initial HTML structure"
5. आपले बदल सेव्ह करण्यासाठी "Commit new file" वर क्लिक करा
**या प्रारंभिक सेटअपने काय साध्य केले आहे:**
- HTML5 दस्तऐवज रचना योग्य प्रकारे स्थापित करते
@ -104,7 +104,7 @@ VSCode.dev मध्ये रेपॉझिटरी उघडण्यास
✅ **यशाचा संकेत**: आपल्याला Explorer साइडबारमध्ये आपली प्रोजेक्ट फाइल्स दिसतील आणि मुख्य संपादक क्षेत्रात `index.html` संपादनासाठी उपलब्ध असेल.
**इंटरफेसमध्ये आपण काय पाहाल:**
- **Explorer साइडबार**: **आपल्या रेपॉझिटरी फाइल्स आणि फोल्डर रचना दर्शवते**
@ -448,7 +448,7 @@ li:before {
**इंस्टॉलेशननंतर त्वरित परिणाम:**
CodeSwing इंस्टॉल झाल्यानंतर, आपल्याला आपल्या रिझ्युम वेबसाइटचा लाइव्ह प्रिव्ह्यू संपादकात दिसेल. यामुळे आपण बदल करत असताना आपली साइट कशी दिसते हे पाहण्याची परवानगी मिळते.
## 🗺️ एआय अॅप्लिकेशन डेव्हलपमेंटमधील तुमचा शिक्षण प्रवास
@ -192,7 +192,7 @@ mindmap
**मूलभूत तत्त्व**: एआय अॅप्लिकेशन डेव्हलपमेंट पारंपरिक वेब डेव्हलपमेंट कौशल्यांना एआय सेवा इंटिग्रेशनसह एकत्र करते, बुद्धिमान अॅप्लिकेशन्स तयार करते जे वापरकर्त्यांना नैसर्गिक आणि प्रतिसादात्मक वाटतात.
**प्लेग्राउंड इतके उपयुक्त का आहे:**
- **वेगवेगळे एआय मॉडेल्स** जसे GPT-4o-mini, Claude आणि इतर (सर्व विनामूल्य!) वापरून पहा
@ -202,7 +202,7 @@ mindmap
थोडा प्रयोग केल्यानंतर, फक्त "Code" टॅबवर क्लिक करा आणि तुमची प्रोग्रामिंग भाषा निवडा, ज्यामुळे तुम्हाला लागणारा अंमलबजावणी कोड मिळेल.
## Python बॅकएंड इंटिग्रेशन सेट करणे
@ -1883,14 +1883,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) वर जा
- वरच्या उजव्या कोपऱ्यात "Use this template" वर क्लिक करा (तुम्ही GitHub मध्ये लॉग इन असल्याची खात्री करा)
**पायरी 2: Codespaces लॉन्च करा**
- तुमच्या नव्याने तयार केलेल्या रिपॉझिटरी उघडा
- हिरव्या "Code" बटणावर क्लिक करा आणि "Codespaces" निवडा
- "Create codespace on main" निवडा आणि तुमचे विकास वातावरण सुरू करा
**पायरी 3: वातावरण कॉन्फिगरेशन**
तुमचे Codespace लोड झाल्यावर, तुम्हाला खालील गोष्टींमध्ये प्रवेश मिळेल:
मायक्रोसॉफ्ट क्लाउड अॅडव्होकेट्सद्वारे तयार केलेल्या 12 आठवड्यांच्या व्यापक कोर्ससह वेब विकासाची मूलभूत तत्त्वे शिका. प्रत्येक 24 धड्यांमध्ये जावास्क्रिप्ट, CSS आणि HTML यावर प्रकल्पांद्वारे सखोल चर्चा केली जाते, जसे की टेरॅरियम्स, ब्राउझर एक्सटेंशन्स आणि स्पेस गेम्स. क्विझ, चर्चा आणि व्यावहारिक असाइनमेंट्ससह सहभाग घ्या. प्रकल्प-आधारित शिक्षण पद्धतीसह तुमचे कौशल्य वाढवा आणि ज्ञान टिकवून ठेवा. आजच तुमचा कोडिंग प्रवास सुरू करा!
Microsoft Cloud Advocates द्वारा दिलेल्या 12 आठवड्यांच्या व्यापक अभ्यासक्रमासह वेब विकासाच्या मूलतत्त्वांना शिका. 24 धड्यांपैकी प्रत्येक धडा JavaScript, CSS, आणि HTML या विषयात काम करताना टेरारियम, ब्राउझर विस्तार, आणि अंतराळातील खेळांसारख्या प्रकल्पांद्वारे सखोल समज विकसित करतो. क्विझ, चर्चासत्र, आणि व्यावहारिक कार्यांसह सहभागी व्हा. आपल्या कौशल्यांना वाढवा आणि आमच्या प्रभावी प्रकल्प-आधारित शिक्षण पद्धतीने आपले ज्ञान टिकवून ठेवा. आजच आपल्या कोडिंग प्रवासास प्रारंभ करा!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> यामुळे आपल्याला कोर्स पूर्ण करण्यासाठी आवश्यक असलेले सर्व काही खूप वेगाने डाउनलोड होईल.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**जर तुम्हाला अतिरिक्त भाषांमध्ये भाषांतर हवे असेल तर समर्थित भाषांची यादी [येथे](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) आहे**
**आपल्याला अतिरिक्त भाषांमध्ये समर्थन हव असल्यास येथे यादी दिली आहे [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _तुम्ही विद्यार्थी आहात का?_
#### 🧑🎓 _तुम्ही विद्यार्थी आहात?_
[**Student Hub पृष्ठाला**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) भेट द्या जिथे तुम्हाला नवशिक्या संसाधने, विद्यार्थी पॅक्स आणि अगदी मोफत प्रमाणपत्र व्हाउचर मिळवण्याचे मार्ग सापडतील. हे पृष्ठ बुकमार्क करा आणि वेळोवेळी तपासा कारण आम्ही दरमहा सामग्री बदलतो.
[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) भेट द्या जिथे तुम्हाला नवशिक्यांसाठी संसाधने, विद्यार्थी पॅक्स आणि अगदी मोफत प्रमाणपत्र व्हाउचर मिळण्याचे मार्ग मिळतील. प्रत्येक महिन्याला आम्ही मजकूर बदलतो त्यामुळे ही पृष्ठे बुकमार्क करा आणि वेळोवेळी पाहत रहा.
### 📣 घोषणा - GitHub Copilot Agent मोड आव्हाने पूर्ण करण्यासाठी नवीन!
### 📣 घोषणा - नवीन GitHub Copilot Agent मोड आव्हाने पूर्ण करा!
नवीन आव्हान जोडले गेले आहे, "GitHub Copilot Agent Challenge 🚀" बहुतेक अध्यायांमध्ये शोधा. हे GitHub Copilot आणि Agent मोड वापरून पूर्ण करण्यासाठी एक नवीन आव्हान आहे. जर तुम्ही Agent मोड वापरला नसेल तर तो केवळ मजकूर तयार करण्यास सक्षम नाही तर फाइल्स तयार आणि संपादित करू शकतो, आदेश चालवू शकतो आणि बरेच काही करू शकतो.
नवीन आव्हान जोडले गेले आहे, बहुतेक प्रकरणांमध्ये "GitHub Copilot Agent Challenge 🚀" शोधा. हे GitHub Copilot आणि Agent मोड वापरून पूर्ण करण्यासाठी नवे आव्हान आहे. जर तुम्ही Agent मोड आधी वापरले नसेल तर तो केवळ मजकूर तयार करणार नाही तर फायली तयार आणि संपादित करू शकतो, आज्ञा चालवू शकतो आणि बरेच काही करू शकतो.
### 📣 घोषणा - _Generative AI वापरून तयार करण्यासाठी नवीन प्रकल्प_
### 📣 घोषणा - जनरेटिव्ह AI वापरून नवे प्रकल्प तयार करा
नवीन AI सहाय्यक प्रकल्प नुकताच जोडला गेला आहे, तपासा [प्रकल्प](./09-chat-project/README.md)
नवीन AI सहाय्यक प्रकल्प नुकताच जोडला गेला आहे, पाहण्यासाठी [project](./9-chat-project/README.md)
### 📣 घोषणा - _नवीन अभ्यासक्रम_ JavaScript साठी Generative AI वर नुकताच प्रसिद्ध झाला
### 📣 घोषणा - जावास्क्रिप्टसाठी जनरेटिव्ह AI वर नवीन अभ्यासक्रम नुकताच जारी
आमचा नवीन Generative AI अभ्यासक्रम चुकवू नका!
आमचा नवीन जनरेटिव्ह AI अभ्यासक्रम चुकवू नका!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ला भेट द्या आणि सुरुवात करा!
प्रारंभ करण्यासाठी भेट द्या [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
प्रत्येक धड्यात पूर्ण करण्यासाठी असाइनमेंट, ज्ञान तपासणी आणि आव्हान समाविष्ट आहे जे तुम्हाला खालील विषय शिकण्यासाठी मार्गदर्शन करेल:
- प्रॉम्प्टिंग आणि प्रॉम्प्ट इंजिनिअरिंग
प्रत्येक धड्यांत पूर्ण करण्यासाठी एक असाइनमेंट, ज्ञान तपासणी आणि आव्हान असते ज्यामुळे आपण पुढील विषय शिकता:
- प्रॉम्प्टिंग आणि प्रॉम्प्ट अभियांत्रिकी
- मजकूर आणि प्रतिमा अॅप निर्मिती
- शोध अॅप्स
- शोध अनुप्रयोग
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ला भेट द्या आणि सुरुवात करा!
प्रारंभ करण्यासाठी भेट द्या [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)!
## 🌱 सुरुवात करणे
## 🌱 प्रारंभ कसा करावा
> **शिक्षक**, आम्ही [काही सूचना समाविष्ट केल्या आहेत](for-teachers.md) की हा अभ्यासक्रम कसा वापरायचा. आम्हाला तुमचे अभिप्राय [आमच्या चर्चा मंचावर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) आवडेल!
> **शिक्षक**, आम्ही या अभ्यासक्रमाचा वापर कसा करावा याबाबत काही सूचना [समाविष्ट केल्या आहेत](for-teachers.md). कृपया आमच्या [चर्चा फोरममध्ये](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) आपले मत द्या!
**[शिकणारे](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक धड्यासाठी, प्री-लेक्चर क्विझसह प्रारंभ करा आणि लेक्चर सामग्री वाचून, विविध क्रियाकलाप पूर्ण करून आणि पोस्ट-लेक्चर क्विझसह तुमची समज तपासून पुढे जा.
**[शिकणारे](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक धड्यापूर्वी प्री-लेक्चर क्विझ घेऊन सुरू करा आणि नंतर व्याख्यान सामग्री वाचा, विविध क्रियाकलाप पूर्ण करा आणि पोस्ट-लेक्चर क्विझद्वारे तुमची समज तपासा.
तुमचा शिक्षण अनुभव वाढवण्यासाठी, तुमच्या सहकाऱ्यांशी कनेक्ट व्हा आणि प्रकल्पांवर एकत्र काम करा! आमच्या [चर्चा मंचावर](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) चर्चा प्रोत्साहित केल्या जातात जिथे आमचे मॉडरेटर तुमच्या प्रश्नांची उत्तरे देण्यासाठी उपलब्ध असतील.
आपल्या शिकण्याचा अनुभव सुधारण्यासाठी, सहकारी प्रकल्पांवर काम करण्यासाठी तुमच्या सहपाठींशी कनेक्ट व्हा! चर्चांना प्रोत्साहन दिले आहे आमच्या [चर्चा फोरम](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) मध्ये जिथे आमचा मॉडरेटर संघ तुमचे प्रश्न उत्तर देण्यासाठी उपलब्ध आहे.
तुमचे शिक्षण पुढे नेण्यासाठी, आम्ही [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) एक्सप्लोर करण्याची जोरदार शिफारस करतो जेथे अतिरिक्त अभ्यास सामग्री उपलब्ध आहे.
आपली शिक्षण वाढविण्यासाठी, आम्ही [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) मध्ये अतिरिक्त अभ्यास साहित्य अन्वेषण करण्याची शिफारस करतो.
### 📋 तुमचे वातावरण सेट करणे
### 📋 आपले पर्यावरण सेट करणे
या अभ्यासक्रमासाठी विकास वातावरण तयार आहे! तुम्ही सुरुवात करत असताना तुम्ही [Codespace](https://github.com/features/codespaces/) (_ब्राउझर-आधारित, कोणत्याही इंस्टॉलची गरज नसलेले वातावरण_) मध्ये किंवा तुमच्या संगणकावर स्थानिकपणे [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) सारख्या टेक्स्ट एडिटरचा वापर करून चालवू शकता.
हा अभ्यासक्रम विकास पर्यावरणासह तयार आहे! सुरुवात करताना, तुम्ही अभ्यासक्रम [Codespace](https://github.com/features/codespaces/) (_एक ब्राउझर-आधारित, कोणतीही इंस्टॉलेशन न लागणारे वातावरण_) मध्ये चालवू शकता, किंवा स्थानिक तुमच्या संगणकावर [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) सारखा टेक्स्ट एडिटर वापरू शकता.
#### तुमची रेपॉझिटरी तयार करा
तुमचे काम सहजपणे सेव्ह करण्यासाठी, तुमच्या GitHub खात्यात या रेपॉझिटरीची स्वतःची प्रत तयार करणे शिफारसीय आहे. तुम्ही पृष्ठाच्या शीर्षस्थानी **Use this template** बटणावर क्लिक करून हे करू शकता. यामुळे तुमच्या GitHub खात्यात अभ्यासक्रमाची प्रत असलेली नवीन रेपॉझिटरी तयार होईल.
#### आपला रिपॉझिटरी तयार करा
आपले काम सहज जतन करण्यासाठी, आपली स्वतःची या रिपॉझिटरीची प्रत तयार करणे शिफारस आहे. हे करण्यासाठी पानाच्या वरच्या भागातील **Use this template** बटणावर क्लिक करा. यामुळे आपल्या GitHub खात्यात अभ्यासक्रमाची प्रत असलेली नवीन रिपॉझिटरी तयार होईल.
या चरणांचे अनुसरण करा:
1. **रेपॉझिटरी फोर्क करा**: या पृष्ठाच्या वरच्या उजव्या कोपऱ्यात "Fork" बटणावर क्लिक करा.
तुमच्या तयार केलेल्या रेपॉझिटरीच्या प्रतामध्ये,**Code** बटणावर क्लिक करा आणि **Open with Codespaces** निवडा. यामुळे तुमच्यासाठी काम करण्यासाठी नवीन Codespace तयार होईल.
तुमच्या तयार केलेल्या या रिपॉझिटरीच्या प्रतिप्रत मध्ये**Code** बटणावर क्लिक करा आणि **Open with Codespaces** निवडा. यामुळे तुम्हाला कार्य करण्यासाठी नवीन Codespace तयार होईल.
#### तुमच्या संगणकावर स्थानिकपणे अभ्यासक्रम चालवणे
#### आपल्याक computer वर स्थानिकरित्या अभ्यासक्रम चालवणे
तुमच्या संगणकावर स्थानिकपणे हा अभ्यासक्रम चालवण्यासाठी, तुम्हाला टेक्स्ट एडिटर, ब्राउझर आणि कमांड लाइन टूलची आवश्यकता असेल. आमचा पहिला धडा, [प्रोग्रामिंग भाषांची ओळख आणि व्यापाराचे साधने](../../1-getting-started-lessons/1-intro-to-programming-languages), तुम्हाला या साधनांसाठी विविध पर्यायांमधून मार्गदर्शन करेल जे तुम्हाला सर्वात चांगले वाटते ते निवडण्यासाठी.
आपल्या संगणकावर हा अभ्यासक्रम चालवण्यासाठी, तुम्हाला टेक्स्ट एडिटर, ब्राउझर आणि कमांड लाइन टूलची गरज आहे. आमचा पहिला धडा, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), तुम्हाला या प्रत्येकसाठी विविध पर्यायांवर मार्गदर्शन करेल ज्यामध्ये तुम्हाला योग्य असलेले निवडता येईल.
आमची शिफारस आहे की तुम्ही [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) एडिटर म्हणून वापरा, ज्यामध्ये [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) देखील समाविष्ट आहे. तुम्ही [इथे](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) Visual Studio Code डाउनलोड करू शकता.
आमची शिफारस अशी आहे की तुम्ही [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) एडिटर म्हणून वापरा, ज्यामध्ये एक अंगभूत [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) देखील आहे. तुम्ही Visual Studio Code येथे डाउनलोड करू शकता [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. तुमची रेपॉझिटरी तुमच्या संगणकावर क्लोन करा. तुम्ही **Code** बटणावर क्लिक करून आणि URL कॉपी करून हे करू शकता:
[CodeSpace](./images/createcodespace.png)
1. आपला रिपॉझिटरी आपल्या संगणकावर क्लोन करा. हे करण्यासाठी तुम्ही **Code** बटणावर क्लिक करून URL कॉपी करू शकता:
नंतर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) मध्ये [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) उघडा आणि खालील आदेश चालवा, `<your-repository-url>` तुमच्या कॉपी केलेल्या URL ने बदला:
[CodeSpace](./images/createcodespace.png)
नंतर, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) मध्ये [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) उघडा आणि खालील कमांड चालवा, `<your-repository-url>` च्या जागी तुम्ही नुकतीच कॉपी केलेली URL टाका:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code मध्ये फोल्डर उघडा. तुम्ही **File** > **Open Folder** वर क्लिक करून आणि तुम्ही नुकतेच क्लोन केलेले फोल्डर निवडून हे करू शकता.
2. Visual Studio Code मध्ये फोल्डर उघडा. तुम्ही हे **File** > **Open Folder** यावर क्लिक करून आणि तुम्ही नुकतीच क्लोन केलेला फोल्डर निवडून करू शकता.
> शिफारस केलेले Visual Studio Code एक्सटेंशन्स:
> शिफारस केलेले Visual Studio Code विस्तार:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code मध्ये HTML पृष्ठे प्रीव्ह्यू करण्यासाठी
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड लवकर लिहिण्यास मदत करण्यासाठी
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code मध्ये HTML पृष्ठांचे पूर्वावलोकन करण्यासाठी
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड जलद लिहिण्यासाठी मदत करण्यासाठी
## 📂 प्रत्येक धड्यात समाविष्ट आहे:
## 📂 प्रत्येक धडा यामध्ये समाविष्ट आहे:
- ऐच्छिक स्केचनोट
- ऐच्छिक स्केचनोट
- ऐच्छिक पूरक व्हिडिओ
- धड्यापूर्वीचा वॉर्मअप क्विझ
- लेखी धडा
- प्रकल्प-आधारित धड्यांसाठी, प्रकल्प कसा तयार करायचा याचे चरण-दर-चरण मार्गदर्शक
- ज्ञान तपासणी
- पूर्व-धड्याचा वार्मअप क्विझ
- लिहिलेला धडा
- प्रकल्पावर आधारित धड्यांसाठी, प्रकल्प कसे बनवायचे याबाबत टप्प्याटप्प्याने मार्गदर्शन
> **क्विझबद्दल एक टीप**: सर्व क्विझ Quiz-app फोल्डरमध्ये आहेत, एकूण 48 क्विझ, प्रत्येकी तीन प्रश्न. ते [येथे](https://ff-quizzes.netlify.app/web/) उपलब्ध आहेत. क्विझ अॅप स्थानिक पातळीवर चालवले जाऊ शकते किंवा Azure वर तैनात केले जाऊ शकते; `quiz-app` फोल्डरमधील सूचनांचे अनुसरण करा.
> **क्विझ्स विषयी एक नोंद**: सर्व क्विझ्स Quiz-app फोल्डरमध्ये आहेत, 48 एकूण क्विझ्स, प्रत्येकी तीन प्रश्नांसह. ते [येथे](https://ff-quizzes.netlify.app/web/) उपलब्ध आहेत, क्विझ अॅप स्थानिकपणे चालवता येतो किंवा Azure वर तैनात करता येतो; `quiz-app` फोल्डरमध्ये दिलेल्या सूचनांचे पालन करा.
## 🗃️ धडे
| | प्रकल्पाचे नाव | शिकवले जाणारे संकल्पना | शिकण्याचे उद्दिष्ट | संबंधित धडा | लेखक |
| 01 | सुरुवात करा | प्रोग्रामिंगची ओळख आणि वापरण्यात येणारी साधने | बहुतेक प्रोग्रामिंग भाषांमागील मूलभूत गोष्टी आणि व्यावसायिक विकसकांना त्यांचे काम करण्यात मदत करणारे सॉफ्टवेअर याबद्दल जाणून घ्या | [प्रोग्रामिंग भाषांची ओळख आणि वापरण्यात येणारी साधने](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | सुरुवात करा | GitHub च्या मूलभूत गोष्टी, टीमसोबत काम करणे | तुमच्या प्रकल्पात GitHub कसे वापरायचे, कोड बेसवर इतरांसोबत कसे सहकार्य करायचे | [GitHub ची ओळख](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | सुरुवात करा | प्रवेशयोग्यता | वेब प्रवेशयोग्यतेच्या मूलभूत गोष्टी जाणून घ्या | [प्रवेशयोग्यता मूलतत्त्वे](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS मूलतत्त्वे | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारांची मूलभूत माहिती | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS मूलतत्त्वे | फंक्शन्स आणि पद्धती | अॅप्लिकेशनच्या लॉजिक फ्लोचे व्यवस्थापन करण्यासाठी फंक्शन्स आणि पद्धतींबद्दल जाणून घ्या | [फंक्शन्स आणि पद्धती](./2-js-basics/2-functions-methods/README.md) | Jasmine आणि Christopher |
| 06 | JS मूलतत्त्वे | JS सह निर्णय घेणे | निर्णय घेण्याच्या पद्धती वापरून तुमच्या कोडमध्ये अटी कशा तयार करायच्या ते जाणून घ्या | [निर्णय घेणे](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS मूलतत्त्वे | अॅरे आणि लूप्स | JavaScript मध्ये अॅरे आणि लूप्स वापरून डेटा कसा हाताळायचा | [अॅरे आणि लूप्स](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML चा सराव | ऑनलाइन टेरॅरियम तयार करण्यासाठी HTML तयार करा, लेआउट तयार करण्यावर लक्ष केंद्रित करा | [HTML ची ओळख](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS चा सराव | ऑनलाइन टेरॅरियमला शैली देण्यासाठी CSS तयार करा, CSS च्या मूलभूत गोष्टींवर लक्ष केंद्रित करा ज्यामध्ये पृष्ठ प्रतिसादक्षम बनवणे समाविष्ट आहे | [CSS ची ओळख](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोजर्स, DOM मॅनिप्युलेशन | टेरॅरियमला ड्रॅग/ड्रॉप इंटरफेस म्हणून कार्य करण्यासाठी JavaScript तयार करा, क्लोजर्स आणि DOM मॅनिप्युलेशनवर लक्ष केंद्रित करा | [JavaScript क्लोजर्स, DOM मॅनिप्युलेशन](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | टायपिंग गेम तयार करा | तुमच्या JavaScript अॅपच्या लॉजिकला चालना देण्यासाठी कीबोर्ड इव्हेंट्स कसे वापरायचे ते जाणून घ्या | [इव्हेंट-ड्रिव्हन प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउझरसह काम करणे | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास आणि ब्राउझर एक्सटेंशनच्या पहिल्या घटकांचे स्कॅफोल्ड कसे करायचे ते जाणून घ्या | [ब्राउझरबद्दल](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स साठवणे | स्थानिक स्टोरेजमध्ये साठवलेल्या व्हेरिएबल्सचा वापर करून API कॉल करण्यासाठी तुमच्या ब्राउझर एक्सटेंशनचे JavaScript घटक तयार करा | [APIs, फॉर्म्स, आणि स्थानिक स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउझरमधील पार्श्वभूमी प्रक्रिया, वेब कार्यक्षमता | एक्सटेंशनच्या आयकॉनचे व्यवस्थापन करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रियेचा वापर करा; वेब कार्यक्षमता आणि काही ऑप्टिमायझेशनबद्दल जाणून घ्या | [पार्श्वभूमी कार्ये आणि कार्यक्षमता](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript सह अधिक प्रगत गेम डेव्हलपमेंट | गेम तयार करण्याच्या तयारीसाठी क्लासेस आणि कंपोझिशन आणि पब/सब पॅटर्न वापरून इनहेरिटन्सबद्दल जाणून घ्या | [प्रगत गेम डेव्हलपमेंटची ओळख](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | कॅनव्हासवर रेखाटन | स्क्रीनवर घटक रेखाटण्यासाठी वापरल्या जाणाऱ्या कॅनव्हास API बद्दल जाणून घ्या | [कॅनव्हासवर रेखाटन](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | स्क्रीनवर घटक हलवणे | घटकांना कार्टेशियन कोऑर्डिनेट्स आणि कॅनव्हास API वापरून गती कशी मिळवता येते ते शोधा | [घटक हलवणे](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | टक्कर शोधणे | घटकांना एकमेकांशी टक्कर देणे आणि कीप्रेस वापरून प्रतिक्रिया देणे आणि गेमची कार्यक्षमता सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करणे | [टक्कर शोधणे](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | स्कोअर ठेवणे | गेमच्या स्थिती आणि कार्यक्षमतेच्या आधारे गणितीय गणना करा | [स्कोअर ठेवणे](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | गेम संपवणे आणि पुन्हा सुरू करणे | गेम संपवणे आणि पुन्हा सुरू करणे, ज्यामध्ये अॅसेट्स साफ करणे आणि व्हेरिएबल व्हॅल्यूज रीसेट करणे समाविष्ट आहे | [समाप्ती अट](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML टेम्पलेट्स आणि वेब अॅपमधील रूट्स | रूटिंग आणि HTML टेम्पलेट्स वापरून मल्टीपेज वेबसाइटच्या आर्किटेक्चरचे स्कॅफोल्ड कसे तयार करायचे ते जाणून घ्या | [HTML टेम्पलेट्स आणि रूट्स](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) |लॉगिन आणि नोंदणी फॉर्म तयार करा | फॉर्म तयार करणे आणि व्हॅलिडेशन रूटीन हाताळण्याबद्दल जाणून घ्या | [फॉर्म्स](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | डेटा मिळवण्याच्या आणि वापरण्याच्या पद्धती | तुमच्या अॅपमध्ये डेटा कसा प्रवाहित होतो, तो कसा मिळवायचा, साठवायचा आणि त्याचा निपटारा कसा करायचा | [डेटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | स्टेट मॅनेजमेंटची संकल्पना | तुमचे अॅप स्टेट कसे टिकवते आणि ते प्रोग्रामॅटिकली कसे व्यवस्थापित करायचे ते जाणून घ्या | [स्टेट मॅनेजमेंट](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode सह काम करणे | कोड एडिटर कसा वापरायचा ते जाणून घ्या | [VScode कोड एडिटर वापरा](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI सह काम करणे | तुमचा स्वतःचा AI सहाय्यक कसा तयार करायचा ते जाणून घ्या | [AI सहाय्यक प्रकल्प](./9-chat-project/README.md) | Chris |
## 🏫 अध्यापनशास्त्र
आमचे अभ्यासक्रम दोन प्रमुख अध्यापनशास्त्रीय तत्त्वे लक्षात घेऊन डिझाइन केले गेले आहे:
| | प्रकल्पाचे नाव | शिकवलेली संकल्पना | शिकण्याचे उद्दिष्टे | लिंक केलेला धडा | लेखक |
| 01 | सुरुवात करणे | प्रोग्रामिंगची ओळख आणि साधने | बहुतेक प्रोग्रामिंग भाषांच्या मूलभूत तत्त्वांची आणि व्यावसायिक विकासकांच्या कामात मदत करणाऱ्या सॉफ्टवेअर्सबद्दल शिका | [प्रोग्रामिंग भाषांची आणि साधनांची ओळख](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | सुरुवात करणे | GitHub चे मूलभूत गोष्टी, टीमसह काम करणे | तुमच्या प्रकल्पात GitHub कसे वापरायचे, कोड बेसवर इतरांसोबत सहकार्य कसे करायचे | [GitHub ची ओळख](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | सुरुवात करणे | प्रवेशयोग्यता | वेब प्रवेशयोग्यतेचे मूलभूत तत्त्वे शिका | [प्रवेशयोग्यता मूलभूत गोष्टी](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS मूलतत्त्वे | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारांची मूलभूत माहिती | [डेटा प्रकार](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS मूलतत्त्वे | फंक्शन्स आणि मेथड्स | अॅप्लिकेशनच्या लॉजिक फ्लोचे व्यवस्थापन करण्यासाठी फंक्शन्स आणि मेथड्स विषयी शिका | [फंक्शन्स आणि मेथड्स](./2-js-basics/2-functions-methods/README.md) | Jasmine आणि Christopher |
| 06 | JS मूलतत्त्वे | JS वापरून निर्णय घेणे | निर्णय घेण्याच्या पद्धती वापरून तुमच्या कोडमध्ये परिस्थिती कशी तयार करायची ते शिका | [निर्णय घेणे](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS मूलतत्त्वे | अॅरे आणि लूप्स | JavaScript मध्ये डेटा हाताळण्यासाठी अॅरे आणि लूप्ससह काम करा | [अॅरे आणि लूप्स](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML प्रत्यक्षात कसे वापरायचे | ऑनलाइन टेरियम तयार करण्यासाठी HTML बांधा, लेआउट तयार करण्यावर लक्ष केंद्रित करा | [HTML ची ओळख](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS प्रत्यक्षात कसे वापरायचे | ऑनलाइन टेरियमसाठी CSS स्टाइल करा, CSS च्या मूलभूत गोष्टींसह पान प्रतिसाद देणारे कसे बनवायचे हे शिका | [CSS ची ओळख](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोजर्स, DOM संचार | ड्रॅग/ड्रॉप इंटरफेस तयार करण्यासाठी JavaScript तयार करा, क्लोजर्स आणि DOM संचारावर लक्ष केंद्रित करा | [JavaScript क्लोजर्स, DOM संचार](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [टायपिंग गेम](./4-typing-game/solution/README.md) | टायपिंग गेम बनवा | तुमच्या JavaScript अॅपचा लॉजिक चालवण्यासाठी कीबोर्ड इव्हेंट्स कसे वापरायचे ते शिका | [इव्हेंट-चालित प्रोग्रामिंग](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [ग्रीन ब्राउझर विस्तार](./5-browser-extension/solution/README.md) | ब्राउझरशी काम करणे | ब्राउझर कसे काम करतात, त्यांचा इतिहास काय आहे, आणि ब्राउझर विस्ताराचे पहिले घटक कसे तयार करायचे हे शिका | [ब्राउझर विषयी](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [ग्रीन ब्राउझर विस्तार](./5-browser-extension/solution/README.md) | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक साठवणीत व्हेरिएबल साठवणे | तुमच्या ब्राउझर विस्ताराचे JavaScript घटक API कॉल करण्यासाठी तयार करा, स्थानिक साठवणीत साठवलेल्या व्हेरिएबल्सचा वापर करून | [APIs, फॉर्म आणि स्थानिक साठवण](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [ग्रीन ब्राउझर विस्तार](./5-browser-extension/solution/README.md) | ब्राउझरमधील पार्श्वभूमी प्रक्रिया, वेब कार्यक्षमता | विस्ताराच्या आयकॉनची पार्श्वभूमी प्रक्रिया वापरा; वेब कार्यक्षमता आणि काही सुधारणा याबद्दल शिका | [पार्श्वभूमी कार्ये आणि कार्यक्षमता](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [स्पेस गेम](./6-space-game/solution/README.md) | JavaScript सह अधिक प्रगत गेम विकास | इनहेरिटन्स, क्लासेस आणि कंपोजीशन तसेच Pub/Sub पॅटर्नच्या माध्यमातून शिका, गेम बनवण्याच्या तयारीसाठी | [प्रगत गेम विकासाची ओळख](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [स्पेस गेम](./6-space-game/solution/README.md) | कॅनव्हासवर चित्र काढणे | स्क्रीनवर घटक काढण्यासाठी वापरले जाणारे Canvas API बद्दल शिका | [कॅनव्हासवर चित्र काढणे](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [स्पेस गेम](./6-space-game/solution/README.md) | स्क्रीनवर घटक हलविणे | घटकांना हालचाल मिळविण्यासाठी קर्टेसियन समन्वय आणि Canvas API कसे वापरायचे हे जाणून घ्या | [घटक हलविणे](./6-space-game/3-moving-elements-around/README.md)| Chris |
| 18 | [स्पेस गेम](./6-space-game/solution/README.md) | धडक नियंत्रित करणे | कीप्रेस वापरून घटक एकमेकांना भिडण्यास आणि प्रतिसाद देण्यास तयार करा; गेमच्या कार्यक्षमतेसाठी कूलडाउन फंक्शन पुरवा | [धडक ओळख](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [स्पेस गेम](./6-space-game/solution/README.md) | स्कोअर ठेवणे | गेमच्या स्थिती आणि कार्यक्षमतेवर आधारित गणिते करा | [स्कोअर ठेवणे](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [स्पेस गेम](./6-space-game/solution/README.md) | गेम समाप्त करणे आणि पुनरारंभ करणे | गेम समाप्ती आणि पुनरारंभ कसे करायचे, मालमत्ता साफसफाई आणि व्हेरिएबल मूल्ये रीसेट करणे शिका | [समाप्ती अटी](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [बँकिंग अॅप](./7-bank-project/solution/README.md) | वेब अॅपमध्ये HTML टेम्पलेट्स आणि मार्ग | मार्गदर्शक आणि HTML टेम्पलेट्स वापरून बहुपृष्ठ वेबसाइटची संरचना तयार करणे शिका | [HTML टेम्पलेट्स आणि मार्ग](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [बँकिंग अॅप](./7-bank-project/solution/README.md) | लॉगिन आणि नोंदणी फॉर्म तयार करणे | फॉर्म तयार करणे आणि वैधता तपासणीच्या पद्धतींबद्दल शिका | [फॉर्म्स](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [बँकिंग अॅप](./7-bank-project/solution/README.md) | डेटा प्राप्त करण्याच्या आणि वापरण्याच्या पद्धती | अॅपमध्ये डेटा कसा वाहतो, तो कसा आणायचा, साठवायचा आणि निरुपयोगी कसा करायचा हे शिका | [डेटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [बँकिंग अॅप](./7-bank-project/solution/README.md) | राज्य व्यवस्थापनाची संकल्पना | तुमच्या अॅपमध्ये राज्य कसा राखला जातो आणि त्याचे प्रोग्रामिंगद्वारे व्यवस्थापन कसे करायचे | [राज्य व्यवस्थापन](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ब्राउझर/VScode कोड](../../8-code-editor) | VScode शी काम करणे | कोड संपादक कसा वापरायचा शिका | [VScode कोड संपादक वापरा](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI सहाय्यक](./9-chat-project/README.md) | AI सह काम करणे | तुमचा स्वतःचा AI सहाय्यक कसा तयार करायचा शिका | [AI सहाय्यक प्रकल्प](./9-chat-project/README.md) | Chris |
## 🏫 शिक्षणशास्त्र
आमचे अभ्यासक्रम दोन मुख्य शैक्षणिक तत्त्वांना अनुसरून तयार केला आहे:
* प्रकल्प-आधारित शिक्षण
* वारंवार क्विझ
* वारंवार क्विझ्स
हा कार्यक्रम JavaScript, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकसकांनी वापरलेली नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, वर्च्युअल टेरॅरियम, पर्यावरणपूरक ब्राउझर एक्सटेंशन, स्पेस-इनव्हेडर-शैलीतील गेम आणि व्यवसायांसाठी बँकिंग अॅप तयार करून प्रत्यक्ष अनुभव मिळवण्याची संधी मिळेल. मालिकेच्या शेवटी, विद्यार्थ्यांना वेब डेव्हलपमेंटचे ठोस ज्ञान मिळाले असेल.
हा कार्यक्रम JavaScript, HTML, आणि CSS च्या मूलभूत गोष्टी तसेच आजच्या वेब विकासकांनी वापरलेले नवीनतम साधने आणि तंत्र शिकवतो. विद्यार्थ्यांना टायपिंग गेम, व्हर्चुअल टेरियम, पर्यावरणपूरक ब्राउझर विस्तार, स्पेस-इन्व्हेडर शैलीचा गेम आणि व्यवसायांसाठी बँकिंग अॅप तयार करून प्रत्यक्ष अनुभव घेण्याची संधी मिळेल. मालिकेच्या शेवटी, विद्यार्थ्यांना वेब विकासाचा ठोस समज प्राप्त होतो.
> 🎓 तुम्ही या अभ्यासक्रमातील पहिले काही धडे [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) वर Microsoft Learn वर घेऊ शकता!
> 🎓 तुम्ही या अभ्यासक्रमातील पहिले काही धडे Microsoft Learn वर [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) म्हणून घेऊ शकता!
सामग्री प्रकल्पांशी संरेखित असल्याचे सुनिश्चित करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनवली जाते आणि संकल्पनांचे धारणा वाढवली जाते. आम्ही JavaScript मूलभूत गोष्टींमध्ये काही स्टार्टर धडे देखील लिहिले आहेत, ज्यामध्ये "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" व्हिडिओ ट्यूटोरियलच्या संग्रहातील व्हिडिओ जोडले आहेत, ज्यांचे काही लेखक या अभ्यासक्रमात योगदान देतात.
प्रकल्पांशी सामग्री सुसंगत असल्यामुळे, विद्यार्थ्यांसाठी प्रक्रिया अधिक आकर्षक होते आणि संकल्पनांची जपणूक वाढेल. आम्ही JavaScript मूलतत्त्वांमध्ये अनेक प्रारंभिक धडे लिहिले आहेत जे संकल्पना ओळख करून देतात, एका व्हिडिओसह "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ह्या व्हिडिओ ट्युटोरियल्स मालिकेतील, ज्यातील काही लेखकांनी या अभ्यासक्रमात योगदान दिले आहे.
याव्यतिरिक्त, वर्गापूर्वीचा कमी-जोखीम क्विझ विद्यार्थ्याच्या विषय शिकण्याच्या हेतूची स्थापना करतो, तर वर्गानंतरचा दुसरा क्विझ पुढील धारणा सुनिश्चित करतो. हा अभ्यासक्रम लवचिक आणि मजेदार बनवण्यासाठी डिझाइन केला गेला आहे आणि तो पूर्ण किंवा अंशतः घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी अधिकाधिक जटिल होतात.
शिवाय, वर्गापूर्वीचा कमी-दबावाचा क्विझ विद्यार्थ्यांच्या शिकलोण्यास तयारी दाखवतो, तर वर्गानंतरचा दुसरा क्विझ अधिक चांगली जपणूक सुनिश्चित करतो. हा अभ्यासक्रम लवचिक आणि मनोरंजक असे बनवला आहे आणि पूर्ण किंवा अंशतः गृहीत धरून घेतला जाऊ शकतो. प्रकल्प आधी लहान असतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी जास्त क्लिष्ट होतात.
आम्ही जाणीवपूर्वक JavaScript फ्रेमवर्कची ओळख टाळली आहे जेणेकरून फ्रेमवर्क स्वीकारण्यापूर्वी वेब डेव्हलपर म्हणून आवश्यक असलेल्या मूलभूत कौशल्यांवर लक्ष केंद्रित करता येईल, या अभ्यासक्रमाचे पूर्ण होणे हा Node.js बद्दल शिकण्याचा एक चांगला पुढचा टप्पा असेल, आणखी एका व्हिडिओ संग्रहाद्वारे: "[Beginner Series to: 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) मार्गदर्शक तत्त्वांना भेट द्या. आम्ही तुमच्या रचनात्मक अभिप्रायाचे स्वागत करतो!
तपासणीसाठी, JavaScript फ्रेमवर्क्सचा परीचय देणे टाळण्यात आले आहे, जेणेकरून वेब विकासक म्हणून मूलभूत कौशल्ये आधी विकसित केली जावीत; हा अभ्यासक्रम पूर्ण करण्याचा चांगला पुढचा टप्पा म्हणजे Node.js विषयी शिकणे, दुसऱ्या व्हिडिओ संग्रहाद्वारे: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> आमच्या [आचारसंहिते](CODE_OF_CONDUCT.md) आणि [योगदान](CONTRIBUTING.md) मार्गदर्शकांचे दर्शन घ्या. आम्ही तुमच्या रचनात्मक अभिप्रायाचे स्वागत करतो!
## 🧭 ऑफलाइन प्रवेश
तुम्ही [Docsify](https://docsify.js.org/#/) वापरून ही दस्तऐवज ऑफलाइन चालवू शकता. या रेपोला फोर्क करा, तुमच्या स्थानिक मशीनवर [Docsify स्थापित करा](https://docsify.js.org/#/quickstart), आणि नंतर या रेपोच्या रूट फोल्डरमध्ये `docsify serve` टाइप करा. वेबसाइट तुमच्या लोकलहोस्टवर पोर्ट 3000 वर सर्व्ह केली जाईल: `localhost:3000`.
[Docsify](https://docsify.js.org/#/) वापरून तुम्ही हा दस्तऐवज ऑफलाइन चालवू शकता. हा रेपो फोर्क करा, तुमच्या स्थानिक मशीनवर [Docsify इंस्टॉल](https://docsify.js.org/#/quickstart) करा, आणि मग या रेपोजच्या मुळ फोल्डरमध्ये `docsify serve` टाइप करा. वेबसाइट पोर्ट 3000 वर तुमच्या लोकलहोस्टवर सर्व्ह केली जाईल: `localhost:3000`.
## 📘 PDF
सर्व धड्यांचा PDF [येथे](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) सापडेल.
सर्व धड्यांचा PDF [येथे](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) उपलब्ध आहे.
## 🎒 इतर अभ्यासक्रम
आमची टीम इतर अभ्यासक्रम तयार करते! पहा:
## 🎒 अन्य कोर्सेस
आमच्या टीमकडून आणखी कोर्सेस तयार केले जातात! पहा:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### जनरेटिव AI मालिका
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### मुख्य शिक्षण
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Generative AI Series
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### कोपायलट मालिका
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
जर तुम्हाला अडचण आली किंवा AI अॅप्स तयार करताना काही प्रश्न असतील, तर MCP बद्दल चर्चा करण्यासाठी शिकणारे आणि अनुभवी विकसकांसोबत सामील व्हा. ही एक सहायक समुदाय आहे जिथे प्रश्न विचारले जातात आणि ज्ञान मुक्तपणे सामायिक केले जाते.
जर तुम्हाला अडचण आली किंवा AI अॅप तयार करताना काही प्रश्न असतील, तर MCP संदर्भातील चर्चा करण्यासाठी सहकारी शिकणारे आणि अनुभवी विकासकांमध्ये सामील व्हा. हे एक समर्थन करणारे समुदाय आहे जिथे प्रश्नांना स्वागत आहे आणि ज्ञान मोकळेपणाने सामायिक केले जाते.
या रिपॉझिटरीला MIT परवान्याखाली परवानगी दिली आहे. अधिक माहितीसाठी [LICENSE](../../LICENSE) फाइल पहा.
ही संचिका MIT परवान्याखाली परवानगी दिलेली आहे. अधिक माहितीसाठी [LICENSE](../../LICENSE) फाइल पहा.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
हा दस्तऐवज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) चा वापर करून अनुवादित केला आहे. आम्ही अचूकतेसाठी प्रयत्न करतो, तरी कृपया लक्षात ठेवा की स्वयंचलित अनुवादांमध्ये चुका किंवा अचूकतेचा अभाव असू शकतो. मूळ दस्तऐवज त्याच्या नैसर्गिक भाषेत अधिकृत स्रोत मानला पाहिजे. महत्वाच्या माहितीच्या बाबतीत व्यावसायिक मानवी अनुवाद शिफारसीय आहे. या अनुवादाच्या वापरामुळे उद्भवणाऱ्या कोणत्याही गैरसमजुतीसाठी किंवा चुका हेसाठी आम्ही जबाबदार नाही.
आज, हामी ती अद्भुत उपकरणहरूको अन्वेषण गर्नेछौं जसले आधुनिक वेब विकासलाई सम्भव मात्र होइन, गम्भीर रूपमा लत लाग्ने बनाउँछ। म त्यही सम्पादकहरू, ब्राउजरहरू, र वर्कफ्लोहरूको कुरा गर्दैछु जुन नेटफ्लिक्स, स्पोटिफाई, र तपाईंको मनपर्ने इन्डी एप स्टुडियोका डेभलपरहरूले हरेक दिन प्रयोग गर्छन्। र यहाँ तपाईंलाई खुशीको नाच गर्न बनाउने भाग छ: यी पेशेवर-ग्रेड, उद्योग-मानक उपकरणहरूको अधिकांश पूर्ण रूपमा निःशुल्क छन्!
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
```mermaid
@ -594,7 +594,7 @@ flowchart TD
✅ 'सुरुवाती-अनुकूल' रिपोजिटरीहरू खोज्नको लागि [ट्याग 'good-first-issue' द्वारा खोज्नुहोस्](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
कोड प्रतिलिपि गर्ने धेरै तरिकाहरू छन्। एउटा तरिका भनेको रिपोजिटरीको सामग्री "क्लोन" गर्नु हो, HTTPS, SSH, वा GitHub CLI (कमाण्ड लाइन इन्टरफेस) प्रयोग गरेर।
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, HTML ले सबै कुरा सम्भव बनाउने आवश्यक संरचना प्रदान गर्दछ।
@ -88,7 +88,7 @@ HTML कोडमा प्रवेश गर्नु अघि, तपाई
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहुन्छ? CSS ले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउने काम गर्छ।
@ -205,7 +205,7 @@ body {
तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `<h1>` तत्व निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले शरीरबाट फन्ट परिवार इनहेरिट गर्छ:
✅ **प्रयोग समय**: `<body>` मा `color`, `line-height`, वा `text-align` जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य तत्वहरूमा के हुन्छ?
@ -564,7 +564,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले ग्लास रिफ्लेक्सनलाई नक्कल गर्छ। यो प्रविधि Renaissance चित्रकारहरू जस्तै Jan van Eyck ले चित्रित ग्लासलाई तीन-आयामीय देखाउन प्रकाश र रिफ्लेक्सन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नुहुनेछ:
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
वेब विकासको सबैभन्दा रोचक पक्षमा स्वागत छ - चीजहरूलाई अन्तरक्रियात्मक बनाउने! डकुमेन्ट अब्जेक्ट मोडेल (DOM) तपाईंको HTML र जाभास्क्रिप्ट बीचको पुल जस्तै हो, र आज हामी यसलाई तपाईंको टेरारियमलाई जीवन्त बनाउन प्रयोग गर्नेछौं। जब टिम बर्नर्स-लीले पहिलो वेब ब्राउजर बनाएका थिए, उनले वेबलाई गतिशील र अन्तरक्रियात्मक बनाउन सक्ने दस्तावेजहरूको कल्पना गरेका थिए - DOM ले त्यो दृष्टिकोणलाई सम्भव बनाउँछ।
> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
@ -150,7 +150,7 @@ flowchart LR
> 💡 **क्लोजर बुझ्दै**: क्लोजरहरू जाभास्क्रिप्टमा महत्त्वपूर्ण विषय हुन्, र धेरै विकासकर्ताहरूले तिनीहरूलाई पूर्ण रूपमा सैद्धान्तिक पक्षहरू बुझ्नुअघि वर्षौंसम्म प्रयोग गर्छन्। आज, हामी व्यावहारिक अनुप्रयोगमा केन्द्रित छौं - तपाईंले अन्तरक्रियात्मक सुविधाहरू निर्माण गर्दा क्लोजरहरू स्वाभाविक रूपमा देखा पर्ने देख्नुहुनेछ। बुझाइ वास्तविक समस्याहरू समाधान गर्ने तरिकामा देखेर विकास हुनेछ।
> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
@ -556,7 +556,7 @@ function stopElementDrag() {
- **क्रस-डिभाइस समर्थन**: डेस्कटप र मोबाइलमा काम गर्छ
- **प्रदर्शन सचेत**: कुनै मेमोरी लीक वा अनावश्यक गणनाहरू छैनन्
# मेरो टेरारियम: HTML, CSS, र DOM म्यानिपुलेसन सिक्नका लागि एक प्रोजेक्ट 🌵🌱
## तपाइँको टेरारियम डिप्लोय गर्नुहोस्
सानो ड्र्याग र ड्रप कोड-मेडिटेसन। थोरै HTML, JS, र CSS प्रयोग गरेर तपाईं वेब इन्टरफेस बनाउन, यसलाई स्टाइल गर्न, र आफ्नो रोजाइका विभिन्न अन्तरक्रियाहरू थप्न सक्षम हुनुहुनेछ।
तपाइँ आफ्नो टेरारियमलाई वेबमा **Azure Static Web Apps** प्रयोग गरेर डिप्लोय वा प्रकाशन गर्न सक्नुहुन्छ।
3. [DOM र JS क्लोजरहरूको परिचय](./3-intro-to-DOM-and-closures/README.md)
[](https://portal.azure.com/#create/Microsoft.StaticApp)
## श्रेय
3. तपाइँको एप बनाउन सेटअप विजार्ड पछ्याउनुहोस्।
- **App root** लाई `/solution` वा तपाइँको कोडबेसको मूल ठेगानामा सेट गर्नुहोस्।
- यस एपमा कुनै API छैन, त्यसैले API कन्फिगरेसन छोड्न सकिन्छ।
- Azure Static Web Apps ले तपाइँको एप निर्माण र प्रकाशन गर्नमा सहयोग गर्न `.github` फोल्डर स्वचालित रूपमा सिर्जना गरिनेछ।
♥️ का साथ लेखिएको [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. यो रिपोजिटरी फोर्क गर्नुहोस्
2. यो बटन थिच्नुहोस्
[](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 मा बिल्ड र प्रकाशित गर्न मद्दत गर्नेछ।
**अस्वीकरण**:
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) को प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको प्रयास गर्छौं, तर कृपया जानकार हुनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छन्। मूल दस्तावेज यसको आफ्नै भाषामा प्रामाणिक स्रोत मानिनेछ। महत्वपूर्ण जानकारीको लागि व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याहरूको लागि हामी जिम्मेवार छैनौं।
> केही प्रारम्भिक ब्राउजरहरू, [करेन म्याकग्रेन](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) मार्फत
### ब्राउजरहरूले वेब सामग्री कसरी प्रक्रिया गर्छन्
@ -198,7 +198,7 @@ quadrantChart
एक्सटेन्सन स्थापना प्रक्रिया बुझ्नाले तपाईंलाई प्रयोगकर्ताहरूले तपाईंको एक्सटेन्सन स्थापना गर्दा अनुभव गर्ने कुराको पूर्वानुमान गर्न मद्दत गर्छ। स्थापना प्रक्रिया आधुनिक ब्राउजरहरूमा मानकीकृत छ, इन्टरफेस डिजाइनमा साना भिन्नताहरूका साथ।
> **महत्वपूर्ण**: आफ्नो एक्सटेन्सन परीक्षण गर्दा डेभलपर मोड अन गर्नुहोस् र अन्य स्टोरहरूबाट एक्सटेन्सनहरू अनुमति दिन सुनिश्चित गर्नुहोस्।
@ -313,10 +313,10 @@ project-root/
### एक्सटेन्सन दृश्यहरूको अवलोकन
**सेटअप दृश्य** - पहिलो पटक प्रयोगकर्ता कन्फिगरेसन:
**परिणाम दृश्य** - कार्बन फुटप्रिन्ट डेटा प्रदर्शन:
> ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणपत्रहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ।
यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्दछ) र 'रिकर्ड' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयमा के भइरहेको छ र कहिले भइरहेको छ भन्ने डेटा प्राप्त हुन्छ।
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा थप विवरणहरू छन् यदि तपाईं गहिराइमा जान चाहनुहुन्छ भने।
@ -136,11 +136,11 @@ flowchart LR
प्रोफाइल टाइमलाइनको एक भाग चयन गरेर र सारांश प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:
✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै पनि बाधाहरू छन् कि छैनन् हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति के हो? सबैभन्दा छिटो?
tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भार कस्तो छ भनेर ब्राउजरमै सम्झना दिलाउन सक्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रम्प्टमा 'dist' फोल्डर खोल्नुहोस् र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal को API को लागि API key ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) सँग सम्बन्धित [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) चाहिन्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
एक पटक API key र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्स्टेन्सन बारमा रहेको रङ्गीन डटले तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन गर्नेछ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको लागि उपयुक्त सल्लाह दिनेछ। यो 'डट' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।
tmrow को C02 Signal API प्रयोग गरेर बिजुली खपत ट्र्याक गर्दै, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली खपतको बारेमा सिधै ब्राउजरमा सम्झना दिन्छ। यो विशेष एक्स्टेन्सनको प्रयोगले तपाईंलाई यी जानकारीहरूको आधारमा तपाईंको गतिविधिहरूको बारेमा निर्णय लिन मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनजिप्ड एक्स्टेन्सन' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बाकसमा तपाईंको ईमेल प्रविष्ट गर्नुहोस्) र तपाईंको क्षेत्रको लागि [कोड](http://api.electricitymap.org/v3/zones) जुन [बिजुलीको नक्सा](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
एक पटक API की र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्स्टेन्सन बारमा रहेको रङ्गीन बिन्दु तपाईंको क्षेत्रको ऊर्जा खपतलाई प्रतिबिम्बित गर्न परिवर्तन हुनुपर्छ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको बारेमा संकेत दिनुपर्छ जुन तपाईंले गर्न उपयुक्त ठान्न सक्नुहुन्छ। यो 'बिन्दु' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाका उत्सर्जनहरूको लागि प्रेरित भएको हो।
tmrow को CO2 सिग्नल एपीआई प्रयोग गरेर बिजुलीको उपयोग ट्र्याक गर्ने ब्राउज़र एक्सटेंशन बनाउनुहोस्, जसले तपाईंलाई तपाईंको क्षेत्रको बिजुलीको उपयोग कत्तिको भारी छ भनेर रिमाइन्डर दिन्छ। यो एक्सटेंशन प्रयोग गर्दा, तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूमा निर्णय लिन सक्नुहुन्छ।
एज ब्राउज़रमा इन्स्टल गर्न, ब्राउज़रको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर एक्सटेंशन प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनप्याक्ड' विकल्प छान्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्सटेंशन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नलको एपीआई ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2snal.com/) - यो पृष्ठमा आफ्नो ईमेल बक्समा प्रविष्ट गर्नुहोस्) र [आफ्नो क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) बाट आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
एक पटक एपीआई कुंजी र क्षेत्र एक्सटेंशन इन्टरफेसमा इनपुट गरेपछि, ब्राउज़र एक्सटेंशन बारमा रहेको रंगीन डटले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नुपर्छ र तपाईंलाई संकेत दिनुपर्छ कि ऊर्जा-गहन गतिविधिहरू तपाईंको प्रदर्शनका लागि उपयुक्त छन् कि छैनन्। यो 'डट' प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनका लागि [एनर्जी लॉलीपप एक्सटेंशन](https://energylollipop.com/) बाट प्रेरित भएको हो।
tmrow को Signal C02 API प्रयोग गरेर आफ्नो क्षेत्रको विद्युत उपयोगको निगरानी गर्न ब्राउजर एक्सटेन्सन बनाइनेछ। यसले तपाईंको ब्राउजरमा सिधै स्मरण गराउने सुविधा दिनेछ कि तपाईंको क्षेत्रको विद्युत उपयोग कति भारी छ। यो विशेष एक्सटेन्सन प्रयोग गर्दा तपाईं आफ्नो गतिविधिहरूलाई यी जानकारीको आधारमा मूल्याङ्कन गर्न सक्नुहुन्छ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको "तीन बिन्दु" मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। यदि सक्रिय छैन भने, डेभलपर मोड (तल बायाँ) सक्रिय गर्नुहोस्। "अनप्याक्ड लोड" चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। प्रम्प्टमा "dist" फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। प्रयोग गर्नका लागि, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ (तपाईं [यहाँ इमेल मार्फत प्राप्त गर्न सक्नुहुन्छ](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा राख्नुहोस्) र [म्याप इलेक्ट्रिसिटी](https://www.electricitymap.org/map) अनुसार आफ्नो क्षेत्रको [कोड](http://api.electricitymap.org/v3/zones) (उदाहरणका लागि, बोस्टनमा "US-NEISO")।
एकपटक API की र क्षेत्र एक्सटेन्सनको इन्टरफेसमा राखेपछि, ब्राउजरको एक्सटेन्सन बारमा रहेको रंगीन बिन्दु क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ। यसले उच्च ऊर्जा खपत गतिविधिहरूको उपयुक्तता बारे संकेत दिनेछ। यो "बिन्दु" प्रणालीको अवधारणा [Energy Lollipop एक्सटेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।
tmrow को C02 सिग्नल API प्रयोग गरेर तपाईंको क्षेत्रको विद्युत उपयोगको मात्रा ट्र्याक गर्नका लागि ब्राउजरमा रिमाइन्डरको रूपमा देखाउन सकिने ब्राउजर एक्सटेन्सन निर्माण गर्नुहोस्। यो एक्सटेन्सनलाई प्रयोग गरेर, तपाईं आफ्नो गतिविधि यस जानकारीको आधारमा निर्णय गर्न सक्नुहुन्छ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको "तीन डट" मेनुबाट "Extensions" प्यानल खोज्नुहोस्। त्यहाँबाट "Load Unpacked" चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। प्रम्प्टमा "dist" फोल्डर खोल्दा एक्सटेन्सन लोड हुनेछ। प्रयोग गर्नका लागि, CO2 सिग्नल API को API की ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पेजको बक्समा इमेल प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) मा तपाईंको क्षेत्रको [code](http://api.electricitymap.org/v3/zones) आवश्यक छ (उदाहरणका लागि, बोस्टनमा 'US-NEISO' प्रयोग गरिन्छ)।
API की र क्षेत्र विस्तार इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्सटेन्सन बारमा देखिने रंगीन डट परिवर्तन हुनेछ, जसले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नेछ। यसले तपाईंलाई कुन प्रकारको ऊर्जा आवश्यक पर्ने गतिविधि गर्न उपयुक्त छ भनेर संकेत गर्नेछ। यो "डट" प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनको लागि [Energy Lollipop extension](https://energylollipop.com/) बाट प्रेरित गरेको हो।
C02 सिग्नल API प्रयोग गरेर विद्युत प्रयोगको निगरानी गर्न, ब्राउजर एक्सटेन्सन बनाउनुहोस् ताकि तपाईं आफ्नो क्षेत्रको विद्युत प्रयोगको गम्भीरता बारे ब्राउजरमा चेतावनी प्राप्त गर्न सक्नुहुन्छ। यो एक्सटेन्सन प्रयोग गर्दा तपाईंलाई यो जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय गर्न मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको दायाँ माथिको कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। अनुरोधमा 'dist' फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नल API को लागि API किज चाहिन्छ ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बक्समा आफ्नो इमेल राख्नुहोस्) र [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) जुन [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, मैले 'US-NEISO' प्रयोग गरेको छु)।
API किज र क्षेत्र एक्सटेन्सनको इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्सटेन्सन बारमा रहेको रंगीन बिन्दु तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ र तपाईंलाई उपयुक्त गतिविधिहरूको सिफारिस दिनेछ। 'डट' प्रणालीको अवधारणा मलाई [क्यालिफोर्नियाको लागि एनर्जी ललिपप ब्राउजर एक्सटेन्सन](https://energylollipop.com/) बाट प्रेरित गरिएको हो।
tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भारबारे ब्राउजरमै सम्झना दिन्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रम्प्टमा 'dist' फोल्डर खोल्नुहोस् र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal को API को लागि API key ([यहाँ इमेलमार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) सँग सम्बन्धित [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा म 'US-NEISO' प्रयोग गर्छु)।
एक पटक API key र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्स्टेन्सन बारमा रहेको रङ्गीन डटले तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन गर्नेछ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको लागि उपयुक्त सल्लाह दिनेछ। यो 'डट' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।
- **स्कोरिङ प्रणाली**: प्रत्येक नष्ट गरिएको शत्रु जहाजले १०० पोइन्ट्स प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ।
- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ।
- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ।
`history.pushState` प्रयोग गरेर ब्राउजरको नेभिगेसन history मा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *back button* थिचेर जाँच गर्न सक्नुहुन्छ, यसले केही यस्तो देखाउनु पर्छ:
यदि तपाईं back बटन केही पटक क्लिक गर्नुहुन्छ भने, तपाईं देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र history अपडेट हुन्छ, तर उही template प्रदर्शन भइरहन्छ।
3. **प्रयोगकर्ता नाम फिल्डमा विशेष क्यारेक्टरहरू प्रयास गर्नुहोस्**
4. **नकारात्मक ब्यालेन्स रकम प्रविष्ट गर्नुहोस्**
**तपाईंले के अवलोकन गर्नुहुन्छ:**
- **ब्राउजरले** देशी मान्यता सन्देशहरू देखाउँछ
@ -867,7 +867,7 @@ timeline
थप शैलीहरू थपेपछि अन्तिम लगइन पृष्ठ कस्तो देखिन सक्छ भन्ने उदाहरण यहाँ छ:
- केवल वास्तवमा परिवर्तन भएका भागहरू अपडेट हुन्छन् (स्मार्ट, हैन?)
@ -510,7 +510,7 @@ if (data.error) {
अब जब तपाईंले अमान्य खाता प्रयोग गरेर परीक्षण गर्नुहुन्छ, तपाईंले पृष्ठमा नै उपयोगी त्रुटि सन्देश देख्नुहुनेछ!
#### चरण 4: पहुँचयोग्यताको साथ समावेशी बन्नुहोस्
@ -902,7 +902,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
यहाँ स्टाइलिङ पछि ड्यासबोर्डको उदाहरण परिणाम कस्तो देखिन्छ:
यसलाई ठ्याक्कै मेल गर्नुपर्छ भन्ने महसुस नगर्नुहोस् - यसलाई प्रेरणाको रूपमा प्रयोग गर्नुहोस् र यसलाई आफ्नो बनाउनुहोस्!
हामी हाम्रो टाउको घुमाउने सट्टा, **केन्द्रीयकृत स्टेट म्यानेजमेन्ट** प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मामा एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्:
यो असाइनमेन्ट पूरा गरेपछि, तपाईंको बैंकिङ एपमा पूर्ण रूपमा कार्यात्मक "ट्रान्जेक्सन थप्नुहोस्" सुविधा हुनेछ जसले व्यावसायिक रूपमा देखिन्छ र व्यवहार गर्दछ:
यस परियोजनामा, तपाईंले एक काल्पनिक बैंक कसरी निर्माण गर्ने भनेर सिक्नुहुनेछ। यी पाठहरूले वेब एपको लेआउट कसरी बनाउने र रुटहरू प्रदान गर्ने, फारमहरू निर्माण गर्ने, स्टेट व्यवस्थापन गर्ने, र API बाट डेटा कसरी ल्याउने भन्ने निर्देशनहरू समावेश गर्दछ, जसबाट तपाईं बैंकको डेटा प्राप्त गर्न सक्नुहुन्छ।
@ -185,7 +185,7 @@ VSCode.dev यी क्षमताहरूलाई तपाईंको ब
सबै कुरा लोड भएपछि, तपाईंले एक सुन्दर रूपमा सफा कार्यक्षेत्र देख्नुहुनेछ जुन तपाईंलाई महत्त्वपूर्ण कुरामा केन्द्रित राख्न डिजाइन गरिएको छ – तपाईंको कोड!
- फाइल उद्देश्य संकेत गर्ने वर्णनात्मक नामहरू प्रयोग गर्नुहोस्
@ -322,7 +322,7 @@ flowchart TB
2. टाइप गर्न सुरु गर्नुहोस् र VSCode.dev ले तपाईंलाई रंग, सुझाव, र त्रुटि स्पटिङको साथ मद्दत गरेको हेर्नुहोस्
3. Ctrl+S (Windows/Linux) वा Cmd+S (Mac) सँग आफ्नो काम बचत गर्नुहोस् – यद्यपि यसले स्वचालित रूपमा पनि बचत गर्दछ!
**कोड गर्दा हुने चाखलाग्दो कुराहरू:**
- तपाईंको कोड सु
@ -392,7 +392,7 @@ Extension Marketplace धेरै राम्रोसँग व्यवस
2. वरिपरि ब्राउज गर्नुहोस् वा केही विशेष खोज्नुहोस्
3. चासो लाग्ने कुनै पनि कुरामा क्लिक गरेर थप जानकारी प्राप्त गर्नुहोस्
@ -78,7 +78,7 @@ VSCode.dev लाई रिपोजिटरी खोल्न कम्ति
4. कमिट सन्देश लेख्नुहोस्: "Add initial HTML structure"
5. "Commit new file" क्लिक गरेर परिवर्तनहरू सुरक्षित गर्नुहोस्
**यो आरम्भिक सेटअपले के पूरा गर्दछ:**
- HTML5 कागजात संरचना सेम्यान्टिक तत्वहरूसँग स्थापना गर्दछ
@ -104,7 +104,7 @@ VSCode.dev लाई रिपोजिटरी खोल्न कम्ति
✅ **सफलता संकेतक**: तपाईंले आफ्नो परियोजना फाइलहरू Explorer साइडबारमा देख्नुहुनेछ र `index.html` मुख्य सम्पादक क्षेत्रमा सम्पादनको लागि उपलब्ध हुनेछ।
**इन्टरफेसमा तपाईंले के देख्नुहुनेछ:**
- **Explorer साइडबार**: **तपाईंको रिपोजिटरी फाइलहरू र फोल्डर संरचना देखाउँछ**
@ -448,7 +448,7 @@ li:before {
**स्थापनापछि तत्काल परिणामहरू:**
CodeSwing स्थापना भएपछि, तपाईंले आफ्नो रिजुम वेबसाइटको लाइभ पूर्वावलोकन सम्पादकमा देख्नुहुनेछ। यसले तपाईंलाई परिवर्तनहरू गर्दा तपाईंको साइट कस्तो देखिन्छ भन्ने देख्न अनुमति दिन्छ।
## 🗺️ एआई अनुप्रयोग विकासको माध्यमबाट तपाईंको सिक्ने यात्रा
@ -1628,14 +1628,14 @@ mindmap
- **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)** मा जानुहोस्
- **शीर्ष-दायाँ कुनामा "Use this template" क्लिक गर्नुहोस्** (पक्का गर्नुहोस् कि तपाईं GitHub मा लगइन हुनुहुन्छ)
**चरण २: Codespaces सुरु गर्नुहोस्**
- **तपाईंको नयाँ सिर्जित रिपोजिटरी खोल्नुहोस्**
- **हरियो "Code" बटन क्लिक गर्नुहोस् र "Codespaces" चयन गर्नुहोस्**
- **"Create codespace on main" चयन गर्नुहोस्** ताकि तपाईंको विकास वातावरण सुरु होस्
माइक्रोसफ्ट क्लाउड एड्भोकेट्सद्वारा तयार गरिएको १२ हप्ताको व्यापक पाठ्यक्रम मार्फत वेब विकासको आधारभूत कुराहरू सिक्नुहोस्। प्रत्येक २४ पाठले जाभास्क्रिप्ट, CSS, र HTML मा व्यावहारिक परियोजनाहरू जस्तै टेरारियम, ब्राउजर एक्सटेन्सन, र स्पेस गेमहरू मार्फत गहिरो जानकारी दिन्छ। क्विज, छलफल, र व्यावहारिक असाइनमेन्टहरूमा संलग्न हुनुहोस्। हाम्रो प्रभावकारी परियोजना-आधारित शिक्षण विधि प्रयोग गरेर आफ्नो सीप सुधार गर्नुहोस् र ज्ञानको स्थायित्वलाई अनुकूल बनाउनुहोस्। आजै आफ्नो कोडिङ यात्रा सुरु गर्नुहोस्!
Microsoft Cloud Advocates द्वारा हाम्रो १२ हप्ताको व्यापक कोर्ससँग वेब विकासका आधारहरू जान्नुहोस्। २४ पाठहरू मध्ये प्रत्येकले JavaScript, CSS, र HTML मा हातेमालो परियोजनाहरू जस्तै टेरारियम, ब्राउजर एक्सटेन्शन, र स्पेस खेलहरू मार्फत बुझाइ गहिरो बनाउँछ। क्विजहरू, छलफलहरू, र व्यावहारिक असाइन्मेन्टहरूमा संलग्न हुनुहोस्। हाम्रो प्रभावकारी परियोजना-आधारित शिक्षणशैलीबाट तपाईंका सीपहरू सुधार गर्नुहोस् र ज्ञानलाई अधिकतम बनाउन सक्नुहोस्। आजै तपाईंको कोडिङ यात्रा सुरु गर्नुहोस्!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> यसले तपाईंलाई कोर्स पूरा गर्न आवश्यक सबै कुरा धेरै छिटो डाउनलोड संग दिन्छ।
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**यदि तपाईं थप भाषाहरूको अनुवाद चाहनुहुन्छ भने यहाँ सूचीबद्ध छन् [यहाँ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**यदि तपाईंलाई थप अनुवाद भाषाहरू आवश्यक छ भने तिनीहरूलाई यहाँ [list](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) मा हेर्न सक्नुहुन्छ**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _के तपाईं विद्यार्थी हुनुहुन्छ?_
[**Student Hub पृष्ठ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) मा जानुहोस् जहाँ तपाईंलाई शुरुवात स्रोतहरू, विद्यार्थी प्याकहरू र नि:शुल्क प्रमाणपत्र भौचर प्राप्त गर्ने तरिकाहरू भेट्न सक्नुहुन्छ। यो पृष्ठलाई बुकमार्क गर्नुहोस् र समय-समयमा जाँच गर्नुहोस् किनभने हामी मासिक रूपमा सामग्री परिवर्तन गर्छौं।
[**Student Hub पृष्ठ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) मा जानुहोस् जहाँ तपाईं प्रारम्भिक स्रोतहरू, विद्यार्थी प्याक र निःशुल्क प्रमाणपत्र भाउचर प्राप्त गर्ने तरिका पाउनुहुनेछ। यो पृष्ठ तपाईंले बुकमार्क गर्न र कहिलेकाहीं जाँच गर्न चाहनुहुन्छ किनभने हामी मासिक सामग्री अद्यावधिक गर्छौं।
### 📣 घोषणा - नयाँ GitHub Copilot Agent मोड चुनौतीहरू पूरा गर्न!
नयाँ चुनौती थपिएको छ, अधिकांश अध्यायहरूमा "GitHub Copilot Agent Challenge 🚀" खोज्नुहोस्। यो नयाँ चुनौती हो जुन तपाईंले GitHub Copilot र Agent मोड प्रयोग गरेर पूरा गर्न सक्नुहुन्छ। यदि तपाईंले पहिले Agent मोड प्रयोग गर्नुभएको छैन भने यो केवल टेक्स्ट उत्पन्न गर्न मात्र होइन, फाइलहरू सिर्जना र सम्पादन गर्न, कमाण्डहरू चलाउन र थप गर्न सक्षम छ।
नयाँ चुनौती थपियो, धेरै अध्यायहरूमा "GitHub Copilot Agent Challenge 🚀" खोज्नुहोस्। यो नयाँ चुनौती हो जुन तपाईंले GitHub Copilot र Agent मोड प्रयोग गरेर पूरा गर्न सक्नुहुन्छ। यदि तपाईंले पहिले Agent मोड प्रयोग गर्नुभएन भने, यो केवल टेक्स्ट मात्र उत्पन्न गर्दैन, फाइलहरू सिर्जना र सम्पादन गर्न, कमाण्ड चलाउन र थप गर्न सक्षम छ।
### 📣 घोषणा - _Generative AI प्रयोग गरेर नयाँ परियोजना निर्माण गर्नुहोस्_
### 📣 घोषणा - _नयाँ परियोजना जनरेटिभ AI प्रयोग गरेर बनाउन_
नयाँ AI सहायक परियोजना हालै थपिएको छ, यसलाई जाँच गर्नुहोस् [project](./09-chat-project/README.md)
नयाँ AI सहायक परियोजना थपियो, यहाँ जाँच गर्नुहोस् [project](./9-chat-project/README.md)
### 📣 घोषणा - _Generative AI को नयाँ पाठ्यक्रम_ JavaScript को लागि हालै जारी गरिएको छ
### 📣 घोषणा - _नयाँ पाठ्यक्रम_ JavaScript का लागि जनरेटिभ AI मा जारी भयो
हाम्रो नयाँ Generative AI पाठ्यक्रम नछुटाउनुहोस्!
हाम्रो नयाँ जनरेटिभ AI पाठ्यक्रम नछुटाउनुहोस्!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस् र सुरु गर्नुहोस्!
- चुनौतीहरू जसले तपाईंलाई निम्न विषयहरू सिक्न मार्गदर्शन गर्छ:
- प्रम्प्टिङ र प्रम्प्ट इन्जिनियरिङ
- टेक्स्ट र इमेज एप निर्माण
- सर्च एप्स
प्रत्येक पाठमा असाइन्मेन्ट पूरा गर्ने, ज्ञान जाँच गर्ने र चुनौतीहरू छन् जसले तपाईंलाई यी विषयहरू सिक्न मार्गनिर्देशन गर्छन्:
- प्रॉम्प्टिङ र प्रॉम्प्ट इन्जिनियरिङ
- टेक्स्ट र छवि एप उत्पादन
- खोज एपहरू
शुरू गर्न [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) भ्रमण गर्नुहोस्!
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस् र सुरु गर्नुहोस्!
## 🌱 सुरु गर्दै
> **शिक्षकहरू**, हामीले [केही सुझावहरू समावेश गरेका छौं](for-teachers.md) यो पाठ्यक्रम कसरी प्रयोग गर्ने। हाम्रो [चर्चा फोरममा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) तपाईंको प्रतिक्रिया चाहन्छौं!
## 🌱 सुरूवात
**[शिक्षार्थीहरू](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, प्रत्येक पाठको लागि, प्रि-लेक्चर क्विजबाट सुरु गर्नुहोस् र लेक्चर सामग्री पढ्दै, विभिन्न गतिविधिहरू पूरा गर्दै र पोस्ट-लेक्चर क्विजको साथ आफ्नो बुझाइ जाँच गर्दै अगाडि बढ्नुहोस्।
> **शिक्षकहरू**, हामीले [शिक्षकहरूका लागि केही सुझावहरू](for-teachers.md) समावेश गरेका छौं यस पाठ्यक्रम प्रयोग गर्ने तरिका बारे। तपाईंहरूको प्रतिक्रिया पाउँदा हामी खुशी हुनेछौं [हाम्रो छलफल मञ्चमा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
तपाईंको सिकाइ अनुभवलाई सुधार गर्न, परियोजनाहरूमा सँगै काम गर्नका लागि आफ्नो साथीहरूसँग जडान गर्नुहोस्! हाम्रो [चर्चा फोरममा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) छलफललाई प्रोत्साहित गरिन्छ जहाँ हाम्रो मोडरेटरहरूको टोली तपाईंको प्रश्नहरूको उत्तर दिन उपलब्ध हुनेछ।
**[शिक्षार्थीहरू](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, हरेक पाठका लागि, पूर्व-व्याख्यान क्विजबाट सुरू गर्नुहोस् र व्याख्यान सामग्री पढ्न, विभिन्न गतिविधिहरू पूरा गर्न र पश्चात-व्याख्यान क्विजबाट आफ्नो बुझाइ जाँच गर्न जारी राख्नुहोस्।
तपाईंको शिक्षा अगाडि बढाउन, हामी [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) मा थप अध्ययन सामग्री अन्वेषण गर्न अत्यधिक सिफारिस गर्छौं।
तपाईंको शिक्षण अनुभव सुधार गर्नका लागि, आफ्ना साथीहरू सँग मिलेर परियोजनामा काम गर्न जडान हुनुहोस्! छलफलहरू हाम्रो [छलफल मञ्चमा](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) प्रोत्साहित गरिन्छ जहाँ हाम्रो मोडरेटर टिम तपाईंका प्रश्नहरूको जवाफ दिन उपलब्ध हुन्छ।
### 📋 आफ्नो वातावरण सेटअप गर्दै
तपाईंको शिक्षालाई अझ अघि बढाउन, थप अध्ययन सामग्रीहरूको लागि हामी तपाईंलाई [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) अन्वेषण गर्न अत्यन्त सिफारिश गर्दछौं।
यो पाठ्यक्रमसँग विकास वातावरण तयार छ! सुरु गर्दा तपाईं [Codespace](https://github.com/features/codespaces/) (_ब्राउजर-आधारित, कुनै इन्स्टल आवश्यक छैन_) मा पाठ्यक्रम चलाउन वा आफ्नो कम्प्युटरमा स्थानीय रूपमा [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जस्ता टेक्स्ट एडिटर प्रयोग गर्न छनोट गर्न सक्नुहुन्छ।
### 📋 आफ्नो वातावरण सेटअप गर्ने
यस पाठ्यक्रमसँग विकास वातावरण तयार छ! सुरूवात गर्दा, तपाईं पाठ्यक्रमलाई [Codespace](https://github.com/features/codespaces/) (_ब्राउजर-आधारित, कुनै स्थापना आवश्यक छैन_ वातावरण) मा वा आफ्ना कम्प्युटरमा [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) जस्तो टेक्स्ट सम्पादक प्रयोग गरेर चलाउन रोज्न सक्नुहुन्छ।
#### आफ्नो रिपोजिटरी सिर्जना गर्नुहोस्
आफ्नो काम सजिलै बचत गर्नका लागि, तपाईंले यो रिपोजिटरीको आफ्नै प्रतिलिपि सिर्जना गर्नु सिफारिस गरिन्छ। तपाईंले पृष्ठको माथि रहेको **Use this template** बटन क्लिक गरेर यो गर्न सक्नुहुन्छ। यसले तपाईंको GitHub खातामा पाठ्यक्रमको प्रतिलिपि सहित नयाँ रिपोजिटरी सिर्जना गर्नेछ।
आफ्नो काम सजिलै बचत गर्न, तपाईंलाई आफ्नै प्रतिलिपि बनाउन सिफारिस छ। यसका लागि पृष्ठको माथिल्लो भागमा रहेको **Use this template** बटन क्लिक गर्नुहोस्। यसले तपाईंको GitHub खातामा पाठ्यक्रमको कपी सहित नयाँ रिपोजिटरी सिर्जना गर्नेछ।
यी चरणहरू पालना गर्नुहोस्:
1. **रिपोजिटरी फोर्क गर्नुहोस्**: यस पृष्ठको माथि-दायाँ कुनामा रहेको "Fork" बटनमा क्लिक गर्नुहोस्।
1. **रिपोजिटरी फोर्क गर्नुहोस्**: यस पृष्ठको दायाँ माथि कुनामा रहेको "Fork" बटन क्लिक गर्नुहोस्।
तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटनमा क्लिक गर्नुहोस् र**Open with Codespaces** चयन गर्नुहोस्। यसले तपाईंलाई काम गर्न नयाँ Codespace सिर्जना गर्नेछ।
तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटन क्लिक गरी**Open with Codespaces** चयन गर्नुहोस्। यसले तपाईँका लागि नयाँ Codespace सिर्जना गर्नेछ।
#### आफ्नो कम्प्युटरमा स्थानीय रूपमा पाठ्यक्रम चलाउँदै
#### आफ्नै कम्प्युटरमा यस पाठ्यक्रम चलाउन
यो पाठ्यक्रम आफ्नो कम्प्युटरमा स्थानीय रूपमा चलाउनका लागि, तपाईंलाई टेक्स्ट एडिटर, ब्राउजर र कमाण्ड लाइन टूल आवश्यक हुनेछ। हाम्रो पहिलो पाठ, [प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय](../../1-getting-started-lessons/1-intro-to-programming-languages), तपाईंलाई यी उपकरणहरूको लागि विभिन्न विकल्पहरूमा मार्गदर्शन गर्नेछ ताकि तपाईंलाई उपयुक्त लाग्ने विकल्प चयन गर्न सक्नुहुन्छ।
यस पाठ्यक्रमलाई स्थानीय कम्प्युटरमा चलाउन, तपाईंलाई टेक्स्ट सम्पादक, ब्राउजर र कमाण्ड लाइन उपकरण आवश्यक पर्छ। हाम्रो पहिलो पाठ, [परिचय प्रोग्रामिङ भाषाहरू र उपकरणहरू](../../1-getting-started-lessons/1-intro-to-programming-languages), तपाईंलाई यी सबै उपकरणहरुको विभिन्न विकल्पहरू मार्फत मार्गदर्शन गर्नेछ ताकि तपाईंलाई उपयुक्त छनोट गर्न सकियोस्।
हाम्रो सिफारिस भनेको [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) प्रयोग गर्नु हो, जसमा [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) पनि समावेश छ। तपाईं [यहाँ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) बाट Visual Studio Code डाउनलोड गर्न सक्नुहुन्छ।
हामी सिफारिस गर्छौं कि तपाईं [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) प्रयोग गर्नुहोस्, जुन [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) समेत भित्रै छ। Visual Studio Code तपाईंले यहाँबाट डाउनलोड गर्न सक्नुहुन्छ: [यहाँ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)।
1. आफ्नो रिपोजिटरीलाई आफ्नो कम्प्युटरमा क्लोन गर्नुहोस्। तपाईंले **Code** बटन क्लिक गरेर र URL प्रतिलिपि गरेर यो गर्न सक्नुहुन्छ:
1. आफ्नो रिपोजिटरीलाई आफ्नै कम्प्युटरमा क्लोन गर्नुहोस्। यसका लागि **Code** बटन क्लिक गरी URL कपी गर्नुहोस्:
[CodeSpace](./images/createcodespace.png)
त्यसपछि, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) भित्र [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोल्नुहोस् र तलको कमाण्ड चलाउनुहोस्, `<your-repository-url>` लाई तपाईंले प्रतिलिपि गरेको URL सँग बदल्नुहोस्:
त्यसपछि, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) भित्र [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) खोल्नुहोस् र निम्न कमाण्ड चलाउनुहोस्, जहाँ `<your-repository-url>` तपाईंले हालसालै कपी गर्नुभएको URL सँग प्रतिस्थापन गरिएको छ:
```bash
git clone <your-repository-url>
```
2. Visual Studio Code मा फोल्डर खोल्नुहोस्। तपाईंले **File** > **Open Folder** क्लिक गरेर र तपाईंले क्लोन गरेको फोल्डर चयन गरेर यो गर्न सक्नुहुन्छ।
2. फोल्डरलाई Visual Studio Code मा खोल्नुहोस्। तपाईं यो **File** > **Open Folder** मा क्लिक गरेर र हालसालै क्लोन गरिएको फोल्डर चयन गरेर गर्न सक्नुहुन्छ।
> सिफारिस गरिएको Visual Studio Code एक्सटेन्सनहरू:
> सिफारिस गरिएको Visual Studio Code एक्सटेन्सन्सहरू:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code भित्र HTML पृष्ठहरू पूर्वावलोकन गर्न
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - तपाईंलाई छिटो कोड लेख्न मद्दत गर्न
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code भित्र HTML पृष्ठहरूको पूर्वावलोकन गर्न
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - कोड लेख्न मद्दत गर्न छिटो
## 📂 प्रत्येक पाठमा समावेश छ:
- वैकल्पिक स्केचनोट
- वैकल्पिक स्केचनोट
- वैकल्पिक पूरक भिडियो
- पाठ अघि वार्मअप क्विज
- लिखित पाठ
- परियोजना-आधारित पाठहरूको लागि, परियोजना निर्माण गर्ने चरण-दर-चरण मार्गदर्शन
- ज्ञान जाँच
- चुनौती
- पूर्व-पाठ वार्मअप क्विज
- लेखिएको पाठ
- परियोजना-आधारित पाठहरूका लागि, परियोजना निर्माण गर्ने पुष्टि-स्तरहरू
- ज्ञान जाँचहरू
- एउटा चुनौती
- पूरक पढाइ
- असाइनमेन्ट
- [पाठ पछि क्विज](https://ff-quizzes.netlify.app/web/)
> **क्विजहरूको बारेमा नोट**: सबै क्विजहरू `Quiz-app` फोल्डरमा समावेश छन्, प्रत्येकमा तीन प्रश्न सहित 48 कुल क्विजहरू। तिनीहरू [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध छन्। क्विज एपलाई स्थानीय रूपमा चलाउन वा Azure मा तैनात गर्न सकिन्छ; `quiz-app` फोल्डरमा निर्देशनहरू पालना गर्नुहोस्।
> **क्विजहरूको बारेमा नोट**: सबै क्विजहरू Quiz-app फोल्डरमा छन्, प्रत्येकमा तीन प्रश्न अनी कुल ४८ क्विजहरू छन्। यो [यहाँ](https://ff-quizzes.netlify.app/web/) उपलब्ध छ, क्विज एप्लिकेसन स्थानीय रूपमा चलाउन वा Azure मा डिप्लोय गर्न सकिन्छ; `quiz-app` फोल्डरमा निर्देशनहरू पालन गर्नुहोस्।
## 🗃️ पाठहरू
| | परियोजनाको नाम | सिकाइने अवधारणाहरू | सिकाइका उद्देश्यहरू | लिंक गरिएको पाठ | लेखक |
| | परियोजना नाम | सिकाइ अवधारणाहरु | सिकाइ उद्देश्य | लिंक गरिएको पाठ | लेखक |
| 01 | सुरुवात गर्दै | प्रोग्रामिङ र उपकरणहरूको परिचय | अधिकांश प्रोग्रामिङ भाषाहरूको आधारभूत आधार र पेशेवर विकासकर्ताहरूलाई काम गर्न मद्दत गर्ने सफ्टवेयरको बारेमा जान्नुहोस् | [प्रोग्रामिङ भाषाहरू र उपकरणहरूको परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | सुरुवात गर्दै | GitHub को आधारभूत कुरा, टोलीसँग काम गर्ने समावेश | आफ्नो परियोजनामा GitHub कसरी प्रयोग गर्ने, कोड बेसमा अरूसँग कसरी सहकार्य गर्ने | [GitHub को परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | सुरुवात गर्दै | पहुँचयोग्यता | वेब पहुँचयोग्यताको आधारभूत कुरा जान्नुहोस् | [पहुंचयोग्यता आधारभूत कुरा](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS आधारभूत कुरा | JavaScript डेटा प्रकार | JavaScript डेटा प्रकारहरूको आधारभूत कुरा | [डेटा प्रकारहरू](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS आधारभूत कुरा | कार्यहरू र विधिहरू | अनुप्रयोगको तर्क प्रवाह व्यवस्थापन गर्न कार्यहरू र विधिहरूको बारेमा जान्नुहोस् | [कार्यहरू र विधिहरू](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS आधारभूत कुरा | JS संग निर्णय लिने | निर्णय लिने विधिहरू प्रयोग गरेर आफ्नो कोडमा सर्तहरू कसरी सिर्जना गर्ने जान्नुहोस् | [निर्णय लिने](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS आधारभूत कुरा | Arrays र लूपहरू | JavaScript मा डेटा संग काम गर्न Arrays र लूपहरू प्रयोग गर्नुहोस् | [Arrays र लूपहरू](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML अभ्यासमा | अनलाइन टेरारियम सिर्जना गर्न HTML निर्माण गर्नुहोस्, लेआउट निर्माणमा ध्यान केन्द्रित गर्दै | [HTML को परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS अभ्यासमा | अनलाइन टेरारियमलाई शैली दिन CSS निर्माण गर्नुहोस्, CSS को आधारभूत कुरा सहित पृष्ठलाई उत्तरदायी बनाउनेमा ध्यान केन्द्रित गर्दै | [CSS को परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोजरहरू, DOM हेरफेर | टेरारियमलाई ड्र्याग/ड्रप इन्टरफेसको रूपमा कार्य गर्न JavaScript निर्माण गर्नुहोस्, क्लोजरहरू र DOM हेरफेरमा ध्यान केन्द्रित गर्दै | [JavaScript क्लोजरहरू, DOM हेरफेर](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [टाइपिङ खेल](./4-typing-game/solution/README.md) | टाइपिङ खेल निर्माण गर्नुहोस् | आफ्नो JavaScript अनुप्रयोगको तर्क चलाउन किबोर्ड घटनाहरू कसरी प्रयोग गर्ने जान्नुहोस् | [घटनामा आधारित प्रोग्रामिङ](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [हरियो ब्राउजर एक्सटेन्सन](./5-browser-extension/solution/README.md) | ब्राउजरहरूसँग काम गर्दै | ब्राउजरहरू कसरी काम गर्छन्, तिनीहरूको इतिहास, र ब्राउजर एक्सटेन्सनको पहिलो तत्वहरूको संरचना कसरी बनाउने जान्नुहोस् | [ब्राउजरहरूको बारेमा](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [हरियो ब्राउजर एक्सटेन्सन](./5-browser-extension/solution/README.md) | फारम निर्माण गर्दै, API कल गर्दै र स्थानीय स्टोरेजमा भेरिएबलहरू भण्डारण गर्दै | स्थानीय स्टोरेजमा भण्डारण गरिएका भेरिएबलहरू प्रयोग गरेर API कल गर्न आफ्नो ब्राउजर एक्सटेन्सनको JavaScript तत्वहरू निर्माण गर्नुहोस् | [APIs, फारमहरू, र स्थानीय स्टोरेज](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [हरियो ब्राउजर एक्सटेन्सन](./5-browser-extension/solution/README.md) | ब्राउजरमा पृष्ठभूमि प्रक्रिया, वेब प्रदर्शन | एक्सटेन्सनको आइकन व्यवस्थापन गर्न ब्राउजरको पृष्ठभूमि प्रक्रियाहरू प्रयोग गर्नुहोस्; वेब प्रदर्शन र केही अनुकूलनहरूको बारेमा जान्नुहोस् | [पृष्ठभूमि कार्यहरू र प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [स्पेस खेल](./6-space-game/solution/README.md) | JavaScript संग अधिक उन्नत खेल विकास | खेल निर्माणको तयारीमा कक्षाहरू र संरचनाको प्रयोग गरेर उत्तराधिकारको बारेमा जान्नुहोस् र Pub/Sub ढाँचाको बारेमा जान्नुहोस् | [उन्नत खेल विकासको परिचय](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [स्पेस खेल](./6-space-game/solution/README.md) | क्यानभासमा चित्रण | स्क्रिनमा तत्वहरू चित्रण गर्न प्रयोग गरिने क्यानभास API को बारेमा जान्नुहोस् | [क्यानभासमा चित्रण](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [स्पेस खेल](./6-space-game/solution/README.md) | स्क्रिनमा तत्वहरू सार्दै | तत्वहरूले कार्टेसियन निर्देशांक र क्यानभास API प्रयोग गरेर गति कसरी प्राप्त गर्न सक्छन् जान्नुहोस् | [तत्वहरू सार्दै](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [स्पेस खेल](./6-space-game/solution/README.md) | टक्कर पत्ता लगाउने | तत्वहरूलाई एकअर्कासँग टक्कर गर्न र प्रतिक्रिया दिन बनाउनुहोस्, कीप्रेसहरू प्रयोग गरेर र खेलको प्रदर्शन सुनिश्चित गर्न कूलडाउन कार्य प्रदान गर्नुहोस् | [टक्कर पत्ता लगाउने](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [स्पेस खेल](./6-space-game/solution/README.md) | स्कोर राख्दै | खेलको स्थिति र प्रदर्शनको आधारमा गणितीय गणना गर्नुहोस् | [स्कोर राख्दै](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [स्पेस खेल](./6-space-game/solution/README.md) | खेल समाप्त गर्दै र पुनः सुरु गर्दै | खेल समाप्त गर्ने र पुनः सुरु गर्ने बारेमा जान्नुहोस्, सम्पत्ति सफा गर्ने र भेरिएबल मानहरू पुनः सेट गर्ने सहित | [समाप्ति अवस्था](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [बैंकिङ एप](./7-bank-project/solution/README.md) | HTML टेम्पलेटहरू र वेब एपमा रूटहरू | रूटिङ र HTML टेम्पलेटहरू प्रयोग गरेर बहुपृष्ठ वेबसाइटको वास्तुकला कसरी बनाउने जान्नुहोस् | [HTML टेम्पलेटहरू र रूटहरू](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [बैंकिङ एप](./7-bank-project/solution/README.md) | लगइन र दर्ता फारम निर्माण गर्नुहोस् | फारमहरू निर्माण गर्ने र मान्यकरण दिनचर्या व्यवस्थापन गर्ने बारेमा जान्नुहोस् | [फारमहरू](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [बैंकिङ एप](./7-bank-project/solution/README.md) | डेटा प्राप्त गर्ने र प्रयोग गर्ने विधिहरू | डेटा कसरी तपाईंको एपमा आउँछ र बाहिर जान्छ, कसरी प्राप्त गर्ने, भण्डारण गर्ने, र नष्ट गर्ने | [डेटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [बैंकिङ एप](./7-bank-project/solution/README.md) | राज्य व्यवस्थापनको अवधारणाहरू | तपाईंको एपले राज्य कसरी कायम राख्छ र यसलाई प्रोग्रामेटिक रूपमा कसरी व्यवस्थापन गर्ने जान्नुहोस् | [राज्य व्यवस्थापन](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ब्राउजर/VScode कोड](../../8-code-editor) | VScode संग काम गर्दै | कोड सम्पादक प्रयोग गर्ने सिक्नुहोस्| [VScode कोड सम्पादक प्रयोग गर्नुहोस्](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI सहायकहरू](./9-chat-project/README.md) | AI संग काम गर्दै | आफ्नो AI सहायक निर्माण गर्ने सिक्नुहोस् | [AI सहायक परियोजना](./9-chat-project/README.md) | Chris |
| 01 | सुरु गर्न प्रसिद्ध | प्रोग्रामिङ परिचय र उपकरणहरूको व्यापार | अधिकांश प्रोग्रामिङ भाषाहरूको आधारभूत ज्ञान र पेशेवर विकासकर्ताहरूले आफ्नो काम गर्न मद्दत गर्ने सफ्टवेयरहरू बारे जान्नुहोस् | [प्रोग्रामिङ भाषाहरू र उपकरणहरू परिचय](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | सुरु गर्न प्रसिद्ध | GitHub को आधारभूत कुरा, टोलीसँग काम गर्ने सहित | तपाईंको परियोजनामा GitHub कसरी प्रयोग गर्ने, कसरी कोड आधारमा अरूसँग सहकार्य गर्ने | [GitHub परिचय](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | सुरु गर्न प्रसिद्ध | पहुँचयोग्यता | वेब पहुँचयोग्यताका आधारहरू सिक्नुहोस् | [पहुँचयोग्यता आधारभूत](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS आधारहरू | फङ्सनहरू र मेथडहरू | एप्लिकेसनको तर्क प्रवाह व्यवस्थापन गर्न फङ्सनहरू र मेथडहरू बारे जान्नुहोस् | [फङ्सनहरू र मेथडहरू](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS आधारहरू | JS सँग निर्णय गर्ने | निर्णय गर्ने तरिकाहरू प्रयोग गरेर तपाईंको कोडमा सर्तहरू कसरी बनाउने जान्नुहोस् | [निर्णय गर्ने](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS आधारहरू | एर्रेहरू र लूपहरू | JavaScript मा एर्रे र लूपहरू प्रयोग गरी डेटा संग काम गर्नुहोस् | [एर्रेहरू र लूपहरू](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML अभ्यासमा | अनलाइन टेरारियम बनाउन HTML निर्माण गर्नुहोस्, लेआउट तयार गर्नमा केन्द्रित | [HTML परिचय](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS अभ्यासमा | अनलाइन टेरारियमलाई शैली दिन CSS बनाउनुहोस्, CSS का आधारभूत कुराहरू सहित जसले पृष्ठलाई प्रतिक्रियाशील बनाउँछ | [CSS परिचय](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript क्लोजरहरू, DOM परिवर्तन | ड्र्याग/ड्रप इन्टरफेसको लागि टेरारियम क्रियाशील बनाउन JavaScript बनाउनुहोस्, क्लोजरहरू र DOM परिवर्तनमा केन्द्रित | [JavaScript क्लोजरहरू, DOM परिवर्तन](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | टाइपिङ खेल निर्माण | तपाईंको JavaScript एपको तर्क चलाउन किबोर्ड घटनाहरू कसरी प्रयोग गर्ने जान्नुहोस् | [ईभेन्ट-चालित प्रोग्रामिङ](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउजरहरू सँग काम गर्ने | ब्राउजरहरू कसरी काम गर्छन्, तिनीहरूको इतिहास, र ब्राउजर एक्सटेन्सनका पहिलो तत्वहरू कसरी निर्माण गर्ने जान्नुहोस् | [ब्राउजरहरूको बारेमा](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | फारम बनाउने, API कल गर्ने र स्थानीय संग्रहमा भेरीएवलहरू स्टोर गर्ने | ब्राउजर एक्सटेन्सनका लागि JavaScript तत्वहरू निर्माण गर्नुहोस् जसले स्थानीय संग्रहमा भर्खरै स्टोर गरिएको भेरीएवलहरू प्रयोग गरी API कल गर्ने | [API, फारम र स्थानीय संग्रह](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ब्राउजरमा पृष्ठभूमि प्रक्रिया, वेब प्रदर्शन | एक्सटेन्सनको आइकन व्यवस्थापन गर्न ब्राउजरको पृष्ठभूमि प्रक्रिया प्रयोग गर्नुहोस्; वेब प्रदर्शन र केही अनुकूलनहरू बारे जान्नुहोस् | [पृष्ठभूमि कार्यहरू र प्रदर्शन](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript सँग थप उन्नत खेल विकास | क्लासहरू र कम्पोजिसन दुबै बाट इनहेरिटेन्स र पब/सब ढाँचा बारे जान्नुहोस्, खेल बनाउने तयारीका लागि | [उन्नत खेल विकास परिचय](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | क्यानभासमा चित्र बनाउने | क्यानभास API सम्बन्धमा जान्नुहोस्, जसले स्क्रिनमा तत्वहरू चित्रित गर्न प्रयोग गरिन्छ | [क्यानभासमा चित्र बनाउने](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | स्क्रिनमा तत्वहरू सार्ने | तत्वहरूलाई गतिशील बनाउन कार्टेसियन कोओर्डिनेट र क्यानभास API कसरी प्रयोग गर्ने पत्ता लगाउनुहोस् | [तत्वहरू सार्ने](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | टक्कर पहिचान | तत्वहरूलाई एकअर्कासँग टक्कर गराउन र प्रतिक्रिया दिन कीप्रेस प्रयोग गर्नुहोस् र खेलको प्रदर्शन सुनिश्चित गर्न कूलडाउन फङ्सन प्रदान गर्नुहोस् | [टक्कर पहिचान](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | स्कोर राख्ने | खेलको स्थिति र प्रदर्शनको आधारमा गणितीय गणना गर्नुहोस् | [स्कोर राख्ने](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | खेल अन्त्य गर्ने र पुनः सुरु गर्ने | खेल अन्त्य गर्ने र पुनः सुरु गर्ने बारे जान्नुहोस्, सामग्री सफा गर्ने र भेरीएवल मानहरू रिसेट गर्ने सहित | [अन्त्य सर्त](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | वेब एपमा HTML टेम्प्लेटहरू र राउटिङ | धेरै पृष्ठहरूको वेबसाइट आर्किटेक्चर बनाउने स्क्याफोल्ड बनाउन र राउटिङ र HTML टेम्प्लेटहरू प्रयोग गर्ने तरिका जान्नुहोस् | [HTML टेम्प्लेटहरू र राउटिङ](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | लगिन र रजिस्ट्रेसन फारम निर्माण | फारम निर्माण र मान्यकरण कार्यहरू ह्यान्डल गर्ने बारे जान्नुहोस् | [फारमहरू](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | डाटा ल्याउने र प्रयोग गर्ने विधिहरू | तपाईंको एपमा डाटा कसरी प्रवाहित हुन्छ, कसरी ल्याउने, स्टोर गर्ने र निकाश गर्ने | [डाटा](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | राज्य व्यवस्थापनका अवधारणाहरू | तपाईंको एपले राज्यलाई कसरी राख्छ र यसलाई प्रोग्राममा कसरी व्यवस्थापन गर्ने जान्नुहोस् | [राज्य व्यवस्थापन](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [ब्राउजर/VScode कोड](../../8-code-editor) | VScode सँग काम गर्ने | कोड सम्पादक कसरी प्रयोग गर्ने जान्नुहोस्| [VScode कोड सम्पादक प्रयोग गर्ने](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI सहायकहरू](./9-chat-project/README.md) | AI सँग काम गर्ने | आफ्नो AI सहायक कसरी बनाउने जान्नुहोस् | [AI सहायक परियोजना](./9-chat-project/README.md) | Chris |
## 🏫 शिक्षाशास्त्र
@ -182,22 +177,22 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
* परियोजना-आधारित सिकाइ
* बारम्बार क्विजहरू
कार्यक्रमले JavaScript, HTML, र CSS को आधारभूत कुरा, साथै आजका वेब विकासकर्ताहरूले प्रयोग गर्ने नवीनतम उपकरणहरू र प्रविधिहरू सिकाउँछ। विद्यार्थीहरूले टाइपिङ खेल, भर्चुअल टेरारियम, वातावरणमैत्री ब्राउजर एक्सटेन्सन, स्पेस-इनभेडर शैलीको खेल, र व्यवसायहरूको लागि बैंकिङ एप निर्माण गरेर व्यावहारिक अनुभव विकास गर्ने अवसर पाउनेछन्। श्रृंखला समाप्त हुँदा, विद्यार्थीहरूले वेब विकासको ठोस समझ प्राप्त गरेका हुनेछन्।
कार्यक्रमले JavaScript, HTML, र CSS का आधारभूत कुरा सिकाउँछ, साथै आजका वेब विकासकर्ताहरूले प्रयोग गर्ने नयाँ उपकरणहरू र प्रविधिहरू पनि। विद्यार्थीहरूले टाइपिङ खेल, भर्चुअल टेरारियम, इको-मैत्री ब्राउजर एक्सटेन्सन, स्पेस-इनवाडर शैलीको खेल, र व्यवसायका लागि बैंकिङ एप निर्माण गरेर व्यावहारिक अनुभव पाउनेछन्। श्रृंखला अन्त्य सम्म, विद्यार्थीहरूले वेब विकासको दृढ बुझाइ हासिल गर्नेछन्।
> 🎓 तपाईं यस पाठ्यक्रमका केही प्रारम्भिक पाठहरू [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) मा Microsoft Learn मा लिन सक्नुहुन्छ!
> 🎓 तपाईं Microsoft Learn मा एक [सिकाइ मार्ग](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) को रूपमा यस पाठ्यक्रमका पहिलो केही पाठहरू लिन सक्नुहुन्छ!
सामग्री परियोजनासँग मेल खाने सुनिश्चित गरेर, प्रक्रिया विद्यार्थीहरूको लागि थप आकर्षक बनाइन्छ र अवधारणाहरूको अवधारणलाई बढावा दिइन्छ। हामीले JavaScript आधारभूत कुराहरूमा केही प्रारम्भिक पाठहरू लेखेका छौं अवधारणाहरू परिचय गर्न, "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" भिडियो ट्यूटोरियलहरूको संग्रहबाट भिडियोसँग जोडीएको, जसका केही लेखकहरूले यस पाठ्यक्रममा योगदान दिएका छन्।
सामग्री परियोजनासँग मेल खाने सुनिश्चित गरेर, प्रक्रिया विद्यार्थीहरूको लागि थप रुचिकर बनाइन्छ र अवधारणाको धारणामा पनि वृद्धि हुन्छ। हामीले JavaScript का आधारभूत अवधारणाहरू परिचय गराउन केही प्रारम्भिक पाठहरू पनि लेखेका छौं, जुन "[JavaScript को लागि सुरु गर्ने श्रृंखला](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" भिडियो ट्युटोरियलहरूको संग्रहमा आधारित छ, जसका केही लेखकहरूले यो पाठ्यक्रममा योगदान दिएका छन्।
यसका साथै, कक्षाको अघि कम-जोखिमको क्विजले विद्यार्थीलाई विषयवस्तु सिक्नको लागि उद्देश्य सेट गर्दछ, जबकि कक्षापछि दोस्रो क्विजले थप अवधारण सुनिश्चित गर्दछ। यो पाठ्यक्रम लचिलो र रमाइलो बनाउन डिजाइन गरिएको हो र पूर्ण वा आंशिक रूपमा लिन सकिन्छ। परियोजनाहरू साना सुरु हुन्छन् र 12-हप्ताको चक्रको अन्त्यसम्ममा क्रमशः जटिल बन्छन्।
थप रूपमा, कक्षाअघि एक कम जोखिममा रहेको क्विजले विद्यार्थीलाई विषय सिक्न प्रेरित गर्दछ भने कक्षा पछि अर्को क्विजले थप अवधारणाको याददाश्त सुनिश्चित गर्दछ। यस पाठ्यक्रमलाई लचिलो र रमाईलो बनाइयो र यसलाई पूरै वा भागमा लिन सकिन्छ। परियोजनाहरू सानोतिनोबाट सुरु भएर १२-सप्ताहको परिसंवादको अन्त्य सम्म जटिल हुँदै जान्छन्।
हामीले जानाजानी JavaScript फ्रेमवर्कहरू परिचय गराउनबाट बचेका छौं वेब विकासकर्ताको रूपमा फ्रेमवर्क अपनाउनु अघि आवश्यक आधारभूत सीपहरूमा ध्यान केन्द्रित गर्न। यो पाठ्यक्रम पूरा गरेपछि अर्को राम्रो कदम Node.js को बारेमा सिक्ने हुनेछ अर्को भिडियो संग्रहमार्फत: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
हाम्रो उद्देश्यले JavaScript फ्रेमवर्कहरू परिचय नगराउनु हो ताकि वेब विकासकर्ता हुन आवश्यक आधारभूत सीपहरूमा केन्द्रित गरियोस्, फ्रेमवर्क अपनाउनु अघि, अर्को राम्रो चरण भनेको 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) दिशानिर्देशहरू हेर्नुहोस्। हामी तपाईंको रचनात्मक प्रतिक्रिया स्वागत गर्दछौं!
> हाम्रो [व्यवहार संहिता](CODE_OF_CONDUCT.md) र [योगदान गर्न](CONTRIBUTING.md) दिशानिर्देशहरू अवलोकन गर्नुहोस्। हामी तपाईंको रचनात्मक प्रतिक्रिया स्वागत गर्दछौं!
## 🧭 अफलाइन पहुँच
तपाईं [Docsify](https://docsify.js.org/#/) प्रयोग गरेर यो दस्तावेज अफलाइन चलाउन सक्नुहुन्छ। यो रिपो फोर्क गर्नुहोस्, [Docsify स्थापना गर्नुहोस्](https://docsify.js.org/#/quickstart) आफ्नो स्थानीय मेसिनमा, र त्यसपछि यस रिपोको रूट फोल्डरमा `docsify serve` टाइप गर्नुहोस्। वेबसाइट तपाईंको localhost मा पोर्ट 3000 मा सेवा गरिनेछ: `localhost:3000`।
तपाईं [Docsify](https://docsify.js.org/#/) प्रयोग गरेर यो दस्तावेजीकरण अफलाइन चलाउन सक्नुहुन्छ। यस रिपोजिटरीलाई फोर्क गर्नुहोस्, तपाईंको स्थानीय मेसिनमा [Docsify इन्स्टल](https://docsify.js.org/#/quickstart) गर्नुहोस्, र त्यसपछि यो रिपोजिटरीको रुट फोल्डरमा `docsify serve` टाइप गर्नुहोस्। वेबसाइट तपाईंको लोकलहोस्टमा पोर्ट 3000 मा सेवा गरिनेछ: `localhost:3000`।
## 📘 PDF
@ -205,59 +200,65 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
## 🎒 अन्य पाठ्यक्रमहरू
हाम्रो टोलीले अन्य कोर्सहरू तयार पार्दछ! जाँच गर्नुहोस्:
हाम्रो टोलीले अन्य पाठ्यक्रमहरू उत्पादन गर्दछ! हेर्नुहोस्:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### जेनेरेटिभ एआई शृंखला
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### मुख्य सिकाइ
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### कोपाइलट शृंखला
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
यदि तपाईं अड्किनुहुन्छ वा एआई एप्स निर्माणको बारेमा कुनै प्रश्न छ भने, अन्य सिक्नेहरू र अनुभवी विकासकर्ताहरूसँग एमसीपीको बारेमा छलफलमा सामेल हुनुहोस्। यो सहयोगी समुदाय हो जहाँ प्रश्नहरू स्वागत गरिन्छ र ज्ञान स्वतन्त्र रूपमा साझा गरिन्छ।
यदि तपाईं अड्कनुहुन्छ वा AI एपहरू निर्माण गर्दा कुनै प्रश्नहरू छन् भने। MCP सम्बन्धी छलफलहरूमा साथी सिक्नेहरू र अनुभवी विकासकर्ताहरूसँग सामेल हुनुहोस्। यो एउटा सहयोगी समुदाय हो जहाँ प्रश्नहरू स्वागतयोग्य छन् र ज्ञान स्वतन्त्र रूपमा बाँडिन्छ।
यो रिपोजिटरी MIT लाइसेन्स अन्तर्गत लाइसेन्स गरिएको छ। थप जानकारीको लागि [LICENSE](../../LICENSE) फाइल हेर्नुहोस्।
यो रिपोजिटोरी MIT लाइसेन्स अन्तर्गत लाइसेन्स गरिएको छ। थप जानकारीका लागि [LICENSE](../../LICENSE) फाइल हेर्नुहोस्।
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषामा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
**अस्वीकरण**:
यस कागजातलाई AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) को प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको प्रयास गर्छौं भने पनि कृपया जान्नुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धिहरू हुन सक्नेछन्। मूल भाषा मा रहेको कागजातलाई आधिकारिक स्रोतको रूपमा मान्नुपर्छ। महत्वपूर्ण जानकारीका लागि, व्यावसायिक मानवीय अनुवाद सिफारिस गरिन्छ। यो अनुवादको प्रयोगबाट उत्पन्न कुनै पनि गलतफहमी वा गलत व्याख्याका लागि हामी जिम्मेवार हुँदैनौं।
localizeflow[bot]
2 weeks ago