mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-09-01 18:53:38 +02:00
Update Translations
This commit is contained in:
Lee Stott
GitHub
89
.github/workflows/co-op-translator.yml
vendored
Normal file
89
.github/workflows/co-op-translator.yml
vendored
Normal file
@@ -0,0 +1,89 @@
|
||||
name: Co-op Translator
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
co-op-translator:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Set up Python
|
||||
uses: actions/setup-python@v4
|
||||
with:
|
||||
python-version: '3.10'
|
||||
|
||||
- name: Install Co-op Translator
|
||||
run: |
|
||||
python -m pip install --upgrade pip
|
||||
pip install co-op-translator
|
||||
|
||||
- name: Run Co-op Translator
|
||||
env:
|
||||
PYTHONIOENCODING: utf-8
|
||||
# Azure AI Service Credentials
|
||||
AZURE_AI_SERVICE_API_KEY: ${{ secrets.AZURE_AI_SERVICE_API_KEY }}
|
||||
AZURE_AI_SERVICE_ENDPOINT: ${{ secrets.AZURE_AI_SERVICE_ENDPOINT }}
|
||||
|
||||
# Azure OpenAI Credentials
|
||||
AZURE_OPENAI_API_KEY: ${{ secrets.AZURE_OPENAI_API_KEY }}
|
||||
AZURE_OPENAI_ENDPOINT: ${{ secrets.AZURE_OPENAI_ENDPOINT }}
|
||||
AZURE_OPENAI_MODEL_NAME: ${{ secrets.AZURE_OPENAI_MODEL_NAME }}
|
||||
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME: ${{ secrets.AZURE_OPENAI_CHAT_DEPLOYMENT_NAME }}
|
||||
AZURE_OPENAI_API_VERSION: ${{ secrets.AZURE_OPENAI_API_VERSION }}
|
||||
|
||||
# OpenAI Credentials
|
||||
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
|
||||
OPENAI_ORG_ID: ${{ secrets.OPENAI_ORG_ID }}
|
||||
OPENAI_CHAT_MODEL_ID: ${{ secrets.OPENAI_CHAT_MODEL_ID }}
|
||||
OPENAI_BASE_URL: ${{ secrets.OPENAI_BASE_URL }}
|
||||
run: |
|
||||
# =====================================================================
|
||||
# IMPORTANT: Set your target languages here (REQUIRED CONFIGURATION)
|
||||
# =====================================================================
|
||||
# Example: Translate to Spanish, French, German. Add -y to auto-confirm.
|
||||
translate -l "all" -y # <--- MODIFY THIS LINE with your desired languages
|
||||
# translate -l "zh tw hk fr ja ko pt es de fa pl hi" -y
|
||||
|
||||
- name: Authenticate GitHub App
|
||||
id: generate_token
|
||||
uses: tibdex/github-app-token@v1
|
||||
with:
|
||||
app_id: ${{ secrets.GH_APP_ID }}
|
||||
private_key: ${{ secrets.GH_APP_PRIVATE_KEY }}
|
||||
|
||||
- name: Create Pull Request with translations
|
||||
uses: peter-evans/create-pull-request@v5
|
||||
with:
|
||||
token: ${{ steps.generate_token.outputs.token }}
|
||||
commit-message: "🌐 Update translations via Co-op Translator"
|
||||
title: "🌐 Update translations via Co-op Translator"
|
||||
body: |
|
||||
This PR updates translations for recent changes merged into the `main` branch.
|
||||
|
||||
### 📋 Summary of Changes
|
||||
- Translated markdown content has been added under the `translations/` directory
|
||||
- Translated images (if applicable) have been generated in the `translated_images/` directory
|
||||
|
||||
🔁 Co-op Translator ensures that changes in links, structure, or inline elements in the original content are automatically reflected in all translated files.
|
||||
|
||||
---
|
||||
🌐 This pull request was automatically generated by [Co-op Translator](https://github.com/Azure/co-op-translator), powered by Azure AI.
|
||||
|
||||
branch: update-translations
|
||||
base: main
|
||||
delete-branch: true
|
||||
add-paths: |
|
||||
translations/
|
||||
translated_images/
|
||||
@@ -1,103 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# নতুনদের জন্য ওয়েব ডেভেলপমেন্ট - একটি পাঠ্যক্রম
|
||||
|
||||
মাইক্রোসফট-এর এযুর ক্লাউড অ্যাডভোকেটরা জাভাস্ক্রিপ্ট, সিএসেস এবং এইছটিএমেল বেসিক সম্পর্কে ১২-সপ্তাহ, ২৪-পাঠ্য পাঠ্যক্রম অফার করতে পেরে খুশি। প্রতিটি পাঠে প্রাক- এবং পাঠ-পরবর্তী কুইজ, পাঠটি সম্পূর্ণ করার জন্য লিখিত নির্দেশাবলী, একটি সমাধান, একটি অ্যাসাইনমেন্ট এবং আরও অনেক কিছু অন্তর্ভুক্ত থাকে। আমাদের প্রকল্প-ভিত্তিক শিক্ষাবিদ্যা আপনাকে নির্মাণের সময় শেখার অনুমতি দেয়, নতুন দক্ষতার 'লাঠি' করার একটি প্রমাণিত উপায়।
|
||||
|
||||
**আমাদের লেখক জেন লুপার, ক্রিস নরিং, ক্রিস্টোফার হ্যারিসন, জেসমিন গ্রিনওয়ে, ইয়োহান লাসোর্সা, ফ্লোর ড্রিস এবং স্কেচনোট শিল্পী টমোমি ইমুরাকে আন্তরিক ধন্যবাদ!**
|
||||
|
||||
# শুরু হচ্ছে
|
||||
|
||||
> **শিক্ষকরা**, এই পাঠ্যক্রমটি কীভাবে ব্যবহার করা যায় সে সম্পর্কে আমরা [কিছু পরামর্শ অন্তর্ভুক্ত করেছি](for-teachers.md)। আমরা আপনার প্রতিক্রিয়া পছন্দ করব [আমাদের আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **ছাত্ররা**, এই পাঠ্যক্রমটি নিজে ব্যবহার করার জন্য, পুরো রেপোকে কাঁটাচামচ করুন এবং নিজে থেকেই অনুশীলনগুলি সম্পূর্ণ করুন, একটি প্রি-লেকচার কুইজ দিয়ে শুরু করুন, তারপর লেকচারটি পড়ুন এবং বাকি কার্যক্রমগুলি সম্পূর্ণ করুন। সমাধান কোড অনুলিপি করার পরিবর্তে পাঠগুলি বোঝার মাধ্যমে প্রকল্পগুলি তৈরি করার চেষ্টা করুন; তবে কোডটি প্রতিটি প্রকল্প-ভিত্তিক পাঠের /সমাধান ফোল্ডারে উপলব্ধ। আরেকটি ধারণা হবে বন্ধুদের সাথে একটি স্টাডি গ্রুপ গঠন করা এবং একসাথে বিষয়বস্তুর মধ্য দিয়ে যাওয়া। আরও অধ্যয়নের জন্য, আমরা [মাইক্রোসফট শিক্ষা](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) এবং নীচে উল্লিখিত ভিডিওগুলি দেখার পরামর্শ দিই৷
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII 'Promo video')
|
||||
|
||||
গিফ বানিয়েছে [মোহিত জয়সাল](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 প্রকল্পটি এবং যারা এটি তৈরি করেছেন তাদের সম্পর্কে একটি ভিডিওর জন্য উপরের ছবিতে ক্লিক করুন!
|
||||
|
||||
## শিক্ষাবিদ্যা
|
||||
|
||||
এই পাঠ্যক্রমটি তৈরি করার সময় আমরা দুটি শিক্ষাগত নীতি বেছে নিয়েছি: এটি নিশ্চিত করা যে এটি প্রকল্প-ভিত্তিক এবং এতে ঘন ঘন কুইজ অন্তর্ভুক্ত রয়েছে। এই সিরিজের শেষ নাগাদ, শিক্ষার্থীরা একটি টাইপিং গেম, একটি ভার্চুয়াল টেরারিয়াম, একটি 'গ্রিন' ব্রাউজার এক্সটেনশন, একটি 'স্পেস ইনভেডার' টাইপ গেম এবং একটি ব্যবসায়িক-টাইপ ব্যাঙ্কিং অ্যাপ তৈরি করবে এবং জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি শিখবে। , এইছটিএমেল, এবং সিএসেস সহ আজকের ওয়েব ডেভেলপারের আধুনিক টুলচেন।
|
||||
|
||||
> 🎓 আপনি মাইক্রোসফট শিক্ষা এ [শিক্ষা পথ](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ নিতে পারেন!
|
||||
|
||||
বিষয়বস্তুটি প্রকল্পের সাথে সারিবদ্ধ হয়েছে তা নিশ্চিত করার মাধ্যমে, প্রক্রিয়াটিকে শিক্ষার্থীদের জন্য আরও আকর্ষক করে তোলা হয় এবং ধারণার ধারণকে বর্ধিত করা হবে। আমরা ধারণাগুলি প্রবর্তন করার জন্য জাভাস্ক্রিপ্ট বেসিকগুলিতে বেশ কয়েকটি স্টার্টার পাঠও লিখেছি, যা "[বিগিনার্স সিরিজ থেকে: জাভাস্ক্রিপ্ট](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id) থেকে ভিডিওর সাথে যুক্ত করেছি ভিডিও টিউটোরিয়ালের সংগ্রহ, যার কিছু লেখক এই পাঠ্যক্রমটিতে অবদান রেখেছেন।
|
||||
|
||||
উপরন্তু, একটি ক্লাসের আগে একটি লো-স্টেক কুইজ একটি বিষয় শেখার প্রতি শিক্ষার্থীর অভিপ্রায় নির্ধারণ করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণ নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হওয়ার জন্য ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট শুরু হয় এবং 12 সপ্তাহের চক্রের শেষে ক্রমবর্ধমান জটিল হয়ে ওঠে।
|
||||
|
||||
যদিও আমরা উদ্দেশ্যপ্রণোদিতভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক প্রবর্তন করা এড়িয়ে গেছি যাতে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে ওয়েব ডেভেলপার হিসাবে প্রয়োজনীয় মৌলিক দক্ষতাগুলিতে মনোনিবেশ করা যায়, এই পাঠ্যক্রমটি সম্পূর্ণ করার একটি ভাল পরবর্তী পদক্ষেপটি ভিডিওগুলির আরেকটি সংগ্রহের মাধ্যমে নোড যেএস সম্পর্কে শেখা হবে: "[শিককারী এর জন্য সিরিজ: নোড যেএস](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"।
|
||||
|
||||
> আমাদের [আচরণবিধি](CODE_OF_CONDUCT.md), [অবদান করা](CONTRIBUTING.md), এবং [অনুবাদ](TRANSLATIONS.md) নির্দেশিকা খুঁজুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়া স্বাগত জানাই!
|
||||
|
||||
## প্রতিটি পাঠ অন্তর্ভুক্ত:
|
||||
|
||||
- ঐচ্ছিক স্কেচনোট
|
||||
- ঐচ্ছিক সম্পূরক ভিডিও
|
||||
- প্রাক-পাঠ ওয়ার্মআপ কুইজ
|
||||
- লিখিত পাঠ
|
||||
- প্রকল্প-ভিত্তিক পাঠের জন্য, প্রকল্পটি কীভাবে তৈরি করতে হয় তার ধাপে ধাপে নির্দেশিকা
|
||||
- জ্ঞান পরীক্ষা
|
||||
- একটি চ্যালেঞ্জ
|
||||
- সম্পূরক পড়া
|
||||
- অ্যাসাইনমেন্ট
|
||||
- পোস্ট-পাঠ কুইজ
|
||||
|
||||
> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ রয়েছে [এই অ্যাপে](https://ashy-river-0debb7803.1.azurestaticapps.net/), প্রতিটিতে তিনটি প্রশ্নের মোট 48টি কুইজ রয়েছে। এগুলি পাঠের মধ্যে থেকে লিঙ্ক করা হয়েছে তবে কুইজ অ্যাপটি স্থানীয়ভাবে চালানো যেতে পারে; `কুইজ-অ্যাপ` ফোল্ডারে নির্দেশনা অনুসরণ করুন। সেগুলো ধীরে ধীরে স্থানীয়করণ করা হচ্ছে।
|
||||
|
||||
## Lessons
|
||||
|
||||
| | প্রকল্পের নাম | ধারণা শেখানো | রাষ্ট্র পরিচালনার ধারণা | লিঙ্ক করা পাঠ | লেখক |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------: | :------------------: |
|
||||
| ০১ | শুরু হচ্ছে | ট্রেডের প্রোগ্রামিং এবং টুলের ভূমিক | বেশিরভাগ প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং পেশাদার ডেভেলপারদের তাদের কাজ করতে সাহায্য করে এমন সফ্টওয়্যার সম্পর্কে প্রাথমিক ভিত্তি জানুন | [প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং ট্রেডের টুলের ভূমিকা](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | জেসমিন |
|
||||
| ০২ | শুরু হচ্ছে | গিটহাব এর মৌলিক বিষয়, একটি দলের সাথে কাজ করা অন্তর্ভুক্ত | কীভাবে আপনার প্রকল্পে গিটহাব ব্যবহার করবেন, কীভাবে কোড বেসে অন্যদের সাথে সহযোগিতা করবেন | [গিটহাবের ভূমিকা](/1-getting-started-lessons/2-github-basics/README.md) | ফ্লোর |
|
||||
| ০৩ | শুরু হচ্ছে | অ্যাক্সেসযোগ্যতা | ওয়েব অ্যাক্সেসিবিলিটির মূল বিষয়গুলো জানুন | [অ্যাক্সেসিবিলিটি ফান্ডামেন্টালস](/1-getting-started-lessons/3-accessibility/README.md) | ক্রিসটফার |
|
||||
| ০৪ | জেএস বেসিক | জাভাস্ক্রিপ্ট ডেটা প্রকার | জাভাস্ক্রিপ্ট ডেটা টাইপের মৌলিক বিষয় | [তথ্যের ধরণ](/2-js-basics/1-data-types/README.md) | জেসমিন |
|
||||
| ০৫ | জেএস বেসিক | ফাংশন এবং পদ্ধতি | একটি অ্যাপ্লিকেশনের যুক্তি প্রবাহ পরিচালনা করার ফাংশন এবং পদ্ধতি সম্পর্কে জানুন | [ফাংশন এবং পদ্ধতি](/2-js-basics/2-functions-methods/README.md) | জেসমিন এবন ক্রিসটফার |
|
||||
| ০৬ | জেএস বেসিক | জেএসের সাথে সিদ্ধান্ত নেওয়া | সিদ্ধান্ত নেওয়ার পদ্ধতি ব্যবহার করে কীভাবে আপনার কোডে শর্ত তৈরি করতে হয় তা শিখুন | [তৈরি সিদ্ধান্ত](/2-js-basics/3-making-decisions/README.md) | জেসমিন |
|
||||
| ০৭ | জেএস বেসিক | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](/2-js-basics/4-arrays-loops/README.md) | জেসমিন |
|
||||
| ০৮ | [টেরারিয়াম](/3-terrarium/solution/README.md) | অনুশীলনে এইচটিএমএল | একটি লেআউট তৈরিতে ফোকাস করে একটি অনলাইন টেরারিয়াম তৈরি করতে এইছটিএমেল তৈরি করুন | [এইছটিএমেল এর ভূমিকা](/3-terrarium/1-intro-to-html/README.md) | জেন |
|
||||
| ০৯ | [টেরারিয়াম](/3-terrarium/solution/README.md) | অনুশীলনে সিএসএস | অনলাইন টেরারিয়াম স্টাইল করার জন্য সিএসেস তৈরি করুন, পৃষ্ঠাটিকে প্রতিক্রিয়াশীল করা সহ সিএসেস এর মৌলিক বিষয়গুলিতে ফোকাস করুন | [সিএসেস এর ভূমিকা](/3-terrarium/2-intro-to-css/README.md) | জেন |
|
||||
| ১০ | [টেরারিয়াম](/3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন | ক্লোজার এবং ডম ম্যানিপুলেশনের উপর ফোকাস করে টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কাজ করতে জাভাস্ক্রিপ্ট তৈরি করুন | [জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | জেন |
|
||||
| ১১ | [টাইপিং খেলা](/4-typing-game/solution/README.md) | একটি টাইপিং গেম তৈরি করুন | আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালাতে কীবোর্ড ইভেন্টগুলি কীভাবে ব্যবহার করবেন তা শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](/4-typing-game/typing-game/README.md) | ক্রিসটফার |
|
||||
| ১২ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ করা | ব্রাউজারগুলি কীভাবে কাজ করে, তাদের ইতিহাস এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি কীভাবে ভারা হয় তা জানুন | [ব্রাউজার সম্পর্কে](/5-browser-extension/1-about-browsers/README.md) | জেন |
|
||||
| ১৩ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি করা, একটি এপিয়াই কল করা এবং স্থানীয় স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | স্থানীয় স্টোরেজে সঞ্চিত ভেরিয়েবল ব্যবহার করে একটি এপিয়াই কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদানগুলি তৈরি করুন | [এপিয়াই, ফর্ম, এবং স্থানীয় সঞ্চয়স্থান](/5-browser-extension/2-forms-browsers-local-storage/README.md) | জেন |
|
||||
| ১৪ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | ব্রাউজারে ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের পটভূমি প্রক্রিয়াগুলি ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশান সম্পর্কে জানুন | [পটভূমি কাজ এবং কর্মক্ষমতা](/5-browser-extension/3-background-tasks-and-performance/README.md) | জেন |
|
||||
| ১৫ | [স্পেস গেম](/6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট সহ আরও উন্নত গেম ডেভেলপমেন্ট | একটি গেম তৈরির প্রস্তুতির জন্য ক্লাস এবং কম্পোজিশন এবং পাব/সাব প্যাটার্ন উভয় ব্যবহার করে উত্তরাধিকার সম্পর্কে জানুন | [অ্যাডভান্সড গেম ডেভেলপমেন্টের ভূমিকা](/6-space-game/1-introduction/README.md) | ক্রিস |
|
||||
| ১৬ | [স্পেস গেম](/6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস এপিয়াই সম্পর্কে জানুন, একটি স্ক্রিনে উপাদানগুলি আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](/6-space-game/2-drawing-to-canvas/README.md) | ক্রিস |
|
||||
| ১৭ | [স্পেস গেম](/6-space-game/solution/README.md) | স্ক্রিনের চারপাশে উপাদান চলন্ত | কার্টেসিয়ান স্থানাঙ্ক এবং ক্যানভাস এপিয়াই ব্যবহার করে উপাদানগুলি কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [চলন্ত উপাদান চারপাশে](/6-space-game/3-moving-elements-around/README.md) | ক্রিস |
|
||||
| ১৮ | [স্পেস গেম](/6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে সংঘর্ষ এবং একে অপরের সাথে প্রতিক্রিয়া তৈরি করুন এবং গেমের কার্যক্ষমতা নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](/6-space-game/4-collision-detection/README.md) | ক্রিস |
|
||||
| ১৯ | [স্পেস গেম](/6-space-game/solution/README.md) | স্কোর রাখা | গেমের স্থিতি এবং পারফরম্যান্সের উপর ভিত্তি করে গণিত গণনা করুন | [স্কোর রাখা](/6-space-game/5-keeping-score/README.md) | ক্রিস |
|
||||
| ২০ | [স্পেস গেম](/6-space-game/solution/README.md) | খেলা শেষ এবং পুনরায় আরম্ভ | সম্পদ পরিষ্কার করা এবং পরিবর্তনশীল মান পুনরায় সেট করা সহ গেমটি শেষ এবং পুনরায় চালু করার বিষয়ে জানুন | [শেষ অবস্থা](/6-space-game/6-end-condition/README.md) | ক্রিস |
|
||||
| ২১ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং এইচটিএমএল টেমপ্লেট ব্যবহার করে মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচারের স্ক্যাফোল্ড তৈরি করতে শিখুন | [এইচটিএমএল টেমপ্লেট এবং রুট](/7-bank-project/1-template-route/README.md) | য়োহান |
|
||||
| ২২ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | বিল্ডিং ফর্ম এবং হস্তান্তর বৈধতা রুটিন সম্পর্কে জানুন | [ফর্ম](/7-bank-project/2-forms/README.md) | য়োহান |
|
||||
| ২৩ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | ডেটা আনা এবং ব্যবহার করার পদ্ধতি | আপনার অ্যাপের মধ্যে কীভাবে ডেটা প্রবাহিত হয়, কীভাবে এটি আনতে হয়, সংরক্ষণ করতে হয় এবং এটি নিষ্পত্তি করতে হয় | [ডেটা](/7-bank-project/3-data/README.md) | য়োহান |
|
||||
| ২৪ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | রাষ্ট্র পরিচালনার ধারণা | আপনার অ্যাপ কীভাবে স্থিতি বজায় রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করতে হয় তা জানুন | [রাজ্য ব্যবস্থাপনা](/7-bank-project/4-state-management/README.md) | য়োহান |
|
||||
|
||||
## অফলাইন অ্যাক্সেস
|
||||
|
||||
আপনি [Docsify](https://docsify.js.org/#/) ব্যবহার করে এই ডকুমেন্টেশন অফলাইনে চালাতে পারেন। এই রেপো ফোর্ক করুন, আপনার স্থানীয় মেশিনে [Docsify](https://docsify.js.org/#/quickstart) ইনস্টল করুন এবং তারপর এই রেপোর রুট ফোল্ডারে, `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে 3000 পোর্টে পরিবেশন করা হবে: `localhost:3000`।
|
||||
|
||||
## পিডিএফ
|
||||
|
||||
সমস্ত পাঠের একটি PDF পাওয়া যাবে [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## অন্যান্য পাঠ্যক্রম
|
||||
|
||||
আমাদের দল অন্যান্য পাঠ্যক্রম উত্পাদন! আরো দেখুন:
|
||||
|
||||
- [মেশিন লার্নিং ফর বিগিনার্স](https://aka.ms/ml-beginners)
|
||||
- [আই ও টি ফর বিগিনার্স](https://aka.ms/iot-beginners)
|
||||
- [ডেটা সায়েন্স ফর বিগিনার্স](https://aka.ms/datascience-beginners)
|
||||
@@ -1,100 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Ανάπτυξη Ιστού για Αρχάριους - Πρόγραμμα Μαθημάτων
|
||||
|
||||
Οι Azure Cloud Advocates της Microsoft, είναι στην ευχάριστη θέση να σας προσφέρουν ένα πρόγραμμα μαθημάτων διάρκειας 12 εβδομάδων, 24 μαθήματα στο σύνολο, για τα βασικά της JavaScript, CSS και HTML. Κάθε μάθημα περιλαμβάνει ένα κουίζ στην αρχή και στο τέλος του, γραπτές οδηγίες για την ολοκλήρωση του μαθήματος, μια λύση, εργασία και άλλα. Η παιδαγωγική μας αρχή που στηρίζεται στις εργασίες, επιτρέπει να μαθαίνετε ενώ χτίζετε, ενας αποδεδειγμένος τρόπος να «κολλήσουν» νέες δεξιότητες.
|
||||
|
||||
**Ευχαριστούμε θερμά τους συγγραφείς μας Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
|
||||
|
||||
# Ξεκινώντας
|
||||
|
||||
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.el.md) για το πως να χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών. Θα χαρούμε πολύ τα σχόλια σας στο [φόρουμ συζήτησης](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **Μαθητές**, για να χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών, κάντε fork ολόκληρο το repo και ολοκληρώστε τις ασκήσεις μόνοι σας, ξεκινώντας με ένα κουίζ πρίν το μάθημα, μετά διαβάζοντας το μάθημα και ολοκληρώνοντας τις υπόλοιπες δραστηριότητες. Προσπαθήστε να κάνετε τις εργασίες κατανώντας τα μαθήματα παρά να αντιγράφετε απλά τον έτοιμο κώδικα με τη λύση. Ωστόσο, ο κώδικας με τη λύση είναι διαθέσιμος στους φακέλους /solutions στο κάθε μάθημα. Μια άλλη ιδέα θα ήταν να δημιουργήσετε μια ομάδα μελέτης με φίλους, και να δείτε το περιεχόμενο των μαθημάτων από κοινού. Για παραιτέρω μελέτη, προτείνουμε το [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) και παρακολουθώντας τα βίντεο που αναφέρονται παρακάτω.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
> 🎥 Κάντε κλικ στην εικόνα για ένα βίντεο σχετικά με το έργο αυτό και τους ανθρώπους που το δημιούργησαν!
|
||||
|
||||
## Παιδαγωγία
|
||||
|
||||
Επιλέξαμε δύο παιδαγωγικές αρχές κατά τη δημιουργία αυτού του προγράμματος μαθημάτων: διασφαλίσαμε ότι βασίζεται σε εργασίες και ότι περιλαμβάνει συχνά κουίζ. Μέχρι το τέλος των μαθημάτων, οι μαθητές θα έχουν δημιουργήσει ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια «πράσινη» επέκταση προγράμματος περιήγησης, ένα παιχνίδι τύπου «space invaders» και μια τραπεζική εφαρμογή επιχειρηματικού τύπου και θα έχουν μάθει τα βασικά της JavaScript , HTML και CSS μαζί με τα σύγχρονα εργαλεία του σημερινού προγραμματιστή ιστού.
|
||||
|
||||
> 🎓 Μπορείτε να κάνετε τα πρώτα μαθήματα αυτού του προγραμμάτος ως [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
|
||||
|
||||
Διασφαλίζοντας ότι το περιεχόμενο συνδυάζεται με εργασίες, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών αυξάνετε. Γράψαμε επίσης, πολλά αρχικά μαθήματα JavaScript για να εισαγάγουμε τις βασικές έννοιες, συνδυαζόμενο με βίντεο από τη "[Σειρά για αρχάριους: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" συλλογή των βιντεο tutorial, μερικοί από τους συγγραφείς των οποίων συνέβαλαν σε αυτό το πρόγραμμα μαθημάτων.
|
||||
|
||||
Επιπλέον, ένα κουίζ χαμηλής συμμετοχής πριν από κάθε μάθημα, θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει τη περαιτέρω διατήρηση του. Αυτό το πρόγραμμα μαθημάτων σχεδιάστηκε για να είναι ευέλικτο και διασκεδαστικό και μπορεί να γίνει ολόκληρο ή εν μέρει. Οι εργασίες ξεκινούν μικρές και γίνονται όλο και πιο περίπλοκες μέχρι το τέλος του κύκλου των 12 εβδομάδων.
|
||||
|
||||
Ενώ έχουμε αποφύγει σκόπιμα την εισαγωγή των JavaScript frameworks, ώστε να επικεντρωθούμε στις βασικές δεξιότητες που απαιτούνται ως προγραμματιστής Ιστού πριν υιοθετήσουμε ένα framework, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος μαθημάτων θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Σειρά για αρχάριους: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Βρείτε τα [Code of Conduct](../CODE_OF_CONDUCT.md), [Contributing](../CONTRIBUTING.md), και [Translation](../TRANSLATIONS.md) για οδηγίες. Ευπρόσδεκτα όλα τα εποικοδομητικά σχόλιά σας!
|
||||
|
||||
## Κάθε μάθημα περιλαμβάνει:
|
||||
|
||||
- προαιρετικό σκίτσο σημειώσεων
|
||||
- προαιρετικό επιπρόσθετο βίντεο
|
||||
- κουίζ προθέρμανσης πριν από το μάθημα
|
||||
- γραπτό μάθημα
|
||||
- για τα μαθήματα που έχουν εργασίες, βήμα-βήμα οδηγίες για το πώς να το φτιάξετε
|
||||
- έλεγχοι γνώσεων
|
||||
- πρόκληση
|
||||
- συμπληρωματικό υλικό για διάβασμα
|
||||
- εργασία
|
||||
- κουίζ μετα το μάθημα
|
||||
|
||||
> **Σημείωση για τα κουίζ**: Όλα τα κουίζ περιέχονται [σε αυτή την εφαρμογή](https://ashy-river-0debb7803.1.azurestaticapps.net/), 48 στο συνολο απο τρείς ερωτήσεις το καθένα. Συνδέονται μέσα απο τα μαθήματα αλλα η εφαρμογη του κουίζ μπορεί να τρέξει και τοπικά; ακολουθήστε τις οδηγίες στο φάκελο `quiz-app`. Μεταφράζονται σταδιακά.
|
||||
|
||||
## Μαθήματα
|
||||
|
||||
| | Όνομα εργασίας | Έννοιες που διδάσκονται | Μαθησιακοί στόχοι | Συνδεμένο μάθημα | Συγγραφέας |
|
||||
| :-: | :------------------------------------------------------: | :---------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Ξεκινώντας | Εισαγωγή στον προγραμματισμό και στα εργαλεία του εμπορίου | Εκμάθηση βασικών αρχών των περισσοτέρων γλωσσων προγραμματισμού και του λογισμικού που βοηθα τους επαγγελματίες να κάνουν τη δουλειά τους | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει τη συνεργασία με μια ομάδα | Πώς να χρησιμοποιήσετε το GitHub στην εργασία σας, και πώς να συνεργαστείτε με άλλους στο κώδικα | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | Τύποι δεδομένων της JavaScript | Τα βασικά των τύπων δεδομένων στη JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Functions και Methods | Μάθετε σχετικά με τις λειτουργίες και τις μεθόδους διαχείρισης της λογικής ροής μιας εφαρμογής | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Basics | Λήψη αποφάσεων με την JS | Μάθετε πως να δημιουργήσετε συνθήκες στον κώδικα σας, χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basics | Πίνακες και επαναλήψεις | Εξάσκηση με δεδομένα χρησιμοποιώντας πίνακες και επαναλήψεις στη JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML στη πράξη | Δημιουργήστε το HTML για ένα online terrarium, εστιάζοντας στην κατασκευή της διάταξης | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS στη πράξη | Δημιουργήστε το CSS για να διαμορφώσετε το online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της απόκρισης της σελίδας (responsiveness) | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Δημιουργήστε το JavaScript για να λειτουργήσει το terrarium ως διεπαφή drag/drop, εστιάζοντας στα closures και τον χειρισμό DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Δημιουργία παιχνιδιού πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου για να τα συμπεριλάβετε στη λογική της εφαρμογής σας. | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δουλεύοντας με προγράμματα περιήγησης | Μάθετε πώς λειτουργούν τα προγράμματα περιήγησης, το ιστορικό τους και πώς ξεκινάμε μια επέκταση | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στον τοπικό χώρο αποθήκευσης | Δημιουργήστε τον κώδικα JavaScript της επέκτασης του προγράμματος περιήγησής σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές που είναι αποθηκευμένες στον τοπικό χώρο αποθήκευσης | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Διαδικασίες παρασκηνίου στο πρόγραμμα περιήγησης, απόδοση Ιστού | Χρήση των διαδικασιών πρασκηνίου του περιηγητή, για τη διαχείρηση του εικονιδίου της επέκτασης. Μάθετε για την απόδοση του ιστού και μερικες βελτιστοποιήσεις που πρέπει να κάνετε | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | Προηγμένη ανάπτυξη παιχνιδιών με JavaScript | Μάθετε σχετικά με την κληρονομικότητα, χρησιμοποιώντας τις κλάσεις και τη σύνθεση και το μοτίβο Pub/Sub, για τη προετοιμασία δημιουργίας ενός παιχνιδιού | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | Ζωγραφίζοντας στο canvas | Μάθετε περισσότερα για το Canvas API, που χρησιμοποιείται για την σχεδίαση στοιχείων στην οθόνη | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πως τα στοιχεία μπορύν να αποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | Ανίχνευση σύγκρουσης | Καντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας τα πατήματα πλήκτρων όπως επίσης και η λειτουργία cooldown γιατην εξασφαλίση της απόδοσης του παιχνιδιού | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | Διατήρηση βαθμολογίας | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και την απόδοση του παιχνιδιού | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε σχετικά με τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού στοιχείων και της επαναφοράς των τιμών των μεταβλητών | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML Templates και Routes σε μια Web εφαρμογή | Μάθετε πώς μπορείτε να δημιουργήσετε τα θεμέλια της αρχιτεκτονικής ενος ιστοτόπου πολλαπλών σελίδων, χρησιμοποιώντας HTML templates και routing | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | Δημιουργήστε μια φόρμα σύνδεσης και εγγραφής | Μάθετε σχετικά με τη δημιουργία φορμών και τη διαχείρηση επικύρωσης των στοιχείων | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | Μέθοδοι λήψης και χρήσης δεδομένων | Μάθετε για τη ροή των δεδομένων και πως να τα ανακτήσετε, να τα αποθηκεύσετε και να τα απορρίψετε | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | Έννοιες του State Management | Μάθετε πως η εφαρμογή σας διατηρεί μια κατάσταση και πως να τη διαχειρίζεστε προγραμματιστικά | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Πρόσβαση εκτός σύνδεσης
|
||||
|
||||
Μπορείτε να εκτέλεσετε αυτές τις οδηγίες εκτός σύνδεσης χρησιμοποιοώντας το [Docsify](https://docsify.js.org/#/). Κάντε fork το repo, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στο τοπικο σας μηχάνημα,στη συνέχεια, στο βασικό φάκελο αυτού του repo, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα προβάλλεται στη θύρα 3000 στο localhost: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ενα PDF με όλα τα μαθήματα.
|
||||
|
||||
## Άλλα προγράμματα μαθημάτων
|
||||
|
||||
Η ομάδα μας έχει κι'αλλα προγράμματα μαθημάτων! Ελέγξτε τα εδω:
|
||||
|
||||
- [Machine Learning για Αρχάριους](https://aka.ms/ml-beginners)
|
||||
- [IoT για Αρχάριους](https://aka.ms/iot-beginners)
|
||||
@@ -1,111 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# توسعه وب برای مبتدیان - یک برنامه درسی
|
||||
|
||||
آژوره کلود آدوکتس در مایکروسافت از ارائه یک برنامه درسی 12 هفته ای 24 درس در مورد مبانی جاوا اسکریپت، سی اس اس و اچ تی ام ال خوشحالند. هر درس شامل آزمون های قبل و بعد از درس، دستورالعمل های مکتوب برای تکمیل درس، یک راه حل، یک تکلیف و موارد دیگر است. آموزش مبتنی بر پروژه ما به شما امکان می دهد در حین ساختن یاد بگیرید، راهی ثابت شده برای "چسبیدن" مهارت های جدید.
|
||||
|
||||
از نویسندگانمان جن لوپر، کریس نورینگ، کریستوفر هریسون، جاسمین گریناوی، یوهان لاسورسا، فلور دریس، و تومومی ایمورا، نویسندگان ما صمیمانه تشکر میکنیم!
|
||||
|
||||
**از نویسندگانمان، جن لوپر، کریس نورینگ، کریستوفر هریسون، جاسمین گریناوی، یوهان لاسورسا، فلور دریس و تومومی ایمورا، نویسندگان ما صمیمانه تشکر میکنیم!**
|
||||
|
||||
# شما دانش آموز هستید؟
|
||||
|
||||
با منابع زیر شروع کنید:
|
||||
|
||||
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) در این صفحه، منابع مبتدی، بسته های دانشجویی و حتی راه های دریافت کوپن گواهی رایگان را خواهید یافت. این صفحهای است که میخواهید هر چند وقت یکبار به عنوان نشانهگذاری و بررسی کنید، زیرا ما حداقل ماهانه محتوا را تغییر میدهیم
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) به یک جامعه جهانی از سفیران دانشجو بپیوندید، این می تواند راه شما برای ورود به مایکروسافت باشد
|
||||
|
||||
|
||||
# شروع شدن
|
||||
|
||||
> **معلمان** [شامل چند پیشنهاد](for-teachers.md) داریم در مورد نحوه استفاده از این برنامه درسی. [در انجمن بحث ما](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **[دانش آموزان](https://aka.ms/student-page)**, برای استفاده از این برنامه درسی به تنهایی، کل مخزن را چنگال کنید و تمرینات را به تنهایی کامل کنید، با یک مسابقه قبل از سخنرانی شروع کنید، سپس سخنرانی را بخوانید و بقیه فعالیت ها را تکمیل کنید. سعی کنید پروژه ها را با درک درس ها به جای کپی کردن کد راه حل ایجاد کنید. با این حال، این کد در پوشه های /solutions در هر درس پروژه محور موجود است. ایده دیگر این است که یک گروه مطالعه با دوستان تشکیل دهید و مطالب را با هم مرور کنید. برای مطالعه بیشتر توصیه می کنیم [مايكروسافت لرن](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) و با تماشای فیلم های ذکر شده در زیر.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||
|
||||
گیف توسط [موهیت جیسال](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 برای دریافت ویدیویی در مورد پروژه و افرادی که آن را ایجاد کرده اند، روی تصویر بالا کلیک کنید!
|
||||
|
||||
## آموزش و پرورش
|
||||
|
||||
ما در هنگام ساختن این برنامه درسی دو اصل آموزشی را انتخاب کرده ایم: اطمینان از پروژه محور بودن آن و اینکه شامل آزمون های مکرر است. تا پایان این مجموعه، دانشآموزان یک بازی تایپ، یک تراریوم مجازی، یک افزونه مرورگر سبز، یک بازی از نوع مهاجمان فضایی و یک برنامه بانکی از نوع کسبوکار خواهند ساخت و اصول جاوا اسکریپت را یاد خواهند گرفت. ، اچ تی ام ال و سی اس اس به همراه زنجیره ابزار مدرن توسعه دهندگان وب امروزی.
|
||||
> 🎓 شما می توانید چند درس اول این برنامه درسی را در مایکروسافت لرن به عنوان یک [مسیر یادگیری](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)
|
||||
بخوانید.
|
||||
|
||||
با حصول اطمینان از همسویی محتوا با پروژه ها، این فرآیند برای دانش آموزان جذاب تر می شود و حفظ مفاهیم تقویت می شود. ما همچنین چندین درس ابتدایی در مبانی جاوا اسکریپت نوشتیم تا مفاهیم را معرفی کنیم، همراه با ویدئو از "[سری مبتدیان به: جاوا اسکریپت](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" مجموعه ای از آموزش های ویدئویی که برخی از نویسندگان آن در این برنامه درسی مشارکت داشته اند.
|
||||
|
||||
علاوه بر این، یک مسابقه کم هزینه قبل از کلاس، قصد دانش آموز را برای یادگیری یک موضوع تعیین می کند، در حالی که آزمون دوم بعد از کلاس، حفظ بیشتر را تضمین می کند. این برنامه درسی به گونه ای طراحی شده است که انعطاف پذیر و سرگرم کننده باشد و می تواند به طور کامل یا جزئی انجام شود. پروژه ها کوچک شروع می شوند و در پایان چرخه 12 هفته ای به طور فزاینده ای پیچیده می شوند.
|
||||
|
||||
در حالی که ما عمداً از معرفی فریمورکهای جاوا اسکریپت خودداری کردهایم تا بر مهارتهای اساسی مورد نیاز بهعنوان یک توسعهدهنده وب قبل از اتخاذ یک چارچوب تمرکز کنیم، گام بعدی خوب برای تکمیل این برنامه درسی، یادگیری در مورد Node.js از طریق مجموعهای دیگر از ویدیوها است : "[سری مبتدی به: نود جی اس](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> ما را پیدا کنید [کد رفتار](CODE_OF_CONDUCT.md), [کمک کردن](CONTRIBUTING.md), و [ترجمه](TRANSLATIONS.md) دستورالعمل ها. ما از بازخورد سازنده شما استقبال می کنیم!
|
||||
|
||||
## هر درس شامل:
|
||||
|
||||
- طرحی اختیاری
|
||||
- ویدیوی تکمیلی اختیاری
|
||||
- مسابقه گرم کردن قبل از درس
|
||||
- درس نوشتاری
|
||||
- برای درس های پروژه محور، راهنمای گام به گام نحوه ساخت پروژه
|
||||
- بررسی دانش
|
||||
- یک چالش
|
||||
- خواندن تکمیلی
|
||||
- وظیفه
|
||||
- مسابقه بعد از درس
|
||||
|
||||
> ** نکته ای در مورد آزمون ها **: همه آزمون ها [در این برنامه](https://ashy-river-0debb7803.1.azurestaticapps.net/?loc=fa) موجود است, برای 48 آزمون مجموع سه سوال هر کدام. آنها از داخل درس ها پیوند داده شده اند، اما برنامه مسابقه می تواند به صورت محلی اجرا شود. دستورالعمل موجود در پوشه «کویز-برنامه» را دنبال کنید. آنها به تدریج در حال بومی سازی هستند.
|
||||
|
||||
## درس ها
|
||||
|
||||
| | نام پروژه | مفاهیم تدریس شده | اهداف یادگیری | درس مرتبط | نویسنده |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | شروع شدن | مقدمه ای بر برنامه نویسی و ابزارهای تجارت | زیربنای اساسی بیشتر زبان های برنامه نویسی و نرم افزاری را بیاموزید که به توسعه دهندگان حرفه ای کمک می کند کارهای خود را انجام دهند | [مقدمه ای بر زبان های برنامه نویسی و ابزارهای تجارت](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | جزمین |
|
||||
| 02 | شروع شدن | اصول گیت هاب شامل کار با یک تیم است | نحوه استفاده از گیت هاب در پروژه خود، نحوه همکاری با دیگران بر اساس کد | [معرفی گیت هاب](/1-getting-started-lessons/2-github-basics/README.md) | فلور |
|
||||
| 03 | شروع شدن | دسترسی | اصول دسترسی به وب را بیاموزید | [مبانی دسترسی](/1-getting-started-lessons/3-accessibility/README.md) | کریستفر |
|
||||
| 04 | اصول جی اس | انواع داده جاوا اسکریپت | اصول اولیه انواع داده جاوا اسکریپت | [انواع داده ها](/2-js-basics/1-data-types/README.md) | جزمین |
|
||||
| 05 | اصول جی اس | توابع و روش ها | با توابع و روش های مدیریت جریان منطقی برنامه آشنا شوید | [توابع و روش ها](/2-js-basics/2-functions-methods/README.md) | جزمین و کریستوفر |
|
||||
| 06 | اصول جی اس | تصمیم گیری با جی اس | بیاموزید که چگونه با استفاده از روش های تصمیم گیری در کد خود شرایط ایجاد کنید | [تصمیم گیری](/2-js-basics/3-making-decisions/README.md) | جزمین |
|
||||
| 07 | اصول جی اس | آرایه ها و حلقه ها | با داده ها با استفاده از آرایه ها و حلقه ها در جاوا اسکریپت کار کنید | [آرایه ها و حلقه ها](/2-js-basics/4-arrays-loops/README.md) | جزمین |
|
||||
| 08 | [تراریوم](/3-terrarium/solution/README.md) | اچ تی ام ال در عمل | کد اچ تی ام ال را به صورت آنلاین بسازید، با تمرکز بر روی ایجاد یک صفحه بزرگ | [مقدمه ای بر اچ تی ام ال](/3-terrarium/1-intro-to-html/README.md) | جن |
|
||||
| 09 | [تراریوم](/3-terrarium/solution/README.md) | سی اس اس در عمل | ساخت سی اس اس برای سبک تراریوم آنلاین، با تمرکز بر اصول اولیه سی اس اس از جمله پاسخگو بودن صفحه | [مقدمه ای بر سی اس اس](/3-terrarium/2-intro-to-css/README.md) | جن || 10 | [تراریوم](/3-terrarium/solution/README.md) | بسته شدن جاوا اسکریپت، دستکاری دام | جاوا اسکریپت را بسازید تا تراریوم به عنوان یک رابط کشیدن و رها کردن، با تمرکز بر بسته شدن و دستکاری دام عمل کند. | [بسته شدن جاوا اسکریپت، دستکاری دام](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | جن |
|
||||
| 11 | [بازی تایپ](/4-typing-game/solution/README.md) | یک بازی تایپ بسازید | با نحوه استفاده از رویدادهای صفحه کلید برای هدایت منطق برنامه جاوا اسکریپت خود آشنا شوید | [برنامه نویسی رویداد محور](/4-typing-game/typing-game/README.md) | کریستوفر |
|
||||
| 12 | [پسوند مرورگر سبز](/5-browser-extension/solution/README.md) | کار با مرورگرها | با نحوه کار مرورگرها، تاریخچه آنها و نحوه ایجاد داربست در اولین عناصر یک برنامه افزودنی مرورگر آشنا شوید | [درباره مرورگرها](/5-browser-extension/1-about-browsers/README.md) | جن |
|
||||
| 13 | [پسوند مرورگر سبز](/5-browser-extension/solution/README.md) | ساخت فرم، فراخوانی ای پی ای و ذخیره متغیرها در حافظه محلی | عناصر جاوا اسکریپت افزونه مرورگر خود را برای فراخوانی یک ای پی ای با استفاده از متغیرهای ذخیره شده در حافظه محلی بسازید | [ای پی ای، فرمها و فضای ذخیرهسازی محلی](/5-browser-extension/2-forms-browsers-local-storage/README.md) | جن |
|
||||
| 14 | [پسوند مرورگر سبز](/5-browser-extension/solution/README.md) | فرآیندهای پس زمینه در مرورگر، عملکرد وب | از فرآیندهای پسزمینه مرورگر برای مدیریت نماد برنامه افزودنی استفاده کنید. در مورد عملکرد وب و برخی بهینه سازی هایی که باید انجام دهید بیاموزید | [وظایف و عملکرد پس زمینه](/5-browser-extension/3-background-tasks-and-performance/README.md) | جن |
|
||||
| 15 | [بازی فضایی](/6-space-game/solution/README.md) | توسعه بازی پیشرفته تر با جاوا اسکریپت | با استفاده از کلاسها و ترکیب و الگوی پاب/ساب، در آمادهسازی برای ساختن یک بازی، درباره وراثت بیاموزید. | [مقدمه ای بر توسعه بازی پیشرفته](/6-space-game/1-introduction/README.md) | کریس |
|
||||
| 16 | [بازی فضایی](/6-space-game/solution/README.md) | طراحی روی بوم | درباره کانواز ای پی ای که برای کشیدن عناصر به صفحه استفاده می شود، بیاموزید | [طراحی روی بوم](/6-space-game/2-drawing-to-canvas/README.md) | کریس |
|
||||
| 17 | [بازی فضایی](/6-space-game/solution/README.md) | حرکت عناصر در اطراف صفحه نمایش | کشف کنید که چگونه عناصر می توانند با استفاده از مختصات دکارتی و کانواز ای پی ای حرکت کنند | [حرکت عناصر در اطراف](/6-space-game/3-moving-elements-around/README.md) | کریس |
|
||||
| 18 | [بازی فضایی](/6-space-game/solution/README.md) | تشخیص برخورد | با استفاده از کلیدهای کلیدی، عناصر را با هم برخورد کرده و به یکدیگر واکنش نشان دهند و یک عملکرد خنک کننده برای اطمینان از عملکرد بازی ارائه دهید. | [تشخیص برخورد](/6-space-game/4-collision-detection/README.md) | کریس |
|
||||
| 19 | [بازی فضایی](/6-space-game/solution/README.md) | حفظ امتیاز | محاسبات ریاضی را بر اساس وضعیت و عملکرد بازی انجام دهید | [حفظ امتیاز](/6-space-game/5-keeping-score/README.md) | کریس |
|
||||
| 20 | [بازی فضایی](/6-space-game/solution/README.md) | پایان و شروع مجدد بازی | درباره پایان و شروع مجدد بازی، از جمله پاکسازی دارایی ها و بازنشانی مقادیر متغیر، اطلاعات کسب کنید | [شرط پایان](/6-space-game/6-end-condition/README.md) | کریس |
|
||||
| 21 | [اپلیکیشن بانکداری](/7-bank-project/solution/README.md) | الگوها و مسیرهای اچ تی ام ال در یک برنامه وب | نحوه ایجاد داربست معماری یک وب سایت چند صفحه ای با استفاده از مسیریابی و قالب های اچ تی ام ال را بیاموزید | [الگوها و مسیرهای اچ تی ام ال](/7-bank-project/1-template-route/README.md) | یوهان |
|
||||
| 22 | [اپلیکیشن بانکداری](/7-bank-project/solution/README.md) | یک فرم ورود و ثبت نام بسازید | در مورد ساخت فرم ها و روال های اعتبار سنجی ارائه اطلاعات کسب کنید | [فرم](/7-bank-project/2-forms/README.md) | یوهان |
|
||||
| 23 | [اپلیکیشن بانکداری](/7-bank-project/solution/README.md) | روش های واکشی و استفاده از داده ها | چگونه داده ها به داخل و خارج از برنامه شما جریان می یابد، چگونه آن را واکشی کنید، ذخیره کنید، و از بین ببرید | [داده ها](/7-bank-project/3-data/README.md) | یوهان |
|
||||
| 24 | [اپلیکیشن بانکداری](/7-bank-project/solution/README.md) | مفاهیم مدیریت دولتی | بیاموزید که چگونه برنامه شما حالت خود را حفظ می کند و چگونه آن را به صورت برنامه ریزی مدیریت کنید | [مدیریت ستیت](/7-bank-project/4-state-management/README.md) | یوهان |
|
||||
## دسترسی آفلاین
|
||||
|
||||
با استفاده از [Docsify](https://docsify.js.org/#/) می توانید این اسناد را به صورت آفلاین اجرا کنید. این مخزن را در دستگاه محلی خود [نصب کنید Docsify](https://docsify.js.org/#/quickstart) و سپس در پوشه اصلی این مخزن، «docsify serve» را تایپ کنید. این وب سایت در پورت 3000 در لوکال هاست شما ارائه می شود: «localhost:3000».
|
||||
## پی دی اف
|
||||
|
||||
پی دی اف تمام دروس را می توان یافت [اینجا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## سایر برنامه های درسی
|
||||
|
||||
تیم ما برنامه های درسی دیگری تولید می کند! وارسی:
|
||||
|
||||
- [یادگیری ماشینی برای مبتدیان](https://aka.ms/ml-beginners)
|
||||
- [اینترنت اشیا برای مبتدیان](https://aka.ms/iot-beginners)
|
||||
- [علم داده برای مبتدیان](https://aka.ms/datascience-beginners)
|
||||
- [هوش مصنوعی برای مبتدیان](https://aka.ms/ai-beginners)
|
||||
@@ -1,101 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Web Development para sa mga Nagsisimula - Kurikulum
|
||||
|
||||
Ang Azure Cloud Advocates sa Microsoft ay nalulugod na mag-alok ng 12-linggo, 24-aralin na curriculum tungkol sa JavaScript, CSS, at HTML basics. Kasama sa bawat aralin ang mga pagsusulit bago at pagkatapos ng aralin, nakasulat na mga tagubilin upang makumpleto ang aralin, isang solusyon, isang takdang-aralin at higit pa. Ang aming project-based na pedagogy ay nagbibigay-daan sa iyo na matuto habang nagtatayo, isang napatunayang paraan para sa mga bagong kasanayan.
|
||||
|
||||
**Taos pusong pasasalamat sa aming mga may-akda Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, at sketchnote artist Tomomi Imura!**
|
||||
|
||||
# Simula
|
||||
|
||||
> **Mga Guro**, mayroon kaming [included some suggestions](../for-teachers.md) kung paano gamitin ang curriculum na ito. Gusto namin ang iyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **Mga mag-aaral**, para magamit ang curriculum na ito nang mag-isa, i-fork ang buong repo at kumpletuhin ang mga pagsasanay nang mag-isa, simula sa pagsusulit bago ang lecture, pagkatapos ay basahin ang lecture at kumpletuhin ang iba pang aktibidad. Subukang lumikha ng mga proyekto sa pamamagitan ng pag-unawa sa mga aralin sa halip na pagkopya ng code ng solusyon; gayunpaman, ang code na iyon ay magagamit sa mga folder ng /solutions sa bawat aralin na nakatuon sa proyekto. Ang isa pang ideya ay ang bumuo ng isang grupo ng pag-aaral kasama ang mga kaibigan at sabay-sabay na suriin ang nilalaman. Para sa karagdagang pag-aaral, inirerekomenda namin ang [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) and by watching the videos mentioned below.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa proyekto at sa mga taong lumikha nito!
|
||||
|
||||
## Pedagogy
|
||||
|
||||
Pumili kami ng dalawang pedagogical tenets habang binubuo ang curriculum na ito: pagtiyak na ito ay batay sa proyekto at kasama nito ang madalas na mga pagsusulit. Sa pagtatapos ng seryeng ito, makakagawa ang mga mag-aaral ng laro sa pag-type, virtual terrarium, extension ng browser na 'berde', uri ng larong 'space invaders', at banking app na uri ng negosyo, at matututunan nila ang mga pangunahing kaalaman sa JavaScript. , HTML, at CSS kasama ang modernong toolchain ng web developer ngayon.
|
||||
|
||||
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
|
||||
|
||||
Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay ginagawang mas nakakaengganyo para sa mga mag-aaral at ang pagpapanatili ng mga konsepto ay madaragdagan. Sumulat din kami ng ilang panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
|
||||
|
||||
Bilang karagdagan, ang isang mababang-stakes na pagsusulit bago ang isang klase ay nagtatakda ng intensyon ng mag-aaral sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagpapanatili. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12 linggong ikot.
|
||||
|
||||
Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript upang makapag-concentrate sa mga pangunahing kasanayang kailangan bilang isang web developer bago magpatibay ng isang balangkas, isang magandang susunod na hakbang sa pagkumpleto ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Hanapin ang aming [Code of Conduct](../CODE_OF_CONDUCT.md), [Contributing](../CONTRIBUTING.md), at [Translation](../TRANSLATIONS.md) mga alituntunin. Tinatanggap namin ang iyong nakabubuo na feedback!
|
||||
>
|
||||
## Kasama sa bawat aralin ang:
|
||||
|
||||
- optional sketchnote
|
||||
- optional supplemental video
|
||||
- pre-lesson warmup quiz
|
||||
- written lesson
|
||||
- for project-based lessons, step-by-step guides on how to build the project
|
||||
- knowledge checks
|
||||
- a challenge
|
||||
- supplemental reading
|
||||
- assignment
|
||||
- post-lesson quiz
|
||||
|
||||
> **Isang tala tungkol sa mga pagsusulit**: Ang lahat ng mga pagsusulit ay nakapaloob [in this app](https://ashy-river-0debb7803.1.azurestaticapps.net/), para sa 48 kabuuang pagsusulit ng tatlong tanong bawat isa. Ang mga ito ay naka-link mula sa loob ng mga aralin ngunit ang pagsusulit app ay maaaring patakbuhin nang lokal; sundin ang panuto sa `quiz-app` folder. Unti-unti silang na-localize.
|
||||
|
||||
## Mga aralin
|
||||
|
||||
| | Pangalan ng proyekto | Mga Konseptong Itinuro | Mga Layunin sa pag-aaral | Nakaugnay na Aralin | May-akda |
|
||||
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Nagsisimula | Panimula sa Programming at Tools of the Trade | Matutunan ang mga pangunahing batayan sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer na gawin ang kanilang mga trabaho | [Panimula sa Programming Languages at Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Nagsisimula | Ang mga pangunahing kaalaman ng GitHub, kasama ang pakikipagtulungan sa isang team | Paano gamitin ang GitHub sa iyong proyekto, kung paano makipagtulungan sa iba sa isang code base | [Panimula sa GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Nagsisimula | Accessibility | Alamin ang mga pangunahing kaalaman sa web accessibility | [Mga Pangunahing Kakayahan](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | Mga Uri ng Data ng JavaScript | Ang mga pangunahing kaalaman ng mga uri ng data ng JavaScript | [Uri ng data](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Mga Kakayahan at Paraan | Matuto tungkol sa mga function at pamamaraan para pamahalaan ang logic flow ng isang application | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Basics | Paggawa ng mga Desisyon sa JS | Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon | [Paggawa ng mga Desisyon](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basics | Mga Array at Loop | Makipagtulungan sa data gamit ang mga arrays at loops in JavaScript | [Mga Array at Loop](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML sa Practice | Buuin ang HTML upang lumikha ng isang online na terrarium, na nakatuon sa pagbuo ng isang layout | [Panimula sa HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS sa Practice | Buuin ang CSS upang mai-istilo ang online na terrarium, na tumutuon sa mga pangunahing kaalaman ng CSS kabilang ang paggawa ng page na tumutugon | [Panimula sa CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Mga Pagsasara ng JavaScript, pagmamanipula ng DOM | Buuin ang JavaScript upang gawing function ang terrarium bilang isang drag/drop interface, na tumutuon sa mga pagsasara at pagmamanipula ng DOM | [Mga Pagsasara ng JavaScript, pagmamanipula ng DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Matutunan kung paano gumamit ng mga kaganapan sa keyboard upang himukin ang lohika ng iyong JavaScript app | [Programming na Batay sa Kaganapan](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Nagtatrabaho sa Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano scaffold ang mga unang elemento ng isang extension ng browser | [Tungkol sa Mga Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Pagbuo ng form, pagtawag ng API at pag-iimbak ng mga variable sa lokal na storage | Buuin ang mga elemento ng JavaScript ng iyong extension ng browser upang tumawag sa isang API gamit ang mga variable na nakaimbak sa lokal na storage | [APIs, Forms, at Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Mga proseso sa background sa browser, pagganap ng web | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga pag-optimize na gagawin | [Mga Gawain sa Background at Pagganap](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | Higit pang Advanced na Pagbuo ng Laro gamit ang JavaScript | Alamin ang tungkol sa Inheritance gamit ang parehong Mga Klase at Komposisyon at ang pattern ng Pub/Sub, bilang paghahanda sa pagbuo ng isang laro | [Panimula sa Advanced na Pagbuo ng Laro](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | Pagguhit sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang gumuhit ng mga elemento sa isang screen | [Pagguhit sa Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | Paglipat ng mga elemento sa paligid ng screen | Tuklasin kung paano makakakuha ng paggalaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API | [Paglipat ng mga Elemento](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | Pagtuklas ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | Pagpapanatiling Kalidad | Magsagawa ng mga kalkulasyon sa matematika batay sa katayuan at pagganap ng laro | [Pagpapanatiling Kalidad](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | Pagtapos at i-restart ang laro | Matuto tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable na value | [Ang Katapusang Kondisyon](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | Mga Template at Ruta ng HTML sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage na website gamit ang pagruruta at mga HTML na template | [Mga Template at Ruta ng HTML](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | Bumuo ng isang Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at pagbibigay ng mga gawain sa pagpapatunay | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data sa loob at labas ng iyong app, kung paano ito kunin, iimbak, at itapon ito | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | Mga Konsepto ng Pamamahala ng Estado | Alamin kung paano napapanatili ng iyong app ang estado at kung paano ito pamahalaan sa pamamagitan ng program | [Estadong Pamamahala](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Offline access
|
||||
|
||||
Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit [Docsify](https://docsify.js.org/#/). i-Fork itong repo, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahatid ang website sa port 3000 sa iyong localhost: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Iba pang Kurikulum
|
||||
|
||||
Ang aming team ay gumagawa ng iba pang kurikulum! Tignan:
|
||||
|
||||
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
@@ -1,113 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Développement Web pour débutants - Programme
|
||||
|
||||
Azure Cloud Advocates de Microsoft ont le plaisir de vous proposer un programme de 12 semaines et 24 leçons sur les bases de JavaScript, CSS et HTML. Chaque leçon comprend des quiz avant et après la leçon, des instructions écrites pour terminer la leçon, une solution, un devoir et plus encore. Notre pédagogie basée sur des projets vous permet d’apprendre tout en construisant, un moyen éprouvé pour que de nouvelles compétences puissent 'coller'.
|
||||
|
||||
**Un grand merci à nos auteurs Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees et l’artiste de sketchnote Tomomi Imura!**
|
||||
|
||||
# Êtes vous étudiant ?
|
||||
|
||||
Commencez avec les ressources suivantes :
|
||||
|
||||
[La page Hub étudiants](https://docs.microsoft.com/fr-fr/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), vous trouverez des ressources pour les débutants, packs étudiants et des méthodes pour avoir des vouchers gratuits pour des certifications. C'est une page que vous pouvez enregistrer and vérifier de temps en temps car nous modifions le contenu mensuellement.
|
||||
|
||||
[Microsoft Learn Student Ambassadors](https://studentambassadors.microsoft.com/?WT.mc_id=academic-77807-sagibbon), rejoignez une communauté globale d'étudiants ambassadeurs, cela peut vous faire découvrir Microsoft.
|
||||
|
||||
# Pour commencer
|
||||
|
||||
> **Instituteurs**, nous avons [inclus quelques suggestions](for-teachers.fr.md) sur la façon d’utiliser ce programme. Nous aimerions avoir vos commentaires [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **Elèves**, pour utiliser ce programme par vous-même, effectuer un Fork l’ensemble du dépôt et compléter les exercices par vous-même, en commençant par un quiz préalable, puis en lisant le cours et en complétant le reste des activités. Essayez de créer les projets en comprenant les leçons plutôt que de copier le code de la solution; toutefois, ce code est disponible dans les dossiers /solutions de chaque leçon orientée projet. Une autre idée serait de former un groupe d’étude avec des amis et de parcourir le contenu ensemble. Pour une étude plus approfondie, nous recommandons [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) et en regardant les vidéos mentionnées ci-dessous.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Vidéo promotionnelle")
|
||||
|
||||
Gif par [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 Cliquez sur l’image ci-dessus pour une vidéo sur le projet et les personnes qui l’ont créé!
|
||||
|
||||
## Pédagogie
|
||||
|
||||
Nous avons choisi deux principes pédagogiques lors de l’élaboration de ce programme : s’assurer qu’il est basé sur des projets et qu’il comprend des quiz fréquents. À la fin de cette série, les élèves auront construit un jeu de dactylographie, un terrarium virtuel, une extension de navigateur 'verte', un jeu de type 'space invaders' et une application bancaire de type professionnel, et auront appris les bases de JavaScript, HTML et CSS ainsi que la chaîne d’outils moderne du développeur Web d’aujourd’hui.
|
||||
|
||||
> 🎓 Vous pouvez prendre les premières leçons de ce programme en tant que [Parcours d’apprentissage](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn!
|
||||
|
||||
En veillant à ce que le contenu s’aligne sur les projets, le processus est rendu plus attrayant pour les étudiants et la rétention des concepts sera augmentée. Nous avons également écrit plusieurs leçons de démarrage sur les bases de JavaScript pour introduire des concepts, associées à une vidéo de la "[Série pour débutants à : JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" une collection de tutoriels vidéo, dont certains auteurs ont contribué à ce programme.
|
||||
|
||||
En outre, un quiz à faible enjeu avant un cours définit l’intention de l’élève d’apprendre un sujet, tandis qu’un deuxième quiz après le cours assure une rétention supplémentaire. Ce programme a été conçu pour être flexible et amusant et peut être pris en tout ou en partie. Les projets commencent petit et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
|
||||
|
||||
Bien que nous ayons délibérément évité d’introduire des frameworks JavaScript afin de nous concentrer sur les compétences de base nécessaires en tant que développeur Web avant d’adopter un framework, une bonne prochaine étape pour compléter ce programme serait d’en apprendre davantage sur Node.js via une autre collection de vidéos: "[Série pour débutants en Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Trouvez nos directives de [Code de conduite](../CODE_OF_CONDUCT.md), pour [Contribuer](../CONTRIBUTING.md) et de [Traduction](../TRANSLATIONS.md). Vos commentaires constructifs sont les bienvenus!
|
||||
|
||||
## Chaque leçon comprend :
|
||||
|
||||
- note de croquis facultative (sketchnote)
|
||||
- vidéo supplémentaire en option
|
||||
- quiz préalable avant la leçon
|
||||
- leçon écrite
|
||||
- pour les leçons basées sur un projet, des guides étape par étape sur la façon de construire le projet
|
||||
- vérifications des connaissances
|
||||
- un défi
|
||||
- lecture supplémentaire
|
||||
- affectation
|
||||
- quiz de validation des connaissances
|
||||
|
||||
> **Une note sur les quiz**: Tous les quiz sont contenus [dans cette application](https://ashy-river-0debb7803.1.azurestaticapps.net/), pour un total de 48 quiz de trois questions chacun. Ils sont liés à partir des leçons, mais l’application de quiz peut être exécutée localement; suivez les instructions dans le dossier `quiz-app`. Ils sont progressivement localisés.
|
||||
|
||||
## Leçons
|
||||
|
||||
|
||||
| | Nom du projet | Compétences à acquérir | Objectifs | Leçon liée | Auteur |
|
||||
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Pour commencer | Introduction à la programmation et aux outils métiers | Savoir les bases de quelques langages de programmation et leur utilité dans la création de solutions informatiques | [Introduction à la programmation](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md) | Jasmine |
|
||||
| 02 | Pour commencer | Les bases de Github et le travail en groupe | Apprendre comment utiliser GitHub et contribuer à des projets | [Introduction aux bases de GitHub](/1-getting-started-lessons/2-github-basics/translations/README.fr.md) | Floor |
|
||||
| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité Web | [Fondamentaux de l'accessibilité](/1-getting-started-lessons/3-accessibility/translations/README.fr.md) | Christopher |
|
||||
| 04 | Les bases de JS | Types de données JavaScript | Les bases des types de données JavaScript | [Types de données](/2-js-basics/1-data-types/translations/README.fr.md) | Jasmine |
|
||||
| 05 | Les bases de JS | Fonctions et méthodes | En savoir plus sur les fonctions et les méthodes de gestion du flux logique d’une application flow | [Fonctions et méthodes](/2-js-basics/2-functions-methods/translations/README.fr.md) | Jasmine et Christopher |
|
||||
| 06 | Les bases de JS | Prendre des décisions avec JS | Découvrez comment créer des conditions dans votre code à l’aide de méthodes de prise de décision methods | [Prendre des décisions](/2-js-basics/3-making-decisions/translations/README.fr.md) | Jasmine |
|
||||
| 07 | Les bases de JS | Tableaux et boucles | Utiliser des données à l’aide de tableaux et de boucles en JavaScript | [Tableaux et boucles](/2-js-basics/4-arrays-loops/translations/README.fr.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | HTML en pratique | Construisez le code HTML pour créer un terrarium en ligne, en vous concentrant sur la construction d’une mise en page | [Introduction au HTML](/3-terrarium/1-intro-to-html/translations/README.fr.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | CSS en pratique | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, y compris rendre la page réactive | [Introduction au CSS](/3-terrarium/2-intro-to-css/translations/README.fr.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | Fermetures JavaScript, manipulation DOM | Construisez le JavaScript pour que le terrarium fonctionne comme une interface glisser/déposer, en vous concentrant sur les fermetures et la manipulation du DOM | [Fermetures JavaScript, manipulation DOM](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/translations/README.fr.md) | Créer un jeu de frappe | Découvrez comment utiliser les événements de clavier pour piloter la logique de votre application JavaScript | [Programmation événementielle](/4-typing-game/typing-game/translations/README.fr.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Utilisation des navigateurs | Découvrez comment fonctionnent les navigateurs, leur historique et comment échafauder les premiers éléments d’une extension de navigateur | [À propos des navigateurs](/5-browser-extension/1-about-browsers/translations/README.fr.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Création d’un formulaire, appel d’une API et stockage de variables dans le stockage local | Générez les éléments JavaScript de votre extension de navigateur pour appeler une API à l’aide de variables stockées dans le stockage local | [API, formulaires et stockage local](/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Processus en arrière-plan dans le navigateur, performances Web | Utilisez les processus d’arrière-plan du navigateur pour gérer l’icône de l’extension; en savoir plus sur les performances Web et quelques optimisations à faire | [Les tâches et les performances en arrière-plan](/5-browser-extension/3-background-tasks-and-performance/translations/README.fr.md) | Jen |
|
||||
| 15 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Développement avancé d'un jeu en Javascript | En savoir plus sur l’héritage en utilisant à la fois les classes et la composition et le modèle Pub/Sub, en préparation de la création d’un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/translations/README.fr.md) | Chris |
|
||||
| 16 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Les Canvas | En savoir plus sur l’API Canvas, utilisée pour dessiner des éléments sur un écran | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/translations/README.fr.md) | Chris |
|
||||
| 17 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Déplacement d’éléments autour de l’écran | Découvrez comment les éléments peuvent gagner du mouvement à l’aide des coordonnées cartésiennes et de l’API Canvas | [Déplacer des éléments autour](/6-space-game/3-moving-elements-around/translations/README.fr.md) | Chris |
|
||||
| 18 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Détection de collision | Faire entrer en collision les éléments et les faire réagir les uns aux autres à l’aide d’appuis sur les touches et fournir une fonction de refroidissement pour assurer les performances du jeu | [Détection de collision](/6-space-game/4-collision-detection/translations/README.fr.md) | Chris |
|
||||
| 19 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Garder le score | Effectuez des calculs mathématiques en fonction de l’état du jeu et des performances | [Garder le score](/6-space-game/5-keeping-score/translations/README.fr.md) | Chris |
|
||||
| 20 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Fin et redémarrage du jeu | Découvrez comment terminer et redémarrer le jeu, y compris le nettoyage des ressources et la réinitialisation des valeurs variables | [Les conditions de fin](/6-space-game/6-end-condition/translations/README.fr.md) | Chris |
|
||||
| 21 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Modèles et Routes HTML dans une application Web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/translations/README.fr.md) | Yohan |
|
||||
| 22 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Créez un formulaire de connexion et d’inscription | En savoir plus sur la création de formulaires et la gestion des routines de validation | [Formulaires](/7-bank-project/2-forms/translations/README.fr.md) | Yohan |
|
||||
| 23 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Fetch et utilisation des données | Comment les données entrent et sortent de votre application, comment les récupérer, les stocker et les supprimer | [Données](/7-bank-project/3-data/translations/README.fr.md) | Yohan |
|
||||
| 24 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Concepts de la gestion des states | Découvrez comment votre application conserve son état et comment la gérer par programme | [Gestion de l'état](/7-bank-project/4-state-management/translations/README.fr.md) | Yohan |
|
||||
|
||||
## Accéder au cours hors connexion
|
||||
|
||||
Vous pouvez exécuter cette documentation hors connexion à l’aide de [Docsify](https://docsify.js.org/#/). Effectuez un Fork de ce référentiel, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre ordinateur local, puis dans le dossier racine de ce référentiel, tapez `docsify serve`. Le site Web va apparaître dans votre navigateur au port 3000 du localhost: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Un PDF de toutes les leçons peut être trouvé [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Autres programmes d’études
|
||||
|
||||
Notre équipe produit d’autres programmes! Jetez un oeil:
|
||||
|
||||
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [AI for Beginners](https://aka.ms/ai-beginners)
|
||||
@@ -1,108 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# वेब डेवेलोपमेंट नौसीखियों के लिए - एक पाठ्यक्रम
|
||||
|
||||
Microsoft के Azure Cloud Advocates आपको प्रदान करती है 12-सप्ताह, 24-पाठ का पाठ्यक्रम जिसमें JavaScript, CSS और HTML की सभी मूल बातें हैं। प्रत्येक पाठ में पूर्व और बाद में पाठ क्विज़ शामिल हैं, पाठ को पूरा करने के लिए लिखित निर्देश, एक समाधान, एक असाइनमेंट और बहुत कुछ शामिल हैं। हमारी परियोजना-आधारित शिक्षाशास्त्र आपको निर्माण करते समय आपको एक नए कौशल को सीखने का मौका देती है।
|
||||
|
||||
**हमारे लेखकों जेन लूपर, क्रिस नॉरिंग, क्रिस्टोफर हैरिसन, जैस्मीन ग्रीनवे, योहान लसोरा, फ़्लोर ड्रीज़ और स्केचनोट कलाकार टोमोमी इमुरा को हार्दिक धन्यवाद!**
|
||||
|
||||
# क्या आप स्कूल में पढ़ते हैं?
|
||||
|
||||
निम्नलिखित संसाधनों के साथ आरंभ करें:
|
||||
|
||||
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa)
|
||||
इस पृष्ठ में, आपको शुरुआती संसाधन, छात्र पैक और यहां तक कि एक निःशुल्क प्रमाणपत्र वाउचर प्राप्त करने के तरीके भी मिलेंगे। यह एक ऐसा पृष्ठ है जिसे आप समय-समय पर बुकमार्क और जांचना चाहते हैं क्योंकि हम कम से कम मासिक सामग्री को बदलते हैं।
|
||||
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) छात्रों के वैश्विक समुदाय में शामिल हों, यह Microsoft में आपका रास्ता हो सकता है।
|
||||
|
||||
# शुरू करना
|
||||
|
||||
> **शिक्षकों**, हमने इस पाठ्यक्रम का उपयोग करने के बारे में [कुछ सुझाव](for-teachers.hi.md) शामिल किए हैं। यदि आप अपना स्वयं का पाठ बनाना चाहते हैं, तो हमने एक [पाठ टेम्पलेट](lesson-template/translations/README.hi.md) भी शामिल किया है
|
||||
|
||||
> **छात्र**, अपने दम पर इस पाठ्यक्रम का उपयोग करने के लिए, पूरे रेपो को फोर्क करें और अपने दम पर अभ्यास पूरा करें, एक प्री-लेक्चर क्विज़ से शुरू करें, फिर लेक्चर को पढ़ें और बाकी गतिविधियों को पूरा करें। समाधान कोड को कॉपी करने के बजाय पाठों को समझकर परियोजनाओं को बनाने की कोशिश करें; हालाँकि यह कोड प्रत्येक प्रोजेक्ट-ओरिएंटेड पाठ में / समाधान फ़ोल्डर में उपलब्ध है। एक और विचार दोस्तों के साथ एक अध्ययन समूह बनाने और एक साथ सामग्री के माध्यम से जाने का होगा। आगे के अध्ययन के लिए, हम अनुशंसा करते हैं [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) और नीचे दिए गए वीडियो देखकर।
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "प्रोमो वीडियो")
|
||||
|
||||
> परियोजना के बारे में एक वीडियो और इसे बनाने वाले लोगों के लिए ऊपर की छवि पर क्लिक करें!
|
||||
|
||||
## शिक्षा शास्त्र
|
||||
|
||||
हमने इस पाठ्यक्रम का निर्माण करते समय दो शैक्षणिक सिद्धांतों को चुना है: यह सुनिश्चित करना कि यह परियोजना-आधारित है और इसमें बार-बार क्विज़ शामिल हैं। इस श्रृंखला के अंत तक, छात्रों ने एक टाइपिंग गेम, एक वर्चुअल टेरारियम, एक 'ग्रीन' ब्राउज़र एक्सटेंशन, एक 'स्पेस इनवेस्टर्स' टाइप गेम और एक बिजनेस-टाइप बैंकिंग ऐप बनाया होगा, और जावास्क्रिप्ट की मूल बातें सीखी होंगी और आज के वेब डेवलपर के आधुनिक टूलचैन के साथ, HTML और सीएसएस भी सीखीं होंगी।
|
||||
|
||||
यह सुनिश्चित करते हुए कि सामग्री परियोजनाओं के साथ संरेखित होती है, प्रक्रिया को छात्रों के लिए अधिक आकर्षक बनाया जाता है और अवधारणाओं की अवधारण को संवर्धित किया जाएगा। हमने अवधारणाओं को पेश करने के लिए जावास्क्रिप्ट मूल बातें में कई स्टार्टर पाठ भी लिखे, वीडियो ट्यूटोरियल के "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" संग्रह के साथ, जिनके कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया।
|
||||
|
||||
इसके अलावा, एक कक्षा से पहले एक कम-दांव प्रश्नोत्तरी एक विषय सीखने की दिशा में छात्र का इरादा निर्धारित करता है, जबकि कक्षा के बाद एक दूसरा प्रश्नोत्तरी एक प्रतिधारण सुनिश्चित करता है। इस पाठ्यक्रम को लचीला और मज़ेदार बनाने के लिए डिज़ाइन किया गया है और इसे पूर्ण या आंशिक रूप से लिया जा सकता है। परियोजनाएं छोटी शुरू होती हैं और 12 सप्ताह के चक्र के अंत तक तेजी से जटिल हो जाती हैं।
|
||||
|
||||
जबकि हमने उद्देश्यपूर्ण रूप से जावास्क्रिप्ट फ्रेमवर्क शुरू करने से बचा है, ताकि एक फ्रेमवर्क अपनाने से पहले वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के लिए एक अच्छा अगला कदम वीडियो के एक अन्य संग्रह के माध्यम से 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), और [अनुवाद](/TRANSLATIONS.md) दिशानिर्देश खोजें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
|
||||
>
|
||||
## प्रत्येक पाठ में शामिल हैं:
|
||||
|
||||
- वैकल्पिक स्केचनोट
|
||||
- वैकल्पिक पूरक वीडियो
|
||||
- पूर्व-व्याख्यान वार्मअप प्रश्नोत्तरी
|
||||
- लिखित पाठ
|
||||
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट के निर्माण के चरण-दर-चरण मार्गदर्शिकाएँ
|
||||
- ज्ञान जांच
|
||||
- एक चुनौती
|
||||
- पूरक पढ़ना
|
||||
- असाइनमेंट
|
||||
- व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
|
||||
> **क्विज़ के बारे में एक नोट**:सभी क्विज़ेज़ [इस ऐप में](https://ashy-river-0debb7803.1.azurestaticapps.net/) शामिल हैं, तीन प्रश्नों के कुल 48 क्विज़ के लिए। वे पाठों के भीतर से जुड़े हुए हैं लेकिन क्विज़ ऐप को स्थानीय रूप से चलाया जा सकता है; `quiz-app` फ़ोल्डर में दिए गए निर्देश का पालन करें। उन्हें धीरे-धीरे स्थानीयकृत किया जा रहा है।
|
||||
|
||||
## पाठ
|
||||
|
||||
| | प्रोजेक्टका नाम | अवधारणाओं जो सिखाया | सीखने के मकसद | लिंक किया हुआ पाठ | रचयिता |
|
||||
| :---: | :------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------------------------------------: | :------: |
|
||||
| 01 | शुरू करना | ट्रैड प्रोग्रामिंग और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के पीछे और सॉफ्टवेयर के बारे में बुनियादी जानकारी जानें जो पेशेवर डेवलपर्स को अपने काम करने में मदद करती हैं | [ट्रैड प्रोग्रामिंग और उपकरणों का परिचय](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md) | जैस्मिन |
|
||||
| 02 | शुरू करना | गिटहब की मूल बातें, एक टीम के साथ काम करना शामिल है | अपनी परियोजना में गिटहब का उपयोग कैसे करें, कोड आधार पर दूसरों के साथ कैसे सहयोग करें | [गिटहब का परिचय](/1-getting-started-lessons/2-github-basics/translations/README.hi.md) | फलर |
|
||||
| 03 | शुरू करना | अभिगम्यता | वेब अभिगम्यता की मूल बातें जानें | [अभिगम्यता कोष](/1-getting-started-lessons/3-accessibility/translations/README.hi.md) | क्रिस्टोफर |
|
||||
| 04 | जेएस की मूलबाते | जावास्क्रिप्ट डेटा प्रकार | जावास्क्रिप्ट डेटा प्रकार की मूल बातें | [डेटा प्रकार](/2-js-basics/1-data-types/translations/README.hi.md) | जैस्मिन |
|
||||
| 05 | जेएस की मूलबाते | फंगक्शनस और मेथड्स | एप्लिकेशन के तर्क प्रवाह को प्रबंधित करने के लिए फंगक्शनस और मेथड्स के बारे में जानें | [फंगक्शनस और मेथड्स](/2-js-basics/2-functions-methods/translations/README.hi.md) | जैस्मिन and क्रिस्टोफर |
|
||||
| 06 | जेएस की मूलबाते | जेएस के साथ निर्णय करना | निर्णय लेने के मेथड्स का उपयोग करके अपने कोड में स्थितियां बनाना सीखें | [निर्णय लेना](/2-js-basics/3-making-decisions/translations/README.hi.md) | जैस्मिन |
|
||||
| 07 | जेएस की मूलबाते | अररेस और लूपस | जावास्क्रिप्ट में अररेस और लूपस का उपयोग कर डेटा के साथ काम करें | [अररेस और लूपस](/2-js-basics/4-arrays-loops/translations/README.hi.md) | जैस्मिन |
|
||||
| 08 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | एचटीएमएल प्रैक्टिस में | लेआउट बनाने पर ध्यान केंद्रित करते हुए, एक ऑनलाइन टेरारियम बनाने के लिए HTML बनाएँ | [एचटीएमएल का परिचय](/3-terrarium/1-intro-to-html/translations/README.hi.md) | जेन |
|
||||
| 09 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सीएसएस | पृष्ठ को उत्तरदायी बनाने सहित सीएसएस की मूल बातों पर ध्यान केंद्रित करते हुए, ऑनलाइन टेरेरियम को स्टाइल करने के लिए सीएसएस का निर्माण करें | [सीएसएसका परिचय](/3-terrarium/2-intro-to-css/translations/README.hi.md) | जेन |
|
||||
| 10 | [टेरारियम](/3-terrarium/solution/README.md) | जावास्क्रिप्ट क्लोजर, डोम मनिप्यलैशन | एक टेरारियम फंगक्शन को ड्रैग/ड्रॉप इंटरफेस के रूप में बनाने के लिए जावास्क्रिप्ट का निर्माण करें ,क्लोजर और डोम मनिप्यलैशन पर ध्यान केंद्रित करके | [जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md) | जेन |
|
||||
| 11 | [टायपिंग गेम](/4-typing-game/solution/README.md) | एक टायपिंग गेम बनाए | अपने जावास्क्रिप्ट ऐप के तर्क को चलाने के लिए कीबोर्ड घटनाओं का उपयोग करना सीखें | [ईवेंट-संचालित प्रोग्रामिंग](/4-typing-game/typing-game/translations/README.hi.md) | क्रिस्टोफर |
|
||||
| 12 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउज़रों के साथ काम करना | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास और ब्राउज़र एक्सटेंशन के पहले एलिमेंट्स को कैसे मचानते हैं | [ब्राउज़रों के बारे में](/5-browser-extension/1-about-browsers/translations/README.hi.md) | जेन |
|
||||
| 13 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | एक फॉर्म का निर्माण, एक एपीआई को कॉल करना और लोकल स्टॉरिज में चर को संग्रहीत करना | लोकल स्टॉरिज में संग्रहीत चर का उपयोग करके एपीआई को कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट एलिमेंट्स का निर्माण करें | [एपीआईज, फॉर्म्स, और लोकल स्टॉरिज](/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md) | जेन |
|
||||
| 14 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और बनाने के लिए कुछ अनुकूलन के बारे में जानें | [पृष्ठभूमि कार्य और प्रदर्शन](/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md) | जेन |
|
||||
| 15 | [स्पेस गेम](/6-space-game/solution/README.md) | जावास्क्रिप्ट के साथ और अधिक उन्नत खेल विकास | एक खेल के निर्माण की तैयारी में क्लाससेस और काम्पज़िशन और पब/सब पैटर्न दोनों का उपयोग करके इन्हेरीटेन्स के बारे में जानें | [उन्नत खेल विकास का परिचय](/6-space-game/1-introduction/translations/README.hi.md) | क्रिस |
|
||||
| 16 | [स्पेस गेम](/6-space-game/solution/README.md) | कैनवास पर ड्रॉ करना | कैनवास एपीआई के बारे में जानें, जिसका उपयोग एलिमेंट्स को स्क्रीन पर खींचने के लिए किया जाता है | [कैनवास पर ड्रॉ करना](/6-space-game/2-drawing-to-canvas/translations/README.hi.md) | क्रिस |
|
||||
| 17 | [स्पेस गेम](/6-space-game/solution/README.md) | स्क्रीन के चारों ओर बढ़ते एलिमेंट्स | पता करे कि कार्टेशियन निर्देशांक और कैनवस एपीआई का उपयोग करके तत्व कैसे गति प्राप्त कर सकते हैं | [चारों ओर बढ़ते एलिमेंट्स](/6-space-game/3-moving-elements-around/translations/README.hi.md) | क्रिस |
|
||||
| 18 | [स्पेस गेम](/6-space-game/solution/README.md) | कॉलिजन डिटेक्शन | एलिमेंट्स को आपस में टकराएं और कीपरेसेस का उपयोग करते हुए एक दूसरे से प्रतिक्रिया करें और खेल के प्रदर्शन को सुनिश्चित करने के लिए एक कुलडाउन फ़ंक्शन प्रदान करें | [कॉलिजन डिटेक्शन](/6-space-game/4-collision-detection/translations/README.hi.md) | क्रिस |
|
||||
| 19 | [स्पेस गेम](/6-space-game/solution/README.md) | स्कोर रखना | खेल की स्थिति और प्रदर्शन के आधार पर गणित की गणना करें | [स्कोर रखना](/6-space-game/5-keeping-score/translations/README.hi.md) | क्रिस |
|
||||
| 20 | [स्पेस गेम](/6-space-game/solution/README.md) | खेल को समाप्त करना और पुनः आरंभ करना | खेल को समाप्त करने और पुनः आरंभ करने के बारे में जानें,असेट्स को साफ करने और चरकी वैल्यू को रीसेट करने सहित | [अंत की स्थिति](/6-space-game/6-end-condition/translations/README.hi.md) | क्रिस |
|
||||
| 21 | [बैंकिंग एप](/7-bank-project/solution/README.md) | एचटीएमएल टेम्पलेट्स और वेब ऐप में रूट | राउटिंग और एचटीएमएल टेम्प्लेट का उपयोग करके एक मल्टीफ़ेज वेबसाइट की वास्तुकला का मचान बनाना सीखें | [एचटीएमएल टेम्पलेट और रूट](/7-bank-project/1-template-route/translations/README.hi.md) | योहन |
|
||||
| 22 | [बैंकिंग एप](/7-bank-project/solution/README.md) | एक लॉगिन और पंजीकरण फॉर्म बनाएँ | फॉर्म के निर्माण और सत्यापन रूटीन सौंपने के बारे में जानें | [फॉर्म्स](/7-bank-project/2-forms/translations/README.hi.md) | योहन |
|
||||
| 23 | [बैंकिंग एप](/7-bank-project/solution/README.md) | डेटा लाने और उपयोग करने के तरीके | डेटा आपके ऐप से कैसे और कैसे बहता है, इसे कैसे लाया जाए, इसे स्टोर करें और इसका दिसपोस करें | [डाटा](/7-bank-project/3-data/translations/README.hi.md) | योहन |
|
||||
| 24 | [बैंकिंग एप](/7-bank-project/solution/README.md) | स्टेट प्रबंधन की अवधारणाएँ | जानें कि आपका ऐप किस तरह से स्थिति को बनाए रखता है और इसे कैसे व्यवस्थित रूप से प्रबंधित करता है | [स्टेट प्रबंधन](/7-bank-project/4-state-management/translations/README.hi.md) | योहन |
|
||||
|
||||
## ऑफ़लाइन एक्सेस
|
||||
|
||||
आप इस दस्तावेज़ को ऑफ़लाइन कर सकते हैं [Docsify](https://docsify.js.org/#/) का उपयोग करके। अपने स्थानीय मशीन पर इस रेपो, [स्थापित डॉक्सिफ़ाइस्ट](https://docsify.js.org/#/quickstart) को फोर्क करें, और फिर इस रेपो के रूट फ़ोल्डर में, `docsify serve` टाइप करें। वेबसाइट को आपके लोकलहोस्ट पर पोर्ट 3000 पर परोसा जाएगा: `localhost:3000`.
|
||||
|
||||
## पीडीएफ
|
||||
सभी पाठों का पीडीएफ यहां पाया जा सकता है [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## अन्य पाठ्यक्रम
|
||||
हमारी टीम अन्य पाठ्यक्रम तैयार करती है! इसे देखें:
|
||||
- [नौसीखियों के लिए मशीन लर्निंग](https://aka.ms/ml-beginners)
|
||||
- [नौसीखियों के लिए आईओटी](https://aka.ms/iot-beginners)
|
||||
- [नौसीखियों के लिए डाटा साइंस](https://aka.ms/datascience-beginners)
|
||||
- [नौसीखियों के लिए आर्टिफीसियल इंटेलिजेंस](https://aka.ms/ai-beginners)
|
||||
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Pengembangan Website untuk pemula - Kurikulum
|
||||
|
||||
Azure Cloud Advocates di Microsoft dengan senang hati menawarkan kurikulum 12 minggu 24 pelajaran tentang JavaScript, CSS, dan dasar-dasar HTML. Setiap pelajaran mencakup kuis sebelum dan sesudah pelajaran, instruksi tertulis untuk menyelesaikan pelajaran, solusi, tugas, dan banyak lagi. Pedagogi berbasis proyek kami memungkinkan Anda untuk belajar sambil membangun, cara yang terbukti untuk keterampilan baru untuk 'stick'.
|
||||
|
||||
**Terima kasih yang sebesar-besarnya kepada penulis kami Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, dan seniman sketchnote Tomomi Imura!**
|
||||
|
||||
# Mulai
|
||||
|
||||
> **Guru**, kita punya [termasuk beberapa saran](for-teachers.md) tentang bagaimana menggunakan kurikulum ini. Kami akan menyukai tanggapan Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
> **Pelajar**, untuk menggunakan kurikulum ini sendiri, bagilah seluruh repo dan selesaikan latihannya sendiri, dimulai dengan kuis pra-kuliah, kemudian membaca kuliah dan menyelesaikan sisa kegiatan. Cobalah untuk membuat proyek dengan memahami pelajaran daripada menyalin kode solusi; namun kode tersebut tersedia di folder /solutions di setiap pelajaran berorientasi proyek. Ide lain adalah membentuk kelompok belajar dengan teman-teman dan membahas isinya bersama-sama. Untuk studi lebih lanjut, kami merekomendasikan [Belajar Microsoft](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) dan dengan menonton video yang disebutkan di bawah ini.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
Gif oleh [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 Klik gambar di atas untuk melihat video tentang proyek dan orang-orang yang membuatnya!
|
||||
## Pedagogi
|
||||
|
||||
Kami telah memilih dua prinsip pedagogis saat membangun kurikulum ini: memastikan bahwa itu berbasis proyek dan termasuk kuis yang sering. Pada akhir seri ini, siswa akan membuat game mengetik, terarium virtual, ekstensi browser 'hijau', game tipe 'penyerbu ruang', dan aplikasi perbankan tipe bisnis, dan akan mempelajari dasar-dasar JavaScript , HTML, dan CSS bersama dengan rantai alat modern dari pengembang web saat ini.
|
||||
|
||||
> 🎓 Anda dapat mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Pelajari Jalur](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn!
|
||||
Dengan memastikan bahwa konten selaras dengan proyek, proses dibuat lebih menarik bagi siswa dan retensi konsep akan ditambah. Kami juga menulis beberapa pelajaran awal dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" kumpulan video tutorial, yang beberapa penulisnya berkontribusi pada kurikulum ini.
|
||||
|
||||
Selain itu, kuis berisiko rendah sebelum kelas menetapkan niat siswa untuk mempelajari suatu topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diambil secara keseluruhan atau sebagian. Proyek mulai kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu.
|
||||
|
||||
Meskipun kami sengaja menghindari pengenalan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari Node.js melalui kumpulan video lainnya: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Temukan kami [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), dan [Translation](TRANSLATIONS.md) pedoman. Kami menyambut umpan balik konstruktif Anda!
|
||||
## Setiap pelajaran termasuk:
|
||||
|
||||
- catatan sketsa opsional
|
||||
- video tambahan opsional
|
||||
- kuis pemanasan sebelum pelajaran
|
||||
- pelajaran tertulis
|
||||
- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek
|
||||
- cek pengetahuan
|
||||
- sebuah tantangan
|
||||
- bacaan tambahan
|
||||
- penugasan
|
||||
- kuis setelah pelajaran
|
||||
|
||||
> **Catatan tentang kuis**: Semua kuis terkandung [di aplikasi ini](https://ashy-river-0debb7803.1.azurestaticapps.net/), untuk 48 total kuis dari tiga pertanyaan masing-masing. Mereka ditautkan dari dalam pelajaran tetapi aplikasi kuis dapat dijalankan secara lokal; ikuti petunjuk di `quiz-app` folder. Mereka secara bertahap dilokalisasi.
|
||||
## Pelajaran
|
||||
|
||||
| | Nama Project | Konsep yang Diajarkan | Tujuan pembelajaran | Linked Lesson | Author |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Mulai | Perkenalan pada Programming dan Tools dari Perdagangan | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | [Pengantar Programming Languages dan Tools dari Perdagangan](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Mulai | Dasar-dasar GitHub, termasuk bekerja dengan tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain dalam basis kode | [Intro di GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Mulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Basics | JavaScript Data Types | Dasar-dasar tipe data JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Basics | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Basics | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Basics | Array dan Loop | Bekerja dengan data menggunakan array dan loop dalam JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML dalam Praktek | Bangun HTML untuk membuat terarium online, dengan fokus membangun tata letak | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS dalam Praktek | Bangun CSS untuk menata terarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat fungsi terarium sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Buat Game Mengetik | Pelajari cara menggunakan peristiwa keyboard untuk mendorong logika aplikasi JavaScript Anda | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, riwayatnya, dan cara membuat perancah elemen pertama dari ekstensi browser | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Membangun formulir, memanggil API dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Proses latar belakang di browser, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa pengoptimalan yang harus dilakukan | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | Pengembangan Game Lebih Lanjut dengan JavaScript | Pelajari tentang Warisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membuat game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | Menggambar ke kanvas | Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | Memindahkan elemen di sekitar layar | Temukan bagaimana elemen bisa mendapatkan gerakan menggunakan koordinat kartesius dan Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan kinerja game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | Menjaga skor | Lakukan perhitungan matematika berdasarkan status dan kinerja game | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | Mengakhiri dan memulai kembali permainan | Pelajari tentang mengakhiri dan memulai kembali game, termasuk membersihkan aset dan menyetel ulang nilai variabel | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | Template dan Rute HTML di Aplikasi Web | Pelajari cara membuat perancah arsitektur situs web multihalaman menggunakan perutean dan templat HTML | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | Buat Formulir Login dan Registrasi | pelajari tentang membuat formulir dan menangani rutinitas validasi | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konsep Manajemen Negara | Pelajari cara aplikasi Anda mempertahankan status dan cara mengelolanya secara terprogram | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Akses Luring
|
||||
|
||||
Anda dapat menjalankan dokumentasi ini secara luring dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [install Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, dan kemudian di folder root repo ini, ketik `docsify serve`. Situs web akan disajikan pada port 3000 di localhost Anda: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Kurikulum lainnya
|
||||
|
||||
Tim kami menghasilkan kurikulum lain! Periksa:
|
||||
|
||||
- [Pembelajaran Mesin untuk Pemula](https://aka.ms/ml-beginners)
|
||||
- [IoT untuk Pemula](https://aka.ms/iot-beginners)
|
||||
- [Data Science untuk Pemula](https://aka.ms/datascience-beginners)
|
||||
@@ -1,112 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Sviluppo Web per Principianti - Un programma di lezioni
|
||||
|
||||
Gli Azure Cloud Advocates di Microsoft hanno il piacere di offrire un corso di 12 settimane, 24 lezioni riguardante le basi di JavaScript, CSS e HTML. Ogni lezione include dei quiz pre e post lezione, istruzioni scritte per completare la lezione, una soluzione, un esercizio ed altro. La nostra pedagogia basata su progetti ti consente di imparare mentre costruisci, un metodo collaudato per consolidare le nuove skill.
|
||||
|
||||
**Sentiti ringraziamenti ai nostri autori Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, e all'artista sketchnote Tomomi Imura!**
|
||||
|
||||
# Sei uno studente?
|
||||
|
||||
Inizia con le seguenti risorse:
|
||||
|
||||
- [Pagina Student Hub](https://docs.microsoft.com/it-it/learn/student-hub?WT.mc_id=academic-13441-cxa) In questa pagina troverai risorse per principianti, pacchetti studente ed anche come ottenere voucher di certificazione gratuiti. Questa è la pagina da salvare tra i preferiti e controllare di tanto in tanto, ne aggiorniamo i contenuti con cadenza almeno mensile.
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) Unisciti alla community globale di student ambassadors, questa potrebbe essere la tua strada per entrare in Microsoft
|
||||
|
||||
|
||||
# Per iniziare
|
||||
|
||||
> **Insegnanti**, abbiamo [inserito alcuni suggerimenti](/translations/for-teachers.it.md) su come utilizzare questo corso. Ci piacerebbe ricevere il tuo feedback [nel nostro forum di discussione](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **[Studenti](https://aka.ms/student-page)**, per usare questo corso per conto vostro, effettuate una fork dell'intera repo e completate gli esercizi da soli iniziando con i quiz pre-lezione, proseguite poi con la lettura e completate il resto delle attività. Provate a creare i progetti comprendendo le lezioni piuttosto che copiando il codice soluzione; tuttavia, detto codice è disponibile nella cartella /solutions di ogni lezione comprendente un progetto. Un'altra idea potrebbe essere du creare un gruppo di studi con gli amici ed esplorare i contenuti insieme. Per scoprire di più, consigliamo [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) e la visione dei video menzionati sotto.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||
|
||||
Gif di [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 Clicca l'immagine sopra per un video riguardo al progetto e delle persone che lo hanno realizzato!
|
||||
|
||||
## Pedagogia
|
||||
|
||||
Abbiamo tenuto conto di due principi pedagogici nella realizzazione di questo corso: assicurarci che sia basato su dei progetti e che includa frequenti quiz. Alla fine di questa serie, gli studenti avranno costruito un tipico gioco, un terrario virtuale, una estensione del browser 'green', un gioco stile 'space invaders' e un'app business di banking, ed avranno appreso le basi di JavaScript, HTML e CSS insieme all'attuale toolchain degli sviluppatori web di oggi.
|
||||
|
||||
> 🎓 Puoi seguire le prime lezioni di questo corso come [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) su Microsoft Learn!
|
||||
|
||||
Assicurandoci che il contenuto sia allineato con i progetti, il processo viene reso più coinvolgente per gli studenti e la memorizzazione dei concetti sarà migliorata. Abbiamo inoltre scritto diverse lezioni introduttive sulle basi di JavaScript per introdurre dei concetti, accompagnate da video dalla collezione di video tutorial "[Serie per Principianti a: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)", della quale alcuni autori hanno contribuito a questo progetto.
|
||||
|
||||
Inoltre un quiz a bassa difficoltà prima di una lezione fissa nello studente l'intenzione di apprendere un argomento, mentre un secondo quiz dopo la lezione garantisce un'ulteriore conservazione delle nozioni apprese. Questo corso è stato progettato per essere flessibile e divertente e può essere seguito per intero o solo in parte. Il progetto parte in piccolo per poi diventare progressivamente più complesso verso la fine del ciclo di 12 settimane.
|
||||
|
||||
Anche se abbiamo volutamente evitato di introdurre i frameworks JavaScript per concentrarci sulle skill di base richieste ad un web developer prima di adottare un framework, un buon prossimo passo per completare questo corso sarebbe scoprire di più riguardo a Node.js tramite un'altra collezione di video: "[Serie per Principianti a: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> Guarda il nostro [Codice di Condotta](CODE_OF_CONDUCT.md) e le linee guida su [Contributi](CONTRIBUTING.md) e [Traduzioni](TRANSLATIONS.md). I tuoi feedback costruttivi sono i benvenuti!
|
||||
|
||||
## Ogni lezione include:
|
||||
|
||||
- sketchnote opzionale
|
||||
- video supplementare opzionale
|
||||
- quiz di riscaldamento pre-lezione
|
||||
- lezione scritta
|
||||
- per le lezioni basate su progetti, guida passo-passo su come costruire il progetto
|
||||
- check delle competenze
|
||||
- una sfida
|
||||
- letture aggiuntive
|
||||
- compiti
|
||||
- quiz post-lezione
|
||||
|
||||
> **Una nota riguardo ai quiz**: Tutti i quiz sono contenuti [in questa app](https://ashy-river-0debb7803.1.azurestaticapps.net/), per un totale di 48 quiz da 3 domande ciascuno. Sono raggiungibili dall'interno delle lezioni ma possono anche essere eseguiti in locale; segui le istruzioni contenute nella cartella `quiz-app`. Questi sono progressivamente in via di traduzione.
|
||||
|
||||
## Lezioni
|
||||
|
||||
| | Nome Progetto | Concetti Insegnati | Obiettivi di Apprendimento | Link alla Lezione | Autore |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Per Iniziare | Introduzione alla programmazione e agli strumenti del mestiere | Scopri le fondamenta della maggior parte dei linguaggi di programmazione e sul software che aiuta gli sviluppatori professionisti a svolgere il proprio lavoro | [Introduzione alla programmazione e agli strumenti del mestiere](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md) | Jasmine |
|
||||
| 02 | Per Iniziare | Basi di GitHub, include lavorare in team | Come usare GitHub nel tuo progetto, come collaborare con altri sul codice | [Introduzione a GitHub](/1-getting-started-lessons/2-github-basics/translations/README.it.md) | Floor |
|
||||
| 03 | Per Iniziare | Accessibilità | Impara le basi dell'accessibilità web | [Fondamenta di Accessibilità](/1-getting-started-lessons/3-accessibility/translations/README.it.md) | Christopher |
|
||||
| 04 | Basi di JS | JavaScript Data Types | Le basi dei data types di JavaScript | [Data Types](/2-js-basics/1-data-types/translations/README.it.md) | Jasmine |
|
||||
| 05 | Basi di JS | Funzioni e Metodi | Informazioni su funzioni e metodi per gestire il flusso logico di un'applicazione | [Funzioni e Metodi](/2-js-basics/2-functions-methods/translations/README.it.md) | Jasmine and Christopher |
|
||||
| 06 | Basi di JS | Prendere decisioni con JS | Scopri come creare condizioni nel tuo codice utilizzando il processo decisionale | [Prendere Decisioni](/2-js-basics/3-making-decisions/translations/README.it.md) | Jasmine |
|
||||
| 07 | Basi di JS | Arrays e Loops | Lavorare con i dati usando gli arrays ed i loops in JavaScript | [Arrays e Loops](/2-js-basics/4-arrays-loops/translations/README.it.md) | Jasmine |
|
||||
| 08 | [Terrario](/3-terrarium/solution/README.md) | HTML in Pratica | Costruisci l'HTML per creare un terrario online, concentrandoti sulla creazione di un layout | [Introduzione all'HTML](/3-terrarium/1-intro-to-html/translations/README.it.md) | Jen |
|
||||
| 09 | [Terrario](/3-terrarium/solution/README.md) | CSS in Pratica | Costruisci il CSS per dare uno stile al terrario online, concentrandoti sulle basi del CSS incluso come rendere la pagina reattiva | [Introduzione al CSS](/3-terrarium/2-intro-to-css/translations/README.it.md) | Jen |
|
||||
| 10 | [Terrario](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Costruisci il JavaScript per far funzionare il terrario come un'interfaccia drag/drop, concentrandoti sulle closures e sulla DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md) | Jen |
|
||||
| 11 | [Gioco di Battitura](/4-typing-game/solution/README.md) | Costruisci un Gioco di Battitura | Scopri come utilizzare gli eventi della tastiera per guidare la logica della tua app JavaScript | [Programmazione guidata dagli eventi](/4-typing-game/typing-game/translations/README.it.md) | Christopher |
|
||||
| 12 | [Estensione Browser Green](/5-browser-extension/solution/translation/README.it.md) | Lavorare con i Browser | Scopri come funzionano i browser, la loro storia e come impostare i primi elementi di un'estensione del browser | [Riguardo ai Browsers](/5-browser-extension/1-about-browsers/translations/README.it.md) | Jen |
|
||||
| 13 | [Estensione Browser Green](/5-browser-extension/solution/translation/README.it.md) | Creazione di un modulo, chiamata API e archiviazione di variabili nella memoria locale | Crea gli elementi JavaScript della tua estensione browser per chiamare un'API utilizzando le variabili archiviate nella memoria locale | [APIs, Forms, e Memoria Locale](/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md) | Jen |
|
||||
| 14 | [Estensione Browser Green](/5-browser-extension/solution/translation/README.it.md) | Processi in background nel browser, performance web | Utilizzare i processi in background del browser per gestire l'icona dell'estensione; scopri di più sulle prestazioni web e alcune ottimizzazioni da apportare | [Processi in Background e Performance](/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md) | Jen |
|
||||
| 15 | [Gioco Spaziale](/6-space-game/solution/README.md) | Sviluppo di giochi più avanzati con JavaScript | Scopri l'ereditarietà utilizzando sia Classi che Composizione e il modello Pub/Sub, in preparazione alla creazione di un gioco | [Introduzione allo Sviluppo di Giochi Avanzato](/6-space-game/1-introduction/translations/README.it.md) | Chris |
|
||||
| 16 | [Gioco Spaziale](/6-space-game/solution/README.md) | Disegnare su canvas | Ulteriori informazioni sull'API Canvas, utilizzata per disegnare elementi su uno schermo | [Disegnare su Canvas](/6-space-game/2-drawing-to-canvas/translations/README.it.md) | Chris |
|
||||
| 17 | [Gioco Spaziale](/6-space-game/solution/README.md) | Muovere elementi sullo schermo | Scopri come gli elementi possono muoversi utilizzando le coordinate cartesiane e l'API Canvas | [Muovere elementi](/6-space-game/3-moving-elements-around/translations/README.it.md) | Chris |
|
||||
| 18 | [Gioco Spaziale](/6-space-game/solution/README.md) | Rilevamento delle collisioni | Far scontrare e reagire tra loro gli element premendo i tasti e fornendo una funzione di cooldown per garantire le prestazioni del gioco | [Rilevamento delle collisioni](/6-space-game/4-collision-detection/translations/README.it.md) | Chris |
|
||||
| 19 | [Gioco Spaziale](/6-space-game/solution/README.md) | Tenere il Punteggio | Esegui calcoli matematici in base allo stato e alle prestazioni del gioco | [Tenere il Punteggio](/6-space-game/5-keeping-score/translations/README.it.md) | Chris |
|
||||
| 20 | [Gioco Spaziale](/6-space-game/solution/README.md) | Terminare e riavviare il gioco | Scopri come terminare e riavviare il gioco, inclusa la pulizia degli asset e il ripristino dei valori delle variabili | [Le Condizioni di Termine](/6-space-game/6-end-condition/translations/README.it.md) | Chris |
|
||||
| 21 | [App Bancaria](/7-bank-project/solution/translations/README.it.md) | Modelli e rotte HTML in un'app Web | Scopri come creare le basi dell'architettura di un sito Web multipagina utilizzando routing e templates HTML | [Templates HTML e Rotte](/7-bank-project/1-template-route/translations/README.it.md) | Yohan |
|
||||
| 22 | [App Bancaria](/7-bank-project/solution/translations/README.it.md) | Costruire un Form di Login e Registrazione | Linformazioni sulla creazione di moduli e sulla gestione delle routine di convalida | [Forms](/7-bank-project/2-forms/translations/README.it.md) | Yohan |
|
||||
| 23 | [App Bancaria](/7-bank-project/solution/translations/README.it.md) | Metodi di recupero e utilizzo dei dati | Come i dati entrano e escono dalla tua app, come recuperarli, archiviarli ed eliminarli | [Dati](/7-bank-project/3-data/translations/README.it.md) | Yohan |
|
||||
| 24 | [App Bancaria](/7-bank-project/solution/README.md) | Concetti di Gestione dello Stato | Scopri come la tua app mantiene lo stato e come gestirla programmaticamente | [Gestione dello Stato](/7-bank-project/4-state-management/translations/README.it.md) | Yohan |
|
||||
|
||||
## Accesso offline
|
||||
|
||||
Puoi utilizzare questa documentazione offline utilizzando [Docsify](https://docsify.js.org/#/). Esegui un fork di questa repo, [installa Docsify](https://docsify.js.org/#/quickstart) sul tuo dispositivo locale e successivamente nella cartella radice (root) di questa repo esegui `docsify serve`. Il sito web girerà sulla porta 3000 del tuo localhost: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Puoi trovare un PDF con tutte le lezioni [qui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
|
||||
## Altri corsi
|
||||
|
||||
Il nostro team produce altri corsi! Dai uno sguardo:
|
||||
|
||||
- [Machine Learning per Principianti](https://aka.ms/ml-beginners)
|
||||
- [IoT per Principianti](https://aka.ms/iot-beginners)
|
||||
- [Data Science per Principianti](https://aka.ms/datascience-beginners)
|
||||
- [AI per Principianti](https://aka.ms/ai-beginners)
|
||||
@@ -1,71 +0,0 @@
|
||||
# 初心者のための Web 開発 - カリキュラム
|
||||
|
||||
マイクロソフトの Azure Cloud Advocates は、JavaScript、CSS、HTML の基礎知識を12週間、24レッスンのカリキュラムで提供しています。各レッスンには、レッスン前後のクイズ、レッスンを完了するための指示書、ソリューション、課題などが含まれています。私たちのプロジェクトベースの教育法は、新しいスキルを「定着させる」ための実証済みの方法である、構築しながら学ぶことを可能にします。
|
||||
|
||||
**著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。**
|
||||
|
||||
> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。
|
||||
|
||||
> **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) や以下のビデオを見ることをお勧めします。
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
> 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。
|
||||
|
||||
## 教育学
|
||||
|
||||
私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、ビジネスタイプの銀行アプリを作成し、JavaScript、HTML、CSS の基本を、今日の Web 開発者の最新のツールチェーンとともに学んでいることでしょう。
|
||||
|
||||
コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、JavaScriptの基本的な概念を紹介するために、いくつかのスターターレッスンを執筆し、その中の何人かの著者がこのカリキュラムに貢献しているビデオチュートリアルのコレクション "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" のビデオと組み合わせました。
|
||||
|
||||
また、授業前の小テストで学習者の学習意図を確認し、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。
|
||||
|
||||
フレームワークを採用する前に Web 開発者として必要とされる基本的なスキルに集中するため、JavaScript フレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクション "[Beginner Series to: 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)、[翻訳](./TRANSLATIONS.md)のガイドラインをご覧ください。建設的なご意見をお待ちしております。
|
||||
>
|
||||
## 各レッスンの内容は以下の通りです
|
||||
|
||||
- オプションのスケッチノート
|
||||
- オプションの補足ビデオ
|
||||
- レッスン前の小テスト
|
||||
- 記載されたレッスン
|
||||
- プロジェクトベースのレッスンのために、プロジェクトを構築する方法をステップバイステップでガイドします
|
||||
- 知識のチェック
|
||||
- チャレンジ
|
||||
- 副読本
|
||||
- 課題
|
||||
- レッスン後の小テスト
|
||||
|
||||
## レッスン
|
||||
|
||||
| | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 |
|
||||
| :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: |
|
||||
| 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
|
||||
| 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |
|
||||
| 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher |
|
||||
| 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||
| 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 10 | [テラリウム](/3-terrarium/solution/README.md) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 11 | [タイピングゲーム](/4-typing-game/solution/README.md) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher |
|
||||
| 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution/README.md) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution/README.md) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen |
|
||||
| 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||
| 15 | [スペースゲーム](/6-space-game/solution/README.md) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 16 | [スペースゲーム](/6-space-game/solution/README.md) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 17 | [スペースゲーム](/6-space-game/solution/README.md) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 18 | [スペースゲーム](/6-space-game/solution/README.md) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 19 | [スペースゲーム](/6-space-game/solution/README.md) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 20 | [スペースゲーム](/6-space-game/solution/README.md) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||
| 21 | [バンキングアプリケーション](/7-bank-project/solution/README.md) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||
| 22 | [バンキングアプリケーション](/7-bank-project/solution/README.md) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||
| 23 | [バンキングアプリケーション](/7-bank-project/solution/README.md) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||
| 24 | [バンキングアプリケーション](/7-bank-project/solution/README.md) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan |
|
||||
|
||||
## オフラインアクセス
|
||||
|
||||
[Docsify](https://docsify.js.org/#/) を使えば、このドキュメントをオフラインで実行することができます。このリポジトリをフォークしてローカルマシンに [Docsify をインストール](https://docsify.js.org/#/quickstart)し、このリポジトリのルートフォルダで `docsify serve` と入力してください。これで、ローカルホスト上の3000番ポート、つまり `localhost:3000` で Web サイトがサーブされます。
|
||||
@@ -1,85 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# नवशिक्यांसाठी वेब विकास - एक कोर्स
|
||||
|
||||
सर्व JavaScript, CSS आणि HTML मूलभूत गोष्टींचा समावेश असलेला 12-आठवड्याचा, 24-धडा अभ्यासक्रम ऑफर करताना Microsoft च्या Azure Cloud Advocates खूश आहेत. प्रत्येक धड्यात पाठपूर्व आणि पाठोत्तर प्रश्नमंजुषा, धडा पूर्ण करण्यासाठी लिखित सूचना, उपाय, असाइनमेंट आणि बरेच काही समाविष्ट आहे. आमची प्रकल्प-आधारित अध्यापनशास्त्र तुम्हाला तुम्ही तयार करत असताना शिकण्याची परवानगी देते, नवीन कौशल्ये 'स्टिक=' करण्याचा एक सिद्ध मार्ग.
|
||||
|
||||
** आमच्या लेखक जेन लूपर, ख्रिस नॉरिंग, ख्रिस्तोफर हॅरिसन, जास्मिन ग्रीनवे, योहान लासोरा, फ्लोर ड्राईस आणि स्केचनोट कलाकार टोमोमी इमुरा यांचे मनःपूर्वक आभार!**
|
||||
|
||||
> **शिक्षक**, आम्ही हा अभ्यासक्रम कसा वापरायचा याबद्दल [काही टिपा](for-teachers.en.md) समाविष्ट केल्या आहेत. तुम्हाला तुमचा स्वतःचा मजकूर तयार करायचा असल्यास, आम्ही एक [मजकूर टेम्पलेट](leson-template/translations/README.mar.md) देखील समाविष्ट केले आहे.
|
||||
|
||||
> **विद्यार्थी**, या कोर्समध्ये स्वतःहून प्रवेश करण्यासाठी, संपूर्ण रेपो फोर्क करा आणि स्वतःच व्यायाम पूर्ण करा, व्याख्यानापूर्वीच्या प्रश्नमंजुषापासून सुरुवात करा, नंतर व्याख्यान वाचून उर्वरित क्रियाकलाप पूर्ण करा. सोल्यूशन कोड कॉपी करण्याऐवजी, धडे समजून घेऊन प्रकल्प तयार करण्याचा प्रयत्न करा; तथापि हा कोड प्रत्येक प्रकल्पाभिमुख धड्यातील /सोल्यूशन्स फोल्डरमध्ये उपलब्ध आहे. दुसरी कल्पना म्हणजे मित्रांसोबत अभ्यास गट तयार करणे आणि एकत्रितपणे साहित्याचा अभ्यास करणे. पुढील अभ्यासासाठी, आम्ही [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) आणि पाहिल्यानंतर खालील व्हिडिओची शिफारस करतो.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "प्रोमो व्हिडिओ")
|
||||
|
||||
> प्रकल्प आणि ज्या लोकांनी तो बनवला त्याबद्दलच्या व्हिडिओसाठी वरील इमेजवर क्लिक करा!
|
||||
|
||||
## अध्यापनशास्त्र
|
||||
|
||||
हा अभ्यासक्रम तयार करताना आम्ही दोन अध्यापनशास्त्रीय तत्त्वे निवडली: ते प्रकल्प-आधारित असल्याची खात्री करणे आणि त्यात पुनरावृत्ती झालेल्या प्रश्नमंजुषा समाविष्ट आहेत. या मालिकेच्या शेवटी, विद्यार्थ्यांनी एक टायपिंग गेम, एक व्हर्च्युअल टेरॅरियम, एक 'ग्रीन' ब्राउझर विस्तार, एक 'स्पेस इन्व्हेस्टर्स' प्रकारचा गेम आणि एक व्यवसाय-प्रकार बँकिंग अॅप तयार केला असेल आणि JavaScript च्या मूलभूत गोष्टी शिकल्या असतील. आजच्या वेब डेव्हलपरच्या आधुनिक टूलचेनसह HTML आणि CSS.
|
||||
|
||||
सामग्री प्रकल्पांशी संरेखित असल्याची खात्री करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनविली जाते आणि संकल्पनांची धारणा वाढविली जाईल. आम्ही संकल्पनांचा परिचय करून देण्यासाठी JavaScript मूलभूत गोष्टींमध्ये अनेक स्टार्टर धडे देखील लिहिले, ज्यात व्हिडिओ ट्यूटोरियलच्या "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT) समाविष्ट आहे. .mc_id=academic-13441-cxa)", ज्यांच्या काही लेखकांनी या अभ्यासक्रमासाठी योगदान दिले आहे.
|
||||
|
||||
शिवाय, वर्गापूर्वी कमी-स्टेक्स क्विझ विद्यार्थ्याचा विषय शिकण्याचा हेतू ठरवते, तर वर्गानंतर दुसरी क्विझ कायम ठेवण्याची खात्री देते. हा कोर्स लवचिक आणि मजेदार आणि संपूर्ण किंवा काही प्रमाणात घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी ते अधिकाधिक जटिल बनतात.
|
||||
|
||||
आम्ही जावास्क्रिप्ट फ्रेमवर्कची ओळख करून देण्याचे हेतुपुरस्सर टाळले आहे, फ्रेमवर्क स्वीकारण्यापूर्वी वेब डेव्हलपर म्हणून आवश्यक असलेल्या मूलभूत कौशल्यांवर लक्ष केंद्रित करण्यासाठी, हा अभ्यासक्रम पूर्ण करण्यासाठी पुढील चांगली पायरी म्हणजे व्हिडिओंचा दुसरा संग्रह. Node.js बद्दल याद्वारे शिकू: "[प्रारंभिक मालिका ते: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441 -cxa)".
|
||||
|
||||
आमची [आचारसंहिता](/CODE_OF_CONDUCT.md), [योगदान](/CONTRIBUTING.md), आणि [अनुवाद](/TRANSLATIONS.md) मार्गदर्शक तत्त्वे शोधा. आम्ही तुमच्या रचनात्मक अभिप्रायाचे स्वागत करतो!
|
||||
,
|
||||
## प्रत्येक धड्यात हे समाविष्ट आहे:
|
||||
|
||||
- पर्यायी स्केचनोट
|
||||
- पर्यायी पूरक व्हिडिओ
|
||||
- प्री-लेक्चर वॉर्मअप क्विझ
|
||||
- लिखित मजकूर
|
||||
- प्रकल्प-आधारित धड्यांसाठी, प्रकल्प तयार करण्यासाठी चरण-दर-चरण मार्गदर्शक
|
||||
- ज्ञान तपासणी
|
||||
- एक आव्हान
|
||||
- परिशिष्ट वाचन
|
||||
- असाइनमेंट
|
||||
- पोस्ट लेक्चर क्विझ
|
||||
|
||||
> **क्विझबद्दल एक टीप**: सर्व प्रश्नमंजुषा [या अॅपमध्ये](https://ashy-river-0debb7803.1.azurestaticapps.net/)
|
||||
|
||||
## धडा
|
||||
|
||||
| | प्रकल्पाचे नाव | शिकवलेल्या संकल्पना | शिकण्याचे उद्दिष्ट | लिंक केलेला मजकूर | लिखित मजकूर | स्केचनोट | असाइनमेंट | नवशिक्या क्विझ | अंतिम क्विझ | विडिओ | लेखक |
|
||||
| :---: | :------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------------------------------------: | :------: | :---: | :----: | :----------: | :---------: | :---: | :-------------: |
|
||||
| 01 | सुरू करण्यासाठी | ट्रैड प्रोग्रामिंग और उपकरणों का परिचय | बर्याच प्रोग्रामिंग भाषांमागील मूलभूत गोष्टी जाणून घ्या आणि सॉफ्टवेअर जे व्यावसायिक विकासकांना त्यांची कामे करण्यात मदत करतात | [क्वाड प्रोग्रामिंग आणि टूल्सचा परिचय](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 02 | सुरू करण्यासाठी | टीमसोबत काम करण्यासह गिटहबच्या मूलभूत गोष्टी | तुमच्या प्रोजेक्टमध्ये GitHub कसे वापरावे, कोड बेसवर इतरांशी सहयोग कसे करावे | [GitHub परिचय](/1-getting-started-lessons/2-github-basics/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | फलर |
|
||||
| 03 | सुरू करण्यासाठी | प्रवेशयोग्यता | वेब ऍक्सेसिबिलिटीची मूलभूत माहिती जाणून घ्या | [सुलभता निधी](/1-getting-started-lessons/3-accessibility/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | क्रिस्टोफर |
|
||||
| 04 | JS च्या मूलभूत गोष्टी | जावास्क्रिप्ट डेटा प्रकार | Javascript डेटा प्रकारांची मूलभूत माहिती | [डेटा प्रकार](/2-js-basics/1-data-types/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 05 | JS च्या मूलभूत गोष्टी | कार्ये आणि पद्धती | अनुप्रयोगाचा तर्क प्रवाह व्यवस्थापित करण्यासाठी कार्ये आणि पद्धतींबद्दल जाणून घ्या | [फंगक्शनस और मेथड्स](/2-js-basics/2-functions-methods/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन and क्रिस्टोफर |
|
||||
| 06 | JS च्या मूलभूत गोष्टी | JS सह निर्णय | ननिर्णय घेण्याच्या पद्धती वापरून तुमच्या कोडमध्ये परिस्थिती निर्माण करायला शिका | [निर्णय घेणे](/2-js-basics/3-making-decisions/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 07 | JS च्या मूलभूत गोष्टी | अररेस और लूपस | Javascript मध्ये अॅरे आणि ल्युपस वापरून डेटासह कार्य करा | [अररेस और लूपस](/2-js-basics/4-arrays-loops/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 08 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सराव मध्ये HTML | लेआउटवर लक्ष केंद्रित करून ऑनलाइन टेरेरियम तयार करण्यासाठी HTML तयार करा | [HTML चा परिचय](/3-terrarium/1-intro-to-html/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 09 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सीएसएस | पृष्ठ प्रतिसादासह CSS च्या मूलभूत गोष्टींवर लक्ष केंद्रित करून टेरेरियम ऑनलाइन स्टाइल करण्यासाठी CSS तयार करा | [CSS चा परिचय](/3-terrarium/2-intro-to-css/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 10 | [टेरारियम](/3-terrarium/solution/README.md) | Javascript क्लोजर, DOM मॅनिपुलेशन | क्लोजर आणि डीओएम मॅनिपुलेशनवर लक्ष केंद्रित करून ड्रॅग/ड्रॉप इंटरफेस म्हणून टेरेरियम फंक्शन तयार करण्यासाठी JavaScript तयार करा | [जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 11 | [टायपिंग गेम](/4-typing-game/solution/README.md) | एक टायपिंग गेम बनाए | तुमच्या JavaScript अॅपचे लॉजिक चालविण्यासाठी कीबोर्ड इव्हेंट कसे वापरायचे ते शिका | [ईवेंट-संचालित प्रोग्रामिंग](/4-typing-game/typing-game/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | क्रिस्टोफर |
|
||||
| 12 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउझरसह कार्य करणे | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास जाणून घ्या आणि ब्राउझर विस्तारांचे प्रथम घटक तयार करा | [ब्राउझर बद्दल](/5-browser-extension/1-about-browsers/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 13 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स संचयित करणे | लोकल स्टोरेजमध्ये संग्रहित व्हेरिएबल्स वापरून API कॉल करण्यासाठी तुमच्या ब्राउझर विस्ताराचे JavaScript घटक तयार करा | [API, फॉर्म आणि स्थानिक कथा](/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | जेन |
|
||||
| 14 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउझर, वेब डिस्प्ले मधील पार्श्वभूमी प्रक्रिया | विस्ताराचे चिन्ह व्यवस्थापित करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रिया वापरा; वेब कार्यप्रदर्शन तयार करण्यासाठी काही ऑप्टिमायझेशनबद्दल जाणून घ्या आणि | [पार्श्वभूमी कार्ये आणि कार्यप्रदर्शन](/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 15 | [स्पेस गेम](/6-space-game/solution/README.md) | JavaScript सह अधिक प्रगत गेम डेव्हलपमेंट | गेम तयार करण्याच्या तयारीसाठी रचना आणि पब/सब पॅटर्न दोन्ही वापरून वर्ग आणि वारसा याविषयी जाणून घ्या | [प्रगत गेम विकासाचा परिचय](/6-space-game/1-introduction/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 16 | [स्पेस गेम](/6-space-game/solution/README.md) | कॅनव्हासवर काढा | कॅनव्हास API बद्दल जाणून घ्या, जो स्क्रीनवर घटक काढण्यासाठी वापरला जातो | [कॅनव्हासवर काढा](/6-space-game/2-drawing-to-canvas/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 17 | [स्पेस गेम](/6-space-game/solution/README.md) | स्क्रीनभोवती हलणारे घटक | कॅनव्हास API वापरून कार्टेशियन निर्देशांक आणि घटक कसे मिळवायचे ते शोधा | [हलणारे घटक](/6-space-game/3-moving-elements-around/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 18 | [स्पेस गेम](/6-space-game/solution/README.md) | टक्कर शोध | की दाबून घटक एकमेकांना टक्कर द्या आणि प्रतिक्रिया द्या आणि गेम कार्यप्रदर्शन सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करा | [टक्कर शोध](/6-space-game/4-collision-detection/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 19 | [स्पेस गेम](/6-space-game/solution/README.md) | स्कोअर ठेवा | खेळाची स्थिती आणि कामगिरीवर आधारित गणिताची गणना करा | [स्कोअर ठेवा](/6-space-game/5-keeping-score/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 20 | [स्पेस गेम](/6-space-game/solution/README.md) | गेम समाप्त करा आणि रीस्टार्ट करा | मालमत्ता साफ करणे आणि पुली मूल्ये रीसेट करणे यासह गेम कसा संपवायचा आणि रीस्टार्ट कसा करायचा ते जाणून घ्या | [शेवटची स्थिती](/6-space-game/6-end-condition/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 21 | [बैंकिंग एप](/7-bank-project/solution/README.md) | HTML टेम्पलेट्स आणि वेब अॅपमध्ये रूट करा | राउटिंग आणि एचटीएमएल टेम्पलेट्स वापरून मल्टीफेस वेबसाइटचे आर्किटेक्चर स्कॅफोल्ड करायला शिका | [HTML टेम्पलेट आणि मार्ग](/7-bank-project/1-template-route/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||
| 22 | [बैंकिंग एप](/7-bank-project/solution/README.md) | लॉगिन आणि नोंदणी फॉर्म तयार करा | फॉर्म तयार करणे आणि प्रमाणीकरण दिनचर्या सुपूर्द करणे याबद्दल जाणून घ्या | [फॉर्म्स](/7-bank-project/2-forms/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||
| 23 | [बैंकिंग एप](/7-bank-project/solution/README.md) | डेटा कसा आणायचा आणि वापरायचा | तुमच्या अॅपवर डेटा कसा प्रवाहित होतो, तो कसा आणायचा, तो कसा संग्रहित करायचा आणि त्याची विल्हेवाट कशी लावायची | [डाटा](/7-bank-project/3-data/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||
| 24 | [बैंकिंग एप](/7-bank-project/solution/README.md) | राज्य व्यवस्थापनाच्या संकल्पना | तुमचे अॅप स्थिती कशी राखते आणि ते सेंद्रिय पद्धतीने कसे व्यवस्थापित करते ते जाणून घ्या | [स्टेट प्रबंधन](/7-bank-project/4-state-management/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | योहन |
|
||||
|
||||
## ऑफलाइन प्रवेश
|
||||
|
||||
तुम्ही [Docsify](https://docsify.js.org/#/) वापरून हा दस्तऐवज ऑफलाइन डाउनलोड करू शकता. तुमच्या स्थानिक मशीनवर या रेपोला फोर्क करा, [installed docsify](https://docsify.js.org/#/quickstart) आणि नंतर या रेपोच्या रूट फोल्डरमध्ये `docsify serve` टाइप करा. वेबसाइट तुमच्या लोकलहोस्ट: `localhost:3000` वर पोर्ट 3000 वर दिली जाईल.
|
||||
@@ -1,102 +0,0 @@
|
||||
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# തുടക്കക്കാർക്കുള്ള വെബ് വികസനം - ഒരു പാഠ്യപദ്ധതി
|
||||
|
||||
മൈക്രോസോഫ്റ്റിലെ അസുർ ക്ലൗഡ് അഡ്വക്കേറ്റ്സ് ജാവാസ്ക്രിപ്റ്റ്, സിഎസ്എസ്, എച്ച്ടിഎംഎൽ അടിസ്ഥാനകാര്യങ്ങൾ എന്നിവയെക്കുറിച്ച് 12-ആഴ്ച, 24-പാഠ പാഠ്യപദ്ധതി വാഗ്ദാനം ചെയ്യുന്നതിൽ സന്തോഷമുണ്ട്. ഓരോ പാഠത്തിലും പാഠത്തിന് മുമ്പും ശേഷവുമുള്ള ക്വിസുകൾ, പാഠം പൂർത്തിയാക്കാനുള്ള രേഖാമൂലമുള്ള നിർദ്ദേശങ്ങൾ, ഒരു പരിഹാരം, ഒരു അസൈൻമെന്റ് എന്നിവയും അതിലേറെയും ഉൾപ്പെടുന്നു. ഞങ്ങളുടെ പ്രോജക്റ്റ് അധിഷ്ഠിത അദ്ധ്യാപനം പുതിയ കഴിവുകൾ സ്വായത്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
|
||||
|
||||
**ഞങ്ങളുടെ രചയിതാക്കളായ ജെൻ ലൂപ്പർ, ക്രിസ് നോറിംഗ്, ക്രിസ്റ്റഫർ ഹാരിസൺ, ജാസ്മിൻ ഗ്രീൻവേ, യോഹാൻ ലസോർസ, ഫ്ലോർ ഡ്രീസ്, സ്കെച്ച്നോട്ട് ആർട്ടിസ്റ്റ് ടോമിമി ഇമുറ എന്നിവർക്ക് ഹൃദയം നിറഞ്ഞ നന്ദി!**
|
||||
|
||||
# ആമുഖം
|
||||
|
||||
> **അദ്ധ്യാപകർ**, ഞങ്ങൾ [ചില നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്](/for-teachers.md) ഈ പാഠ്യപദ്ധതി എങ്ങനെ ഉപയോഗിക്കാം എന്നതിനെക്കുറിച്ച്. നിങ്ങളുടെ ഫീഡ്ബാക്ക് ഞങ്ങൾ ഇഷ്ടപ്പെടുന്നു [ഞങ്ങളുടെ ചർച്ചാ ഫോറത്തിൽ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **വിദ്യാർത്ഥികൾ**, ഈ പാഠ്യപദ്ധതി സ്വന്തമായി ഉപയോഗിക്കുന്നതിന്, മുഴുവൻ റിപ്പോയും ഫോർക്ക് ചെയ്ത് സ്വന്തമായി വ്യായാമങ്ങൾ പൂർത്തിയാക്കുക, പ്രീ-ലെക്ചർ ക്വിസിൽ തുടങ്ങി, പ്രഭാഷണം വായിച്ച് ബാക്കി പ്രവർത്തനങ്ങൾ പൂർത്തിയാക്കുക. പരിഹാര കോഡ് പകർത്തുന്നതിനുപകരം പാഠങ്ങൾ മനസിലാക്കിക്കൊണ്ട് പ്രോജക്ടുകൾ സൃഷ്ടിക്കാൻ ശ്രമിക്കുക; എന്നിരുന്നാലും ആ പ്രോജക്റ്റ് അധിഷ്ടിതം പാഠത്തിലെ /സൊല്യൂഷൻസ് ഫോൾഡറുകളിൽ ആ കോഡ് ലഭ്യമാണ്. മറ്റൊരു ആശയം സുഹൃത്തുക്കളുമായി ഒരു പഠന ഗ്രൂപ്പ് രൂപീകരിച്ച് ഒരുമിച്ച് ഉള്ളടക്കം പരിശോധിക്കുക എന്നതാണ്. കൂടുതൽ പഠനത്തിന്, ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു [മൈക്രോസോഫ്റ്റ് ലേൺ](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) കൂടാതെ താഴെ സൂചിപ്പിച്ചിരിക്കുന്ന വീഡിയോകൾ കണ്ടുകൊണ്ട്.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "പ്രമോ വീഡിയോ")
|
||||
|
||||
> 🎥 പ്രോജക്റ്റിനെക്കുറിച്ചും അത് സൃഷ്ടിച്ചവരെക്കുറിച്ചും ഒരു വീഡിയോയ്ക്കായി മുകളിലുള്ള ചിത്രത്തിൽ ക്ലിക്കുചെയ്യുക!
|
||||
|
||||
## അദ്ധ്യാപനo
|
||||
|
||||
ഈ പാഠ്യപദ്ധതി നിർമ്മിക്കുമ്പോൾ ഞങ്ങൾ രണ്ട് പെഡഗോഗിക്കൽ സിദ്ധാന്തങ്ങൾ തിരഞ്ഞെടുത്തു: ഇത് പ്രോജക്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതാണെന്നും അതിൽ പതിവ് ക്വിസുകൾ ഉൾപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുന്നു. ഈ പരമ്പരയുടെ അവസാനത്തോടെ, വിദ്യാർത്ഥികൾ ഒരു ടൈപ്പിംഗ് ഗെയിം, ഒരു വെർച്വൽ ടെറേറിയം, ഒരു 'ഗ്രീൻ' ബ്രൗസർ എക്സ്റ്റൻഷൻ, ഒരു 'സ്പെയ്സ് ഇൻവേഡേഴ്സ്' ടൈപ്പ് ഗെയിം, ഒരു ബിസിനസ്-ടൈപ്പ് ബാങ്കിംഗ് ആപ്പ് എന്നിവ നിർമ്മിക്കുകയും ജാവാസ്ക്രിപ്റ്റിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുകയും ചെയ്യും , ഇന്നത്തെ വെബ് ഡെവലപ്പറിന്റെ ആധുനിക ടൂൾചെയിനിനൊപ്പം HTML, CSS എന്നിവയും.
|
||||
|
||||
> 🎓 ഈ പാഠ്യപദ്ധതിയിലെ ആദ്യ കുറച്ച് പാഠങ്ങൾ നിങ്ങൾക്ക് മൈക്രോസോഫ്റ്റ് ലേൺ നെ കുറിച്ചുള്ള ഒരു[പഠന പാത](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ആയി എടുക്കാം.
|
||||
|
||||
പ്രോജക്റ്റുകളുമായി ഉള്ളടക്കം യോജിക്കുന്നുവെന്ന് ഉറപ്പുവരുത്തുന്നതിലൂടെ, ഈ പ്രക്രിയ വിദ്യാർത്ഥികളെ കൂടുതൽ ആകർഷകമാക്കുകയും ആശയങ്ങൾ നിലനിർത്തുന്നത് വർദ്ധിപ്പിക്കുകയും ചെയ്യും. ആശയങ്ങൾ അവതരിപ്പിക്കാൻ ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനത്തിൽ നിരവധി സ്റ്റാർട്ടർ പാഠങ്ങൾ എഴുതി, paired with video from the "[ജാവാസ്ക്രിപ്റ്റിലേക്കുള്ള തുടക്കക്കാരുടെ പരമ്പര](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" വീഡിയോ ട്യൂട്ടോറിയലുകളുടെ ശേഖരം, ചില എഴുത്തുകാർ ഈ പാഠ്യപദ്ധതിക്ക് സംഭാവന നൽകി.
|
||||
ഇതുകൂടാതെ, ഒരു ക്ലാസിന് മുമ്പുള്ള ഒരു കുറഞ്ഞ ക്വിസ് ഒരു വിഷയം പഠിക്കുന്നതിനുള്ള വിദ്യാർത്ഥിയുടെ ഉദ്ദേശ്യം സജ്ജമാക്കുന്നു, അതേസമയം ക്ലാസിന് ശേഷമുള്ള രണ്ടാമത്തെ ക്വിസ് കൂടുതൽ നിലനിർത്തൽ ഉറപ്പാക്കുന്നു. ഈ പാഠ്യപദ്ധതി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് വഴക്കമുള്ളതും രസകരവുമാണ്, ഇത് മുഴുവനായോ ഭാഗികമായോ എടുക്കാം. പദ്ധതികൾ ചെറുതായി ആരംഭിച്ച് 12 ആഴ്ച ചക്രത്തിന്റെ അവസാനത്തോടെ കൂടുതൽ സങ്കീർണമാകുന്നു.
|
||||
|
||||
ഒരു ചട്ടക്കൂട് സ്വീകരിക്കുന്നതിന് മുമ്പ് ഒരു വെബ് ഡെവലപ്പർ എന്ന നിലയിൽ ആവശ്യമായ അടിസ്ഥാന കഴിവുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിന് ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ചട്ടക്കൂടുകൾ അവതരിപ്പിക്കുന്നത് മനപ്പൂർവ്വം ഒഴിവാക്കിയിട്ടുണ്ടെങ്കിലും, ഈ പാഠ്യപദ്ധതി പൂർത്തിയാക്കുന്നതിനുള്ള ഒരു നല്ല അടുത്ത ഘട്ടം വീഡിയോകളുടെ മറ്റൊരു ശേഖരത്തിലൂടെ നോഡ്.js- നെക്കുറിച്ച് പഠിക്കുക എന്നതാണ്: "[നോഡ്.js ലേക്കുള്ള തുടക്കക്കാരുടെ പരമ്പര](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> ഞങ്ങളുടെ [പെരുമാറ്റച്ചട്ടം](/CODE_OF_CONDUCT.md), [സംഭാവന](/CONTRIBUTING.md), [പരിഭാഷ](/TRANSLATIONS.md) എന്നിവയുടെ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പരിശോധിക്കുക. നിങ്ങളുടെ ക്രിയാത്മക മായ അഭിപ്രായത്തെ ഞങ്ങൾ സ്വാഗതം ചെയ്യുന്നു!
|
||||
>
|
||||
## ഓരോ പാഠത്തിലും ഉൾപ്പെടുന്നത്:
|
||||
|
||||
- ഓപ്ഷണൽ സ്കെച്ച്നോട്ട്
|
||||
- ഓപ്ഷണൽ അനുബന്ധ വീഡിയോ
|
||||
- പാഠത്തിനു മുമ്പുള്ള വാംഅപ്പ് ക്വിസ്
|
||||
- എഴുതിയ പാഠഭാഗം
|
||||
- പ്രോജക്റ്റ് അധിഷ്ഠിത പാഠങ്ങൾക്കായി, പ്രോജക്റ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ചുള്ള ഘട്ടം ഘട്ടമായുള്ള ഗൈഡുകൾ
|
||||
- വിജ്ഞാന പരിശോധനകൾ
|
||||
- ഒരു വെല്ലുവിളി
|
||||
- അനുബന്ധ വായന
|
||||
- അസ്സൈൻമെന്റ്
|
||||
- പാഠാനന്തര ക്വിസ്
|
||||
|
||||
> **ക്വിസുകളെക്കുറിച്ചുള്ള ഒരു കുറിപ്പ്**: എല്ലാ ക്വിസുകളും [ഈ ആപ്പിൽ](https://ashy-river-0debb7803.1.azurestaticapps.net/) അടങ്ങിയിരിക്കുന്നു, മൂന്ന് ചോദ്യങ്ങൾ വീതമടങ്ങിയ മൊത്തം 48 ക്വിസുകൾ. അവ പാഠങ്ങൾക്കുള്ളിൽ നിന്ന് ബന്ധിപ്പിച്ചിരിക്കുന്നു, പക്ഷേ ക്വിസ് ആപ്പ് പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കാൻ കഴിയും; 'ക്വിസ്-ആപ്പ്' ഫോൾഡറിലെ നിർദ്ദേശം പാലിക്കുക. അവ ക്രമേണ പ്രാദേശികവൽക്കരിക്കപ്പെടുന്നു.
|
||||
|
||||
## പാഠങ്ങൾ
|
||||
|
||||
|
||||
| | പദ്ധതിയുടെ പേര് | പഠിപ്പിച്ച ആശയങ്ങൾ | പഠന ലക്ഷ്യങ്ങൾ | ലിങ്ക് ചെയ്ത പാഠം | രചയിതാവ് |
|
||||
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | ആമുഖം | പ്രോഗ്രാമിംഗിലേക്കും ട്രേഡിലെ ഉപകരണങ്ങളിലേക്കും ആമുഖം | മിക്ക പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കും പിന്നിലെ അടിസ്ഥാന അടിസ്ഥാനങ്ങളും പ്രൊഫഷണൽ ഡെവലപ്പർമാരെ അവരുടെ ജോലികൾ ചെയ്യാൻ സഹായിക്കുന്ന സോഫ്റ്റ്വെയറുകളെക്കുറിച്ചും അറിയുക | [പ്രോഗ്രാമിംഗ് ഭാഷകളിലേക്കും വ്യാപാരത്തിന്റെ ഉപകരണങ്ങളിലേക്കുമുള്ള ഇൻട്രോ](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ജാസ്മിൻ |
|
||||
| 02 | ആമുഖം | ഗിറ്റ്ഹബിന്റെ അടിസ്ഥാനങ്ങളിൽ ഒരു ടീമിനൊപ്പം പ്രവർത്തിക്കുന്നത് ഉൾപ്പെടുന്നു | നിങ്ങളുടെ പ്രോജക്റ്റിൽ ഗിറ്റ്ഹബ് എങ്ങനെ ഉപയോഗിക്കാം, ഒരു കോഡ് അടിസ്ഥാനത്തിൽ മറ്റുള്ളവരുമായി എങ്ങനെ സഹകരിക്കാം | [ഗിറ്റ്ഹബിലേക്കുള്ള ഇൻട്രോ](/1-getting-started-lessons/2-github-basics/README.md) | ഫ്ലോർ |
|
||||
| 03 | ആമുഖം | ആക്സസിബിലിറ്റി | വെബ് ആക്സസബിലിറ്റിയുടെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുക | [ആക്സസിബിലിറ്റി അടിസ്ഥാനങ്ങൾ](/1-getting-started-lessons/3-accessibility/README.md) | ക്രിസ്റ്റഫർ |
|
||||
| 04 | JS അടിസ്ഥാനങ്ങൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റ തരങ്ങൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റ തരങ്ങളുടെ അടിസ്ഥാനങ്ങൾ | [ഡാറ്റ തരങ്ങൾ](/2-js-basics/1-data-types/README.md) | ജാസ്മിൻ |
|
||||
| 05 | JS അടിസ്ഥാനങ്ങൾ | പ്രവർത്തനങ്ങളും രീതികളും | ഒരു ആപ്ലിക്കേഷന്റെ ലോജിക് ഫ്ലോ കൈകാര്യം ചെയ്യാനുള്ള പ്രവർത്തനങ്ങളെയും രീതികളെയും കുറിച്ച് അറിയുക | [പ്രവർത്തനങ്ങളും രീതികളും](/2-js-basics/2-functions-methods/README.md) | ജാസ്മിനും ക്രിസ്റ്റഫറും |
|
||||
| 06 | JS അടിസ്ഥാനങ്ങൾ | ജെഎസുമായി തീരുമാനങ്ങൾ എടുക്കുന്നു | തീരുമാനമെടുക്കുന്ന രീതികൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡിൽ സാഹചര്യങ്ങൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [തീരുമാനങ്ങൾ എടുക്കുക ](/2-js-basics/3-making-decisions/README.md) | ജാസ്മിൻ |
|
||||
| 07 | JS അടിസ്ഥാനങ്ങൾ | അറേകളും ലൂപ്പുകളും | ജാവാസ്ക്രിപ്റ്റിലെ അറേകളും ലൂപ്പുകളും ഉപയോഗിച്ച് ഡാറ്റഉപയോഗിച്ച് പ്രവർത്തിക്കുക | [അറേകളും ലൂപ്പുകളും](/2-js-basics/4-arrays-loops/README.md) | ജാസ്മിൻ |
|
||||
| 08 | [ടെറേറിയം](/3-terrarium/solution/README.md) | HTML ൽ പരിശീലിക്കുക | ഒരു ലേഔട്ട് നിർമ്മിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് ഒരു ഓൺലൈൻ ടെറേറിയം സൃഷ്ടിക്കുന്നതിന് HTML നിർമ്മിക്കുക | [HTML ന്റെ ആമുഖം](/3-terrarium/1-intro-to-html/README.md) | ജെൻ |
|
||||
| 09 | [ടെറേറിയം](/3-terrarium/solution/README.md) | CSS ൽ പരിശീലിക്കുക | പേജ് പ്രതികരണാത്മകമാക്കുന്നതുൾപ്പെടെ CSS-ന്റെ അടിസ്ഥാനകാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട് ഓൺലൈൻ ടെറേറിയം സ്റ്റൈൽ ചെയ്യുന്നതിന് സിഎസ്എസ് നിർമ്മിക്കുക | [CSS ന്റെ ആമുഖം](/3-terrarium/2-intro-to-css/README.md) | ജെൻ |
|
||||
| 10 | [ടെറേറിയം](/3-terrarium/solution/README.md) | ജാവാസ്ക്രിപ്റ്റ് ക്ലോസ്രെസ്, ഡോം കൃത്രിമം | ക്ലോസ്രെസ്ന്റെയും ഡോം കൃത്രിമം ഉപയോഗിച്ചുകൊണ്ട് ടെറേറിയം ഒരു ഡ്രാഗ്/ഡ്രോപ്പ് ഇന്റർഫേസായി പ്രവർത്തനമുണ്ടാക്കാൻ ജാവാസ്ക്രിപ്റ്റ് നിർമ്മിക്കുക | [ജാവാസ്ക്രിപ്റ്റ് ക്ലോസ്രെസ്, ഡോം കൃത്രിമം](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | ജെൻ |
|
||||
| 11 | [ടൈപ്പിംഗ് ഗെയിം](/4-typing-game/solution/README.md) | ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക | നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ആപ്പിന്റെ ലോജിക് ഡ്രൈവ് ചെയ്യുന്നതിന് കീബോർഡ് ഇവന്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക | [ഇവന്റ്-ഡ്രൈവിംഗ് പ്രോഗ്രാമിംഗ്](/4-typing-game/typing-game/README.md) | ക്രിസ്റ്റഫർ |
|
||||
| 12 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution/README.md) | ബ്രൗസറുകളുമായി പ്രവർത്തിക്കുന്നു | ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, അവയുടെ ചരിത്രം, ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ആദ്യ ഘടകങ്ങൾ എങ്ങനെ സ്കഫോൾഡ് ആാമെന്ന് മനസിലാക്കുക | [ബ്രൗസറുകളെ കുറിച്ച്](/5-browser-extension/1-about-browsers/README.md) | ജെൻ |
|
||||
| 13 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution/README.md) | ഒരു ഫോം നിർമ്മിക്കുക, ഒരു എപിഐ വിളിക്കുക, പ്രാദേശിക സംഭരണത്തിൽ വേരിയബിളുകൾ സംഭരിക്കുക | പ്രാദേശിക സംഭരണത്തിൽ സംഭരിച്ചിരിക്കുന്ന വേരിയബിളുകൾ ഉപയോഗിച്ച് ഒരു API വിളിക്കുന്നതിനായി നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ നിർമ്മിക്കുക | [APIs, ഫോമുകളും ലോക്കൽ സ്റ്റോറേജും](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ജെൻ |
|
||||
| 14 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution/README.md) | ബ്രൗസറിലെ പശ്ചാത്തല പ്രക്രിയകൾ, വെബ് പ്രകടനം | എക്സ്റ്റെൻഷന്റെ ഐക്കൺ കൈകാര്യം ചെയ്യുന്നതിന് ബ്രൗസറിന്റെ പശ്ചാത്തല പ്രക്രിയകൾ ഉപയോഗിക്കുക; വെബ് പ്രകടനത്തെക്കുറിച്ചും നിർമ്മിക്കുന്നതിനുള്ള ചില ഒപ്റ്റിമൈസേഷനുകളെ കുറിച്ചും അറിയുക | [പശ്ചാത്തല ജോലികളും പ്രകടനവും](/5-browser-extension/3-background-tasks-and-performance/README.md) | ജെൻ |
|
||||
| 15 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കൂടുതൽ അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ് മെന്റ് | ഒരു ഗെയിം നിർമ്മിക്കുന്നതിനുള്ള തയ്യാറെടുപ്പിൽ ക്ലാസുകളും കോമ്പോസിഷൻ, പബ്/സബ് പാറ്റേൺ എന്നിവ ഉപയോഗിച്ച് അനന്തരാവകാശത്തെക്കുറിച്ച് അറിയുക | [അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ്മെന്റിന്റെ ആമുഖം](/6-space-game/1-introduction/README.md) | ക്രിസ് |
|
||||
| 16 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | ക്യാൻവാസിലേക്ക് വരയ്ക്കുന്നു | ഒരു സ്ക്രീനിലേക്ക് ഘടകങ്ങൾ വരയ്ക്കാൻ ഉപയോഗിക്കുന്ന കാൻവാസ് API കുറിച്ച് അറിയുക | [ക്യാൻവാസിലേക്ക് വരയ്ക്കുക ](/6-space-game/2-drawing-to-canvas/README.md) | ക്രിസ് |
|
||||
| 17 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | സ്ക്രീനിന് ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു | കാർട്ടീഷ്യൻ നിർദ്ദേശാങ്കങ്ങളും കാൻവാസ് API ഉപയോഗിച്ച് മൂലകങ്ങൾക്ക് എങ്ങനെ ചലനം നേടാൻ കഴിയുമെന്ന് കണ്ടെത്തുക | [ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു](/6-space-game/3-moving-elements-around/README.md) | ക്രിസ് |
|
||||
| 18 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | കോളിഷൻ കണ്ടെത്തൽ | കീപ്രസ്സുകൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ കൂട്ടിമുട്ടുകയും പരസ്പരം പ്രതികരിക്കുകയും ഗെയിമിന്റെ പ്രകടനം ഉറപ്പാക്കുന്നതിന് ഒരു കൂൾഡൗൺ ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുക | [കൂട്ടിയിടി കണ്ടെത്തൽ](/6-space-game/4-collision-detection/README.md) | ക്രിസ് |
|
||||
| 19 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | സ്കോർ നിലനിർത്തൽ | ഗെയിമിന്റെ നിലയെയും പ്രകടനത്തെയും അടിസ്ഥാനമാക്കി ഗണിത കണക്കുകൂട്ടലുകൾ നിർവഹിക്കുക | [സ്കോർ നിലനിർത്തൽ](/6-space-game/5-keeping-score/README.md) | ക്രിസ് |
|
||||
| 20 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | ഗെയിം അവസാനിപ്പിക്കുകയും പുനരാരംഭിക്കുകയും ചെയ്യുന്നു | ആസ്തികൾ വൃത്തിയാക്കുന്നതും വേരിയബിൾ മൂല്യങ്ങൾ പുനക്രമീകരിക്കുന്നതും ഉൾപ്പെടെ ഗെയിം അവസാനിപ്പിക്കുന്നതിനെകുറിച്ചും പുനരാരംഭിക്കുന്നതിനെ കുറിച്ചും അറിയുക | [അവസാനങ്ങളുടെ നിബന്ധനകൾ ](/6-space-game/6-end-condition/README.md) | ക്രിസ് |
|
||||
| 21 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | HTML ഒരു വെബ് ആപ്പിലെ ടെംപ്ലേറ്റുകളും റൂട്ടുകളും | റൂട്ടിംഗും എച്ച്ടിഎംഎൽ ടെംപ്ലേറ്റുകളും ഉപയോഗിച്ച് ഒരു മൾട്ടിപേജ് വെബ് സൈറ്റിന്റെ ആർക്കിടെക്ചറിന്റെ സ്കഫോൾഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](/7-bank-project/1-template-route/README.md) | യോഹാൻ |
|
||||
| 22 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക | ഫോമുകൾ നിർമ്മിക്കുന്നതിനെ കുറിച്ചും വാലിഡേഷൻ റുട്ടീൻ കൈമാറുന്നതിനെ കുറിച്ചും അറിയുക | [ഫോമുകൾ](/7-bank-project/2-forms/README.md) | യോഹാൻ |
|
||||
| 23 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | ഡാറ്റ കൊണ്ടുവരുന്നതും ഉപയോഗിക്കുന്നതുമായ രീതികൾ | ഡാറ്റ നിങ്ങളുടെ ആപ്പിലേക്ക് എങ്ങനെ ഒഴുകുന്നു, അത് എങ്ങനെ കൊണ്ടുവരാം, സംഭരിക്കാം, ഉപേക്ഷിക്കാം | [ഡാറ്റ](/7-bank-project/3-data/README.md) | യോഹാൻ |
|
||||
| 24 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | സ്റ്റേറ്റ് മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ | നിങ്ങളുടെ ആപ്പ് എങ്ങനെ സ്റ്റേറ്റ്നിലനിർത്തുന്നു, പ്രോഗ്രാമായി എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് അറിയുക | [സ്റ്റേറ്റ് മാനേജ്മെന്റ്](/7-bank-project/4-state-management/README.md) | യോഹാൻ |
|
||||
|
||||
## ഓഫ്ലൈൻ ആക്സസ്സ്
|
||||
|
||||
നിങ്ങൾക്ക് ഈ ഡോക്യുമെന്റേഷൻ [Docsify](https://docsify.js.org/#/) ഉപയോഗിച്ച് ഓഫ്ലൈനിൽ പ്രവർത്തിപ്പിക്കാനാകും. ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക, [Docsify ഇന്സ്റ്റോള് ചെയ്യുക](https://docsify.js.org/#/quickstart) നിങ്ങളുടെ പ്രാദേശിക മെഷീനിൽ,തുടർന്ന് ഈ റിപ്പോയുടെ റൂട്ട് ഫോൾഡറിൽ `docsify serve` ടൈപ്പ് ചെയ്യുക. നിങ്ങളുടെ ലോക്കൽഹോസ്റ്റിൽ പോർട്ട് 3000 ൽ വെബ്സൈറ്റ് കാണാം : `localhost:3000`.
|
||||
|
||||
## പിഡിഫ്
|
||||
|
||||
എല്ലാ പാഠങ്ങളുടെയും ഒരു PDF കാണാം [ഇവിടെ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## മറ്റ് പാഠ്യപദ്ധതികൾ
|
||||
|
||||
ഞങ്ങളുടെ ടീം മറ്റ് പാഠ്യപദ്ധതികൾ നിർമ്മിക്കുന്നു! പരിശോധിക്കുക :
|
||||
|
||||
- [തുടക്കക്കാർക്കായുള്ള മെഷീൻ ലേണിംഗ്](https://aka.ms/ml-beginners)
|
||||
- [തുടക്കക്കാർക്കായുള്ള IoT](https://aka.ms/iot-beginners)
|
||||
@@ -1,113 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Desenvolvimento Web para Iniciantes - Programa de Estudos
|
||||
|
||||
Azure Cloud Advocates da Microsoft têm o prazer de oferecer um curso de 12 semanas e 24 lições sobre o básico de JavaScript, CSS e HTML.
|
||||
Cada lição possui quizzes pré e pós-lição , instruções escritas para completar a lição, uma solução, uma tarefa e mais.
|
||||
Nossa pedagogia baseada em prática permite que você aprenda enquanto construi, uma forma de aprendizado eficaz e comprovada.
|
||||
|
||||
**Grandes agradecimentos aos nossos autores Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, e Tomomi Imura!**
|
||||
|
||||
# Começando
|
||||
|
||||
> **Professores**, nós incluímos algumas [sugestões](for-teachers.pt.md) sobre como utilizar este curso. Adoraríamos o seu Feedback em nosso [fórum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **Estudantes**, para usar esse currículo por conta própria, faça um fork do repositório inteiro, começando por um quiz pré-aula, veja a aula e então faça o resto das atividades.
|
||||
Procure fazer os projetos baseado no que aprendeu ao invés de simplesmente copiar a solução que se encontra na pasta de soluções das atividades.
|
||||
Uma boa opção seria criar um grupo de estudos e completar todos os conteúdos juntos.
|
||||
Para estudos mais profundos, recomendamos que assista aos vídeos mencionados abaixo e procure pelo [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
> 🎥 Clique na imagem acima para acessar um vídeo sobre o projeto e aqueles que o criaram !
|
||||
|
||||
## Pedagogia
|
||||
|
||||
Nós escolhemos dois princípos pedagógicos enquanto criávamos este curso: Garantir de que era baseado em práticas e que
|
||||
tivesse quizzes frequentes.
|
||||
Até o fim deste curso, estudantes terão construído um jogo de digitação, um terrário virtual, uma extensão de navegador 'verde' , um jogo do tipo 'space invaders', e um aplicativo bancário, e terão aprendido o básico de JavaScript, HTML, e CSS com um moderno conjunto de ferramentas do desenvolvimento web dos dias atuais 🎓 !!!
|
||||
|
||||
> 🎓 Você pode tomar as primeiras lições nesse curso como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn!
|
||||
|
||||
Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições iniciais em noções básicas de JavaScript para introduzir conceitos, emparelhadas com o vídeo da coleção [accessible ici](https://www.youtube.com/playlist?list=PLb2HQ45KP0WsFop0pItGSUYl6baYjKEye) de vídeo-aulas, alguns de autores os quais contribuíram para este curso.
|
||||
|
||||
Além disso, um teste simples antes da aula define a intenção do aluno de aprender um tópico, enquanto um segundo teste após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser realizado no todo ou em partes. Os projetos começam pequenos e tornam-se cada vez mais complexos no final do ciclo de 12 semanas.
|
||||
|
||||
Embora tenhamos evitado propositadamente a introdução de frameworks JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, uma próxima etapa para concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos:
|
||||
[Coletânea inicial sobre Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
|
||||
> Encontre nosso [código de conduta](CODE_OF_CONDUCT.md), [guia para contribuidores](CONTRIBUTING.md), e [o guia para traduções do curso](TRANSLATIONS.md).
|
||||
Seu Feedback construtivo é bem vindo.
|
||||
|
||||
|
||||
|
||||
## Cada lição inclui:
|
||||
|
||||
- Uma folha de rascunho opcional
|
||||
- Um vídeo complementar opcional
|
||||
- Quiz pré-aula para aquecimento
|
||||
- Aula em versão escrita
|
||||
- Um desafio
|
||||
- Uma explicação **bem detalhada (passo a passo)** sobre como contruir o projeto
|
||||
- Leitura complementar
|
||||
- Exercícios
|
||||
- Quiz pós-aula
|
||||
|
||||
> **Nota sobre os quizzes**: todos os quizzes se encontram [aqui](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=pt-BR), um total de 48 quizzes, com 3 questões em cada.
|
||||
Também podem ser acessados localmente pela pasta `quiz-app`.
|
||||
|
||||
## Lições
|
||||
|
||||
| | Nome do projeto | Conceitos ensinados | Objetivos de aprendizado | Lição | Autor |
|
||||
| :---: |:------------------------------------------------------------------------:| :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------------------------------------:| :---------------------: |
|
||||
| 01 | Começando | Introdução à programação | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre o software que ajuda os desenvolvedores profissionais a fazerem seus trabalhos | [Introdução à programação](../1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md) | Jasmine |
|
||||
| 02 | Começando | Introdução às bases do Github, incluindo trabalho em equipe | Como usar o GitHub em seu projeto, como colaborar com outras pessoas em uma base de código | [Introdução às bases do Github](../1-getting-started-lessons/2-github-basics/translations/README.pt.md) | Floor |
|
||||
| 03 | Começando | Acessibilidade | Apprendra as bases da acessibilidade na Web | [Fundamentos da Acessibilidade](../1-getting-started-lessons/3-accessibility/translations/README.pt.md) | Christopher |
|
||||
| 04 | Básico de JS | Tipos de dados em JavaScript | O básico de dados em JavaScript | [Tipos de dados](../2-js-basics/1-data-types/translations/README.pt.md) | Jasmine |
|
||||
| 05 | Básico de JS | Funções e métodos | Aprenda sobre Funções e métodos para gerenciar o fluxo de lógica de uma aplicação | [Funções e métodos](../2-js-basics/2-functions-methods/translations/README.pt.md) | Jasmine e Christopher |
|
||||
| 06 | Básico de JS | Tomando decisões com JS | Aprenda como criar condições em seu código usando métodos de tomada de decisão methods | [Tomando decisões](../2-js-basics/3-making-decisions/translations/README.pt.md) | Jasmine |
|
||||
| 07 | Básico de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](../2-js-basics/4-arrays-loops/translations/README.pt.md) | Jasmine |
|
||||
| 08 | [Terrarium](../3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando em construir um layout | [Introdução a HTML](../3-terrarium/1-intro-to-html/translations/README.pt-BR.md) | Jen |
|
||||
| 09 | [Terrarium](../3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico de inclusão CSS fazendo a página responsiva | [Introdução a CSS](../3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](../3-terrarium/solution/README.md) | JavaScript closures, DOM manipulation | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar / soltar, focando em fechamentos e manipulação de DOM | [JavaScript Closures, DOM manipulation](../3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](../4-typing-game/solution/README.md) | Construa um jogo de digitação | Aprenda a usar eventos de teclado para conduzir a lógica de seu aplicativo JavaScript | [Programação Orientada a Eventos](../4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Extensão de navegador verde](../5-browser-extension/solution/README.md) | Trabalhando com navegadores | Aprenda como os navegadores funcionam, seu histórico e como organizar os primeiros elementos de uma extensão do navegador | [Sobre navegadores](../5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Extensão de navegador verde](../5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da extensão do seu navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](../5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Extensão de navegador verde](../5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho da web | Use os processos de segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre o desempenho da web e algumas otimizações para fazer | [Tarefas e desempenho em segundo plano](../5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Jogo Espacial](../6-space-game/solution/README.md) | Desenvolvimento de jogos mais avançado com JavaScript | Saiba mais sobre herança usando classes e composição e o padrão Pub / Sub, na preparação para a construção de um jogo | [Introdução ao desenvolvimento avançado de um jogo em Javascript](../6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Jogo Espacial](../6-space-game/solution/README.md) | Desenhar na tela | Saiba mais sobre a API Canvas, usada para desenhar elementos em uma tela | [Desenhando na Tela](../6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Jogo Espacial](../6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando as coordenadas cartesianas e a API Canvas | [Movendo elementos pela Tela](../6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Jogo Espacial](../6-space-game/solution/README.md) | Detecção de Colisão | Faça os elementos colidirem e reagirem uns com os outros usando o pressionamento de teclas e fornecer uma função de resfriamento para garantir o desempenho do jogo | [Detecção de Colisão](../6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Jogo Espacial](../6-space-game/solution/README.md) | Mantendo a pontuação | Faça cálculos matemáticos com base no status e no desempenho do jogo | [Mantendo a pontuação](../6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Jogo Espacial](../6-space-game/solution/README.md) | Terminando e reiniciando o jogo | Saiba mais sobre como encerrar e reiniciar o jogo, incluindo limpeza de ativos e redefinição de valores de variáveis | [A condição de encerramento](../6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](../7-bank-project/solution/README.md) | Templates HTML e rotas em um aplicativo da web | Aprenda a criar o andaime da arquitetura de um site de várias páginas usando modelos de roteamento e HTML | [HTML Templates e Rotas](../7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](../7-bank-project/solution/README.md) | Criar um formulário de Login e Cadastro | Aprenda sobre a construção de formulários e rotinas de validação | [Formulários](../7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](../7-bank-project/solution/README.md) | Métodos de busca e uso de dados | Como os dados fluem para dentro e para fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | [Dados](../7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](../7-bank-project/solution/README.md) | Conceitos de Gestão do Estado | Saiba como seu aplicativo mantém o estado e como gerenciá-lo de maneira programática | [Gestão de estados](../7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Acesso offline
|
||||
|
||||
Você pode utilizar essa documentação quando estiver offline através de [Docsify](https://docsify.js.org/#/). Faça um Fork desse repositório, [instale Docsify](https://docsify.js.org/#/quickstart) na sua máquina e digite `docsify serve` na pasta raiz desse repositório. O site estará disponível na porta 3000 em seu host local: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Um PDF de todas as lições pode ser encontrado [bem aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Outros Cursos
|
||||
|
||||
Nossa equipe produziu outros cursos! Veja só :
|
||||
|
||||
- [Machine Learning para iniciantes](https://aka.ms/ml-beginners)
|
||||
- [IoT para iniciantes](https://aka.ms/iot-beginners)
|
||||
- [Data Science para iniciantes](https://aka.ms/datascience-beginners)
|
||||
@@ -1,103 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Веб-разработка для Начинающих - О Курсе
|
||||
|
||||
Специалисты из Microsoft Azure Cloud Advocates рады представить 12-ти недельный обучающий курс, состоящий из 24-х уроков, в котором будет рассказано об основах JavaScript, CSS и HTML. К каждому уроку прилагается: викторина (quiz), которую стоит пройти перед уроком, викторина, которую стоит пройти после урока, текстовый урок, решение поставленных в уроке задач, задания и многое другое. Наша стратегия обучения на проектах-примерах, позволяет вам применять полученные знания, прямо во время обучения - проверенный способ закрепить новые навыки.
|
||||
|
||||
**От всей души благодарим наших авторов: Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, и художника зарисовок Tomomi Imura!**
|
||||
|
||||
# Давайте начнем!
|
||||
|
||||
> **Преподавателям.** Мы подготовили [несколько советов](for-teachers.ru.md) о том, как использовать этот курс. Будем рады узнать о ваших впечатлениях на [нашем форуме](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **Ученикам.** Чтобы самостоятельно пройти этот курс, сделайте ответвление (fork) от этого репозитория и выполняйте упражнения из данного курса. Начните с предлекционной викторины, затем прочтите урок, после чего завершите оставшиеся задания и активности. Постарайтесь самостоятельно создавать проекты, используя информацию из уроков, нежели просто копировать текст из предложенных нами решений. Однако, вы всегда сможете найти код-решение в папке `/solutions` для каждого ориентированного на проект урока. Хорошей идеей будет собраться с друзьями и пройти курс всем вместе. Для дальнейшего изучения мы рекомендуем посетить [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon), а также посмотреть видеоматериалы, приведённые ниже.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Видео-Презентация")
|
||||
|
||||
Автор GIF-анимации [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 Кликните на изображение выше, чтобы посмотреть видео о нашем проекте и людях, создавших его!
|
||||
|
||||
## Стратегии обучения
|
||||
|
||||
При построении этого курса, мы придерживались двух педагогических принципов: помнить о том, что курс ориентирован на обучение, путем проектирования и что он должен содержать большое количество викторин. По окончании обучения, ученики создадут игру, тренирующую навыки печати, виртуальный террариум, "зелёное" расширение для браузера, игру типа "Space Invaders" и банковское приложение для бизнеса, изучат основы JavaScript, HTML и CSS, а также набор современных инструментов для веб-разработчика.
|
||||
|
||||
> 🎓 Вы можете пройти несколько первых уроков, используя нашу пошаговую систему обучения [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на сайте Microsoft Learn!
|
||||
|
||||
Проектно-ориентированная стратегия обучения позволяет сделать процесс обучения более привлекательным и облегчить закрепление полученных навыков и информации. Мы также написали несколько уроков, чтобы помочь вам познакомиться с основами JavaScript. Эти уроки совмещены с видео из коллекции уроков "[Знакомство с JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)". Некоторые из авторов этих видео также принимали участие и в создании этого курса.
|
||||
|
||||
В дополнение, простая викторина перед уроками позволяет заинтересовать ученика в изучении темы, в то время как вторая викторина после занятия позволяет закрепить полученные знания. Этот курс был создан, чтобы быть занимательным для каждого. Вы можете пройти курс от начала до конца или изучить лишь его часть. Проекты, которые вы будете делать на протяжении курса, просты вначале и станут более сложными по завершении 12-ти недельного курса.
|
||||
|
||||
Мы намеренно не раскрывали тему фреймворков JavaScript, чтобы сконцентрироваться получении базовых навыков, необходимых веб-разработчику. Следующим шагом, после прохождения этого курса, мы рекомендуем изучить Node.js, воспользовавшись этим набором видеоуроков: "[Знакомство с Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"
|
||||
|
||||
> Вы можете ознакомиться с нашей [политикой взаимодействия с сообществом](../CODE_OF_CONDUCT.md), [правила внесения собственного вклада в развитие проекта](../CONTRIBUTING.md) и [правилами для переводчиков](../TRANSLATIONS.md). Мы очень ждём ваших конструктивных отзывов!
|
||||
|
||||
## Каждый урок включает в себя:
|
||||
|
||||
- необязательную зарисовку
|
||||
- необязательное вспомогательное видео
|
||||
- викторину для разминки перед уроком
|
||||
- текстовый урок
|
||||
- для проектно-ориентированных уроков, пошаговое описание того, как построить проект
|
||||
- проверку знаний
|
||||
- "вызов"
|
||||
- вспомогательную литературу
|
||||
- задания
|
||||
- викторину для прохождения после урока
|
||||
|
||||
> **На заметку о викторинах**: все викторины находятся в [этом приложении](https://ashy-river-0debb7803.1.azurestaticapps.net/), всего мы подготовили 48 викторин, в каждой из которых по три вопроса. Ссылки на них расположены в уроках, но вы можете взаимодействовать с викторинами в отдельности. Для этого, обратитесь к инструкциям в папке `quiz-app`. Эти инструкции активно локализуются.
|
||||
|
||||
## Уроки
|
||||
|
||||
| | Наименование проекта | Получаемые знания | Цели обучения | Ссылка на урок | Автор |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Начало | Введение в Программирование и Инструменты | Узнать об основах, стоящих за большинством языков программирования и о программном обеспечении, которое помогает профессиональным разработчикам в их делах | [Введение в программирование и инструменты](../1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md) | Jasmine |
|
||||
| 02 | Начало | Основы GitHub, работа в команде | Как использовать GitHub в своих проектах, как писать код в команде | [Введение в GitHub](../1-getting-started-lessons/2-github-basics/translations/README.ru.md) | Floor |
|
||||
| 03 | Начало | Доступность | Изучить принципы доступности веб-среды для людей с ограниченными возможностями здоровья | [Основы доступности](../1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | Основы JavaScript | Типы данных в JavaScript | Введение в типы данных в JavaScript | [Типы данных](../2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | Основы JavaScript | Функции и Методы | Узнать о функциях и методах, чтобы регулировать поведение и логику приложений | [Функции и Методы](../2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | Основы JavaScript | Принятие решений в JavaScript | Изучить как задавать условия, если ваш код использует логику, основывающуюся на принятии решений | [Принятие решений](../2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | Основы JavaScript | Массивы и Циклы | Изучить работу с данными, используя массивы и циклы в 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, взаимодействие со страницей | Добавить JavaScript, превращающий ваш террариум в интерактивное "потяни-и-отпусти" приложение. Акцентировать внимание на взаимодействии со страницей и иерархиях в JavaScript | [Иерархия в JavaScript, взаимодействие со страницей](../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, использовать сохраненные данные | [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 | Изучить Canvas API, чтобы рисовать элементы на экране | [Рисование с помощью Canvas](../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) | Обработка столкновений | Заставить элементы сталкиваться друг с другом при нажатии на клавиши, а также добавьте cooldown-функцию, чтобы повысить эффективность игры | [Обработка столкновений](../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 |
|
||||
|
||||
## Оффлайн доступ
|
||||
|
||||
Вы можете использовать эту документацию оффлайн при помощи [Docsify](https://docsify.js.org/#/). Сделайте fork этого репозитория, [установите Docsify](https://docsify.js.org/#/quickstart) на ваш компьютер, а затем в корневой директории этого репозитория воспользуйтесь командой `docsify serve`. Вебсайт будет доступен по адресу `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Все уроки в формате PDF доступны [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## Другие курсы
|
||||
|
||||
Наша команда создает и другие курсы! Рекомендуем взглянуть:
|
||||
|
||||
- [Машинное Обучение для Начинающих](https://aka.ms/ml-beginners)
|
||||
- [IoT для Начинающих](https://aka.ms/iot-beginners)
|
||||
- [Data Science для Начинающих](https://aka.ms/datascience-beginners)
|
||||
@@ -1,104 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# ஆரம்ப நிலையாளர்களுக்கான வலை அபிவிருத்தி - ஒரு பாடத்திட்டம்
|
||||
|
||||
மைக்ரோசாப்ட் அஸூர் கிளவுட் வழக்கறிஞர்கள் ஜாவாஸ்கிரிப்ட், சிஎஸ்எஸ் மற்றும் ஹெச்டிஎம்எல் அடிப்படைகள் பற்றி ஒரு 12 வார, 24 பாட பாடத்திட்டத்தை வழங்க மகிழ்ச்சி யடைகிறார்கள். ஒவ்வொரு பாடத்திலும் முன் மற்றும் பிந்தைய பாட வினாடி வினாக்கள், பாடத்தை முடிக்க எழுதப்பட்ட அறிவுறுத்தல்கள், ஒரு தீர்வு, ஒரு ஒதுக்கீடு மற்றும் பல அடங்கும். எங்கள் திட்டம் அடிப்படையிலான கற்பித்தல் நீங்கள் கட்டிடம் போது கற்றுக்கொள்ள அனுமதிக்கிறது, புதிய திறன்கள் 'ஒட்டிக்கொள்கின்றன' ஒரு நிரூபிக்கப்பட்ட வழி.
|
||||
|
||||
|
||||
**எங்கள் ஆசிரியர்கள் ஜென் லூப்பர், கிறிஸ் நோரிங், கிறிஸ்டோபர் ஹாரிசன், ஜாஸ்மின் கிரீனவே, யோஹான் லசோர்சா, ஃப்ளோர் ட்ரீஸ் மற்றும் ஸ்கெட்ச்நோட் கலைஞர் டோமோமி இமுரா வுக்கு மனமார்ந்த நன்றி!**
|
||||
|
||||
# தொடங்குதல்
|
||||
|
||||
> **ஆசிரியர்கள்**,இந்த பாடத்திட்டத்தை எவ்வாறு பயன்படுத்துவது என்பது குறித்து நாங்கள் [சில ஆலோசனைகளை சேர்த்துள்ளோம்](/for-teachers.md). உங்கள் கருத்துக்களை நாங்கள் விரும்புகிறோம் [எங்கள் விவாத மன்றத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **மாணவர்கள்**, இந்த பாடத்திட்டத்தை சொந்தமாக பயன்படுத்த, முழு ரெப்போவை முட்கரண்டிமற்றும் உங்கள் சொந்த பயிற்சிகளை முடிக்க, ஒரு முன் விரிவுரை வினாடி வினா தொடங்கி, பின்னர் விரிவுரை படித்து மீதமுள்ள நடவடிக்கைகளை நிறைவு. தீர்வு குறியீட்டை நகலெடுக்காமல் பாடங்களைபுரிந்து கொண்டு திட்டங்களை உருவாக்க முயற்சிக்கவும்; எனினும் அந்த குறியீடு ஒவ்வொரு திட்டம் சார்ந்த பாடத்தில் /தீர்வுகள் கோப்புறைகளில் கிடைக்கிறது. மற்றொரு யோசனை நண்பர்களுடன் ஒரு ஆய்வுக் குழுவை உருவாக்கி உள்ளடக்கத்தை ஒன்றாகச் செல்வது. மேலும் ஆய்வுக்காக, நாங்கள் [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
ஜிஃப் மூலம் [மோஹித் ஜெய்சல்](https://linkedin.com/in/mohitjaisal) உருவாக்கப்பட்டது.
|
||||
|
||||
> 🎥 திட்டம் மற்றும் அதை உருவாக்கிய எல்லோரும் பற்றி ஒரு வீடியோ மேலே படத்தை கிளிக் செய்யவும்!
|
||||
|
||||
## ஆசிரியரியல்
|
||||
|
||||
இந்த பாடத்திட்டத்தை உருவாக்கும் போது நாங்கள் இரண்டு கற்பித்தல் கோட்பாடுகளைத் தேர்ந்தெடுத்துள்ளோம்: இது திட்ட அடிப்படையிலானது மற்றும் இது அடிக்கடி வினாடி வினாக்களை உள்ளடக்கியது என்பதை உறுதிப்படுத்துகிறது. இந்த தொடரின் முடிவில், மாணவர்கள் ஒரு தட்டச்சு விளையாட்டு, ஒரு மெய்நிகர் டெரரியம், ஒரு 'பச்சை' உலாவி நீட்டிப்பு, ஒரு 'விண்வெளி படையெடுப்பாளர்கள்' வகை விளையாட்டு, மற்றும் ஒரு வணிக வகை வங்கி பயன்பாட்டை உருவாக்கியிருப்பார்கள், மேலும் இன்றைய வலை டெவலப்பரின் நவீன கருவிச்சங்கிலியுடன் ஜாவாஸ்கிரிப்ட், ஹெச்டிஎம்எல் மற்றும் சிஎஸ்எஸ் ஆகியவற்றின் அடிப்படைகளைக் கற்றுக்கொண்டிருப்பார்கள்.
|
||||
|
||||
> 🎓 நீங்கள் மைக்ரோசாப்ட் கற்றல் ஒரு [கற்றல் பாதை](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) இந்த பாடத்திட்டத்தில் முதல் சில பாடங்களை எடுக்க முடியும்!
|
||||
|
||||
உள்ளடக்கம் திட்டங்களுடன் பொருந்துவதை உறுதி செய்வதன் மூலம், செயல்முறை மாணவர்களுக்கு அதிக ஈடுபாடு மற்றும் கருத்துகளை தக்கவைத்தல் அதிகரிக்கப்படும். நாங்கள் கருத்துக்களை அறிமுகப்படுத்த ஜாவாஸ்கிரிப்ட் அடிப்படைகளில் பல ஸ்டார்டர் பாடங்களை எழுதினோம், வீடியோ டுரிட்டோரியல்களின் "[தொடக்கநிலைதொடர்: ஜாவாஸ்கிரிப்ட்](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" தொகுப்பிலிருந்து வீடியோவுடன் இணைந்தது, அதன் ஆசிரியர்கள் சிலர் இந்த பாடத்திட்டத்திற்கு பங்களித்தனர்.
|
||||
|
||||
கூடுதலாக, ஒரு வர்க்கம் ஒரு தலைப்பைக் கற்றுக்கொள்வதை நோக்கி மாணவரின் நோக்கத்தை அமைக்கும் முன் ஒரு குறைந்த பங்குகள் வினாடி வினா, அதே நேரத்தில் வகுப்புக்குப் பிறகு இரண்டாவது வினாடி வினா மேலும் தக்கவைத்தல் உறுதி. இந்த பாடத்திட்டம் நெகிழ்வான மற்றும் வேடிக்கையான தாக வடிவமைக்கப்பட்டது மற்றும் முழுமையாகவோ அல்லது பகுதியாகவோ எடுத்துக் கொள்ளலாம். திட்டங்கள் சிறிய தொடங்கி 12 வார சுழற்சி முடிவில் பெருகிய முறையில் சிக்கலான ஆக.
|
||||
|
||||
ஒரு கட்டமைப்பை ஏற்றுக்கொள்வதற்கு முன் ஒரு வலை டெவலப்பராக தேவையான அடிப்படை திறன்களில் கவனம் செலுத்துவதற்காக ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளை அறிமுகப்படுத்துவதை நாங்கள் வேண்டுமென்றே தவிர்த்திருந்தாலும், இந்த பாடத்திட்டத்தை நிறைவு செய்வதற்கான ஒரு நல்ல அடுத்த படி, வீடியோக்களின் மற்றொரு சேகரிப்பு வழியாக நோடீ.ஜேஎஸ் வைப் பற்றி கற்றுக்கொள்வதாகும்:"[தொடக்க தொடர்: நோடீ.ஜேஎஸ்](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> எங்கள் [நடத்தை விதிகள்](/CODE_OF_CONDUCT.md), [பங்களிப்பு](/CONTRIBUTING.md), மற்றும் [மொழிபெயர்ப்பு](/TRANSLATIONS.md) வழிகாட்டுதல்களைக் கண்டறியவும். உங்கள் ஆக்கப்பூர்வமான கருத்துக்களை நாங்கள் வரவேற்கிறோம்!
|
||||
|
||||
## ஒவ்வொரு பாடமும் அடங்கும்:
|
||||
|
||||
- விருப்ப ஸ்கெட்ச்நோட்
|
||||
- விருப்ப துணை வீடியோ
|
||||
- முன் பாடம் வார்ம்அப் வினாடி வினா
|
||||
- எழுதப்பட்ட பாடம்
|
||||
- திட்டம் அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை எவ்வாறு உருவாக்குவது என்பது பற்றிய படிப்படியான வழிகாட்டிகள்
|
||||
- அறிவு காசோலைகள்
|
||||
- ஒரு சவால்
|
||||
- துணை வாசிப்பு
|
||||
- வகுத்தமைத்தல்
|
||||
- பிந்தைய பாடம் வினாடி வினா
|
||||
|
||||
> **வினாடி வினாக்கள் பற்றிய குறிப்பு**: அனைத்து வினாடி வினாக்களும் [இந்த பயன்பாட்டில்](https://ashy-river-0debb7803.1.azurestaticapps.net/) உள்ளன, ஒவ்வொன்றும் மூன்று கேள்விகளின் 48 மொத்த வினாடி வினாக்களுக்கு. அவர்கள் பாடங்களில் இருந்து இணைக்கப்பட்டுள்ளது ஆனால் வினாடி வினா பயன்பாட்டை உள்நாட்டில் இயக்க முடியும்; `வினாடி வினா-பயன்பாடு` கோப்புறையில் உள்ள அறிவுறுத்தலைப் பின்பற்றவும். அவை படிப்படியாக உள்ளூர்மயமாக்கப்படுகின்றன.
|
||||
|
||||
|
||||
## பாடங்கள்
|
||||
|
||||
| | திட்ட பெயர் | கற்பிக்கப்பட்ட கருத்துக்கள் | கற்றல் நோக்கங்கள் | இணைக்கப்பட்ட பாடம் | நுலாசிரியன் |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | தொடங்குதல் | வர்த்தக த்தின் நிரலாக்க மற்றும் கருவிகள் அறிமுகம் | தொழில்முறை டெவலப்பர்கள் தங்கள் வேலைகளைச் செய்ய உதவும் பெரும்பாலான நிரலாக்க மொழிகளுக்குப் பின்னால் உள்ள அடிப்படை அடித்தளங்களையும் மென்பொருளைப் பற்றியும் கற்றுக்கொள்ளுங்கள் | [நிரலாக்க மொழிகள் மற்றும் வர்த்தக கருவிகள் அறிமுகம்](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ஜாஸ்மின் |
|
||||
| 02 | தொடங்குதல் | கிட்ஹப் அடிப்படைகள், ஒரு குழுவுடன் வேலை செய்வதை உள்ளடக்கியது | உங்கள் திட்டத்தில் கிட்ஹப் பயன்படுத்துவது எப்படி, குறியீட்டு த் தளத்தில் மற்றவர்களுடன் எவ்வாறு ஒத்துழைப்பது | [கிட்ஹப் அறிமுகம்](/1-getting-started-lessons/2-github-basics/README.md) | ஃப்ளோர் |
|
||||
| 03 | தொடங்குதல் | எளிவரல் | இணைய அணுகல் தன்மையின் அடிப்படைகளை அறிக | [அணுகல் அடிப்படைகள்](/1-getting-started-lessons/3-accessibility/README.md) | கிறிஸ்டோபர் |
|
||||
| 04 | ஜேஎஸ் அடிப்படைகள் | ஜாவாஸ்கிரிப்ட் தரவு வகைகள் | ஜாவாஸ்கிரிப்ட் தரவு வகைகளின் அடிப்படைகள் | [தரவு வகைகள்](/2-js-basics/1-data-types/README.md) | ஜாஸ்மின் |
|
||||
| 05 | ஜேஎஸ் அடிப்படைகள் | தொழிற்பாடுகளும் முறைகளும் | பயன்பாட்டின் தர்க்க ஓட்டத்தை நிர்வகிக்க செயல்பாடுகள் மற்றும் முறைகளைப் பற்றி அறிக | [தொழிற்பாடுகளும் முறைகளும்](/2-js-basics/2-functions-methods/README.md) | ஜாஸ்மின் மற்றும் கிறிஸ்டோபர் |
|
||||
| 06 | ஜேஎஸ் அடிப்படைகள் | ஜே.எஸ். உடன் முடிவுகளை எடுப்பது | முடிவெடுக்கும் முறைகளைப் பயன்படுத்தி உங்கள் குறியீட்டில் நிலைமைகளை எவ்வாறு உருவாக்குவது என்பதை அறிக | [ ஜே.எஸ். உடன் முடிவுகளை எடுப்பது](/2-js-basics/3-making-decisions/README.md) | ஜாஸ்மின் |
|
||||
| 07 | ஜேஎஸ் அடிப்படைகள் | வரிசைகள் மற்றும் வளையங்கள் | ஜாவாஸ்கிரிப்டில் உள்ள தகவல் வரிசைகள் மற்றும் வளையங்களைப் பயன்படுத்தி தரவுகளுடன் பணியாற்றுங்கள் | [வரிசைகள் மற்றும் வளையங்கள்](/2-js-basics/4-arrays-loops/README.md) | ஜாஸ்மின் |
|
||||
| 08 | [டெரரியம்](/3-terrarium/solution/README.md) | நடைமுறையில் ஹெச்டிஎம்எல் | ஒரு தளவமைப்பை உருவாக்குவதில் கவனம் செலுத்தி, ஆன்லைன் டெரரியம் உருவாக்க, ஹெச்டிஎம்எல் ஐ உருவாக்கவும் | [ஹெச்டிஎம்எல் அறிமுகம்](/3-terrarium/1-intro-to-html/README.md) | ஜென் |
|
||||
| 09 | [டெரரியம்](/3-terrarium/solution/README.md) | நடைமுறையில் சி.எஸ்.எஸ். | பக்கத்தை பதிலளிக்கச் செய்வது உட்பட சிஎஸ்எஸ் இன் அடிப்படைகளில் கவனம் செலுத்தி, ஆன்லைன் டெரரியம் பாணியில் சிஎஸ்எஸ் ஐ உருவாக்கவும் | [சி.எஸ்.எஸ் அறிமுகம்](/3-terrarium/2-intro-to-css/README.md) | ஜென் |
|
||||
| 10 | [டெரரியம்](/3-terrarium/solution/README.md) | ஜாவாஸ்கிரிப்ட் மூடல்கள், டோம் கையாளுதல் | மூடல்கள் மற்றும் டோம் கையாளுதல் கவனம் செலுத்தி, ஒரு இழுவை/துளி இடைமுகமாக டெரரியம் செயல்பட ஜாவாஸ்கிரிப்டை உருவாக்கவும் | [ஜாவாஸ்கிரிப்ட் மூடல்கள், டோம் கையாளுதல்](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | ஜென் |
|
||||
| 11 | [தட்டச்சு விளையாட்டு](/4-typing-game/solution/README.md) | தட்டச்சு விளையாட்டு உருவாக்கவும் | உங்கள் ஜாவாஸ்கிரிப்ட் பயன்பாட்டின் தர்க்கத்தை இயக்க விசைப்பலகை நிகழ்வுகளை எவ்வாறு பயன்படுத்துவது என்பதை அறிக | [நிகழ்வு-இயக்கப்படும் நிரலாக்கம்](/4-typing-game/typing-game/README.md) | கிறிஸ்டோபர் |
|
||||
| 12 | [பச்சை உலாவி நீட்டிப்பு](/5-browser-extension/solution/README.md) | உலாவிகளில் வேலை | உலாவிகள் எவ்வாறு வேலை செய்கின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்டிப்பின் முதல் கூறுகளை எவ்வாறு தூக்குமேடைசெய்வது என்பதை அறிக | [உலாவிகள் பற்றி](/5-browser-extension/1-about-browsers/README.md) | ஜென் |
|
||||
| 13 | [பச்சை உலாவி நீட்டிப்பு](/5-browser-extension/solution/README.md) | ஒரு படிவத்தை உருவாக்குதல், ஒரு ஏபிஐ ஐ அழைத்தல் மற்றும் உள்ளூர் சேமிப்பகத்தில் மாறிகளை சேமித்தல் | உங்கள் உலாவி நீட்டிப்பின் ஜாவாஸ்கிரிப்ட் கூறுகளை உருவாக்கி, உள்ளூர் சேமிப்பகத்தில் சேமிக்கப்படும் மாறிகளைப் பயன்படுத்தி ஒரு ஏபிஐ ஐ அழைக்கவும் | [ஏபிஐகள், படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ஜென் |
|
||||
| 14 | [பச்சை உலாவி நீட்டிப்பு](/5-browser-extension/solution/README.md) | உலாவியில் பின்னணி செயல்முறைகள், வலை செயல்திறன் | விரிவாக்கத்தின் படவுருவை நிர்வகிக்க உலாவியின் பின்னணி செயல்முறைகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சில தேர்வுமுறைபற்றி அறியவும் | [பின்னணி பணிகள் மற்றும் செயல்திறன்](/5-browser-extension/3-background-tasks-and-performance/README.md) | ஜென் |
|
||||
| 15 | [விண்வெளி விளையாட்டு](/6-space-game/solution/README.md) | ஜாவாஸ்கிரிப்ட் உடன் மேலும் மேம்பட்ட விளையாட்டு வளர்ச்சி | ஒரு விளையாட்டை உருவாக்குவதற்கான தயாரிப்பில், வகுப்புகள் மற்றும் கலவை மற்றும் பப் / துணை முறை இரண்டையும் பயன்படுத்தி பரம்பரை பற்றி அறியவும் | [மேம்பட்ட விளையாட்டு அபிவிருத்தி அறிமுகம்](/6-space-game/1-introduction/README.md) | கிறிஸ் |
|
||||
| 16 | [விண்வெளி விளையாட்டு](/6-space-game/solution/README.md) | கேன்வாஸ் வரைதல் | ஒரு திரைக்கு உறுப்புகளை வரைய பயன்படுத்தப்படும் கேன்வாஸ் ஏபிஐ பற்றி அறியவும் | [கேன்வாஸ் வரைதல்](/6-space-game/2-drawing-to-canvas/README.md) | கிறிஸ் |
|
||||
| 17 | [விண்வெளி விளையாட்டு](/6-space-game/solution/README.md) | திரையைச் சுற்றி நகரும் கூறுகள் | கார்ட்டீசியன் ஆயத்தொலைவுகள் மற்றும் கேன்வாஸ் ஏபிஐ பயன்படுத்தி கூறுகள் எவ்வாறு இயக்கத்தைப் பெற முடியும் என்பதைக் கண்டறியவும் | [சுற்றி நகரும் கூறுகள்](/6-space-game/3-moving-elements-around/README.md) | கிறிஸ் |
|
||||
| 18 | [விண்வெளி விளையாட்டு](/6-space-game/solution/README.md) | மோதல் கண்டறிதல் | கூறுகள் மோதிக்கொண்டு விசைஅழுத்தங்கள் பயன்படுத்தி ஒருவருக்கொருவர் எதிர்வினை மற்றும் விளையாட்டின் செயல்திறனை உறுதி செய்ய ஒரு குளிர்விக்கும் செயல்பாட்டை வழங்க | [மோதல் கண்டறிதல்](/6-space-game/4-collision-detection/README.md) | கிறிஸ் |
|
||||
| 19 | [விண்வெளி விளையாட்டு](/6-space-game/solution/README.md) | மதிப்பெண் வைத்து | விளையாட்டின் நிலை மற்றும் செயல்திறன் அடிப்படையில் கணித கணக்கீடுகளை செய்ய | [மதிப்பெண் வைத்து ](/6-space-game/5-keeping-score/README.md) | கிறிஸ் |
|
||||
| 20 | [விண்வெளி விளையாட்டு](/6-space-game/solution/README.md) | விளையாட்டை முடித்து மறுதொடக்கம் செய்தல் | சொத்துக்களை சுத்தம் செய்தல் மற்றும் மாறி மதிப்புகளை மறுசீரமைப்பது உட்பட விளையாட்டை முடிப்பது மற்றும் மறுதொடக்கம் செய்வது பற்றி அறிக | [முடிவுநிலை](/6-space-game/6-end-condition/README.md) | கிறிஸ் |
|
||||
| 21 | [வங்கிச் சேவை](/7-bank-project/solution/README.md) | ஒரு வலை பயன்பாட்டில் உள்ள ஹெச்டிஎம்எல் கள் வார்ப்புருக்கள் மற்றும் வழிகள் | ரூட்டிங் மற்றும் ஹெச்டிஎம்எல் டெம்ப்ளேட்களைப் பயன்படுத்தி பலபக்க வலைத்தளத்தின் கட்டிடக்கலையின் தூக்குமேடையை எவ்வாறு உருவாக்குவது என்பதை அறிக | [ஹெச்டிஎம்எல் வார்ப்புருக்கள் மற்றும் வழிகள்](/7-bank-project/1-template-route/README.md) | யோஹான் |
|
||||
| 22 | [வங்கிச் சேவை](/7-bank-project/solution/README.md) | உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்கவும் | கட்டிட படிவங்கள் மற்றும் சரிபார்ப்பு நடைமுறைகளை வழங்குவது பற்றி அறிக | [படிவங்கள்](/7-bank-project/2-forms/README.md) | யோஹான் |
|
||||
| 23 | [வங்கிச் சேவை](/7-bank-project/solution/README.md) | தரவுகளை ப் பெறுதல் மற்றும் பயன்படுத்துதல் முறைகள் | உங்கள் பயன்பாட்டிற்கு உள்ளேயும் வெளியேயும் தரவு எவ்வாறு பாய்கிறது, அதை எவ்வாறு கொண்டு வருவது, சேமித்து, அதை அகற்றுவது எப்படி | [தரப்பட்டவை](/7-bank-project/3-data/README.md) | யோஹான் |
|
||||
| 24 | [வங்கிச் சேவை](/7-bank-project/solution/README.md) | நிலை மேலாண்மை பற்றிய கருத்துக்கள் | உங்கள் பயன்பாடு எவ்வாறு மாநிலத்தை த் தக்கவைத்துக் கொள்கிறது மற்றும் அதை நிரலாக்கரீதியாக எவ்வாறு நிர்வகிப்பது என்பதை அறிக | [நிலை மேலாண்மை](/7-bank-project/4-state-management/README.md) | யோஹான் |
|
||||
|
||||
## ஆஃப்லைன் அணுகல்
|
||||
[டாக்சிபி](https://docsify.js.org/#/) பயன்படுத்தி இந்த டாக்சிபி ஆஃப்லைனில் இயக்கலாம். இந்த ரெப்போவை ஃபோர்க் செய்யவும், [உங்கள் உள்ளூர் இயந்திரத்தில் டாக்சிபி நிறுவவும்](https://docsify.js.org/#/quickstart), பின்னர் இந்த ரெப்போவின் ரூட் கோப்புறையில், `docsify serve` தட்டச்சு செய்யவும். வலைத்தளம் உங்கள் உள்ளூர் ஹோஸ்ட்டில் போர்ட் 3000 இல் வழங்கப்படும்: `localhost:3000`.
|
||||
|
||||
## பிடிஎப்
|
||||
|
||||
அனைத்து பாடங்களின் பிடிஎப் ஐ [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம்
|
||||
|
||||
## ஏனைய பாடத்திட்டம்
|
||||
|
||||
எங்கள் அணி மற்ற பாடத்திட்டத்தை தயாரிக்கிறது! செக்அவுட்:
|
||||
|
||||
- [ஆரம்ப மெஷின் கற்றல்](https://aka.ms/ml-beginners)
|
||||
- [ஆரம்ப ங்களுக்கான ஐஓடி](https://aka.ms/iot-beginners)
|
||||
- [ஆரம்ப தரவு அறிவியல்](https://aka.ms/datascience-beginners)
|
||||
@@ -1,103 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# ప్రారంభకులకు వెబ్ అభివృద్ధి - ఒక పాఠ్యప్రణాళిక
|
||||
|
||||
మా స్క్రిప్ట్, సిఎస్ఎస్ మరియు హెచ్టిఎమ్ఎల్ బేసిక్స్ గురించి 12 వారాల, 24-పాఠాల పాఠ్యప్రణాళికను అందించడానికి మా ప్రతి పాఠంలో ప్రీ మరియు పోస్ట్ లెసన్ క్విజ్ లు, పాఠం పూర్తి చేయడానికి రాతపూర్వక ఆదేశాలు, పరిష్కారం, అసైన్మెంట్ మరియు మరిన్ని ఉంటాయి. మా ప్రాజెక్ట్ ఆధారిత పెడగోజీ, కొత్త నైపుణ్యాలు 'అతుక్కుపోవడానికి' రుజువు చేయబడ్డ మార్గం, బిల్డింగ్ చేసేటప్పుడు నేర్చుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది.
|
||||
|
||||
**మా రచయితలు జెన్ లూపర్, క్రిస్ నోరింగ్, క్రిస్టోఫర్ హారిసన్, జాస్మిన్ గ్రీన్అవే, యోహాన్ లాసోర్సా, ఫ్లోర్ డ్రీస్, మరియు స్కెచ్ నోట్ కళాకారుడు టోమోమి ఇమురాకు హృదయపూర్వక ధన్యవాదాలు!**
|
||||
|
||||
# ప్రారంభించడం
|
||||
|
||||
> **గురువులు**, మేము కొన్ని చేర్చాము [సూచనలు](for-teachers.pt.md) ఈ పాఠ్యప్రణాళికను ఎలా ఉపయోగించాలనే దానిపై మా చర్చలో మీ ఫీడ్ బ్యాక్ ని మేం ఇష్టపడతాము [ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **విద్యార్థులు**, ఈ పాఠ్యప్రణాళికను మీ స్వంతంగా ఉపయోగించడానికి, మొత్తం రెపోను ఫోర్క్ చేసి, మీ స్వంతంగా వ్యాయామాలను పూర్తి చేయండి, ప్రీ లెక్చర్ క్విజ్ తో ప్రారంభించి, తరువాత ఉపన్యాసం చదవడం మరియు మిగిలిన కార్యకలాపాలను పూర్తి చేయడం. పరిష్కార కోడ్ కాపీ చేయడం కంటే పాఠాలను అర్థం చేసుకోవడం ద్వారా ప్రాజెక్టులను సృష్టించడానికి ప్రయత్నించండి; అయితే ఆ కోడ్ ప్రతి ప్రాజెక్ట్ ఆధారిత పాఠంలో/పరిష్కారాల సంచికల్లో అందుబాటులో ఉంటుంది. స్నేహితులతో అధ్యయన బృందాన్ని ఏర్పాటు చేయడం మరియు కంటెంట్ ను కలిసి పరిశీలించడం మరొక ఆలోచన. తదుపరి అధ్యయనం కొరకు, మేం సిఫారసు చేస్తున్నాం. [మైక్రోసాఫ్ట్ లెర్న్](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81/?WT.mc_id=academic-77807-sagibbon) మరియు దిగువ పేర్కొన్న వీడియోలను చూడటం ద్వారా.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "ప్రోమో వీడియో")
|
||||
|
||||
ద్వారా జిఫ్ [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 ప్రాజెక్ట్ గురించి వీడియో కొరకు మరియు దానిని సృష్టించిన వ్యక్తుల కొరకు పై ఇమేజ్ మీద క్లిక్ చేయండి!
|
||||
|
||||
## బోధనా విధానం
|
||||
|
||||
ఈ పాఠ్యప్రణాళికను రూపొందించేటప్పుడు మేము రెండు బోధనా సిద్ధాంతాలను ఎంచుకున్నాము: ఇది ప్రాజెక్ట్ ఆధారితమైనది మరియు ఇది తరచుగా క్విజ్ లను కలిగి ఉండేలా చూస్తుంది. ఈ సిరీస్ ముగిసే నాటికి, విద్యార్థులు టైపింగ్ గేమ్, వర్చువల్ టెర్రరియం, 'గ్రీన్' బ్రౌజర్ పొడిగింపు, 'స్పేస్ ఆక్రమణదారుల' రకం గేమ్, మరియు వ్యాపార తరహా బ్యాంకింగ్ యాప్ ను నిర్మించి, నేటి వెబ్ డెవలపర్ యొక్క ఆధునిక టూల్ చైన్ తో పాటు జావాస్క్రిప్ట్, హెచ్ టిఎమ్ ఎల్ మరియు సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలను నేర్చుకున్నారు.
|
||||
|
||||
> 🎓 ఈ పాఠ్యప్రణాళికలో మీరు మొదటి కొన్ని పాఠాలను ఒక విధంగా తీసుకోవచ్చు [మార్గాన్ని నేర్చుకోండి](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) మైక్రోసాఫ్ట్ లెర్న్ పై!
|
||||
|
||||
కంటెంట్ ప్రాజెక్ట్ లతో అలైన్ అయ్యేలా చూడటం ద్వారా, ఈ ప్రక్రియ విద్యార్థుల కొరకు మరింత నిమగ్నం చేయబడుతుంది మరియు కాన్సెప్ట్ లను నిలుపుకోవడం పెంచబడుతుంది. మేము జావాస్క్రిప్ట్ బేసిక్స్ లో అనేక స్టార్టర్ పాఠాలు కూడా వ్రాశాము, కాన్సెప్ట్ లను పరిచయం చేయడానికి, వీడియోనుండి వీడియోతో జత చేయబడింది "[ప్రారంభ సిరీస్ కు: జావాస్క్రిప్ట్](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" వీడియో ట్యుటోరియల్స్ సేకరణ, దీని రచయితలు కొందరు ఈ పాఠ్యప్రణాళికకు సహకరించారు.
|
||||
|
||||
అదనంగా, ఒక తరగతి కి ముందు తక్కువ వాటాల క్విజ్ ఒక అంశాన్ని నేర్చుకునే దిశగా విద్యార్థి యొక్క ఉద్దేశ్యాన్ని ఏర్పరుస్తుంది, తరగతి తర్వాత రెండవ క్విజ్ మరింత నిలుపుదలను నిర్ధారిస్తుంది. ఈ కరిక్యులం సరళంగా మరియు వినోదాత్మకంగా రూపొందించబడింది మరియు దీనిని పూర్తిగా లేదా పాక్షికంగా తీసుకోవచ్చు. ప్రాజెక్టులు చిన్నవిగా ప్రారంభమవుతాయి మరియు ౧౨ వారాల చక్రం చివరినాటికి మరింత సంక్లిష్టంగా మారతాయి.
|
||||
|
||||
ఒక ఫ్రేమ్ వర్క్ ని స్వీకరించడానికి ముందు వెబ్ డెవలపర్ గా అవసరమైన ప్రాథమిక నైపుణ్యాలపై దృష్టి సారించడం కొరకు జావాస్క్రిప్ట్ ఫ్రేమ్ వర్క్ లను ప్రవేశపెట్టడాన్ని మేం ఉద్దేశ్యపూర్వకంగా పరిహరించినప్పటికీ, ఈ కరిక్యులం పూర్తి చేయడానికి మంచి తదుపరి దశ నోడ్ గురించి నేర్చుకోవడం.js వీడియోల యొక్క మరో కలెక్షన్ ద్వారా: "[ప్రారంభ సిరీస్ నుండి: నోడ్.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> మా కనుగొనండి [ప్రవర్తనా నియమావళి](CODE_OF_CONDUCT.md), [దోహదపడటం](CONTRIBUTING.md), మరియు [తర్జుమా](TRANSLATIONS.md) మార్గదర్శకాలు. మీ నిర్మాణాత్మక ఫీడ్ బ్యాక్ ని మేం స్వాగతిస్తున్నాం!
|
||||
|
||||
## ప్రతి పాఠంలో ఇవి ఉంటాయి:
|
||||
|
||||
- ఐచ్ఛిక స్కెచ్ నోట్
|
||||
- ఐచ్ఛిక అనుబంధ వీడియో
|
||||
- ప్రీ లెసన్ వార్మప్ క్విజ్
|
||||
- వ్రాసిన పాఠం
|
||||
- ప్రాజెక్ట్ ఆధారిత పాఠాల కొరకు, ప్రాజెక్ట్ ని ఎలా నిర్మించాలనే దానిపై దశలవారీ గైడ్ లు
|
||||
- నాలెడ్జ్ చెక్ లు
|
||||
- ఒక సవాలు
|
||||
- అనుబంధ పఠనం
|
||||
- అసైన్ మెంట్
|
||||
- పాఠం అనంతర క్విజ్
|
||||
|
||||
> **క్విజ్ ల గురించి ఒక నోట్**: అన్ని క్విజ్ లు [ఈ యాప్ లో](https://ashy-river-0debb7803.1.azurestaticapps.net/) కలిగి ఉంటాయి, ఒక్కొక్కటి మూడు ప్రశ్నల యొక్క 48 మొత్తం క్విజ్ లు. అవి పాఠాల లోపల నుంచి లింక్ చేయబడతాయి, అయితే క్విజ్ యాప్ ని స్థానికంగా రన్ చేయవచ్చు; 'క్విజ్-యాప్' ఫోల్డర్ లోని సూచనను పాటించండి. అవి క్రమంగా స్థానికీకరించబడుతున్నాయి.
|
||||
|
||||
## పాఠాలు
|
||||
|
||||
| | ప్రాజెక్ట్ పేరు | బోధించిన భావనలు | చదువు లక్ష్యాలు | లింక్ చేయబడింది పాఠం | రచయిత |
|
||||
| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | ప్రారంభించడం | ప్రోగ్రామింగ్ మరియు టూల్స్ ఆఫ్ ది ట్రేడ్ కు పరిచయం | చాలా ప్రోగ్రామింగ్ భాషల వెనుక మరియు ప్రొఫెషనల్ డెవలపర్లు వారి ఉద్యోగాలు చేయడానికి సహాయపడే సాఫ్ట్ వేర్ గురించి ప్రాథమిక పునాదిని తెలుసుకోండి | [ప్రోగ్రామింగ్ లాంగ్వేజెస్ మరియు టూల్స్ ఆఫ్ ది ట్రేడ్ కు ఇంట్రో](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | ప్రారంభించడం | గిట్ హబ్ యొక్క బేసిక్స్, టీమ్ తో పనిచేయడం | మీ ప్రాజెక్ట్ లో GitHub ని ఎలా ఉపయోగించాలి, కోడ్ బేస్ పై ఇతరులతో ఎలా సహకరించాలి | [గిట్ హబ్ కు ఇంట్రో](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | ప్రారంభించడం | యాక్సెసబిలిటీ | వెబ్ యొక్క ప్రాథమికాంశాలను తెలుసుకోండి accessibility | [యాక్సెసబిలిటీ ఫండమెంటల్స్](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | జెఎస్ బేసిక్స్ | జావాస్క్రిప్ట్ డేటా రకాలు | జావాస్క్రిప్ట్ డేటా యొక్క ప్రాథమికాంశాలు రకాలు | [డేటా రకాలు](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | జెఎస్ బేసిక్స్ | విధులు మరియు పద్ధతులు | అప్లికేషన్ యొక్క లాజిక్ ఫ్లో నిర్వహించడం కొరకు ఫంక్షన్ లు మరియు విధానాల గురించి తెలుసుకోండి. | [విధులు మరియు పద్ధతులు](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | జెఎస్ బేసిక్స్ | జెఎస్ తో నిర్ణయాలు తీసుకోవడం | నిర్ణయం తీసుకునే విధానాలను ఉపయోగించి మీ కోడ్ లో పరిస్థితులను ఎలా సృష్టించాలో తెలుసుకోండి. | [నిర్ణయాలు తీసుకోవడం](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | జెఎస్ బేసిక్స్ | ఎరాయ్ లు మరియు లూప్ లు | జావాస్క్రిప్ట్ లో ఎరాయ్ లు మరియు లూప్ లను ఉపయోగించి డేటాతో పనిచేయండి. | [ఎరాయ్ లు మరియు లూప్ లు](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ప్రాక్టీస్ లో హెచ్ టిఎమ్ ఎల్ | లేఅవుట్ నిర్మించడంపై దృష్టి సారించి, ఆన్ లైన్ టెర్రిరియం సృష్టించడం కొరకు హెచ్ టిఎమ్ ఎల్ ని రూపొందించండి. | [హెచ్ టిఎమ్ ఎల్ పరిచయం](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ఆచరణలో సిఎస్ఎస్ | పేజీని ప్రతిస్పందించేలా చేయడం సహా సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలపై దృష్టి సారించి, ఆన్ లైన్ టెర్రరియంస్టైల్ చేయడానికి సిఎస్ఎస్ ని నిర్మించండి. | [సిఎస్ఎస్ పరిచయం](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [టెర్రిరియం](/3-terrarium/solution/README.md) | జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్ | క్లోజర్లు మరియు డివోఎమ్ మానిప్యులేషన్ పై దృష్టి సారించి, డ్రాగ్/డ్రాప్ ఇంటర్ ఫేస్ వలే టెర్రిరియం పనిచేయడానికి జావాస్క్రిప్ట్ ని రూపొందించండి. | [జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్](/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) | ఒక ఫారాన్ని నిర్మించడం, APఐని పిలవడం మరియు స్థానిక స్టోరేజీలో వేరియబుల్స్ నిల్వ చేయడం | స్థానిక స్టోరేజీలో నిల్వ చేయబడ్డ వేరియబుల్స్ ఉపయోగించి APఐకి కాల్ చేయడం కొరకు మీ బ్రౌజర్ పొడిగింపు యొక్క జావాస్క్రిప్ట్ ఎలిమెంట్ లను రూపొందించండి. | [APఐలు, ఫారాలు మరియు స్థానిక స్టోరేజీ](/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) | జావాస్క్రిప్ట్ తో మరింత అధునాతన గేమ్ డెవలప్ మెంట్ | ఒక గేమ్ ని రూపొందించడం కొరకు సిద్ధం చేయడం కొరకు క్లాసులు మరియు కంపోజిషన్ మరియు పబ్/సబ్ ప్యాట్రన్ రెండింటిని ఉపయోగించి ఇన్హెరిటెన్స్ గురించి తెలుసుకోండి. | [అధునాతన గేమ్ డెవలప్ మెంట్ పరిచయం](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | కాన్వాస్ కు డ్రాయింగ్ | స్క్రీన్ కు ఎలిమెంట్ లను గీయడం కొరకు ఉపయోగించే కాన్వాస్ APఐ గురించి తెలుసుకోండి. | [కాన్వాస్ కు డ్రాయింగ్](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | స్క్రీన్ చుట్టూ మూలకాలను కదిలించడం | కార్టేసియన్ కోఆర్డినేట్ లు మరియు కాన్వాస్ ఎపిఐఉపయోగించి ఎలిమెంట్ లు చలనాన్ని ఎలా పొందగలవో కనుగొనండి. | [చుట్టూ మూలకాలను తరలించడం](/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) | వెబ్ యాప్ లో హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు | రూటింగ్ మరియు హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లను ఉపయోగించి మల్టీపేజీ వెబ్ సైట్ యొక్క ఆర్కిటెక్చర్ యొక్క పరంజాను ఎలా సృష్టించాలో తెలుసుకోండి. | [హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు](/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 |
|
||||
|
||||
## ఆఫ్ లైన్ యాక్సెస్
|
||||
|
||||
మీరు [డాక్సిఫై](https://docsify.js.org/#/) ఉపయోగించడం ద్వారా ఈ డాక్యుమెంటేషన్ ని ఆఫ్ లైన్ లో రన్ చేయవచ్చు. ఈ రెపోను ఫోర్క్ చేయండి, [మీ స్థానిక యంత్రంపై డాక్సిఫైని ఇన్ స్టాల్ చేయండి](https://docsify.js.org/#/quickstart), ఆపై ఈ రెపో యొక్క రూట్ ఫోల్డర్ లో, 'డాక్సిఫై సర్వ్' టైప్ చేయండి. వెబ్ సైట్ మీ స్థానిక హోస్ట్ లో పోర్ట్ 3000లో అందించబడుతుంది: 'స్థానిక హోస్ట్:3000'.
|
||||
|
||||
## పిడిఎఫ్
|
||||
|
||||
అన్ని పాఠాల యొక్క పిడిఎఫ్ ని [ఇక్కడ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) చూడవచ్చు.
|
||||
|
||||
## ఇతర పాఠ్యప్రణాళిక
|
||||
|
||||
మా బృందం ఇతర పాఠ్యాంశాలను ఉత్పత్తి చేస్తుంది! తనిఖీ:
|
||||
|
||||
- [ప్రారంభకులకు మెషిన్ లెర్నింగ్](https://aka.ms/ml-beginners)
|
||||
- [ప్రారంభకులకు ఐవోటి](https://aka.ms/iot-beginners)
|
||||
- [ప్రారంభకులకు డేటా సైన్స్](https://aka.ms/datascience-beginners)
|
||||
@@ -1,112 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# หลักสูตรการพัฒนาเว็บสำหรับมือใหม่
|
||||
|
||||
Azure Cloud Adveocates ที่ Microsoft ยินดีที่จะเสนอหลักสูตร 12 สัปดาห์ 24 บทเรียนเกี่ยวกับ JavaScript CSS และพื้นฐาน HTML โดยแต่ละบทเรียนประกอบด้วยคำถามก่อน และหลังการเรียน มีแนวทางในการพิชิตบทเรียน วิธีแก้ปัญหา รวมถึงโจทย์ปัญหาและอื่น ๆ อีกมากมาย
|
||||
การสอนแบบ project-based (เรียนรู้จากการทำโปรเจกต์)ของเราจะให้คุณได้เรียนรู้ในการสร้างสิ่งใหม่ ๆ ไปด้วยกัน ซึ่งเป็นวิธีที่ได้รับการพิสูจน์แล้วว่าจะเสริมสร้างทักษะใหม่ ๆ ให้'ติดตัว'ต่อไปได้
|
||||
|
||||
**ขอขอบพระคุณเหล่าผู้เขียนของเรา Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, และศิลปินผู้วาด sketchnote Tomomi Imura!**
|
||||
|
||||
# คุณเป็นผู้เรียนใช่หรือไม่?
|
||||
|
||||
เริ่มเลยด้วยแหล่งข้อมูลดังต่อไปนี้:
|
||||
|
||||
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) ในเว็บนี้คุณจะเจอแหล่งข้อมูลสำหรับผู้ที่กำลังเริ่มต้น ซึ่งจะมีชุดสำหรับผู้เรียนรวมถึงโอกาสที่จะได้รับบัตรส่วนลดใบรับรองฟรี แนะนำให้ทำบุ๊กมาร์กและกลับมาดูเป็นครั้งคราวเพราะเราเปลี่ยนเนื้อหาใหม่ทุกเดือนเป็นอย่างต่ำ
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) เข้าร่วมชุมชน student ambassadors ที่นี่อาจเป็นหนทางที่จะพาคุณเข้ามาเป็นส่วนหนึ่งกับ Microsoft ได้
|
||||
|
||||
# เริ่มต้น
|
||||
|
||||
> **สำหรับผู้สอน** เรามี[คำแนะนำ](../for-teachers.md)ให้เกี่ยวกับวิธีการใช้งานหลักสูตรนี้ โดยเรายินดีเป็นอย่างมากที่จะรับฟังข้อเสนอแนะของคุณ[ในฟอรั่มแสดงความคิดเห็นของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **[สำหรับผู้เรียน](https://aka.ms/student-page)** ที่เรียนหลักสูตรนี้ด้วยตนเอง ให้ทำการ fork repository นี้ แล้วทำแบบทดสอบด้วยตนเอง โดยเริ่มจากการทำแบบทดสอบก่อนเรียน แล้วอ่านเนื้อหา ทำกิจกรรมที่เหลือให้ครบ ลองสร้างโปรเจกต์ด้วยการทำความเข้าใจบทเรียนมากกว่าที่จะลอกคำตอบ อย่างไรก็ตามจะมีโค้ดเฉลยอยู่ในโฟลเดอร์ /solutions ในแต่ละบทเรียน หรืออีกหนึ่งวิธีคือจัดกลุ่มเรียนกับเพื่อนเรียนด้วยกัน สำหรับผู้ที่ต้องการเรียนเพิ่มเติม เราขอแนะนำ [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) และดูจากวิดีโอด้านล่าง
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSIII)
|
||||
|
||||
ภาพ Gif โดย [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 คลิกที่รูปด้านบนเพื่อดูวิดีโอเกี่ยวกับโปรเจกต์และเหล่าทีมงานผู้สร้าง!
|
||||
|
||||
## การสอน
|
||||
|
||||
เราได้เลือกหลักการสอน 2 อย่างในระหว่างที่สร้างหลักสูตรนี้ขึ้นมา คือต้องมั่นใจว่าเป็นแบบ project-based และมีหลายแบบทดสอบให้ทำ โดยในตอนท้ายของการเรียน ผู้เรียนจะได้สร้างเกมพิมพ์ดีด, virtual terrarium, 'green' browser extension, space invaders และแอพลิเคชั่นธนาคารประเภทธุรกิจ รวมถึงเรียนรู้พื้นฐานของภาษา JavaScript, HTML และ CSS ควบคู่ไปกับการใช้เครื่องมือที่ทันสมัยของนักพัฒนาเว็บในปัจจุบัน
|
||||
|
||||
> 🎓 คุณสามารถใช้บทเรียนแรก ๆ ในหลักสูตรนี้เป็น[เส้นทางการเรียนรู้](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) บน Microsoft Learn ได้!
|
||||
|
||||
การทำให้แน่ใจว่าเนื้อหาสอดคล้องกับโปรเจกต์นี้ทำให้นักเรียนมีส่วนร่วมมากขึ้น และทำให้จดจำคอนเซปต์ได้มากขึ้นอีกด้วย เรายังมีบทเรียนสำหรับผู้เริ่มต้นในพื้นฐาน JavaScript เพื่อปูพื้นฐานแนวคิด จับคู่กับวิดีโอจาก ชุดการสอน "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" ซึ่งผู้จัดทำบางคนเป็นผู้ร่วมพัฒนาหลักสูตรนี้
|
||||
|
||||
นอกจากนี้การทำแบบทดสอบก่อนเรียนจะช่วยให้ผู้เรียนสนใจในเนื้อหาที่จะเรียนได้ อีกทั้งการให้แบบทดสอบหลังเรียนจะช่วยให้ผู้เรียนจดจำและต่อยอดผลการเรียนเพิ่มมากขึ้นอีกด้วย หลักสูตรนี้ถูกออกแบบมาให้มีความยืดหยุ่น สนุก และสามารถเรียนรู้ทั้งหมด หรือเฉพาะบางส่วนก็ได้ โดยโปรเจกต์เริ่มต้นจากเล็ก ๆ และเพิ่มความซับซ้อนมากขึ้น ๆ เมื่อครบช่วง 12 สัปดาห์
|
||||
|
||||
แม้ว่าเราตั้งใจที่จะเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะนำเอาเฟรมเวิร์กมาใช้ เพื่อที่จะสำเร็จหลักสูตรนี้ได้เราขอแนะนำให้ได้เรียนรู้เกี่ยวกับ Node.js ผ่านอีกชุดการสอน: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> ตรวจดูแนวทาง [จรรยาบรรณ](../CODE_OF_CONDUCT.md), [การมีส่วนช่วย](../CONTRIBUTING.md), และ [การแปล](../TRANSLATIONS.md) เรายินดีรับข้อเสนอแนะที่สร้างสรรค์ของคุณ!
|
||||
|
||||
## แต่ละบทเรียนประกอบไปด้วย:
|
||||
|
||||
- โน้ตเสริม
|
||||
- วิดีโอเพิ่มเติม
|
||||
- คำถามก่อนการเรียน
|
||||
- บทเรียน
|
||||
- สำหรับบทเรียนแบบ project-based จะมีขั้นตอนวิธีทำโปรเจกต์แบบ step-by-step
|
||||
- ตัวตรวจวัดความรู้
|
||||
- แบบทดสอบที่ท้าทาย
|
||||
- เนื้อหาสำหรับอ่านเพิ่มเติม
|
||||
- การบ้าน
|
||||
- คำถามหลังการเรียน
|
||||
|
||||
> **หมายเหตุเกี่ยวกับคำถามแบบทดสอบ**: ทุกคำถามรวมอยู่[ในแอปนี้](https://ashy-river-0debb7803.1.azurestaticapps.net/) ทั้ง 48 แบบทดสอบมี 3 คำถามที่เกี่ยวข้องกับบทเรียน โดยแอปนี้สามารถใช้งานแบบ local ได้โดยการทำตามจากโฟลเดอร์ `quiz-app` ซึ่งกำลังทะยอยแปลภาษากันอยู่
|
||||
|
||||
## บทเรียน
|
||||
|
||||
| | ชื่อโปรเจกต์ | แนวคิดที่สอน | วัตถุประสงค์ของการเรียน | บทเรียนที่เกี่ยวข้อง | ผู้เขียน |
|
||||
| :-: | :----------------------------------------------------------------: | :---------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | เริ่มต้น | แนะนำการเขียนโปรแกรมและเครื่องมือที่ใช้ | เรียนรู้พื้นฐานเบื้องหลังภาษาโปรแกรมมิ่งส่วนใหญ่และซอฟต์แวร์ที่ช่วยเหลือการทำงานของนักพัฒนามืออาชีพ | [Intro to Programming Languages and Tools of the Trade](../1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | เริ่มต้น | พื้นฐาน GitHub รวมถึงการทำงานร่วมกับทีม | วิธีการใช้ GitHub ในโปรเจกต์ของคุณ และวิธีการทำงานร่วมกับผู้อื่นบนโค้ดเบส | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | เร่ิมต้น | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บ | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | พื้นฐาน JS | ชนิดข้อมูลบน JavaScript | พื้นฐานของชนิดข้อมูลบน JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | พื้นฐาน JS | ฟังก์ชันและเมธทอด | เรียนเกี่ยวกับฟังก์ชันและเมธอดที่ใช้จัดการการทำงานลอจิกของแอพลิเคชั่น | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | พื้นฐาน JS | สร้างการตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยการใช้ decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | พื้นฐาน JS | อาเรย์และการวนซ้ำ | ทำงานกับข้อมูลด้วยอาเรย์และการวนซ้ำใน JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML ในทางปฏิบัติ | เขียน HTML เพื่อสร้างระบบนิเวศจำลองออนไลน์ โดยเน้นไปที่การจัดวางเลย์เอาต์ | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS ในทางปฏิบัติ | เขียน CSS เพื่อตกแต่งระบบนิเวศจำลองออนไลน์ โดยเน้นที่พื้นฐาน CSS รวมถึงการทำ responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures และการจัดการ DOM | เขียน JavaScript เพื่อสร้างฟังก์ชันให้ระบบนิเวศจำลองเช่นการลากวาง โดยเน้นที่หลักการ closures และการจัดการ DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | เรียนรู้วิธีการรับค่าจากคีย์บอร์ดเพื่อขับเคลื่อนการทำงานลอจิกบนแอพ JavaScript ของคุณ | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานกับ Browsers | เรียนรู้การทำงานของ browsers ความเป็นมา และวิธีจัดวางองค์ประกอบแรกของส่วนขยาย browser | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | สร้างแบบฟอร์ม การเรียกใช้ API และการจัดเก็บตัวแปรบน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยาย browser เพื่อเรียกใช้ API โดยเรียกใช้ตัวแปรที่เก็บบน local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานเบื้องหลัง Browser และประสิทธิภาพของเว็บ | ใช้การทำงานเบื้องหลังของ browser ในการจัดการไอคอนของส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการเพิ่มประสิทธิภาพ | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้คลาสและคอมโพสิชั่น และ Pub/Sub แพทเทิร์น ในการเตรียมพร้อมสำหรับสร้างเกม | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | วาดรูปด้วย Canvas | เรียนรู้เกี่ยวกับ Canvas API สำหรับวาดภาพบนหน้าจอ | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | การขยับองค์ประกอบไปรอบ ๆ จอ | ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนไหวโดยใช้พิกัดคาร์ทีเซียนและ Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | ตรวจสอบการชน | ทำให้องค์ประกอบชนกันและโต้ตอบกันและกันโดยใช้การกดปุ่มและสร้างฟังก์ชั่นคูลดาวน์เพื่อรับรองประสิทธิภาพของเกม | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | การเก็บแต้ม | ทำการคำนวณทางคณิตศาสตร์ตามสถานะของเกม | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | การจบเกมและเริ่มใหม่ | เรียนรู้เกี่ยวกับการจบเกมและเริ่มเกมใหม่ รวมถึงการล้างค่าและรีเซ็ตตัวแปร | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | เทมเพลท HTML และ Routes ในเว็บแอพ | เรียนรู้วิธีการสร้างโครงสำหรับเว็บหลายหน้าโดยใช้ routing และ HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | สร้างแบบฟอร์มล็อกอิน และสมัครสมาชิก | เรียนรู้เกี่ยวกับการสร้างฟอร์มและตรวจสอบความถูกต้องของข้อมูล | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการเดินทางของข้อมูลบนแอพ วิธีการดึง จัดเก็บ และกำจัดข้อมูลเหล่านั้น | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | แนวคิดการจัดการ State | เรียนรู้วิธีการเก็บ state ให้คงอยู่ และวิธีจัดการด้วยการโปรแกรม | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## การเข้าถึงแบบออฟไลน์
|
||||
|
||||
คุณสามารถเปิดเอกสารนี้แบบออนไลน์ได้โดยใช้ [Docsify](https://docsify.js.org/#/) ทำการ Fork repo นี้แล้ว [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนอุปกรณ์ของคุณ จากนั้นใช้คำสั่ง `docsify serve` บน repo ที่ติดตั้งบนเครื่อง เว็บไซต์ก็จะให้บริการบนพอร์ต 3000 บนเครื่องของคุณ: `localhost:3000`
|
||||
|
||||
## PDF
|
||||
|
||||
ไฟล์ PDF ของทุกบทเรียนสามารถหาได้จาก[ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## หลักสูตรอื่น ๆ
|
||||
|
||||
ทีมของเรายังมีหลักสูตรที่น่าสนใจอีกมากมาย ดูได้ตามนี้เลย!:
|
||||
|
||||
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [AI for Beginners](https://aka.ms/ai-beginners)
|
||||
@@ -1,113 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# Yeni Başlayanlar için Web Geliştirme – Bir Müfredat
|
||||
|
||||
Microsoft’taki Azure Cloud Advocates JavaScript, CSS ve HTML temellerini içeren 12 haftalık 24 dersten oluşan müfredatı sunmaktan mutluluk duyuyor. Her bir ders, ders başı ve ders sonu kısa sınavlarını, dersi tamamlamak için yazılı yönergeleri, bir çözümü, bir ödevi ve daha fazlasını içermektedir. Yeni becerilerin 'kazanımı' için kanıtlanmış bir yol olan proje temelli pedagojimiz, yaparken öğrenmenizi sağlar.
|
||||
|
||||
**Yazarlarımıza en kalbi duygularla teşekkür ederiz: Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees ve sketchnote ressamı Tomomi Imura’ye!**
|
||||
|
||||
# Öğrenci misin?
|
||||
|
||||
Aşağıdaki kaynaklarla başla:
|
||||
|
||||
- [Student Hub sayfası](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-77807-sagibbon) Bu sayfada, başlangıç kaynakları, Öğrenci paketleri ve hatta ücretsiz sertifika kuponu almanın yollarını bulacaksınız. Bu sayfa, içeriğini ayda en az bir kez değiştirdiğimiz için yer imlerine eklemek ve zaman zaman kontrol etmek isteyeceğin bir sayfadır.
|
||||
- [Microsoft Student Learn elçileri](https://studentambassadors.microsoft.com?WT.mc_id=academic-77807-sagibbon) Küresel bir öğrenci elçileri topluluğuna katıl, bu Microsoft'a giriş yolun olabilir.
|
||||
|
||||
|
||||
# Başlarken
|
||||
|
||||
> **Öğretmenler**, bu müfredatın nasıl kullanılacağına dair [bazı öneriler ekledik](for-teachers.md). [Tartışma forumlarımıza](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) yazabileceğiniz geribildirimlerinizi görmeyi çok istiyoruz.
|
||||
|
||||
> **[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, bu müfredatı kendi başınıza kullanabilmek için tüm repoyu fork’layın ve ders öncesi kısa sınavlarından başlayarak tek başınıza alıştırmaları tamamlamaya çalışın. Sonra dersi okuyun ve geri kalan etkinlikleri tamamlayın. Çözüm kodları her projeye dayalı dersin /solutions klasöründe bulunmaktadır ancak çözüm kodunu kopyalamaktansa derslerde öğrendiklerinizi kullanarak projeler yaratmaya çalışın. Başka bir fikir de arkadaşlarınızla bir çalışma grubu kurup içeriği birlikte takip etmeniz olabilir. Daha ileri çalışmalar için [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-77807-sagibbon)’ü ve aşağıda sözü edilen videoları izlemenizi tavsiye ediyoruz.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||
|
||||
Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 Click the image above for a video about the project and the folks who created it!
|
||||
|
||||
## Pedagoji
|
||||
|
||||
Bu müfredatı oluştururken iki pedagojik ilke seçtik: proje temelli olması ve sık kısa sınavlar içermesi. Bu serinin sonunda, öğrenciler birer tane typing game, virtual terrarium, ‘green’ browser extension, 'space invaders' type game ve business-type banking app yapacak ve günümüz web geliştiricisinin çağdaş araçtakımı ile birlikte JavaScript, HTML ve CSS’in temellerini öğrenmiş olacak.
|
||||
|
||||
> 🎓 Bu müfredattaki ilk birkaç dersi Microsoft Learn’deki bir [Öğrenme Patikası](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-77807-sagibbon)'dan alabilirsiniz.
|
||||
|
||||
İçeriğin projelerle uyumlu olması sağlanarak süreç öğrenciler için daha ilgi çekici hale getirilecek ve kavramların akılda kalıcılığı artırılacaktır. Ayrıca, kavramları tanıtmak için JavaScript temelleri üzerine birkaç başlangıç dersi yazdık ve bu müfredata katkıda bulunan bazı yazarların video eğitimleri koleksiyonu olan "[Yeni Başlayanlar için JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-77807-sagibbon)" videolarıyla eşleştirdik.
|
||||
|
||||
Bunlara ek olarak ders öncesi yüzeysel bir kısa sınav ile öğrencinin bir konuyu öğrenme niyetini oluştururken ders sonunda ikinci bir kısa sınav ileri pekiştirmeyi sağlar. Bu ders programı esnek ve eğlenceli olması için tasarlandı ve parçalar halinde veya bütün olarak takip edilebilir. Projeler temel düzeyde başlamaktadır ve 12 haftalık süreç içerisinde gittikçe kompleks bir hal almaktadır.
|
||||
|
||||
Bir framework’ü benimsemeden önce bir web geliştiricisi olarak ihtiyaç duyulan temel becerilere konsantre olmak için JavaScript framework’lerini tanıtmaktan bilerek kaçınmış olsak da, bu müfredatı tamamlamanın bir sonraki adımı, başka bir video koleksiyonu aracılığıyla Node.js hakkında bilgi edinmek olacaktır: "[Yeni Başlayanlar için Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> [Davranış Kuralları](CODE_OF_CONDUCT.md)'mızı, [Katkıda Bulunma](CONTRIBUTING.md) ve [Çeviri](TRANSLATIONS.md) kılavuz ilkelerimizi inceleyin. Yapıcı geribildirimlerinizi memnuniyetle karşılıyoruz!
|
||||
|
||||
## Her bir ders şunları içermektedir:
|
||||
|
||||
- isteğe bağlı sketchnote
|
||||
- isteğe bağlı ek video
|
||||
- ders öncesi ısınma kısa sınavı
|
||||
- yazılı ders
|
||||
- proje temelli dersler için, projenin nasıl yapılacağına dair adım adım kılavuz
|
||||
- bilgi kontrolleri
|
||||
- bir meydan okuma
|
||||
- ek okuma
|
||||
- ödev
|
||||
- ders sonrası kısa sınavı
|
||||
|
||||
|
||||
> **Kısa sınavlarla ilgili bir not**: Her biri üç sorudan oluşan toplam 48 kısa sınav [bu uygulamada](https://ashy-river-0debb7803.1.azurestaticapps.net/) yer alır. Bunlar derslerin içinden bağlantılıdır ancak sınav uygulaması yerel olarak çalıştırılabilir; 'quiz-app' klasöründeki yönergeleri izleyin.
|
||||
|
||||
## Dersler
|
||||
|
||||
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Başlangıç | Introduction to Programming and Tools of the Trade | Çoğu programlama dilinin arkasındaki temeller ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımlar hakkında bilgi edinmek | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Başlangıç | Basics of GitHub, includes working with a team | Github'ın nasıl kullanıldığını ve başkalarıyla ortak projede nasıl işbirliği yapıldığını öğrenmek | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Başlangıç | Accessibility | Web erişilebilirliğinin temellerini öğrenmek | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JS Temelleri | JavaScript Data Types | JavaScript veri yapılarının temellerini öğrenmek | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JS Temelleri | Functions and Methods | Bir uygulamanın mantıksal akışını yönetmeye yönelik fonksiyonlar ve metodlarla ilgili bilgi edinmek | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | JS Temelleri | Making Decisions with JS | Karar verme yöntemlerini kullanarak kodda koşulların nasıl oluşturalacağını öğrenmek | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JS Temelleri | Arrays and Loops | JavaScript'te verileri diziler ve döngüleri kullanarak işlemek | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Çevrimdışı erişim
|
||||
|
||||
[Docsify](https://docsify.js.org/#/) kullanarak bu belgeleri çevrimdışı çalıştırabilirsiniz. Bu depoyu çatallayın, yerel makinenize [Docsify'ı yükleyin](https://docsify.js.org/#/quickstart) ve ardından bu deponun `etc/docsify` klasörüne `docsify serve` yazın. Web sitesi, localhost'unuzdaki 3000 numaralı bağlantı noktasında hizmet sağlayacak: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Müfredatın bir PDF'i [bu bağlantıda](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) mevcut.
|
||||
|
||||
## Diğer Müfredatlar
|
||||
|
||||
Ekibimiz başka müfredatlar da üretiyor. Bakınız:
|
||||
|
||||
- [Yeni Başlayanlar için Makine Öğrenmesi](https://aka.ms/ml-beginners)
|
||||
- [Yeni Başlayanlar için IoT](https://aka.ms/iot-beginners)
|
||||
- [Yeni Başlayanlar için Veri Bilimi](https://aka.ms/datascience-beginners)
|
||||
- [Yeni Başlayanlar için Yapay Zekâ](https://aka.ms/ai-beginners/?WT.mc_id=academic-77807-sagibbon)
|
||||
@@ -1,112 +0,0 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# 初学者的 Web 开发课程
|
||||
|
||||
微软的Azure云倡导者很高兴地提供一个为期12周的24课时的课程，所有关于JavaScript、CSS和HTML的基础知识。每节课都包括课前和课后测验、完成课程的书面说明、解决方案、作业等。我们以项目为基础的教学方法使你能够边学边做，这是一种证明新技能能够“扎根”的方法。
|
||||
|
||||
**衷心感谢我们的作者Jen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees和手绘艺术家Tomomi Imura!**
|
||||
|
||||
# 你是学生吗？
|
||||
|
||||
利用以下资源开始：
|
||||
|
||||
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) 在这个页面，你会发现初学者资源、学生包，甚至是获得免费证书券的方法。这是一个你想加入书签并不时检查的页面，因为我们至少每月都会更换内容。
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) 加入一个由学生大使组成的全球社区，这可能是你进入微软的途径。
|
||||
|
||||
|
||||
# 入门
|
||||
|
||||
> **对于老师**, 我们已经有了一些关于如何使用该课程的[建议](for-teachers.zh-cn.md)。 我们希望您能在我们的[讨论区](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)提出反馈意见!
|
||||
|
||||
> **[对于学生](https://aka.ms/student-page)**，如果你想自己使用这个课程，你可以fork整个repo并自己完成练习，从课前测验开始，然后阅读课程并完成其余活动。尽量通过理解课程来创建项目，而不是复制解决方案的代码；不过，这些代码可以在每节课中的`/solutions`目录中找到。另一个方法是与朋友组成一个学习小组，一起学习这些内容。对于进一步的学习，我们建议通过[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) 和观看下面提到的视频。
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||
|
||||
Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 点击上面的图像，观看关于该项目和创造该项目的人们的视频!
|
||||
|
||||
## 教学宗旨
|
||||
|
||||
在建立这个课程时，我们选择了两个教学宗旨：确保它是基于项目的，并包括频繁的测验。在本系列课程结束时，学生将建立一个打字游戏，一个虚拟的花艺瓶，一个“绿色”浏览器扩展，一个“太空入侵者”类型的游戏，以及一个商业类型的银行应用程序，并将学会JavaScript、HTML和CSS的基础知识，以及当今网络开发人员的现代工具链。
|
||||
|
||||
> 🎓 你可以把这个课程的前几节课作为Microsoft Learn的[学习路径](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa)来学习!
|
||||
|
||||
通过确保内容与项目相一致，这个过程对学生来说更有吸引力，对概念的保持也会增强。我们还编写了几节关于JavaScript基础知识的入门课程来介绍概念，并配以“[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)”的视频教程集，其中一些作者为这个课程做出了贡献。
|
||||
|
||||
此外，课前的低风险测验确定了学生对学习一个主题的意向如何，而课后的第二次测验则确保了学生知识的进一步保留。这个课程的设计是灵活而有趣的，可以全部或部分地学习。这些项目开始时很简单，到12周的周期结束时变得越来越复杂。
|
||||
|
||||
虽然我们有意避免介绍JavaScript框架，以便在采用框架之前集中于作为一个Web开发者所需的基本技能，但是完成本系列课程的一个好的去处就是通过“[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)”来学习Node.js。
|
||||
|
||||
> 查看我们的[行为准则](../CODE_OF_CONDUCT.md)、[贡献](../CONTRIBUTING.md)和[翻译](../TRANSLATIONS.md)指南。我们欢迎你的建设性的反馈!
|
||||
|
||||
## 每一课都包括：
|
||||
|
||||
- 可能的手绘笔记
|
||||
- 可能的补充视频
|
||||
- 课前预习小测验
|
||||
- 书面课程
|
||||
- 对于基于项目的课程，关于如何建立项目的分步指南
|
||||
- 知识点检查
|
||||
- 一个挑战
|
||||
- 补充阅读
|
||||
- 作业
|
||||
- 课后小测验
|
||||
|
||||
> **关于测验的说明**: 所有的测验都包含在[这个应用程序](https://ashy-river-0debb7803.1.azurestaticapps.net/)中，总共有48个测验，每个测验三个问题。它们在课程中被链接，但测验应用程序可以在本地运行；按照`quiz-app`文件夹中的指示操作。它们正逐渐被本地化。
|
||||
|
||||
## 课程
|
||||
|
||||
| | 项目名称 | 教授概念 | 学习目标 | 课程链接 | 课程作者 |
|
||||
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | 入门篇 | 编程语言和行业工具介绍 | 了解大多数编程语言背后的基本支撑，以及帮助专业开发人员完成工作的软件。 | [编程语言和工具介绍](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md) | Jasmine |
|
||||
| 02 | 入门篇 | GitHub的基础知识，包括与一个团队合作 | 如何在你的项目中使用GitHub，如何在代码库中与他人合作 | [GitHub介绍](/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md) | Floor |
|
||||
| 03 | 入门篇 | 无障碍性 | 学习网络无障碍的基本知识 | [无障碍基础知识](/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md) | Christopher |
|
||||
| 04 | JS基础 | JavaScript数据类型 | JavaScript数据类型的基础知识 | [数据类型](/2-js-basics/1-data-types/translations/README.zh-cn.md) | Jasmine |
|
||||
| 05 | JS基础 | 函数和方法 | 了解管理应用程序逻辑流的函数和方法 | [函数和方法](/2-js-basics/2-functions-methods/translations/README.zh-cn.md) | Jasmine and Christopher |
|
||||
| 06 | JS基础 | 用JS做出决定 | 学习如何使用决策方法在你的代码中创建条件 | [做出决定](/2-js-basics/3-making-decisions/translations/README.zh-cn.md) | Jasmine |
|
||||
| 07 | JS基础 | 数组和循环 | 在JavaScript中使用数组和循环来处理数据 | [数组和循环](/2-js-basics/4-arrays-loops/translations/README.zh-cn.md) | Jasmine |
|
||||
| 08 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的HTML | 构建HTML以创建一个在线花艺瓶，重点是构建一个布局 | [HTML简介](/3-terrarium/1-intro-to-html/translations/README.zh-cn.md) | Jen |
|
||||
| 09 | [花艺瓶](/3-terrarium/solution/README.md) | 实践中的CSS | 构建CSS，为在线花艺瓶设计样式，重点是CSS的基础知识，包括使页面具有响应性 | [CSS简介](/3-terrarium/2-intro-to-css/translations/README.zh-cn.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，并在本地存储中存储变量 | 构建你的浏览器扩展的JavaScript元素，使用存储在本地存储中的变量调用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) | 用JavaScript进行更高级的游戏开发 | 学习使用类和组合的继承以及Pub/Sub模式，为建立游戏做准备。 | [高级游戏开发简介](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [太空游戏](/6-space-game/solution/README.md) | 在Canvas上绘图 | 了解用于在屏幕上绘制元素的Canvas API | [在Canvas上绘图](/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 |
|
||||
|
||||
## 离线访问
|
||||
|
||||
你可以通过使用[Docsify](https://docsify.js.org/#/)离线运行这个文档。fork这个repo，在你的本地机器上安装Docsify，然后在这个repo的根文件夹中，输入 `docsify serve`。网站将在你的本地主机上的3000端口服务：`localhost:3000`。
|
||||
|
||||
## PDF
|
||||
|
||||
所有课程的PDF文件可以在[这里](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)找到
|
||||
|
||||
## 其他课程
|
||||
|
||||
我们的团队还制作了其他课程! 详见：
|
||||
|
||||
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [AI for Beginners](https://aka.ms/ai-beginners)
|
||||
@@ -1,36 +0,0 @@
|
||||
## Για Καθηγητές
|
||||
|
||||
Θα θέλατε να χρησιμοποιήσετε αυτό το πρόγραμμα μαθημάτων στην τάξη σας; Παρακαλούμε, ελεύθερα!
|
||||
|
||||
Για την ακρίβεια, μπορείτε να το χρησιμοποιήσετε μέσα στο ίδιο το GitHub χρησιμοποιώντας το GitHub Classroom.
|
||||
|
||||
Για να το κάνετε αυτό, κάντε fork το repo. Θα χρειαστεί να δημιουργήσετε ένα repo για κάθε μάθημα, οπότε θα χρειαστεί να εξαγάγετε κάθε φάκελο σε ξεχωριστό repo. Έτσι, το [GitHub Classroom](https://classroom.github.com/classrooms) μπορεί να πάρει το κάθε μάθημα ξεχωριστά.
|
||||
|
||||
Αυτές οι [πλήρης οδηγίες](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) θα σας δώσουν μια ιδέα πώς να ρυθμίσετε την τάξη σας.
|
||||
|
||||
## Χρήση με Moodle, Canvas ή Blackboard
|
||||
|
||||
Το πρόγραμμα μαθημάτων λειτουργεί άψογα σε αυτα τα συστήματα εκμάθησης! Χρησιμοποιήστε το [Moodle ανέβασμα αρχείου](/teaching-files/webdev-moodle.mbz) για το πλήρες περιεχόμενο ή δοκίμαστε το [Common Cartridge file](/teaching-files/webdev-common-cartridge.imscc) που περιέχει το περιεχόμενο μερικώς. Το Moodle Cloud δεν υποστηρίζει πλήρης Common Cartridge εξαγωγές, έτσι είναι προτιμότερο να χρησιμοποιήσετε το αρχείο λήψης Moodle το οποίο μπορεί να μεταφορτωθεί στον καμβά. Ενημερώστε μας πώς μπορούμε να βελτιώσουμε αυτήν την εμπειρία.
|
||||
|
||||
|
||||
|
||||
> Το πρόγραμμα μαθημάτων στο περιβαλλόν του Moodle Classroom
|
||||
|
||||
|
||||
|
||||
> Το πρόγραμμα μαθημάτων στο περιβαλλόν Canvas
|
||||
|
||||
## Χρησιμοποιώντας το repo ως έχει
|
||||
|
||||
Υπάρχει δυνατότητα χρήσης του repo ως έχει, χωρίς να χρησιμοποιείτε το GitHub Classroom. Θα χρειαστεί να επικοινωνήσετε με τους μαθητές σας για το ποιο μάθημα θα δουλέψετε.
|
||||
|
||||
Στη διαδικτυακή ομορφή (Zoom, Teams, ή άλλα) μπορεί να σχηματίσετε αίθουσες όπου θα παρέχετε αναλυτική επεξήγηση των κουίζ, και καθοδηγηση στους μαθητές για το πως να διαβάσουν. Στη συνέχεια, να καλέσετε τους μαθητές για τα κουίζ και να υποβάλετε τις απαντήσεις τους ώς «issues». Μπορείτε να κάνετε το ίδιο με τις εργασίες, εάν θέλετε οι μαθητές να συνεργάζονται ανοιχτά.
|
||||
|
||||
Εάν προτιμάτε μια πιο ιδιωτική μορφή, ζητήστε από τους μαθητές σας να μεταφέρουν το πρόγραμμα μαθημάτων, μάθημα προς μάθημα, στα δικά τους GitHub repos, ως ιδιωτικά repos και να σας δώσουν πρόσβαση. Στη συνέχεια, μπορούν να ολοκληρώσουν τα κουίζ και τις εργασίες ιδιωτικά, και να σας τις υποβάλουν μέσω «issues» στο repo της τάξης σας.
|
||||
|
||||
Υπάρχουν πολλοί τρόποι για να το δουλέψει σε μορφή διαδικτυακής τάξης. Ενημερώστε μας τι λειτουργεί καλύτερα για εσάς!
|
||||
|
||||
## Παρακαλώ πείτε μας τις σκέψεις σας!
|
||||
|
||||
Θέλουμε το πρόγραμμα αυτό να λειτουργήσει για εσας και τους μαθητές σας.
|
||||
We want to make this curriculum work for you and your students. Παρακαλώ πείτε μας [σχόλια](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,33 +0,0 @@
|
||||
## Para Educadores
|
||||
|
||||
¿Te gustaría usar este curso en tu clase? ¡Estamos encantados de ayudarte! Aquí hay algunas sugerencias para ayudarte a comenzar.
|
||||
|
||||
De hecho, puedes usarlo dentro de GitHub usando GitHub Classroom.
|
||||
|
||||
Para hacerlo, haz un fork de este repositorio. Necesitarás crear un repositorio para cada lección, por lo que necesitarás extraer cada carpeta en un repositorio separado. De esta manera, [GitHub Classroom](https://classroom.github.com/classrooms) puede seleccionar cada lección por separado.
|
||||
|
||||
Estas [instrucciones](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) te darán una idea de cómo configurar tu aula.
|
||||
|
||||
## Usando el repositorio en Moodle, Canvas o Blackboard.
|
||||
|
||||
Este curso funciona bien en estos Sistemas de Gestión de Aprendizaje. Usa el archivo [Moodle](/teaching-files/webdev-moodle.mbz) para el contenido completo, o prueba el archivo [Common Cartridge](/teaching-files/webdev-common-cartridge.imscc) que contiene parte del contenido. Moodle Cloud no admite exportaciones completas de Common Cartridge, por lo que es preferible usar el archivo de descarga de Moodle que se puede cargar en Canvas. Por favor, háganos saber cómo podemos mejorar esta experiencia.
|
||||
|
||||
|
||||
> El curso en Moodle Classroom
|
||||
|
||||
|
||||
> El curso en Canvas
|
||||
|
||||
## Usando el repositorio de la forma en que está
|
||||
|
||||
Si deseas usar este repositorio tal como está, sin usar GitHub Classroom, también lo puedes hacer. Para ello, deberías conversar con tus estudiantes sobre qué lección van a trabajar juntos.
|
||||
|
||||
En un ambiente en línea (Zoom, Teams, u otro) podrías formar _breakout rooms_ (salas de descanso) para que tus alumnos presenten sus exámenes, y ayudar a los estudiantes para prepararse a aprender. Otro ejemplo, puedes invitar a los estudiantes a que participen en los exámenes y envíen sus respuestas como 'issues' a cierta hora. Podrías hacer lo mismo con las tareas, si quieres que los estudiantes trabajen de forma colaborativa externa.
|
||||
|
||||
Si prefieres un ambiente más privado, pide a tus estudiantes que hagan un fork del curso, lección por lección, a sus propios repositorios de GitHub como repositorios privados y te den acceso. Luego pueden completar los exámenes y las tareas de forma privada y enviártelas a través de "issues" en tu repositorio de aula.
|
||||
|
||||
Hay muchas formas de hacer funcionar el curso en un formato en línea. ¡Haznos saber cómo lo estás haciendo!
|
||||
|
||||
## Por favor, ayúdanos a mejorar
|
||||
|
||||
Queremos mejorar este curso para que sea más útil para los educadores y los estudiantes. Si tienes alguna sugerencia, por favor déjanos tus [comentarios](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
|
||||
@@ -1,33 +0,0 @@
|
||||
## Pour les éducateurs
|
||||
|
||||
Souhaitez-vous utiliser ce programme dans votre classe? N'hésitez pas!
|
||||
|
||||
En fait, vous pouvez l'utiliser dans GitHub lui-même en utilisant GitHub Classroom.
|
||||
|
||||
Pour ce faire, forkez ce repo. Vous allez devoir créer un référentiel pour chaque leçon, vous devrez donc extraire chaque dossier dans un référentiel distinct. De cette façon, [GitHub Classroom](https://classroom.github.com/classrooms) peut prendre chaque leçon séparément.
|
||||
|
||||
Ces [instructions complètes](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vous donneront une idée de la configuration de votre classe.
|
||||
|
||||
## Utilisation dans Moodle, Canvas ou Blackboard
|
||||
|
||||
Ce programme fonctionne bien dans ces systèmes de gestion de l'apprentissage ! Utilisez le [fichier de téléchargement Moodle](../teaching-files/webdev-moodle.mbz) pour le contenu complet, ou essayez le [fichier Common Cartridge](../teaching-files/webdev-common-cartridge.imscc) qui contient une partie du contenu. Moodle Cloud ne prend pas en charge les exportations Common Cartridge complètes, il est donc préférable d'utiliser le fichier de téléchargement Moodle qui peut être téléchargé dans Canvas. S'il vous plaît laissez-nous savoir comment nous pouvons améliorer cette expérience.
|
||||
|
||||
|
||||
> Le programme dans une classe Moodle
|
||||
|
||||
|
||||
> Le programme dans Canvas
|
||||
|
||||
## Utiliser le repo tel quel
|
||||
|
||||
Si vous souhaitez utiliser ce dépôt tel qu'il est actuellement, sans utiliser GitHub Classroom, cela peut également être fait. Vous auriez besoin de communiquer avec vos élèves sur quelle leçon travailler ensemble.
|
||||
|
||||
Dans un format en ligne (Zoom, Teams ou autre), vous pouvez créer des ateliers pour les quiz et encadrer les étudiants pour les aider à se préparer à apprendre. Invitez ensuite les élèves à participer aux quiz et soumettez leurs réponses sous forme de "problèmes" à un moment donné. Vous pouvez faire de même avec les devoirs, si vous voulez que les étudiants travaillent en collaboration en plein air.
|
||||
|
||||
Si vous préférez un format plus privé, demandez à vos élèves de convertir le programme, cours par cours, vers leurs propres dépôts GitHub en tant que dépôts privés, et vous donner accès. Ensuite, ils peuvent remplir des quiz et des devoirs en privé et vous les soumettre via des problèmes sur votre référentiel de classe.
|
||||
|
||||
Il existe de nombreuses façons de faire fonctionner cela dans un format de classe en ligne. Veuillez nous indiquer ce qui fonctionne le mieux pour vous!
|
||||
|
||||
## Veuillez nous donner votre avis!
|
||||
|
||||
Nous voulons que ce programme fonctionne pour vous et vos étudiants. Veuillez nous donner vos [feedbacks](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,23 +0,0 @@
|
||||
## शिक्षकों के लिए
|
||||
|
||||
क्या आप अपनी कक्षा में इस पाठ्यक्रम का उपयोग करना चाहेंगे? कृपया निःसंकोच!
|
||||
|
||||
वास्तव में, आप इसे गिटहब के भीतर गिटहब क्लासरूम का उपयोग करके उपयोग कर सकते हैं।
|
||||
|
||||
ऐसा करने के लिए, इस रेपो को फोर्क करे। आपको प्रत्येक पाठ के लिए रेपो बनाने की आवश्यकता है, इसलिए आपको प्रत्येक फ़ोल्डर को एक अलग रेपो में निकालने की आवश्यकता है। इस तरह, [गिटहब क्लासरूम](https://classroom.github.com/classrooms) प्रत्येक पाठ को अलग से उठा सकते हैं।
|
||||
|
||||
ये [पूर्ण निर्देश](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) आपको एक आइडिया देंगे कि आप अपनी कक्षा कैसे स्थापित करें।
|
||||
|
||||
## रेपो जैसा है वैसे ही उपयोग करे
|
||||
|
||||
यदि आप इस रेपो का उपयोग करना चाहते हैं, जैसा कि यह वर्तमान में खड़ा है, बिना गिटहब क्लासरूम का उपयोग किए बिना, जो भी किया जा सकता है। आपको अपने छात्रों के साथ संवाद करने की आवश्यकता होगी जो एक साथ काम करना सिखाते हैं।
|
||||
|
||||
एक ऑनलाइन प्रारूप (ज़ूम, टीम्स, या अन्य) में आप क्विज़ के लिए ब्रेकआउट रूम बना सकते हैं और छात्रों को सीखने के लिए तैयार होने में मदद करने के लिए सलाह देते हैं। फिर छात्रों को क्विज़ के लिए आमंत्रित करें और एक निश्चित समय पर 'इशूस' मुद्दों के रूप में प्रस्तुत करें। आप असाइनमेंट के साथ भी ऐसा ही कर सकते हैं, अगर आप चाहते हैं कि छात्र खुले में सहयोग करें।
|
||||
|
||||
यदि आप एक अधिक निजी प्रारूप पसंद करते हैं, तो अपने छात्रों से पाठ्यक्रम, पाठ द्वारा पाठ, अपने स्वयं के गिटहब रेपोस को निजी प्रतिनिधि के रूप में, और आपको एक्सेस देने के लिए कहें। फिर वे निजी रूप से क्विज़ और असाइनमेंट पूरा कर सकते हैं और उन्हें आपकी कक्षा के रेपो पर मुद्दों के माध्यम से आपके पास जमा कर सकते हैं।
|
||||
|
||||
ऑनलाइन कक्षा प्रारूप में इस काम को करने के कई तरीके हैं। कृपया हमें बताएं कि आपके लिए सबसे अच्छा क्या है!
|
||||
|
||||
## कृपया हमें अपने विचार दें!
|
||||
|
||||
हम इस पाठ्यक्रम को आपके और आपके छात्रों के लिए काम करना चाहते हैं। कृपया हमें [प्रतिक्रिया](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) दे ।
|
||||
@@ -1,33 +0,0 @@
|
||||
## Per gli Educatori
|
||||
|
||||
Vorresti utilizzare questo corso nelle tue classi? Non esitare!
|
||||
|
||||
In realtà puoi utilizzarlo direttamente all'interno di GitHub stesso usando GitHub Classroom.
|
||||
|
||||
Per fare ciò, esegui una fork di questa repo. Dovrai creare una repo per ogni singola lezione, quindi dovrai estrarre ogni cartella dentro ad una repo a parte. In questo modo, [GitHub Classroom](https://classroom.github.com/classrooms) può riconoscere ogni lezione separatamente.
|
||||
|
||||
Queste [istruzioni complete](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) ti daranno un'idea su come impostare la tua classe.
|
||||
|
||||
## Usarlo in Moodle, Canvas o Blackboard
|
||||
|
||||
Questo corso funziona bene in questi Learning Management Systems! Utilizza il [file Moodle upload](/teaching-files/webdev-moodle.mbz) per l'intero contenuto, oppure prova il [file Common Cartridge](/teaching-files/webdev-common-cartridge.imscc) il quale contiene alcuni dei contenuti. Moodle Cloud non supporta le esportazioni complete delle Common Cartridge, quindi è preferibile utilizzare il file di download di Moodle, che può essere caricato su Canvas. Prego facci sapere come possiamo migliorare questa esperienza.
|
||||
|
||||
|
||||
> Il corso in una classe di Moodle
|
||||
|
||||
|
||||
> Il corso su Canvas
|
||||
|
||||
## Usare la repo così com'è
|
||||
|
||||
Se vuoi puoi anche usare la repo così com'è attualmente, senza utilizzare GitHub Classroom. Dovrai comunicare con i tuoi studenti su quale lezione lavorare insieme.
|
||||
|
||||
In formato online (Zoom, Teams o altro) puoi creare delle stanze secondarie per i quiz, e guidare gli studenti per aiutarli ad essere pronti ad imparare. Puoi quindi invitare gli studenti ad eseguire i quiz ed inserire le loro risposte come 'issues' in un secondo momento. Puoi fare lo stesso con gli esercizi se vuoi che gli studenti lavorino insieme apertamente.
|
||||
|
||||
Se preferisci un formato più privato chiedi ai tuoi studenti di effettuare una fork del corso, lezione per lezione, tra le loro repo GitHub come repo private e di fornirti l'accesso. Loro possono quindi completare quiz ed esercixi privatamente ed inviarteli come issues sulla repo della tua classe.
|
||||
|
||||
Ci sono tanti modi per far funzionare il corso in una classe online. Facci sapere quale funziona meglio per te!
|
||||
|
||||
## Per favore condividi il tuo pensiero!
|
||||
|
||||
Vogliamo che questo corso funzioni per te e per i tuoi studenti. Ti preghiamo di darci un [feedback](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,23 +0,0 @@
|
||||
## 教育者の方へ
|
||||
|
||||
このカリキュラムを教室で使ってみませんか? お気軽にどうぞ!
|
||||
|
||||
実は、GitHub Classroom を使えば、GitHub の中で使うことができます。
|
||||
|
||||
そのためには、このリポジトリをフォークしてください。各レッスンごとにレポを作成する必要があるので、それぞれのフォルダを別のレポに展開してください。そうすれば、[GitHub Classroom](https://classroom.github.com/classrooms) はそれぞれのレッスンを個別にピックアップすることができます。
|
||||
|
||||
これらの [完全な説明書](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) は、あなたの教室を設定する方法のアイデアを与えてくれます。
|
||||
|
||||
## リポジトリをそのまま使用する
|
||||
|
||||
GitHub Classroom を使わずに、このリポジトリを現状のまま使いたいのであれば、それも可能です。どのレッスンをどのように進めるかを生徒に伝える必要があります。
|
||||
|
||||
オンライン形式 (Zoom, Teams, その他の形式) で、クイズのための分科会を作り、学生を指導して学習の準備ができるようにします。そして、学生をクイズに招待し、一定の時間に「課題」として答えを提出させます。学生にオープンな場で共同作業をさせたい場合は、同じように課題を出すこともできます。
|
||||
|
||||
よりプライベートな形式を希望する場合は、学生にカリキュラムをレッスンごとにフォークしてもらい、自分の GitHub リポジトリをプライベートリポジトリにして、あなたにアクセス権を与えます。そうすれば、生徒たちは個人的にクイズや課題を完成させ、あなたの教室のレポにある課題を使ってあなたに提出することができます。
|
||||
|
||||
オンライン教室の形式でこれを実現するには、いろいろな方法があります。あなたに最適な方法を教えてください。
|
||||
|
||||
## 感想をお聞かせください!
|
||||
|
||||
このカリキュラムをあなたと生徒さんのために役立てていきたいと思っています。[フィードバック](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)をお願いします。
|
||||
@@ -1,23 +0,0 @@
|
||||
## शिक्षकांसाठी
|
||||
|
||||
तुम्हाला हा कोर्स तुमच्या वर्गात वापरायला आवडेल का? कृपया मोकळे व्हा!
|
||||
|
||||
खरं तर, तुम्ही ते GitHub क्लासरूम वापरून GitHub मध्ये वापरू शकता.
|
||||
|
||||
हे करण्यासाठी, हा रेपो फोर्क करा. तुम्हाला प्रत्येक धड्यासाठी रेपो तयार करणे आवश्यक आहे, म्हणून तुम्हाला प्रत्येक फोल्डर वेगळ्या रेपोमध्ये काढावे लागेल. अशा प्रकारे, [GitHub Classroom](https://classroom.github.com/classrooms) प्रत्येक धडा स्वतंत्रपणे घेऊ शकतात.
|
||||
|
||||
या [संपूर्ण सूचना](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) तुम्हाला तुमचा वर्ग कसा सेट करायचा याची कल्पना देईल.
|
||||
|
||||
## रेपो जसा आहे तसा वापरा
|
||||
|
||||
GitHub Classroom न वापरता तुम्हाला हा रेपो वापरायचा असल्यास, जे काही करता येईल. तुम्हाला तुमच्या विद्यार्थ्यांशी संवाद साधावा लागेल जे एकत्र काम शिकवतात.
|
||||
|
||||
ऑनलाइन फॉरमॅटमध्ये (झूम, टीम्स किंवा इतर) विद्यार्थ्यांना शिकण्यासाठी तयार होण्यासाठी तुम्ही क्विझ आणि मार्गदर्शनासाठी ब्रेकआउट रूम तयार करू शकता. नंतर विद्यार्थ्यांना प्रश्नमंजुषा साठी आमंत्रित करा आणि दिलेल्या वेळी 'समस्या' समस्या म्हणून उपस्थित करा. विद्यार्थ्यांनी खुलेपणाने सहकार्य करावे असे तुम्हाला वाटत असल्यास, तुम्ही असाइनमेंटसह देखील असेच करू शकता.
|
||||
|
||||
जर तुम्हाला अधिक खाजगी स्वरूप आवडत असेल, तर तुमच्या विद्यार्थ्यांना तुम्हाला अभ्यासक्रमात प्रवेश देण्यास सांगा, पाठानुसार धडा, वैयक्तिक प्रतिनिधी म्हणून तुमचा स्वतःचा GitHub रेपो आणि बरेच काही. ते नंतर खाजगीरित्या क्विझ आणि असाइनमेंट पूर्ण करू शकतात आणि तुमच्या क्लास रेपोवरील समस्यांद्वारे तुम्हाला सबमिट करू शकतात.
|
||||
|
||||
ऑनलाइन क्लासरूम फॉरमॅटमध्ये हे करण्याचे अनेक मार्ग आहेत. कृपया आपल्यासाठी काय सर्वोत्तम आहे ते आम्हाला कळवा!
|
||||
|
||||
## कृपया आपले विचार कळवा!
|
||||
|
||||
आम्हाला हा कोर्स तुमच्यासाठी आणि तुमच्या विद्यार्थ्यांसाठी उपयुक्त बनवायचा आहे. कृपया आम्हाला [फीडबॅक](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWQ4WLKY) द्या.
|
||||
@@ -1,33 +0,0 @@
|
||||
## അധ്യാപകർക്ക്
|
||||
|
||||
നിങ്ങളുടെ ക്ലാസ് മുറിയിൽ ഈ പാഠ്യപദ്ധതി ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടോ? മടിക്കേണ്ടതില്ല!
|
||||
|
||||
വാസ്തവത്തിൽ, GitHub ക്ലാസ്റൂം ഉപയോഗിച്ച് നിങ്ങൾക്ക് GitHub-ൽ തന്നെ ഇത് ഉപയോഗിക്കാൻ കഴിയും.
|
||||
|
||||
അത് ചെയ്യുന്നതിന്, ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക. ഓരോ പാഠത്തിനും നിങ്ങൾ ഒരു റിപ്പോ സൃഷ്ടിക്കേണ്ടതുണ്ട്, അതിനാൽ നിങ്ങൾ ഓരോ ഫോൾഡറിനും പ്രത്യേക റിപ്പോയിലേക്ക് എക്സ്ട്രാക്റ്റ് ചെയ്യേണ്ടതുണ്ട്. അതുവഴി, [GitHub ക്ലാസ്റൂം](https://classroom.github.com/classrooms) ഓരോ പാഠവും പ്രത്യേകം എടുക്കാം.
|
||||
|
||||
ഈ [പൂർണ്ണ നിർദ്ദേശങ്ങൾ](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) നിങ്ങളുടെ ക്ലാസ് റൂം എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ഒരു ആശയം നൽകും.
|
||||
|
||||
## ഇത് മൂഡിൽ, ക്യാൻവാസ് അല്ലെങ്കിൽ ബ്ലാക്ക്ബോർഡിൽ ഉപയോഗിക്കുന്നു
|
||||
|
||||
ഈ പഠന മാനേജ്മെന്റ് സിസ്റ്റങ്ങളിൽ ഈ പാഠ്യപദ്ധതി നന്നായി പ്രവർത്തിക്കുന്നു! പൂർണ്ണമായ ഉള്ളടക്കത്തിനായി [മൂഡിൽ അപ്ലോഡ് ഫയൽ](/teaching-files/webdev-moodle.mbz) ഉപയോഗിക്കുക, അല്ലെങ്കിൽ [കോമൺ കാട്രിഡ്ജ് ഫയൽ](/teaching-files/webdev-common-cartridge.imscc) അടങ്ങിയിരിക്കുന്ന ചില ഉള്ളടക്കം ശ്രമിക്കുക. മൂഡിൽ ക്ലൗഡ് പൂർണ്ണ കോമൺ കാട്രിഡ്ജ് കയറ്റുമതിയെ പിന്തുണയ്ക്കുന്നില്ല, അതിനാൽ ക്യാൻവാസിലേക്ക് അപ്ലോഡ് ചെയ്യാൻ കഴിയുന്ന മൂഡിൽ ഡൗൺലോഡ് ഫയൽ ഉപയോഗിക്കുന്നതാണ് നല്ലത്. ഈ അനുഭവം എങ്ങനെ മെച്ചപ്പെടുത്താം എന്ന് ഞങ്ങളെ അറിയിക്കുക.
|
||||
|
||||
|
||||
> ഒരു മൂഡിൽ ക്ലാസ്റൂമിലെ പാഠ്യപദ്ധതി
|
||||
>
|
||||
|
||||
> ക്യാൻവാസിലെ പാഠ്യപദ്ധതി
|
||||
|
||||
## റിപ്പോ അതേപടി ഉപയോഗിക്കുന്നു
|
||||
|
||||
GitHub Classroom ഉപയോഗിക്കാതെ, ഈ റിപ്പോ നിലവിൽ ഉള്ളതുപോലെ ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അതും ചെയ്യാം. ഏത് പാഠമാണ് ഒരുമിച്ച് പ്രവർത്തിക്കേണ്ടതെന്ന് നിങ്ങളുടെ വിദ്യാർത്ഥികളുമായി ആശയവിനിമയം നടത്തേണ്ടതുണ്ട്.
|
||||
|
||||
ഒരു ഓൺലൈൻ ഫോർമാറ്റിൽ (സൂം, ടീമുകൾ അല്ലെങ്കിൽ മറ്റുള്ളവ) നിങ്ങൾ ക്വിസുകൾക്കായി ബ്രേക്ക്ഔട്ട് റൂമുകൾ രൂപീകരിക്കുകയും പഠിക്കാൻ തയ്യാറാകാൻ വിദ്യാർത്ഥികളെ സഹായിക്കുകയും ചെയ്യാം. തുടർന്ന് ക്വിസുകളിലേക്ക് വിദ്യാർത്ഥികളെ ക്ഷണിക്കുകയും അവരുടെ ഉത്തരങ്ങൾ ഒരു നിശ്ചിത സമയത്ത് 'പ്രശ്നങ്ങൾ' ആയി സമർപ്പിക്കുകയും ചെയ്യുക. വിദ്യാർത്ഥികൾ തുറന്ന സ്ഥലത്ത് സഹകരിച്ച് പ്രവർത്തിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അസൈൻമെന്റുകളിലും നിങ്ങൾക്ക് ഇത് ചെയ്യാം.
|
||||
|
||||
നിങ്ങൾ കൂടുതൽ സ്വകാര്യ ഫോർമാറ്റാണ് തിരഞ്ഞെടുക്കുന്നതെങ്കിൽ, നിങ്ങളുടെ വിദ്യാർത്ഥികളോട് പാഠ്യപദ്ധതിയും പാഠം പ്രകാരമുള്ള പാഠവും അവരുടെ സ്വന്തം GitHub റെപ്പോകളിലേക്ക് സ്വകാര്യ റിപ്പോകളായി നൽകാനും നിങ്ങൾക്ക് ആക്സസ് നൽകാനും ആവശ്യപ്പെടുക. തുടർന്ന് അവർക്ക് ക്വിസുകളും അസൈൻമെന്റുകളും സ്വകാര്യമായി പൂർത്തിയാക്കാനും നിങ്ങളുടെ ക്ലാസ്റൂം റിപ്പോയിലെ പ്രശ്നങ്ങൾ മുഖേന അവ നിങ്ങൾക്ക് സമർപ്പിക്കാനും കഴിയും.
|
||||
|
||||
ഒരു ഓൺലൈൻ ക്ലാസ്റൂം ഫോർമാറ്റിൽ ഇത് പ്രവർത്തിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. നിങ്ങൾക്ക് ഏറ്റവും മികച്ചത് എന്താണെന്ന് ഞങ്ങളെ അറിയിക്കുക!
|
||||
|
||||
## ദയവായി നിങ്ങളുടെ ചിന്തകൾ ഞങ്ങൾക്ക് നൽകുക!
|
||||
|
||||
ഈ പാഠ്യപദ്ധതി നിങ്ങൾക്കും നിങ്ങളുടെ വിദ്യാർത്ഥികൾക്കും വേണ്ടി പ്രവർത്തിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ദയവായി ഞങ്ങൾക്ക് [ഫീഡ്ബാക്ക്](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) നൽകുക.
|
||||
@@ -1,23 +0,0 @@
|
||||
## Dla nauczycieli
|
||||
|
||||
Czy chciałbyś skorzystać z tego programu nauczania w swojej klasie? Nie krępuj się!
|
||||
|
||||
W rzeczywistości możesz go używać w samym GitHubie, korzystając z GitHub Classroom.
|
||||
|
||||
Aby to zrobić, zrób forka tego repozytorium. Będziesz musiał utworzyć repozytorium dla każdej lekcji, więc będziesz musiał wyodrębnić każdy folder do osobnego repozytorium. W ten sposób [GitHub Classroom](https://classroom.github.com/classrooms) może odebrać każdą lekcję oddzielnie.
|
||||
|
||||
Te [pełne instrukcje](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) dadzą ci pomysł, jak skonfigurować klasę.
|
||||
|
||||
## Używanie repozytorium bez zmian
|
||||
|
||||
Jeśli chcesz korzystać z tego repozytorium w obecnej postaci, bez korzystania z GitHub Classroom, również możesz to zrobić. Będziesz musiał komunikować się ze swoimi uczniami, którą lekcję wspólnie przepracować.
|
||||
|
||||
W formacie online (Zoom, Teams lub inny) możesz tworzyć sale do quizów i mentorować uczniów, aby pomóc im przygotować się do nauki. Następnie poproś uczniów o udział w quizach i przedstaw ich odpowiedzi jako „issues” w określonym czasie. To samo możesz zrobić z zadaniami, jeśli chcesz, aby uczniowie wspólnie pracowali w otwartej przestrzeni.
|
||||
|
||||
Jeśli wolisz bardziej prywatny format, poproś uczniów, aby podzielili program nauczania, lekcja po lekcji, na ich własne repozytoria GitHub jako prywatne repozytoria i aby przyznali ci dostęp. Następnie mogą prywatnie wypełniać quizy i zadania, i przesyłać je do ciebie za pośrednictwem issues w repozytorium klasy.
|
||||
|
||||
Istnieje wiele sposobów, aby to zadziałało w klasie online. Daj nam znać, co jest dla ciebie najlepsze!
|
||||
|
||||
## Przekaż nam swoje przemyślenia!
|
||||
|
||||
Chcemy, aby ten program nauczania działał dla ciebie i twoich uczniów. Prześlij nam [opinię](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,34 +0,0 @@
|
||||
|
||||
## Para Educadores
|
||||
|
||||
Você gostaria de usar esse programa de estudos na sua sala de aula? Por favor, sinta-se à vontade!
|
||||
|
||||
Na verdade, você pode usá-lo no próprio GitHub através do GitHub Classroom.
|
||||
|
||||
Para fazer isso, faça uma cópia deste repositório. Você irá precisar criar um repositório para cada aula, então você irá precisar extrair cada pasta em um novo repositório separado. Dessa maneira, o [GitHub Classroom](https://classroom.github.com/classrooms) pode pegar cada aula separadamente.
|
||||
|
||||
Estas [instruções completas](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) irão lhe dar uma idéia de como preparar sua sala de aula.
|
||||
|
||||
## Usando no Moodle, Canvas ou Blackboard
|
||||
|
||||
Esse programa de estudos funciona bem com estes sistemas de gestão de aprendizagem (LMS)! Use o [arquivo de upload do Moodle](../teaching-files/webdev-moodle.mbz) para o conteúdo completo, ou tente o [arquivo do Common Cartridge](../teaching-files/webdev-common-cartridge.imscc) que contém parte do conteúdo. Moodle Cloud não oferece suporte à exportação completa do Common Cartidge, então é preferível usar o arquivo de download do Moodle que pode ser carregado no Canvas. Por favor, nos diga como podemos melhorar essa experiência.
|
||||
|
||||
|
||||
> O programa de estudos no Moodle Classroom
|
||||
|
||||
|
||||
> O programa de estudos no Canvas
|
||||
|
||||
## Usando o repositório como está
|
||||
|
||||
Se você desejar usar o repositório como está atualmente, sem usar o GitHub Classroom, isso também pode ser feito. Você precisaria comunicar a seus alunos qual aula trabalhar juntos.
|
||||
|
||||
Em um formato online (via Zoom, Teams, ou outro) você pode formar salas separadas (breakout rooms) para os questionários, e orientar os alunos para deixá-los prontos para aprender. Em seguida, convide os alunos para os questionários e envie as respostas deles como "issues" em um determinado momento. Você pode fazer os mesmo com as tarefas, caso queira que os alunos trabalhem colaborativamente ao ar livre.
|
||||
|
||||
Se você preferir um modelo mais privado, peça aos seus alunos para fazerem uma cópia do programa de estudos, aula por aula, em seus próprios repositórios do GitHub como repositórios privados e peça também que lhe forneçam acesso. Em seguida, eles podem completar os questionários e tarefas em particular e enviá-los a você via "issues" no repositório da sala de aula.
|
||||
|
||||
Há muitas maneiras de fazer isso funcionar via formato de sala de aula online. Por favor, nos diga o que funciona melhor para você.
|
||||
|
||||
## Por favor, nos dê sua opinião!
|
||||
|
||||
Nós queremos fazer este programa de estudos funcionar para você e seus estudantes. Por favor, nos de um [feedback](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,35 +0,0 @@
|
||||
## Для педагогов
|
||||
|
||||
Хотите использовать эту учебную программу в своем классе? Пожалуйста, не стесняйтесь!
|
||||
|
||||
Фактически, вы можете использовать ее в самом GitHub, используя GitHub Classroom.
|
||||
|
||||
Для этого сделайте ответвление (fork) от этого репозитория. Вам нужно будет создать отдельный репозиторий для каждого урока, извлечь каждую папку в свой репозиторий, чтобы в [GitHub Classroom](https://classroom.github.com/classrooms) проводить каждое занятие отдельно.
|
||||
|
||||
Эти [подробные инструкции](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) дадут вам представление о том, как настроить GitHub Classroom.
|
||||
|
||||
## Использование в Moodle, Canvas или Blackboard
|
||||
|
||||
Данная учебная программа хорошо работает в этих системах управления обучением! Используйте [файл загрузки Moodle](/teaching-files/webdev-moodle.mbz) для получения всего контента, или попробуйте [Common Cartridge файл](/teaching-files/webdev-common-cartridge.imscc), который содержит только часть контента. Moodle Cloud не поддерживает полный экспорт Common Cartridge, поэтому предпочтительно использовать файл загрузки Moodle, который можно загрузить в Canvas. Пожалуйста, дайте нам знать, если мы можем что-то улучшить.
|
||||
|
||||
|
||||
|
||||
> Учебная программа в классе Moodle
|
||||
|
||||
|
||||
|
||||
> Учебная программа в Canvas
|
||||
|
||||
## Использование репозитория как есть
|
||||
|
||||
Если вы хотите использовать этот репозиторий в его нынешнем виде, без использования GitHub Classroom, это тоже можно сделать. Вам нужно будет обсудить со своими учениками, над каким уроком работать вместе.
|
||||
|
||||
В онлайн-формате (Zoom, Teams и т. Д.) Вы можете создавать комнаты обсуждения для викторин и наставлять студентов, чтобы помочь им подготовиться к обучению. Затем пригласите учащихся принять участие в викторинах и в определенное время отправьте свои ответы как «вопросы». Вы можете сделать то же самое с заданиями, если хотите, чтобы учащиеся работали совместно.
|
||||
|
||||
Если вы предпочитаете индивидуальный формат, попросите своих студентов делать ответвления (форкать) от учебной программы, урок за уроком, в их собственные приватные репозитории GitHub и предоставить вам доступ. Тогда они смогут выполнять викторины и задания в частном порядке и отправлять их вам через вопросы в репозитории вашей классной комнаты.
|
||||
|
||||
Есть много способов сделать эту работу в формате онлайн-класса. Пожалуйста сообщите нам, что лучше всего подходит именно вам!
|
||||
|
||||
## Пожалуйста, поделитесь с нами своими мыслями!
|
||||
|
||||
Мы хотим, чтобы эта учебная программа работала на вас и ваших учеников. Пожалуйста, оставьте нам [отзыв](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,33 +0,0 @@
|
||||
## கல்வியாளர்களுக்கு
|
||||
|
||||
உங்கள் வகுப்பறையில் இந்தப் பாடத்திட்டத்தை பயன்படுத்த விரும்புகிறீர்களா? தயவுசெய்து சுதந்திரமாக உணருங்கள்!
|
||||
|
||||
உண்மையில், நீங்கள் கீதுப் வகுப்பறையைப் பயன்படுத்தி அதை கீதுப்க்குள் பயன்படுத்தலாம்.
|
||||
|
||||
அதை செய்ய, இந்த ரெப்போவை முட்கரண்டி. நீங்கள் ஒவ்வொரு பாடத்திற்கும் ஒரு ரெப்போவை உருவாக்க வேண்டும், எனவே நீங்கள் ஒவ்வொரு கோப்புறையை ஒரு தனி ரெப்போவில் பிரித்தெடுக்க வேண்டும்.அந்த வழியில், [கிட்ஹப் வகுப்பறை](https://classroom.github.com/classrooms) ஒவ்வொரு பாடமும் தனித்தனியாக எடுக்க முடியும்.
|
||||
|
||||
இந்த [முழு அறிவுறுத்தல்கள்](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) உங்கள் வகுப்பறையை எவ்வாறு அமைப்பது என்பது பற்றிய ஒரு யோசனையை உங்களுக்கு வழங்கும்.
|
||||
|
||||
## மூடல், கேன்வாஸ் அல்லது பிளாக்போர்டில் அதைப் பயன்படுத்துதல்
|
||||
|
||||
இந்த பாடத்திட்டம் இந்த கற்றல் மேலாண்மை அமைப்புகளில் நன்றாக வேலை செய்கிறது! முழு உள்ளடக்கத்திற்கு [மூடல் பதிவேற்றக் கோப்பை](../teaching-files/webdev-moodle.mbz) பயன்படுத்தவும், அல்லது உள்ளடக்கத்தில் சிலவற்றைக் கொண்ட [பொதுவான பொதியுறை கோப்பு](../teaching-files/webdev-common-cartridge.imscc) முயற்சிக்கவும்.
|
||||
|
||||
|
||||
> ஒரு மூடல் வகுப்பறையில் பாடத்திட்டம்
|
||||
|
||||
|
||||
> கேன்வாஸ் பாடத்திட்டம்
|
||||
|
||||
## ரெப்போவைப் பயன்படுத்துதல்
|
||||
|
||||
நீங்கள் இந்த ரெப்போவை தற்போது உள்ளது போல் பயன்படுத்த விரும்பினால், கிட்ஹப் வகுப்பறையைப் பயன்படுத்தாமல், அதையும் செய்யலாம். நீங்கள் ஒன்றாக வேலை செய்ய எந்த பாடம் உங்கள் மாணவர்களுடன் தொடர்பு கொள்ள வேண்டும்.
|
||||
|
||||
ஒரு ஆன்லைன் வடிவத்தில் (ஜூம், அணிகள், அல்லது பிற) நீங்கள் வினாடி வினாக்களுக்கு பிரேக்அவுட் அறைகளை உருவாக்கலாம், மேலும் மாணவர்கள் கற்றுக்கொள்ள தயாராக உதவஉதவலாம். பின்னர் வினாடி வினாக்களுக்கு மாணவர்களை அழைத்து, ஒரு குறிப்பிட்ட நேரத்தில் 'சிக்கல்களாக' தங்கள் பதில்களை சமர்ப்பிக்கவும். மாணவர்கள் திறந்த வெளியில் கூட்டாக வேலை செய்ய விரும்பினால், நீங்கள் நியமிப்புகளிலும் அதையே செய்யலாம்.
|
||||
|
||||
நீங்கள் ஒரு தனிப்பட்ட வடிவத்தை விரும்பினால், உங்கள் மாணவர்களை பாடத்திட்டத்தை, பாடத்தின் மூலம் பாடம், தங்கள் சொந்த கிட்ஹப் ரெப்போக்களை தனியார் ரெப்போக்களாக க்ளெக் செய்யுமாறு கேளுங்கள், உங்களுக்கு அணுகலை வழங்கவும். பின்னர் அவர்கள் தனிப்பட்ட முறையில் வினாடி வினாக்கள் மற்றும் பணிகளை முடிக்க மற்றும் உங்கள் வகுப்பறை ரெப்போ பிரச்சினைகள் மூலம் நீங்கள் அவற்றை சமர்ப்பிக்க முடியும்.
|
||||
|
||||
ஒரு ஆன்லைன் வகுப்பறை வடிவத்தில் இந்த வேலை செய்ய பல வழிகள் உள்ளன. உங்களுக்கு எது சிறந்தது என்பதை எங்களுக்குத் தெரியப்படுத்துங்கள்!
|
||||
|
||||
## தயவுசெய்து உங்கள் எண்ணங்களை எங்களுக்குத் கொடுங்கள்!
|
||||
|
||||
இந்த பாடத்திட்டத்தை உங்களுக்கும் உங்கள் மாணவர்களுக்கும் வேலை செய்ய விரும்புகிறோம். தயவுசெய்து எங்களுக்கு [கருத்து](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) கொடுங்கள்
|
||||
@@ -1,34 +0,0 @@
|
||||
## విద్యావేత్తల కొరకు
|
||||
|
||||
ఈ పాఠ్యప్రణాళికను మీ తరగతి గదిలో ఉపయోగించాలని మీరు అనుకుంటున్నారా? దయచేసి స్వేచ్ఛగా ఉండండి!
|
||||
|
||||
వాస్తవానికి, మీరు గిట్ హబ్ క్లాస్ రూమ్ ఉపయోగించడం ద్వారా Gtహబ్ లోనే దీనిని ఉపయోగించవచ్చు.
|
||||
|
||||
అలా చేయడానికి, ఈ రెపోను ఫోర్క్ చేయండి. మీరు ప్రతి పాఠం కోసం ఒక రెపోను సృష్టించాల్సి ఉంటుంది, కాబట్టి మీరు ప్రతి సంచికను ప్రత్యేక రెపోలోకి వెలికితీయాల్సి ఉంటుంది. ఆ విధంగా, [గిట్ హబ్ క్లాస్ రూమ్](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) ప్రతి పాఠాన్ని విడిగా ఎంచుకోవచ్చు.
|
||||
|
||||
|
||||
ఈ [పూర్తి సూచనలు](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) రూమ్-విత్-గిథబ్-క్లాస్ రూమ్/) మీ తరగతి గదిని ఎలా ఏర్పాటు చేయాలో మీకు ఒక అవగాహన ఇస్తుంది.
|
||||
|
||||
## మూడెల్, కాన్వాస్ లేదా బ్లాక్ బోర్డ్ లో దీనిని ఉపయోగించడం
|
||||
|
||||
ఈ లెర్నింగ్ మేనేజ్మెంట్ సిస్టమ్స్లో ఈ పాఠ్యాంశాలు బాగా పని చేస్తాయి! పూర్తి కంటెంట్ కోసం [Moodle అప్లోడ్ ఫైల్](/teaching-files/webdev-moodle.mbz) ని ఉపయోగించండి లేదా కొన్నింటిని కలిగి ఉన్న [కామన్ కార్ట్రిడ్జ్ ఫైల్](/teaching-files/webdev-common-cartridge.imscc) ఇందులో కొంత కంటెంట్ ఉంటుంది. Moodle Cloud పూర్తి కామన్ కాట్రిడ్జ్ ఎగుమతులకు మద్దతు ఇవ్వదు, కాబట్టి కాన్వాస్లోకి అప్లోడ్ చేయగల మూడ్లే డౌన్లోడ్ ఫైల్ను ఉపయోగించడం ఉత్తమం. దయచేసి మేము ఈ అనుభవాన్ని ఎలా మెరుగుపరచవచ్చో మాకు తెలియజేయండి.
|
||||
|
||||
|
||||
> మూడ్లే తరగతి గదిలో పాఠ్యప్రణాళిక
|
||||
|
||||
|
||||
> కాన్వాస్లో పాఠ్యప్రణాళిక
|
||||
|
||||
## రెపోను యథాతథంగా ఉపయోగించడం
|
||||
|
||||
మీరు GitHub క్లాస్రూమ్ని ఉపయోగించకుండా, ప్రస్తుతం ఉన్న విధంగానే ఈ రెపోను ఉపయోగించాలనుకుంటే, అది కూడా చేయవచ్చు. మీరు మీ విద్యార్థులతో కలిసి ఏ పాఠంతో కలిసి పని చేయాలో వారితో కమ్యూనికేట్ చేయాలి.
|
||||
|
||||
ఆన్లైన్ ఫార్మాట్లో (జూమ్, టీమ్లు లేదా ఇతరమైనవి) మీరు క్విజ్ల కోసం బ్రేక్అవుట్ రూమ్లను ఏర్పరచవచ్చు మరియు విద్యార్థులు నేర్చుకోవడానికి సిద్ధంగా ఉండటానికి వారికి మెంటర్ని అందించవచ్చు. ఆపై క్విజ్ల కోసం విద్యార్థులను ఆహ్వానించండి మరియు నిర్దిష్ట సమయంలో వారి సమాధానాలను 'సమస్యలు'గా సమర్పించండి. విద్యార్థులు బహిరంగంగా కలిసి పని చేయాలని మీరు కోరుకుంటే, మీరు అసైన్మెంట్లతో అదే పని చేయవచ్చు.
|
||||
|
||||
మీరు మరింత ప్రైవేట్ ఆకృతిని ఇష్టపడితే, పాఠ్యాంశాలను, పాఠం వారీగా పాఠాన్ని, వారి స్వంత గిట్హబ్ రెపోలను ప్రైవేట్ రెపోలుగా విభజించి, మీకు యాక్సెస్ ఇవ్వమని మీ విద్యార్థులను అడగండి. అప్పుడు వారు క్విజ్లు మరియు అసైన్మెంట్లను ప్రైవేట్గా పూర్తి చేయగలరు మరియు మీ తరగతి గది రెపోలో సమస్యల ద్వారా వాటిని మీకు సమర్పించగలరు.
|
||||
|
||||
ఆన్లైన్ క్లాస్రూమ్ ఫార్మాట్లో దీన్ని పని చేయడానికి అనేక మార్గాలు ఉన్నాయి. దయచేసి మీకు ఏది బాగా పని చేస్తుందో మాకు తెలియజేయండి!
|
||||
|
||||
## దయచేసి మీ ఆలోచనలను మాకు తెలియజేయండి!
|
||||
|
||||
మేము ఈ పాఠ్యాంశాలను మీకు మరియు మీ విద్యార్థులకు పని చేయాలనుకుంటున్నాము. దయచేసి మాకు [ఫీడ్బ్యాక్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,33 +0,0 @@
|
||||
## Для вчителів
|
||||
|
||||
Що робити, якщо ви хотіли б ви використовувати цю навчальну програму у своєму класі? Будь ласка, не соромтеся!
|
||||
|
||||
Насправді, ви можете використовувати його в самому GitHub, використовуючи GitHub Classroom.
|
||||
|
||||
Для цього створіть форк цього репозиторію. Вам потрібно буде створити репозиторій для кожного уроку, тому вам потрібно буде розпакувати кожну папку в окреме репо. Таким чином, [GitHub Classroom](https://classroom.github.com/classrooms) може підхопити кожен урок окремо.
|
||||
|
||||
Ці [вичерпні інструкції](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) нададуть вам уявлення про те, як налаштувати вашу класну кімнату.
|
||||
|
||||
## Використання в Moodle, Canvas або Blackboard
|
||||
|
||||
Ця навчальна програма добре працює в цих системах управління навчанням! Використовуйте [Moodle файл](/teaching-files/webdev-moodle.mbz) для повного контенту, або спробуйте [Common Cartridge file](/teaching-files/webdev-common-cartridge.imscc) який містить деякий контент. Moodle Cloud не підтримує повні Common Cartridge експорти, тому бажано використовувати Moodle download файл, який може бути завантажений в Canvas. Будь-ласка повідомте як ми можемо це покращити.
|
||||
|
||||
|
||||
> Розклад в Moodle classroom
|
||||
|
||||
|
||||
> Розклад в Canvas
|
||||
|
||||
## Використання репозиторію самостійно
|
||||
|
||||
Якщо ви хочете використовувати цей репозиторій у його теперішньому вигляді, не використовуючи GitHub Classroom, це також можна зробити. Ви маєте поговорити зі своїми учнями, який урок опрацювати разом.
|
||||
|
||||
В онлайн-форматі (Zoom, Teams або інший) ви можете створити кімнати для тестів і наставляти учнів, щоб допомогти їм підготуватися до навчання. Потім запросіть студентів взяти участь у вікторинах і подайте свої відповіді як «проблеми» в певний час. Ви можете зробити те ж саме із завданнями, якщо ви хочете, щоб учні працювали спільно на відкритому повітрі.
|
||||
|
||||
Якщо ви віддаєте перевагу більш приватний формат, попросіть своїх учнів форкнути навчальну програму, урок за уроком, до власних репозиторій GitHub як приватних репозиторій і надати вам доступ. Потім вони можуть приватно виконувати вікторини та завдання та надсилати їх вам за допомогою issues у вашій аудиторії.
|
||||
|
||||
Існує багато способів зробити це в форматі онлайн-класу. Будь ласка, повідомте нам, що найкраще підходить для вас!
|
||||
|
||||
## Будь ласка, висловіть нам свої думки!
|
||||
|
||||
Ми хочемо, щоб ця навчальна програма працювала для вас і ваших учнів. Будь ласка, залиште нам [відгук](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner).
|
||||
@@ -1,23 +0,0 @@
|
||||
## 写给教育工作者
|
||||
|
||||
你想要在你的课堂上使用这门课程吗？请随意使用！
|
||||
|
||||
事实上，你可以通过使用 GitHub Classroom 来直接在 GitHub 中使用这门课。
|
||||
|
||||
要做到这一点，需要先复刻（fork）这个仓库。你需要对每一节课都创建一个仓库，所以需要将每一个文件夹单独提出来分别放到各个仓库中。这样一来，[GitHub Classroom](https://classroom.github.com/classrooms) 就可以分开选择各节课程。
|
||||
|
||||
这个[完整指南](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/)将会告诉你如何建立你的教室。
|
||||
|
||||
## 原样使用这个仓库
|
||||
|
||||
如果比起 GitHub Classroom 你更愿意直接按现在这个样子使用该仓库，也是没问题的。你需要去告知学生现在该去看哪一节课。
|
||||
|
||||
在网络授课的情况下（如 Zoom、Teams 等）你可能需要建立一些分组讨论室来进行小测和指导学生，以帮助他们做好学习准备。然后邀请学生参加小测，并且在特定时间点以 Issues 的形式提交他们的答案。对于作业也可以这么做，前提是你希望学生们可以在作业上公开协作提交结果。
|
||||
|
||||
如果你倾向于更加非公开的形式，可以让你的学生分节次 Fork 这门课程到他们自己的 GitHub 仓库中，并且设为私有（private），然后给你访问权限。这样他们就可以在他们自己的仓库私下完成小测和作业，然后通过你的课堂仓库以 Issues 的形式提交给你。
|
||||
|
||||
有许多办法让这门课变成网络课堂的形式，如果你感觉某种方式非常棒，请告诉我们！
|
||||
|
||||
## 请告诉我们你的想法！
|
||||
|
||||
我们希望可以让这门课程对你和你的学生有所帮助。欢迎[反馈](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)。
|
||||
Reference in New Issue
Block a user